[#13] Feat InformationPage - 직원소개 컴포넌트 props화

potato-club · Mar 17, 2023 · c97541e · c97541e
1 parent 521b8eb
commit c97541e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 440 deletions.
diff --git a/src/components/infoPage/Geumju.tsx b/src/components/infoPage/Geumju.tsx
diff --git a/src/components/infoPage/Haeyeon.tsx b/src/components/infoPage/Haeyeon.tsx
diff --git a/src/components/infoPage/Hyoseong.tsx b/src/components/infoPage/Hyoseong.tsx
diff --git a/src/components/infoPage/Cheongjo.tsx → src/components/infoPage/InfoCard.tsx b/src/components/infoPage/Cheongjo.tsx → src/components/infoPage/InfoCard.tsx
@@ -7,36 +7,37 @@ import phone from "../../assets/img/information/phone.png";
 import imac from "../../assets/img/information/imac.png";
 import character from "../../assets/img/information/character.png"
 
-const Cheongjo = () => {
+type InfoProps = {
+  name: string;
+  task: string;
+  number: string;
+  emailAdress: string;
+};
 
+const InfoCard = ({ name, task, number, emailAdress }: InfoProps) => (
+  <InfoBox>
+    <Circle>
+      <Image src={character} alt={''} width={80} />
+    </Circle>
+    <Name>{name}</Name>
+    <TaskBox>
+      <Image src={imac} alt={''} width={35} />
+      <Task>{task}</Task>
+    </TaskBox>
+    <NumberBox>
+      <Image src={phone} alt={''} width={20} />
+      <Number>{number}</Number>
+    </NumberBox>
+    <EmailBox>
+      <Image src={email} alt={''} width={20}/>
+      <Email>{emailAdress}</Email>
+    </EmailBox>
+  </InfoBox>
+);
 
-
-  return (
-    <Wrapper>
-      <InfoBox>
-      <Circle>
-          <Image src={character} alt = {''} width={80} />
-        </Circle>
-        <Name>박 청 조</Name>
-        <TaskBox>
-          <Image src={imac} alt={""} width={35} />
-          <Task>Back</Task>
-        </TaskBox>
-        <NumberBox>
-          <Image src={phone} alt={""} width={20} />
-          <Number>010-0000-0000</Number>
-        </NumberBox>
-        <EmailBox>
-          <Image src={email} alt={""} width={20} />
-          <Email>[email protected]</Email>
-        </EmailBox>
-      </InfoBox>
-    </Wrapper>
-  );
-};
 
-export default Cheongjo;
 
+export default InfoCard;
 const Wrapper = styled.div`
   position: relative;
   display: flex;