[#13] Feat InformationPage - 페이지 리팩토링

potato-club · Mar 17, 2023 · f337622 · f337622
1 parent 3bf7d7f
commit f337622
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 42 deletions.
diff --git a/src/components/infoPage/InfoCardWrapp.tsx b/src/components/infoPage/InfoCardWrapp.tsx
@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import React from "react";
+import InfoCard from "./InfoCard";
+
+const InfoCardWrapp = () => {
+    return (
+        <InfoCardWrapper>
+        <InfoCard
+          name="김 효 성"
+          task="Front"
+          number="010-3388-3951"
+          emailAdress="[email protected]"
+        />
+
+        <InfoCard
+          name="조 금 주"
+          task="Front"
+          number="010-0000-0000"
+          emailAdress="[email protected]"
+        />
+
+        <InfoCard
+          name="박 청 조"
+          task="Back"
+          number="010-0000-0000"
+          emailAdress="[email protected]"
+        />
+
+        <InfoCard
+          name="박 해 연"
+          task="Back"
+          number="010-0000-0000"
+          emailAdress="[email protected]"
+        />
+
+        <InfoCard
+          name="최 준 형 "
+          task="Front"
+          number="010-0000-0000"
+          emailAdress="[email protected]"
+        />
+      </InfoCardWrapper>
+    );
+};
+
+export default InfoCardWrapp;
+const InfoCardWrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 80px;
+`;
diff --git a/src/components/infoPage/InformationPage.tsx b/src/components/infoPage/InformationPage.tsx
@@ -5,6 +5,7 @@ import information from "../../assets/img/information/information.png";
 import schedule from "../../assets/img/information/schedule.png";
 import Scheduler from "./Scheduler";
 import InfoCard from "./InfoCard";
+import InfoCardWrapp from "./InfoCardWrapp";
 
 const InformationPage = () => {
   return (
@@ -13,42 +14,7 @@ const InformationPage = () => {
         <Image src={information} alt={""} width={50} />
         <InfoHeadText>직원정보</InfoHeadText>
       </InfoHead>
-      <StickWrapper>
-        <InfoCard
-          name="김 효 성"
-          task="Front"
-          number="010-3388-3951"
-          emailAdress="[email protected]"
-        />
-
-        <InfoCard
-          name="조 금 주"
-          task="Front"
-          number="010-0000-0000"
-          emailAdress="[email protected]"
-        />
-
-        <InfoCard
-          name="박 청 조"
-          task="Back"
-          number="010-0000-0000"
-          emailAdress="[email protected]"
-        />
-
-        <InfoCard
-          name="박 해 연"
-          task="Back"
-          number="010-0000-0000"
-          emailAdress="[email protected]"
-        />
-
-        <InfoCard
-          name="최 준 형 "
-          task="Front"
-          number="010-0000-0000"
-          emailAdress="[email protected]"
-        />
-      </StickWrapper>
+      <InfoCardWrapp />
       <ScheduleHead>
         <Image src={schedule} alt={""} width={50} />
         <ScheduleHeadText>스케쥴</ScheduleHeadText>
@@ -72,12 +38,7 @@ const InfoHeadText = styled.p`
   font-weight: bolder;
   margin-left: 20px;
 `;
-const StickWrapper = styled.div`
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 80px;
-`;
+
 const ScheduleHead = styled.div`
   display: flex;
   margin: 40px;