[#13 Add inforamtionPage - react-scroll 기능 추가

potato-club · Mar 31, 2023 · d815b76 · d815b76
1 parent 04b155f
commit d815b76
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/src/components/infoPage/InformationPage.tsx b/src/components/infoPage/InformationPage.tsx
@@ -1,26 +1,32 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import React from "react";
 import Image from "next/image";
 import information from "../../assets/img/information/information.png";
 import schedule from "../../assets/img/information/schedule.png";
 import Scheduler from "./components/Scheduler";
 import InfoCardWrapp from "./components/InfoCardWrapp";
-
+import { Link } from "react-scroll";
+import { BsChevronCompactDown } from "react-icons/bs";
 
 const InformationPage = () => {
-
-
-
   return (
     <Wrapper>
       <InfoHead>
         <Image src={information} alt={""} width={50} />
         <InfoHeadText>직원정보</InfoHeadText>
       </InfoHead>
-      <InfoCardWrapp/>
+      <InfoCardWrapp />
+      <ButtonWrapper>
+        <Link to="1" smooth spy>
+          <ScrollButton>
+            스크롤하세요
+            <BsChevronCompactDown size={18} />
+          </ScrollButton>
+        </Link>
+      </ButtonWrapper>
       <ScheduleHead>
         <Image src={schedule} alt={""} width={50} />
-        <ScheduleHeadText>스케쥴</ScheduleHeadText>
+        <ScheduleHeadText id={"1"}>스케쥴</ScheduleHeadText>
       </ScheduleHead>
       <ScheduleBox>
         <Scheduler />
@@ -30,8 +36,20 @@ const InformationPage = () => {
 };
 
 export default InformationPage;
+
+const moveText = keyframes`
+  0%{
+    bottom:10px;
+  }
+  50%{
+    bottom:6px;
+  }
+  100%{
+    bottom:10px;
+  }
+`;
 const Wrapper = styled.div`
-width : 100%;
+  width: 100%;
   margin-top: 50px;
 `;
 const InfoHead = styled.div`
@@ -52,9 +70,29 @@ const ScheduleHead = styled.div`
 `;
 
 const ScheduleHeadText = styled.div`
-  align-self: center;
   font-size: 40px;
   font-weight: bolder;
   margin-left: 20px;
 `;
 const ScheduleBox = styled.div``;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 100px;
+`;
+
+const ScrollButton = styled.button`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 600px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  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
@@ -6,19 +6,18 @@ import email from "../../../assets/img/information/email.png";
 import phone from "../../../assets/img/information/phone.png";
 import imac from "../../../assets/img/information/imac.png";
 import character from "../../../assets/img/information/character.png";
-
+import { Link } from "react-scroll";
+import { info } from "console";
 
 type InfoProps = {
   name: string;
   task: string;
   number: string;
   emailAdress: string;
-  onClick : any
+  onClick: any;
 };
 
-const InfoCard = ({ name, task, number, emailAdress,onClick }: InfoProps) => {
-
-
+const InfoCard = ({ name, task, number, emailAdress, onClick }: InfoProps) => {
   return (
     <InfoBox onClick={onClick}>
       <Circle>
@@ -37,14 +36,17 @@ const InfoCard = ({ name, task, number, emailAdress,onClick }: InfoProps) => {
         <Image src={email} alt={""} width={20} />
         <Email>{emailAdress}</Email>
       </EmailBox>
+      <Link to="1" smooth spy>
+        <ScrollP>스케쥴 보러가기</ScrollP>
+      </Link>
     </InfoBox>
   );
 };
 
 export default InfoCard;
 const InfoBox = styled.button`
   width: 150px;
-  height: 360px;
+  height: 380px;
   border-radius: 70px;
   background-color: ${customColor.blue};
 `;
@@ -54,7 +56,6 @@ const Circle = styled.div`
   border-radius: 50%;
   background-color: ${customColor.white};
   margin: auto;
-  margin-top: 19.5px;
   position: relative;
   display: flex;
   align-items: center;
@@ -105,3 +106,5 @@ const Number = styled.p`
   margin-top: 4px;
   margin-left: 10px;
 `;
+
+const ScrollP = styled.p``;