FRONTENDSCHOOL7 · merrybmc · Sep 17, 2023 · Sep 18, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "10time",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
+    "styled-reset": "^4.5.1",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <!-- Notosans KR -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
+
+  <title>1만 시간의 법칙</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,34 @@
+import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
+import Router from './router/Router';
+
+const GlobalStyle = createGlobalStyle`
+  ${reset}
+
+    body {
+    background-color: #5B2386;
+    }
+
+    button {
+    cursor: pointer;
+    }
+
+    @font-face {
+    font-family: 'tvn';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    }
+
+`;
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <Router />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import wenivLogo from '../../images/weniv.svg';
+import { FooterStyle, FooterText, WenivLogo } from './footer.styled';
+
+export default function Footer() {
+  return (
+    <FooterStyle>
+      <WenivLogo src={wenivLogo} alt='wenivlogo' />
+      <FooterText>
+        ※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다.
+        <br />
+        수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
+      </FooterText>
+    </FooterStyle>
+  );
+}
diff --git a/src/components/Footer/footer.styled.js b/src/components/Footer/footer.styled.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const FooterStyle = styled.footer`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+
+  padding-top: 130px;
+  padding-bottom: 116px;
+
+  @media (max-width: 767px) {
+    padding-top: 83px;
+    padding-bottom: 32px;
+  }
+`;
+
+export const WenivLogo = styled.img`
+  @media (max-width: 767px) {
+    width: 91px;
+    height: 18px;
+  }
+`;
+
+export const FooterText = styled.p`
+  font-family: Noto Sans KR, sans-serif;
+  text-align: center;
+  font-size: 12px;
+  color: #fff;
+  font-weight: 400;
+  line-height: 18px;
+
+  @media (max-width: 767px) {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 9px;
+  }
+`;
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import logo from '../../images/logo.svg';
+import logoCircle from '../../images/logoCircle.svg';
+import {
+  HeaderComponent,
+  Logo,
+  LogoCircle,
+  Quote,
+  QuoteBox,
+  StrongSpan,
+  Title,
+} from './header.styled';
+
+export default function Header() {
+  return (
+    <HeaderComponent>
+      <LogoCircle src={logoCircle} alt='logocircle' />
+      <Logo src={logo} alt='logo' />
+      <Title>“연습은 어제의 당신보다 당신을 더 낫게 만든다.”</Title>
+      <QuoteBox>
+        <Quote>
+          <StrongSpan>1만 시간의 법칙</StrongSpan>은
+        </Quote>
+        <Quote>어떤 분야의 전문가가 되기 위해서는</Quote>
+        <Quote>최소한 1만 시간의 훈련이 필요하다는 법칙이다.</Quote>
+      </QuoteBox>
+    </HeaderComponent>
+  );
+}
diff --git a/src/components/Header/header.styled.js b/src/components/Header/header.styled.js
@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+import leftQuote from '../../images/leftQuote.svg';
+import rightQuote from '../../images/rightQuote.svg';
+
+export const HeaderComponent = styled.header`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  padding-top: 140px;
+
+  @media (max-width: 767px) {
+    padding-top: 41px;
+  }
+`;
+
+export const Logo = styled.img`
+  padding-top: 54px;
+
+  @media (max-width: 767px) {
+    padding-top: 41px;
+    width: 267px;
+    height: 53px;
+  }
+`;
+
+export const LogoCircle = styled.img`
+  position: absolute;
+
+  @media (max-width: 767px) {
+    width: 125px;
+    height: 126px;
+  }
+`;
+
+export const Title = styled.h1`
+  padding-top: 125px;
+
+  font-family: tvn;
+  font-size: 36px;
+  color: #f5df4d;
+  font-weight: 700;
+
+  @media (max-width: 767px) {
+    padding-top: 69px;
+    font-size: 22px;
+  }
+`;
+
+export const QuoteBox = styled.div`
+  padding-top: 78px;
+
+  position: relative;
+
+  @media (max-width: 767px) {
+    padding-top: 62px;
+  }
+
+  &::after {
+    content: '';
+    background-image: url(${rightQuote});
+    position: absolute;
+    top: 91px;
+    right: -51px;
+    width: 37px;
+    height: 32px;
+
+    @media (max-width: 767px) {
+      top: 85px;
+      right: -50px;
+    }
+  }
+
+  &::before {
+    content: '';
+    background-image: url(${leftQuote});
+    position: absolute;
+    top: 91px;
+    left: -51px;
+    width: 37px;
+    height: 32px;
+
+    @media (max-width: 767px) {
+      top: 85px;
+      left: -50px;
+    }
+  }
+`;
+
+export const Quote = styled.h2`
+  padding-bottom: 18px;
+
+  font-family: gmarketMedium;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  font-weight: 400;
+
+  @media (max-width: 767px) {
+    font-size: 14px;
+  }
+`;
+
+export const StrongSpan = styled.span`
+  font-family: gmarketBold;
+  font-size: 24px;
+  font-weight: 700;
+
+  @media (max-width: 767px) {
+    font-size: 14px;
+  }
+`;