From 39eb8bb145ffed03aabb15fa2df3c2051cbd089d Mon Sep 17 00:00:00 2001 From: Byeong Min Cho Date: Sun, 17 Sep 2023 21:43:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[#39]=201=EB=A7=8C=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=EC=9D=98=20=EB=B2=95=EC=B9=99=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 23 + package.json | 41 + public/favicon.png | Bin 0 -> 3028 bytes public/index.html | 25 + src/App.js | 45 + src/components/Footer/Footer.jsx | 16 + src/components/Footer/footer.styled.js | 37 + src/components/Header/Header.jsx | 30 + src/components/Header/header.styled.js | 111 + src/components/Input/Input.jsx | 76 + src/components/Input/Input.styled.js | 104 + src/components/Output/Modal/Modal.jsx | 31 + src/components/Output/Modal/Modal.styled.js | 92 + src/components/Output/Output.jsx | 36 + src/components/Output/output.styled.js | 82 + src/images/finger.svg | 8 + src/images/leftQuote.svg | 3 + src/images/licat.svg | 48 + src/images/logo.svg | 34 + src/images/logoCircle.svg | 5 + src/images/rightQuote.svg | 3 + src/images/weniv.svg | 14 + src/index.js | 11 + src/pages/Mainpage.jsx | 14 + src/router/Router.jsx | 10 + yarn.lock | 9832 +++++++++++++++++++ 26 files changed, 10731 insertions(+) create mode 100644 .gitignore create mode 100644 package.json create mode 100644 public/favicon.png create mode 100644 public/index.html create mode 100644 src/App.js create mode 100644 src/components/Footer/Footer.jsx create mode 100644 src/components/Footer/footer.styled.js create mode 100644 src/components/Header/Header.jsx create mode 100644 src/components/Header/header.styled.js create mode 100644 src/components/Input/Input.jsx create mode 100644 src/components/Input/Input.styled.js create mode 100644 src/components/Output/Modal/Modal.jsx create mode 100644 src/components/Output/Modal/Modal.styled.js create mode 100644 src/components/Output/Output.jsx create mode 100644 src/components/Output/output.styled.js create mode 100644 src/images/finger.svg create mode 100644 src/images/leftQuote.svg create mode 100644 src/images/licat.svg create mode 100644 src/images/logo.svg create mode 100644 src/images/logoCircle.svg create mode 100644 src/images/rightQuote.svg create mode 100644 src/images/weniv.svg create mode 100644 src/index.js create mode 100644 src/pages/Mainpage.jsx create mode 100644 src/router/Router.jsx create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ 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 new file mode 100644 index 0000000..2cdb7d5 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..624688b1d537a03e4234fedf74658a7948b133b8 GIT binary patch literal 3028 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 F`~wbA)?oku literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..3a0b9a0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + 1만 시간의 법칙 + + + +
+ + + \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..b95fc5a --- /dev/null +++ b/src/App.js @@ -0,0 +1,45 @@ +import { createGlobalStyle } from 'styled-components'; +import reset from 'styled-reset'; +import Router from './router/Router'; + +const GlobalStyle = createGlobalStyle` + ${reset} + + body { + background-color: #5B2386; + } + + @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; + } + + @font-face { + font-family: 'gmarket'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); + font-weight: normal; + font-style: normal; + } + + + + button { + cursor: pointer; + } + + + +`; + +function App() { + return ( + <> + + + + ); +} + +export default App; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx new file mode 100644 index 0000000..c0a968f --- /dev/null +++ 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 ( + + + + ※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다. +
+ 수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다. + + + ); +} diff --git a/src/components/Footer/footer.styled.js b/src/components/Footer/footer.styled.js new file mode 100644 index 0000000..5b61155 --- /dev/null +++ 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 new file mode 100644 index 0000000..94d4204 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import logo from '../../images/logo.svg'; +import logoCircle from '../../images/logoCircle.svg'; +import { + HeaderComponent, + Logo, + LogoCircle, + Quote, + QuoteBox, + StrongSpan, + Test, + Title, +} from './header.styled'; + +export default function Header() { + return ( + + + + “연습은 어제의 당신보다 당신을 더 낫게 만든다.” + + + 1만 시간의 법칙은 + + 어떤 분야의 전문가가 되기 위해서는 + 최소한 1만 시간의 훈련이 필요하다는 법칙이다. + + + ); +} diff --git a/src/components/Header/header.styled.js b/src/components/Header/header.styled.js new file mode 100644 index 0000000..105d0eb --- /dev/null +++ b/src/components/Header/header.styled.js @@ -0,0 +1,111 @@ +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: gmarket; + font-size: 18px; + color: #fff; + text-align: center; + font-weight: 400; + + @media (max-width: 767px) { + font-size: 14px; + } +`; + +export const StrongSpan = styled.span` + font-size: 24px; + font-weight: 700; + + @media (max-width: 767px) { + font-size: 14px; + } +`; diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx new file mode 100644 index 0000000..6cbe075 --- /dev/null +++ b/src/components/Input/Input.jsx @@ -0,0 +1,76 @@ +import React, { useState } from 'react'; +import { Words, InputTag, Form, Btn, FingerImg, BtnBox } from './Input.styled'; +import finger from '../../images/finger.svg'; +import Output from '../Output/Output'; + +export default function Input() { + const [job, setJob] = useState({ input: '', display: '' }); + const [time, setTime] = useState({ input: '', display: '' }); + const [viewState, setViewState] = useState(false); + + const onDisplayInfo = (e) => { + e.preventDefault(); + if (job.input === '') return alert('직업을 입력해주세요'); + if (time.input === '') return alert('시간을 입력해주세요'); + + setJob({ ...job, display: job.input }); + setTime({ ...time, display: parseInt(10000 / time.input) }); + setViewState(true); + }; + + return ( + <> +
onDisplayInfo(e)}> + + 나는 + setJob({ ...job, input: e.target.value })} + /> + 전문가가 될 것이다. + + {window.innerWidth > 768 ? ( + <> + + 그래서 앞으로 매일 하루에 + setTime({ ...time, input: e.target.value })} + /> + 시간씩 훈련할 것이다. + + + 나는 며칠 동안 훈련을 해야 1만 시간이 될까? + + + + ) : ( + <> + 그래서 앞으로 매일 하루에 + + setTime({ ...time, input: e.target.value })} + /> + 시간씩 훈련할 것이다. + + + + 나는 며칠 동안 훈련을 해야 +
1만 시간이 될까? + + + + + )} +
+ + + ); +} diff --git a/src/components/Input/Input.styled.js b/src/components/Input/Input.styled.js new file mode 100644 index 0000000..4ae2cf5 --- /dev/null +++ b/src/components/Input/Input.styled.js @@ -0,0 +1,104 @@ +import styled from 'styled-components'; +import finger from '../../images/finger.svg'; + +export const Form = styled.form` + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 84px; + gap: 27px; + + @media (max-width: 767px) { + padding-top: 62px; + gap: 18px; + } +`; + +export const Words = styled.p` + display: flex; + align-items: center; + justify-content: center; + + font-family: gmarket; + font-size: 24px; + color: #fff; + font-weight: 400; + + @media (max-width: 767px) { + font-size: 14px; + white-space: pre-wrap; + } +`; + +export const InputTag = styled.input` + width: 228px; + height: 57px; + margin: 0 17px; + + font-family: gmarket; + font-size: 24px; + font-weight: 400; + text-align: center; + + border-radius: 7px; + border: none; + + @media (max-width: 767px) { + width: 156px; + height: 37px; + + font-size: 14px; + margin: 0 4px; + } + + &::placeholder { + font-family: gmarket; + text-align: center; + font-size: 24px; + color: #babcbe; + font-weight: 400; + + @media (max-width: 767px) { + font-size: 14px; + } + } +`; + +export const BtnBox = styled.div` + display: flex; + margin-top: 88px; + + @media (max-width: 767px) { + margin-top: 49px; + } +`; + +export const Btn = styled.button` + padding: 21px 49px; + background: #fcee21; + + font-family: gmarket; + text-align: center; + font-size: 24px; + color: #5b2386; + font-weight: 700; + + border-radius: 56px; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + + @media (max-width: 767px) { + font-size: 14px; + padding: 18px 36.5px; + border-radius: 13px; + } +`; + +export const FingerImg = styled.img` + padding-top: 14px; + padding-left: 7px; + + @media (max-width: 767px) { + padding-top: 30px; + } +`; diff --git a/src/components/Output/Modal/Modal.jsx b/src/components/Output/Modal/Modal.jsx new file mode 100644 index 0000000..6291ce9 --- /dev/null +++ b/src/components/Output/Modal/Modal.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Btn, LicatImg, ModalBackUp, ModalContainer, SubText, Title } from './Modal.styled'; +import licat from '../../../images/licat.svg'; + +export default function Modal({ setModalState }) { + const onCloseModal = () => { + setModalState(false); + }; + + const handleNoneClick = (e) => { + e.stopPropagation(); + }; + + return ( + onCloseModal()}> + handleNoneClick(e)}> + 화이팅!!♥♥♥ + 당신의 꿈을 응원합니다! + + {window.innerWidth > 768 ? ( + onCloseModal()}>종료하고 진짜 훈련하러 가기 GO!GO! + ) : ( + onCloseModal()}> + 종료하고 진짜 +
훈련하러 가기 GO!GO! + + )} + + + ); +} diff --git a/src/components/Output/Modal/Modal.styled.js b/src/components/Output/Modal/Modal.styled.js new file mode 100644 index 0000000..4370090 --- /dev/null +++ b/src/components/Output/Modal/Modal.styled.js @@ -0,0 +1,92 @@ +import styled from 'styled-components'; + +export const ModalContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + border-radius: 30px; + background-color: #fff; + + width: 800px; + height: 800px; + + color: #5b2386; + font-family: tvn; + font-size: 96px; + font-weight: 700; + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); + + position: absolute; + + @media (max-width: 767px) { + width: 330px; + height: 500px; + } +`; + +export const ModalBackUp = styled.div` + z-index: 1; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.4); + border-radius: 10px; + top: 0; + left: 0; + right: 0; + bottom: 0; +`; + +export const Title = styled.p` + font-size: 96px; + + padding-top: 76px; + padding-bottom: 4px; + + @media (max-width: 767px) { + padding-top: 40px; + padding-bottom: 0; + color: #5b2386; + font-size: 64px; + } +`; +export const SubText = styled.p` + font-size: 36px; + + padding-bottom: 33px; + + @media (max-width: 767px) { + font-size: 36px; + } +`; + +export const LicatImg = styled.img` + padding-bottom: 74px; + + @media (max-width: 767px) { + width: 300px; + height: 200px; + padding-bottom: 25px; + } +`; + +export const Btn = styled.button` + color: #5b2386; + text-align: center; + font-family: gmarket; + font-size: 24px; + font-weight: 700; + border: none; + + padding: 21px 49px; + border-radius: 56px; + background: #fcee21; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + + @media (max-width: 767px) { + font-size: 14px; + padding: 18px 45px; + border-radius: 13px; + } +`; diff --git a/src/components/Output/Output.jsx b/src/components/Output/Output.jsx new file mode 100644 index 0000000..308bc97 --- /dev/null +++ b/src/components/Output/Output.jsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { + BtnBox, + GoBtn, + OutputWords, + Section, + ShareBtn, + StrongText, + WordsBox, +} from './output.styled'; +import Modal from './Modal/Modal'; + +export default function Output({ job, time, view }) { + const [modalState, setModalState] = useState(false); + return ( + <> + {modalState && } + {view && ( +
+ + + 당신은 {job}전문가가 되기 위해 + + + 대략 {time}일 이상 훈련하셔야 합니다! :) + + + + setModalState(true)}>훈련하러 가기 GO!GO! + alert('공유 완료!')}>공유하기 + +
+ )} + + ); +} diff --git a/src/components/Output/output.styled.js b/src/components/Output/output.styled.js new file mode 100644 index 0000000..c14d1bb --- /dev/null +++ b/src/components/Output/output.styled.js @@ -0,0 +1,82 @@ +import styled from 'styled-components'; +import { Words } from '../Input/Input.styled'; + +export const Section = styled.section` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + padding-top: 147px; + + @media (max-width: 767px) { + padding-top: 64px; + } +`; + +export const WordsBox = styled.div` + padding-bottom: 127px; + + @media (max-width: 767px) { + padding-bottom: 55px; + } +`; + +export const OutputWords = styled(Words)` + padding-bottom: 17px; + + @media (max-width: 767px) { + font-size: 14px; + font-weight: 400; + } +`; + +export const StrongText = styled.strong` + padding: 0 12px; + + font-family: gmarket; + font-size: 72px; + color: #fff; + font-weight: 700; + + @media (max-width: 767px) { + color: #fff; + font-family: gmarket; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: normal; + } +`; + +export const BtnBox = styled.div` + display: flex; + column-gap: 18px; +`; + +export const GoBtn = styled.button` + background: #fcee21; + padding: 21px 49px; + + font-family: gmarket; + font-size: 24px; + color: #5b2386; + font-weight: 700; + + border-radius: 56px; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + + @media (max-width: 767px) { + font-size: 14px; + padding: 13px 17.5px; + } +`; + +export const ShareBtn = styled(GoBtn)` + background-color: #fff; + + @media (max-width: 767px) { + font-size: 14px; + padding: 13px 19px; + } +`; diff --git a/src/images/finger.svg b/src/images/finger.svg new file mode 100644 index 0000000..890fb59 --- /dev/null +++ b/src/images/finger.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/leftQuote.svg b/src/images/leftQuote.svg new file mode 100644 index 0000000..5c851f6 --- /dev/null +++ b/src/images/leftQuote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/licat.svg b/src/images/licat.svg new file mode 100644 index 0000000..cdf0871 --- /dev/null +++ b/src/images/licat.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..9dc5416 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logoCircle.svg b/src/images/logoCircle.svg new file mode 100644 index 0000000..42a3d18 --- /dev/null +++ b/src/images/logoCircle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/rightQuote.svg b/src/images/rightQuote.svg new file mode 100644 index 0000000..8855dfa --- /dev/null +++ b/src/images/rightQuote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/weniv.svg b/src/images/weniv.svg new file mode 100644 index 0000000..360f357 --- /dev/null +++ b/src/images/weniv.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..1883328 --- /dev/null +++ b/src/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import { BrowserRouter } from 'react-router-dom'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); diff --git a/src/pages/Mainpage.jsx b/src/pages/Mainpage.jsx new file mode 100644 index 0000000..8437acd --- /dev/null +++ b/src/pages/Mainpage.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Header from '../components/Header/Header'; +import Input from '../components/Input/Input'; +import Footer from '../components/Footer/Footer'; + +export default function Mainpage() { + return ( + <> +
+ +