From 903a6cafd1bb6f8f2852e865d65092659804fdc1 Mon Sep 17 00:00:00 2001
From: woorim960 <woorimprog@gmail.com>
Date: Sun, 2 Oct 2022 23:49:17 +0900
Subject: [PATCH] feat(aboutmeinfo): add props such as titleColor,
 descriptionColor #164

---
 .../ComponentTypes/Contact/AboutMeInfoType.ts | 12 +++++--
 .../ComponentTypes/Contact/ContactType.ts     |  2 +-
 src/lib/components/Contact/AboutMe.tsx        | 36 ++++++++++---------
 src/lib/components/Contact/Contact.tsx        |  6 ++++
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/lib/common/types/ComponentTypes/Contact/AboutMeInfoType.ts b/src/lib/common/types/ComponentTypes/Contact/AboutMeInfoType.ts
index b3e021c..e8b516d 100644
--- a/src/lib/common/types/ComponentTypes/Contact/AboutMeInfoType.ts
+++ b/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;
 }
diff --git a/src/lib/common/types/ComponentTypes/Contact/ContactType.ts b/src/lib/common/types/ComponentTypes/Contact/ContactType.ts
index 25d6e0e..694f6bc 100644
--- a/src/lib/common/types/ComponentTypes/Contact/ContactType.ts
+++ b/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[];
diff --git a/src/lib/components/Contact/AboutMe.tsx b/src/lib/components/Contact/AboutMe.tsx
index 10cc57c..063bb96 100644
--- a/src/lib/components/Contact/AboutMe.tsx
+++ b/src/lib/components/Contact/AboutMe.tsx
@@ -1,26 +1,13 @@
 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>
@@ -28,3 +15,20 @@ const AboutMe = ({ aboutMeInfos }: any) => {
 };
 
 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};
+`;
diff --git a/src/lib/components/Contact/Contact.tsx b/src/lib/components/Contact/Contact.tsx
index e64cef4..6cb886c 100644
--- a/src/lib/components/Contact/Contact.tsx
+++ b/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',
     },
   ],
 };