feat(aboutmeinfo): add props such as titleColor, descriptionColor #164

src/lib/common/types/ComponentTypes/Contact/AboutMeInfoType.ts

@@ -2,9 +2,17 @@ export interface AboutMeInfoPropsType {
   /**
    * Kind of personal information
    */
-  title: string;
+  title?: string;
+  /**
+   * title color style (default: 'black')
+   */
+  titleColor?: string;
   /**
    * Description for title
    */
-  description: string;
+  description?: string;
+  /**
+   * description color style (default: 'black')
+   */
+  descriptionColor?: string;
 }

src/lib/common/types/ComponentTypes/Contact/ContactType.ts

@@ -51,7 +51,7 @@ export interface ContactPropsType extends ChannelsPropsType {
    *
    * @example aboutMeInfos
    * ```ts
-   * [{ title: 'Where I live', description: 'Seoul, Republic of Korea' }, { title: 'Give me a call', description: 'T. +82 (0)10 1234 5678' }, { title: 'Or, why don’t you email me?', description: 'dev-portfolio@gmail.com' }]
+   * [{ title: 'Where I live', titleColor: 'black', description: 'Seoul, Republic of Korea', desciptionColor: 'black' }, { title: 'Give me a call', titleColor: 'black', description: 'T. +82 (0)10 1234 5678', desciptionColor: 'black' }, { title: 'Or, why don’t you email me?', titleColor: 'black', description: 'dev-portfolio@gmail.com', desciptionColor: 'black' }]
    * ```
    */
   aboutMeInfos?: AboutMeInfoPropsType[];

src/lib/components/Contact/AboutMe.tsx

@@ -1,30 +1,34 @@
 import styled from 'styled-components';
 import { AboutMeInfoPropsType } from '../../common/types/ComponentTypes/Contact/AboutMeInfoType';
 
-const Container = styled.div`
-  margin: 10px 0px;
-`;
-
-const AboutMeEachContainer = styled.div`
-  margin: 10px 0px 10px 10px;
-`;
-
-const AboutMeTitle = styled.div`
-  font-weight: bold;
-  color: #00000066;
-`;
-
 const AboutMe = ({ aboutMeInfos }: any) => {
   return (
     <Container>
-      {aboutMeInfos.map(({ title, description }: AboutMeInfoPropsType, idx: number) => (
+      {aboutMeInfos.map(({ title, titleColor, description, descriptionColor }: AboutMeInfoPropsType, idx: number) => (
         <AboutMeEachContainer key={idx}>
-          <AboutMeTitle>{title}</AboutMeTitle>
-          <div>{description}</div>
+          <AboutMeTitle titleColor={titleColor}>{title}</AboutMeTitle>
+          <AboutMeDescription descriptionColor={descriptionColor}>{description}</AboutMeDescription>
         </AboutMeEachContainer>
       ))}
     </Container>
   );
 };
 
 export default AboutMe;
+
+const Container = styled.div`
+  margin: 10px 0px;
+`;
+
+const AboutMeEachContainer = styled.div`
+  margin: 10px 0px 10px 10px;
+`;
+
+const AboutMeTitle = styled.div<AboutMeInfoPropsType>`
+  font-weight: bold;
+  color: ${({ titleColor }) => titleColor};
+`;
+
+const AboutMeDescription = styled.div<AboutMeInfoPropsType>`
+  color: ${({ descriptionColor }) => descriptionColor};
+`;

src/lib/components/Contact/Contact.tsx

@@ -116,15 +116,21 @@ Contact.defaultProps = {
   aboutMeInfos: [
     {
       title: 'Where I live',
+      titleColor: 'black',
       description: 'Seoul, Republic of Korea',
+      descriptionColor: 'black',
     },
     {
       title: 'Give me a call',
+      titleColor: 'black',
       description: 'T. +82 (0)10 1234 5678',
+      descriptionColor: 'black',
     },
     {
       title: 'Or, why don’t you email me?',
+      titleColor: 'black',
       description: 'dev-portfolio@gmail.com',
+      descriptionColor: 'black',
     },
   ],
 };