Merge pull request #11 from im-na0/feature/#6

Feature: 로그인, 회원가입 페이지 마크업

package.json

@@ -15,9 +15,11 @@
     "antd": "^5.9.0",
     "dotenv": "^16.3.1",
     "firebase": "^10.3.1",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",

src/components/SignUp/Navigation.tsx

@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router-dom";
+
+export const useNavigation = () => {
+  const navigate = useNavigate();
+
+  const moveUserRegister = () => {
+    navigate("/user-register");
+  };
+
+  const moveStartRegister = () => {
+    navigate("/start-register");
+  };
+
+  const moveEndRegister = () => {
+    navigate("/end-register");
+  };
+
+  const moveMain = () => {
+    navigate("/");
+  };
+
+  const moveMyTeam = () => {
+    navigate("/wiki");
+  };
+  return {
+    moveUserRegister,
+    moveStartRegister,
+    moveEndRegister,
+    moveMain,
+    moveMyTeam,
+  };
+};

src/components/SignUp/Pagination.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { styled } from "styled-components";
+
+export const SlideCounter = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 10px;
+`;
+export const ActiveDot = styled.div`
+  background-color: #5b617c;
+  width: 10px;
+  height: 10px;
+  border-radius: 50px;
+`;
+export const Dot = styled.div`
+  background-color: #5b617c19;
+  width: 10px;
+  height: 10px;
+  border-radius: 50px;
+`;

src/components/SignUp/Register/EndRegister.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { styled } from "styled-components";
+import { ActiveDot, Dot, SlideCounter } from "../Pagination";
+import { useNavigation } from "../Navigation";
+import { EndSubTitle, EndTitle } from "../Title";
+import { motion } from "framer-motion";
+const Container = styled.div`
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+const EndContainer = styled.div`
+  width: 50%;
+  margin: 100px auto;
+  text-align: center;
+`;
+const EndBtnContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  gap: 20px;
+`;
+const EndBtn = styled.button`
+  width: 200px;
+  height: 50px;
+  border-radius: 10px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  &:hover {
+    color: #fff;
+    background-color: #000;
+  }
+`;
+export default function EndRegister() {
+  const { moveMain, moveMyTeam } = useNavigation();
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <Container>
+        <EndContainer>
+          <EndTitle>
+            이제 Wiki를 통해
+            <br />
+            일의 능률을 향상시켜보세요!
+          </EndTitle>
+          <EndSubTitle>아래 버튼을 누르시면 이동됩니다!</EndSubTitle>
+          <EndBtnContainer>
+            <EndBtn onClick={moveMain}>Home</EndBtn>
+            <EndBtn onClick={moveMyTeam}>My Team</EndBtn>
+          </EndBtnContainer>
+        </EndContainer>
+        <SlideCounter>
+          <Dot />
+          <Dot />
+          <ActiveDot />
+        </SlideCounter>
+      </Container>
+    </motion.div>
+  );
+}

src/components/SignUp/Register/StartRegister.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { styled } from "styled-components";
+import { ActiveDot, Dot, SlideCounter } from "../Pagination";
+import { useNavigation } from "../Navigation";
+import { StartSubTitle, StartTitle } from "../Title";
+import { motion } from "framer-motion";
+const Container = styled.div`
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+const StartContainer = styled.div`
+  width: 50%;
+  margin: 100px auto;
+  text-align: center;
+`;
+const StartBtn = styled.button`
+  width: 400px;
+  height: 50px;
+  margin: 50px auto;
+  border-radius: 10px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  &:hover {
+    color: #fff;
+    background-color: #000;
+  }
+`;
+export default function StartRegister() {
+  const { moveUserRegister } = useNavigation();
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <Container>
+        <StartContainer>
+          <StartTitle>Wiki에 오신 것을 환영합니다!</StartTitle>
+          <StartSubTitle>아래 버튼을 통해 정보를 입력해주세요!</StartSubTitle>
+          <StartBtn onClick={moveUserRegister}>시작하기</StartBtn>
+        </StartContainer>
+        <SlideCounter>
+          <ActiveDot />
+          <Dot />
+          <Dot />
+        </SlideCounter>
+      </Container>
+    </motion.div>
+  );
+}