FIX: 헤더 컴포넌트 분리

package.json

@@ -44,5 +44,9 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.20"
-  }
+  },
+  "main": "index.js",
+  "repository": "https://github.com/FFM-TEAM/test-app.git",
+  "author": "siso1210 <[email protected]>",
+  "license": "MIT"
 }

src/App.tsx

@@ -7,17 +7,18 @@ import {
   Route
 } from "react-router-dom";
 import Layout from "./components/common/Layout";
+import Login from "./components/Login";
 import Join from "./components/Join";
+import ResetPwd from "./components/ResetPwd";
+import EmailAuth from "./components/EmailAuth";
 
 function App() {
-  // return <PageTemplate>
-  //   <Typo style={{fontSize:'1.5rem'}}>Skeleton</Typo>
-  // </PageTemplate>
   return (
     <Routes>
-      <Route path="/" element={<PageTemplate>Test</PageTemplate>}></Route>
-      <Route path="/join" element={<Join>Test2</Join>}></Route>
-      <Route path="/3"element={<PageTemplate>Test3</PageTemplate>} ></Route>
+      <Route path="/" element={<Login>Test</Login>}></Route>
+      <Route path="/join" element={<Join />}></Route>
+      <Route path="/resetPwd" element={<ResetPwd>Test3</ResetPwd>} ></Route>
+      <Route path="/emailAuth" element={<EmailAuth>Test4</EmailAuth>} ></Route>
     </Routes>
   )
 }

src/components/EmailAuth.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import styled from "styled-components";
+import Layout from './common/Layout';
+import HeaderTemplate from './HeaderTemplate';
+
+interface Props {
+    //children: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const ResetBox = styled.div`
+    /* 비밀번호 재설정 */
+
+
+    position: absolute;
+    width: 365px;
+    height: 349px;
+    left: 450px;
+    top: 185px;
+
+`;
+
+const PrimeText = styled.div`
+/* Prime_text_1 */
+
+
+position: absolute;
+left: 80px;
+right: 64px;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: bold;
+font-size: 32px;
+line-height: 44px;
+/* identical to box height, or 137% */
+
+text-align: center;
+
+/* Onbg dark */
+
+color: #F4F5F6;
+
+
+`;
+
+const TextBoxA = styled.div`
+/* Rectangle 86 */
+
+
+position: absolute;
+width: 350px;
+height: 96px;
+left: 8px;
+top: 77px;
+
+/* Dark 02 */
+
+border: 0.739726px solid #31343A;
+box-sizing: border-box;
+`;
+
+const TextA = styled.div`
+position: relative;
+top: 29%;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: bold;
+font-size: 20px;
+line-height: 34px;
+
+align-items: center;
+text-align: center;
+
+/* Onbg dark */
+
+color: #F4F5F6;
+
+`;
+
+const TextB = styled.div`
+position: absolute;
+bottom: 40.83%;
+left: 106px;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: normal;
+font-size: 16px;
+line-height: 24px;
+text-align: center;
+letter-spacing: -0.05em;
+
+/* Onbg dark */
+
+color: #F4F5F6;
+`;
+
+const TextC = styled.div`
+position: absolute;
+bottom: 33.83%;
+left: 22px;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: normal;
+font-size: 16px;
+line-height: 24px;
+text-align: center;
+letter-spacing: -0.05em;
+
+/* Onbg dark */
+
+color: #F4F5F6;
+`;
+
+const TextBoxB = styled.div`
+position: absolute;
+    width: 351px;
+    left: 3%;
+    top: 72%;
+`;
+
+const TextD = styled.div`
+
+//position: absolute;
+left: 35.16%;
+right: 50.55%;
+top: 64.72%;
+bottom: 31.94%;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: normal;
+font-size: 16px;
+line-height: 24px;
+/* identical to box height */
+
+
+letter-spacing: -0.05em;
+
+/* Onbg dark */
+
+color: #F4F5F6;
+`;
+
+const LinkA = styled.div`
+position: absolute;
+    right: 3.33%;
+    top: 3.72%;
+    bottom: 31.94%;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: bold;
+font-size: 16px;
+line-height: 24px;
+/* identical to box height */
+
+text-align: center;
+letter-spacing: -0.05em;
+text-decoration-line: underline;
+
+/* Primary 60 */
+
+color: #5F88EA;
+
+`;
+
+const TextBoxC = styled.div`
+position: absolute;
+    width: 351px;
+    left: 3%;
+    top: 85%;
+`;
+
+function EmailAuth({ children, ...props } : Props) {
+    return (
+        <Layout>{children}
+            <HeaderTemplate>
+            </HeaderTemplate>
+
+            <ResetBox>
+                <PrimeText>이메일 인증 확인</PrimeText>
+                <TextBoxA>
+                    <TextA>[email protected]</TextA>
+                </TextBoxA>
+                <TextB>인증이 완료되지 않았습니다.</TextB>
+                <TextC>프라임 서비스 이용을 위해 인증 메일을 꼭 확인해주세요.</TextC>
+                <TextBoxB>
+                    <TextD>인증 메일을 받지 못하셨나요?</TextD>
+                    <LinkA>인증 메일 발송</LinkA>
+                </TextBoxB>
+                <TextBoxC>
+                    <TextD>인증 확인을 완료하셨나요?</TextD>
+                    <LinkA>로그인</LinkA>
+                </TextBoxC>
+            </ResetBox>
+        </Layout>
+    );
+}
+
+export default EmailAuth;

src/components/HeaderTemplate.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from "styled-components";
+
+interface Props {
+  //children: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const Header = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+    position: fixed;
+    width: 100vw;
+    height: 80px;
+
+    background: #272930;
+    border: 1px solid #272930;
+    box-sizing: border-box;
+
+`;
+
+const Logo = styled.div`
+    position: absolute;
+    left: 3.12%;
+    right: 87.5%;
+    top: 4.03%;
+    bottom: 92.78%;
+`;
+
+
+
+const CheckBoxWrapper = styled.div`
+position: absolute;
+left: 92.81%;
+right: 3.12%;
+top: 34.89%;
+bottom: 92.78%;
+`;
+const CheckBoxLabel = styled.label`
+  position: absolute;
+  left: 0;
+  width: 42px;
+  height: 26px;
+  border-radius: 15px;
+  background: #bebebe;
+  cursor: pointer;
+  line-height: 75px;
+  &::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    margin: 3px;
+    background: #ffffff;
+    box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
+    transition: 0.2s;
+  }
+`;
+const CheckBox = styled.input`
+  opacity: 0;
+  z-index: 1;
+  border-radius: 15px;
+  width: 42px;
+  height: 26px;
+  line-height: 75px;
+  &:checked + ${CheckBoxLabel} {
+    background: #4fbe79;
+    &::after {
+      content: "";
+      display: block;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      margin-left: 21px;
+      transition: 0.2s;
+    }
+  }
+`;
+
+
+
+const Menu = styled.div`
+
+margin-left: 50px;
+
+font-family: SpoqaHanSans;
+font-style: normal;
+font-weight: normal;
+font-size: 20px;
+line-height: 75px;
+
+/* identical to box height */
+text-align: center;
+
+/* Onbg dark */
+color: #F4F5F6;
+/* test */
+border: 1px solid red;
+`;
+
+function HeaderTemplate({ children, ...props }: Props) {
+  return (
+    <Header>
+      {/* <Logo /> */}
+      <Menu>서비스</Menu>
+      <Menu>고객센터</Menu>
+      <Menu>회원가입</Menu>
+      <Menu>
+        <CheckBox id="checkbox" type="checkbox" />
+        <CheckBoxLabel htmlFor="checkbox" />
+      </Menu>
+    </Header>
+
+
+  );
+}
+
+export default HeaderTemplate;