[#13] Feat informationPage - 디자인 수정

potato-club · May 6, 2023 · fe0a75d · fe0a75d
1 parent e2b1240
commit fe0a75d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 43 deletions.
diff --git a/src/components/infoPage/InformationPage.tsx b/src/components/infoPage/InformationPage.tsx
@@ -12,7 +12,7 @@ const InformationPage = () => {
   return (
     <Wrapper>
       <InfoHead>
-        <Image src={information} alt={""} width={50} />
+        <Image src={information} alt={""} width={40} />
         <InfoHeadText>직원정보</InfoHeadText>
       </InfoHead>
       <InfoCardWrapp />
@@ -54,11 +54,11 @@ const Wrapper = styled.div`
 `;
 const InfoHead = styled.div`
   display: flex;
-  margin: 40px;
+  margin: 50px;
 `;
 const InfoHeadText = styled.p`
   align-self: center;
-  font-size: 40px;
+  font-size: 30px;
   font-weight: bolder;
   margin-left: 20px;
 `;
@@ -95,4 +95,4 @@ const ScrollButton = styled.button`
   font-size: 14px;
   letter-spacing: -0.5px;
   animation: ${moveText} 1s infinite;
-`;
+`;
diff --git a/src/components/infoPage/components/InfoCard.tsx b/src/components/infoPage/components/InfoCard.tsx
@@ -9,15 +9,27 @@ import character from "../../../../public/img/information/character.png";
 import copy from "../../../../public/img/information/copy.png";
 import { Link } from "react-scroll";
 
-type InfoProps = {
+interface InfoProps {
   name: string;
   task: string;
   number: string;
   emailAdress: string;
   onClick: any;
-};
-
-const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
+  backgroundColor: string;
+}
+
+interface InfoBoxProps {
+  backgroundColor: string;
+}
+
+const InfoCard = ({
+  name,
+  task,
+  number,
+  emailAdress,
+  onClick,
+  backgroundColor,
+}: InfoProps) => {
   const [showPopup, setShowPopup] = useState(false); // 팝업 표시 여부를 저장하는 상태값
 
   const handleCopyClick = (text: string) => {
@@ -30,7 +42,7 @@ const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
   };
 
   return (
-    <InfoBox>
+    <InfoBox backgroundColor={backgroundColor}>
       <Circle>
         <Image src={character} alt={""} width={80} />
       </Circle>
@@ -48,7 +60,7 @@ const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
           alt=""
           width={15}
           onClick={() => handleCopyClick(number)}
-          style={{ marginLeft: "5px", cursor: "pointer" , opacity:0.5}}
+          style={{ marginLeft: "5px", cursor: "pointer", opacity: 0.5 }}
         />
       </NumberBox>
 
@@ -60,11 +72,11 @@ const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
           alt=""
           width={15}
           onClick={() => handleCopyClick(emailAdress)}
-          style={{marginLeft: "5px", cursor: "pointer",opacity:0.5 }}
+          style={{ marginLeft: "5px", cursor: "pointer", opacity: 0.5 }}
         />
       </EmailBox>
       <Link to="1" smooth spy>
-        <ScrollP onClick={onClick}>스케쥴 보러가기</ScrollP>
+        <ScrollBox onClick={onClick}>스케쥴 보러가기</ScrollBox>
       </Link>
 
       {showPopup && <Popup className="show">복사되었습니다</Popup>}
@@ -74,13 +86,16 @@ const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
 };
 
 export default InfoCard;
-const InfoBox = styled.div`
-  width: 150px;
+
+const InfoBox = styled.div<InfoBoxProps>`
+  width: 160px;
   height: 380px;
-  border-radius: 70px;
-  background-color: ${customColor.blue};
+  border-radius: 20px;
+  background-color: ${(props) => props.backgroundColor};
   position: relative;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
 `;
+
 const Circle = styled.div`
   top: 20px;
   width: 111px;
@@ -92,64 +107,74 @@ const Circle = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
 `;
 
 const Name = styled.p`
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   margin-top: 30px;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 `;
 
 const TaskBox = styled.div`
   position: relative;
-  left: 6px;
   display: flexbox;
-  margin-left: 15px;
-  margin-bottom: 20px;
+  justify-content: center;
+  margin-bottom: 10px;
 `;
 const Task = styled.p`
+  display: flex;
   font-size: 15px;
   margin-left: 15px;
-  margin-top: 8px;
   font-weight: bolder;
+  align-items: center;
 `;
-
-const EmailBox = styled.div`
+const NumberBox = styled.div`
   position: relative;
   display: flexbox;
-  margin-left: 5px;
-  margin-bottom: 20px;
+  justify-content: center;
+  margin-bottom: 18px;
+  align-items: center;
 `;
-const Email = styled.p`
+const Number = styled.p`
+  display: flex;
   font-size: 5px;
-  margin-top: 3px;
-  margin-left: 5px;
+  margin-left: 15px;
+  align-items: center;
 `;
-const NumberBox = styled.div`
+
+const EmailBox = styled.div`
   position: relative;
   display: flexbox;
-  margin-left: 18px;
-  margin-bottom: 20px;
+  justify-content: center;
+  margin-bottom: 18px;
+  align-items: center;
 `;
-const Number = styled.p`
+const Email = styled.p`
+  display: flex;
   font-size: 5px;
-  margin-top: 4px;
-  margin-left: 10px;
+  margin-left: 15px;
+  align-items: center;
 `;
 
-const ScrollP = styled.button`
+const ScrollBox = styled.button`
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 120px;
+  background-color: white;
+  height: 30px;
+  border-radius: 10px;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
 `;
 
 const Popup = styled.div`
   position: fixed;
   top: 80%;
-  left: 47%;
+  left: 46%;
   transform: translate(-50%, -50%);
 
   padding: 10px;

diff --git a/src/components/infoPage/components/InfoCardWrapp.tsx b/src/components/infoPage/components/InfoCardWrapp.tsx
@@ -27,22 +27,26 @@ const InfoCardWrapp = () => {
         number="010-3388-3951"
         emailAdress="[email protected]"
         onClick={() => test("hyoseong")}
+        backgroundColor="#8fd1ee"
+
       />
 
       <InfoCard
-        name="조 금 주"
-        task="Front"
+        name="박 청 조"
+        task="Back"
         number="010-0000-0000"
         emailAdress="[email protected]"
-        onClick={() => test("geumju")}
+        onClick={() => test("cheongjo")}
+        backgroundColor="#e5eef3"
       />
 
       <InfoCard
-        name="박 청 조"
-        task="Back"
+        name="조 금 주"
+        task="Front"
         number="010-0000-0000"
         emailAdress="[email protected]"
-        onClick={() => test("cheongjo")}
+        onClick={() => test("geumju")}
+        backgroundColor="#8fd1ee"
       />
 
       <InfoCard
@@ -51,6 +55,7 @@ const InfoCardWrapp = () => {
         number="010-0000-0000"
         emailAdress="[email protected]"
         onClick={() => test("haeyeon")}
+        backgroundColor="#e5eef3"
       />
 
       <InfoCard
@@ -59,6 +64,7 @@ const InfoCardWrapp = () => {
         number="010-0000-0000"
         emailAdress="[email protected]"
         onClick={() => test("junhyung")}
+        backgroundColor="#8fd1ee"
       />
     </InfoCardWrapper>
   );
@@ -70,6 +76,6 @@ const InfoCardWrapper = styled.div`
   width: 100%;
   position: relative;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
   margin-bottom: 100px;
 `;