├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── apple-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── img-thumbnail.jpg ├── ms-icon-70x70.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── apple-icon-precomposed.png ├── browserconfig.xml ├── manifest.json └── index.html ├── .env ├── src ├── assets │ ├── images │ │ ├── img-main.png │ │ ├── img-quote.png │ │ ├── icon-github.png │ │ ├── icon-warning.png │ │ ├── img-poundkey.png │ │ ├── img-result1.png │ │ ├── img-result10.png │ │ ├── img-result11.png │ │ ├── img-result12.png │ │ ├── img-result2.png │ │ ├── img-result3.png │ │ ├── img-result4.png │ │ ├── img-result5.png │ │ ├── img-result6.png │ │ ├── img-result7.png │ │ ├── img-result8.png │ │ ├── img-result9.png │ │ ├── icon-link.svg │ │ ├── icon-facebook.svg │ │ ├── icon-kakaotalk.svg │ │ └── icon-twitter.svg │ └── fonts │ │ ├── NotoSansKR-Medium.otf │ │ ├── NotoSansKR-Medium.woff │ │ ├── NotoSansKR-DemiLight.otf │ │ ├── NotoSansKR-DemiLight.woff │ │ ├── NotoSansKR-Medium.woff2 │ │ └── NotoSansKR-DemiLight.woff2 ├── index.js ├── components │ ├── BodyText.js │ ├── Footer.js │ ├── ListItem.js │ ├── RoundedText.js │ ├── SubTitle.js │ ├── MainTitle.js │ ├── Loading.js │ ├── Button.js │ └── ShareButton.js ├── App.js ├── Theme.js ├── globalStyles.js └── pages │ ├── Question.js │ ├── Home.js │ └── Result.js ├── .prettierrc ├── craco.config.js ├── jsconfig.json ├── .gitignore ├── .eslintrc.js ├── README.md ├── package.json └── .github └── workflows └── main.yml /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon.png -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | REACT_FETCH_URL=https://mkdev.netlify.app/ 2 | REACT_APP_KAKAO_KEY=15991415f24d2e2ceadacfdeb3557840 3 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/favicon-96x96.png -------------------------------------------------------------------------------- /public/img-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/img-thumbnail.jpg -------------------------------------------------------------------------------- /public/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/ms-icon-70x70.png -------------------------------------------------------------------------------- /public/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-36x36.png -------------------------------------------------------------------------------- /public/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-48x48.png -------------------------------------------------------------------------------- /public/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-72x72.png -------------------------------------------------------------------------------- /public/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-96x96.png -------------------------------------------------------------------------------- /public/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-144x144.png -------------------------------------------------------------------------------- /public/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/android-icon-192x192.png -------------------------------------------------------------------------------- /src/assets/images/img-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-main.png -------------------------------------------------------------------------------- /src/assets/images/img-quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-quote.png -------------------------------------------------------------------------------- /public/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/public/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/assets/images/icon-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/icon-github.png -------------------------------------------------------------------------------- /src/assets/images/icon-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/icon-warning.png -------------------------------------------------------------------------------- /src/assets/images/img-poundkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-poundkey.png -------------------------------------------------------------------------------- /src/assets/images/img-result1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result1.png -------------------------------------------------------------------------------- /src/assets/images/img-result10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result10.png -------------------------------------------------------------------------------- /src/assets/images/img-result11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result11.png -------------------------------------------------------------------------------- /src/assets/images/img-result12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result12.png -------------------------------------------------------------------------------- /src/assets/images/img-result2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result2.png -------------------------------------------------------------------------------- /src/assets/images/img-result3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result3.png -------------------------------------------------------------------------------- /src/assets/images/img-result4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result4.png -------------------------------------------------------------------------------- /src/assets/images/img-result5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result5.png -------------------------------------------------------------------------------- /src/assets/images/img-result6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result6.png -------------------------------------------------------------------------------- /src/assets/images/img-result7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result7.png -------------------------------------------------------------------------------- /src/assets/images/img-result8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result8.png -------------------------------------------------------------------------------- /src/assets/images/img-result9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/images/img-result9.png -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-Medium.otf -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-Medium.woff -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-DemiLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-DemiLight.otf -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-DemiLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-DemiLight.woff -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/NotoSansKR-DemiLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mkdev-genie/mkdev-front/HEAD/src/assets/fonts/NotoSansKR-DemiLight.woff2 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": true, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "trailingComma": "all", 7 | "printWidth": 80 8 | } 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | webpack: { 5 | alias: { 6 | '@': path.resolve(__dirname, 'src/'), 7 | }, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "@/*": ["./*"] 6 | } 7 | }, 8 | "exclude": ["node_modules", "**/node_modules/*"] 9 | } 10 | -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | node: true, 6 | }, 7 | extends: ['airbnb','plugin:prettier/recommended'], 8 | rules: { 9 | 'react/jsx-filename-extension': [1, { extensions: ['js', 'jsx'] }], 10 | 'no-console': ['off'], 11 | 'react/jsx-props-no-spreading': ['warn'], 12 | "react/require-default-props": "off", 13 | "react/forbid-prop-types": "off" 14 | }, 15 | settings: { 16 | "import/resolver": { 17 | "alias": { 18 | "map": [["@", "./src"]] 19 | } 20 | }, 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/BodyText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const BodyText = ({ children }) => {children}; 6 | 7 | BodyText.propTypes = { 8 | children: PropTypes.node.isRequired, 9 | }; 10 | 11 | const StyledText = styled.div` 12 | margin-bottom: ${({ theme }) => theme.spacing(1)}; 13 | text-align: center; 14 | line-height: ${({ theme }) => theme.spacing(3)}; 15 | font-size: ${({ theme }) => theme.fontSize.xs}; 16 | font-weight: 400; 17 | color: ${({ theme }) => theme.color.light}; 18 | `; 19 | 20 | export default BodyText; 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![CI](https://github.com/mkdev-genie/mkdev-front/workflows/CI/badge.svg) 2 | # mkdev-front 3 | > 나와 똑 닮은 슈스 개발자 찾기 심리테스트 4 | 5 | ![](https://github.com/mkdev-genie/mkdev-front/blob/main/public/img-thumbnail.jpg?raw=true) 6 | 7 | ## 🤝 Coding convention 8 | - 기본적인 협업 방식은 github flow를 따릅니다. 9 | - branch명은 `feature/AddReadme` 형태로 작성합니다. 10 | - 커밋 메시지는 `[FEAT] Message` 형태로 작성합니다. (type: feat, fix, chore) 11 | - Pull Request는 한 명 이상의 피어 리뷰를 받고 merge합니다. 12 | 13 | 14 | ## 🔧 Credit 15 | - Language: JavaScript 16 | - Library & Framework: React.js, styled-components 17 | - Linter: ESLint 18 | 19 | ## 🤝 Contributors 20 | 🌱 jiyoon1156 21 | 22 | 🐥 swimjiy 23 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Route, Switch } from 'react-router-dom'; 3 | 4 | import GlobalStyle from './globalStyles'; 5 | import Theme from './Theme'; 6 | import Home from './pages/Home'; 7 | import Question from './pages/Question'; 8 | import Result from './pages/Result'; 9 | 10 | const App = () => ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /src/Theme.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { ThemeProvider } from 'styled-components'; 4 | 5 | // NOTE: 1rem = 16px 6 | const theme = { 7 | color: { 8 | primary: '#E2F063', 9 | secondary: '#553FF5', 10 | tertiary: '#8BE8A9', 11 | dark: '#0d1117', 12 | gray: 'gray', 13 | light: '#FFF', 14 | }, 15 | spacing: (size) => `${size / 2}rem`, 16 | fontSize: { 17 | sm: '0.825rem', 18 | md: '1.125rem', 19 | lg: '1.5rem', 20 | xl: '1.875rem', 21 | }, 22 | }; 23 | 24 | const Theme = ({ children }) => ( 25 | {children} 26 | ); 27 | 28 | Theme.propTypes = { 29 | children: PropTypes.node.isRequired, 30 | }; 31 | 32 | export default Theme; 33 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import IconGithub from '@/assets/images/icon-github.png'; 4 | 5 | const Footer = () => ( 6 | 7 | 12 | © 2021 project. mkdev 13 | 14 | 15 | ); 16 | 17 | const StyledFooter = styled.footer` 18 | padding-top: ${({ theme }) => theme.spacing(5)}; 19 | margin-top: ${({ theme }) => theme.spacing(10)}; 20 | font-size: ${({ theme }) => theme.fontSize.sm}; 21 | font-weight: 500; 22 | color: ${({ theme }) => theme.color.tertiary}; 23 | background: url(${IconGithub}) no-repeat top center; 24 | background-size: ${({ theme }) => theme.spacing(3)}; 25 | `; 26 | 27 | export default Footer; 28 | -------------------------------------------------------------------------------- /src/components/ListItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | import ImgPoundkey from '@/assets/images/img-poundkey.png'; 5 | 6 | const ListItem = ({ children }) => ( 7 | {children} 8 | ); 9 | 10 | ListItem.propTypes = { 11 | children: PropTypes.node.isRequired, 12 | }; 13 | 14 | const StyledText = styled.li` 15 | padding-left: ${({ theme }) => theme.spacing(2.5)}; 16 | margin-bottom: ${({ theme }) => theme.spacing(1)}; 17 | line-height: ${({ theme }) => theme.spacing(3)}; 18 | font-size: ${({ theme }) => theme.fontSize.xs}; 19 | font-weight: 400; 20 | color: ${({ theme }) => theme.color.light}; 21 | background: url(${(props) => props.img}) no-repeat left 8px; 22 | background-size: 10px auto; 23 | `; 24 | 25 | export default ListItem; 26 | -------------------------------------------------------------------------------- /src/components/RoundedText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const RoundedText = ({ children }) => {children}; 6 | 7 | RoundedText.propTypes = { 8 | children: PropTypes.node.isRequired, 9 | }; 10 | 11 | const StyledText = styled.span` 12 | display: inline-block; 13 | padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}; 14 | margin: 0 ${({ theme }) => theme.spacing(1)}; 15 | margin-bottom: ${({ theme }) => theme.spacing(2)}; 16 | border: 1px solid ${({ theme }) => theme.color.primary}; 17 | border-radius: 15px; 18 | color: ${({ theme }) => theme.color.primary}; 19 | font-style: normal; 20 | font-weight: 500; 21 | font-size: ${({ theme }) => theme.fontSize.sm}; 22 | text-align: center; 23 | `; 24 | 25 | export default RoundedText; 26 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/components/SubTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const SubTitle = ({ children }) => ( 6 | 7 | { 8 | {children} 9 | } 10 | 11 | ); 12 | 13 | SubTitle.propTypes = { 14 | children: PropTypes.node.isRequired, 15 | }; 16 | 17 | const StyledTitle = styled.div` 18 | position: flex; 19 | margin-top: ${({ theme }) => theme.spacing(5)}; 20 | margin-bottom: ${({ theme }) => theme.spacing(1.5)}; 21 | color: white; 22 | font-style: normal; 23 | font-weight: 500; 24 | font-size: ${({ theme }) => theme.fontSize.md}; 25 | line-height: ${({ theme }) => theme.spacing(4)}; 26 | text-align: center; 27 | `; 28 | 29 | const StyledBrace = styled.span` 30 | padding: 0 ${({ theme }) => theme.spacing(1)}; 31 | color: ${({ theme }) => theme.color.primary}; 32 | `; 33 | 34 | export default SubTitle; 35 | -------------------------------------------------------------------------------- /src/components/MainTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const MainTitle = ({ children, gutterBottom }) => ( 6 | 7 | { 8 | {children} 9 | } 10 | 11 | ); 12 | 13 | MainTitle.propTypes = { 14 | children: PropTypes.node.isRequired, 15 | // eslint-disable-next-line react/require-default-props 16 | gutterBottom: PropTypes.bool, 17 | }; 18 | 19 | const StyledTitle = styled.div` 20 | margin-bottom: ${({ gutterBottom, theme }) => 21 | gutterBottom ? theme.spacing(3) : theme.spacing(1)}; 22 | font-size: ${({ theme }) => theme.fontSize.lg}; 23 | font-weight: 500; 24 | line-height: ${({ theme }) => theme.spacing(4)}; 25 | text-align: center; 26 | color: ${({ theme }) => theme.color.light}; 27 | `; 28 | 29 | const StyledBrace = styled.span` 30 | padding: 0 ${({ theme }) => theme.spacing(1)}; 31 | color: ${({ theme }) => theme.color.secondary}; 32 | `; 33 | 34 | export default MainTitle; 35 | -------------------------------------------------------------------------------- /src/components/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { keyframes } from 'styled-components'; 3 | 4 | const Loading = () => { 5 | return ( 6 | 7 | 8 | Loading.. 9 | 10 | ); 11 | }; 12 | 13 | export default Loading; 14 | 15 | const LoadingWrap = styled.div` 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | width: 100%; 21 | height: 100vh; 22 | background: ${({ theme }) => theme.color.dark}; 23 | `; 24 | const rotate = keyframes` 25 | 0% { 26 | transform: scale(0); 27 | } 28 | 100% { 29 | transform: scale(1); 30 | opacity: 0; 31 | } 32 | `; 33 | const Spinner = styled.div` 34 | width: ${({ theme }) => theme.spacing(4)}; 35 | height: ${({ theme }) => theme.spacing(4)}; 36 | border-radius: 100%; 37 | background-color: ${({ theme }) => theme.color.light}; 38 | animation: ${rotate} 1s infinite ease-in-out; 39 | `; 40 | const Text = styled.span` 41 | margin-top: ${({ theme }) => theme.spacing(2.5)}; 42 | font-size: ${({ theme }) => theme.fontSize.md}; 43 | font-weight: 500; 44 | color: ${({ theme }) => theme.color.light}; 45 | `; 46 | -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/require-default-props */ 2 | import React from 'react'; 3 | import styled from 'styled-components'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const Button = ({ onClick, type, children, id }) => ( 7 | 8 | {children} 9 | 10 | ); 11 | 12 | Button.propTypes = { 13 | onClick: PropTypes.any, 14 | type: PropTypes.node, 15 | children: PropTypes.node.isRequired, 16 | id: PropTypes.node, 17 | }; 18 | 19 | const StyledButton = styled.button` 20 | width: 100%; 21 | padding: ${({ theme }) => theme.spacing(2)}; 22 | margin-top: ${({ theme }) => theme.spacing(2)}; 23 | color: ${({ type, theme }) => 24 | type === 'light' ? theme.color.primary : theme.color.dark}; 25 | border: ${({ type, theme }) => 26 | type === 'light' ? `1px solid ${theme.color.primary}` : 'none'}; 27 | border-radius: 10px; 28 | background: ${({ type, theme }) => 29 | type === 'light' ? 'transparent' : theme.color.primary}; 30 | font-style: normal; 31 | font-weight: 500; 32 | font-size: ${({ theme }) => theme.fontSize.md}; 33 | outline: none; 34 | &:hover { 35 | cursor: pointer; 36 | } 37 | `; 38 | 39 | export default Button; 40 | -------------------------------------------------------------------------------- /src/assets/images/icon-link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mkdev-front", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^5.8.0", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "axios": "^0.21.0", 11 | "craco-alias": "^2.1.1", 12 | "prop-types": "^15.7.2", 13 | "react": "^16.13.1", 14 | "react-dom": "^16.13.1", 15 | "react-helmet": "^6.1.0", 16 | "react-router-dom": "^5.2.0", 17 | "react-scripts": "3.4.3", 18 | "styled-components": "^5.2.0" 19 | }, 20 | "scripts": { 21 | "start": "craco start", 22 | "build": "craco build && echo '/* /index.html 200' | cat >build/_redirects ", 23 | "test": "craco test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "eslint-config-airbnb": "18.2.0", 43 | "eslint-config-prettier": "^6.14.0", 44 | "eslint-import-resolver-alias": "^1.1.2", 45 | "eslint-plugin-import": "^2.22.1", 46 | "eslint-plugin-jsx-a11y": "^6.3.0", 47 | "eslint-plugin-prettier": "^3.1.4", 48 | "eslint-plugin-react": "^7.20.0", 49 | "eslint-plugin-react-hooks": "4.0.0", 50 | "prettier": "^2.1.2" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: CI 4 | 5 | # Controls when the action will run. 6 | on: 7 | # Triggers the workflow on push or pull request events but only for the main branch 8 | push: 9 | branches: [ main ] 10 | pull_request: 11 | branches: [ main ] 12 | 13 | # Allows you to run this workflow manually from the Actions tab 14 | workflow_dispatch: 15 | 16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 17 | jobs: 18 | # This workflow contains a single job called "build" 19 | build: 20 | # The type of runner that the job will run on 21 | runs-on: ubuntu-latest 22 | 23 | # Steps represent a sequence of tasks that will be executed as part of the job 24 | steps: 25 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 26 | - uses: actions/checkout@v2 27 | - run: npm ci 28 | - run: npm run build 29 | 30 | - name: Deploy to Netlify 31 | uses: nwtgck/actions-netlify@v1.1 32 | with: 33 | publish-dir: './build' 34 | production-branch: main 35 | github-token: ${{ secrets.NETLIFY_GITHUB }} 36 | deploy-message: "Deploy from GitHub Actions" 37 | enable-pull-request-comment: false 38 | enable-commit-comment: true 39 | overwrites-pull-request-comment: true 40 | env: 41 | NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} 42 | NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} 43 | timeout-minutes: 1 44 | -------------------------------------------------------------------------------- /src/assets/images/icon-kakaotalk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/globalStyles.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | import NotoSansKRDemiLightOtf from '@/assets/fonts/NotoSansKR-DemiLight.otf'; 4 | import NotoSansKRDemiLightWoff from '@/assets/fonts/NotoSansKR-DemiLight.woff'; 5 | import NotoSansKRDemiLightWoff2 from '@/assets/fonts/NotoSansKR-DemiLight.woff2'; 6 | import NotoSansKRMediumOtf from '@/assets/fonts/NotoSansKR-Medium.otf'; 7 | import NotoSansKRMediumWoff from '@/assets/fonts/NotoSansKR-Medium.woff'; 8 | import NotoSansKRMediumWoff2 from '@/assets/fonts/NotoSansKR-Medium.woff2'; 9 | 10 | export default createGlobalStyle` 11 | @font-face { 12 | font-family: "Noto Sans KR"; 13 | font-weight: 400; 14 | font-style: normal; 15 | src: url(${NotoSansKRDemiLightOtf}) format('otf'), 16 | url(${NotoSansKRDemiLightWoff}) format('woff'), 17 | url(${NotoSansKRDemiLightWoff2}) format('woff2'); 18 | } 19 | @font-face { 20 | font-family: "Noto Sans KR"; 21 | font-weight: 500; 22 | font-style: normal; 23 | src: url(${NotoSansKRMediumOtf}) format('otf'), 24 | url(${NotoSansKRMediumWoff}) format('woff'), 25 | url(${NotoSansKRMediumWoff2}) format('woff2'); 26 | } 27 | html, body, div, span, applet, object, iframe, 28 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 29 | a, abbr, acronym, address, big, cite, code, 30 | del, dfn, em, img, ins, kbd, q, s, samp, 31 | small, strike, strong, sub, sup, tt, var, 32 | b, u, i, center, 33 | dl, dt, dd, ol, ul, li, 34 | fieldset, form, label, legend, 35 | table, caption, tbody, tfoot, thead, tr, th, td, 36 | article, aside, canvas, details, embed, 37 | figure, figcaption, footer, header, hgroup, 38 | menu, nav, output, ruby, section, summary, 39 | time, mark, audio, video, button { 40 | margin: 0; 41 | padding: 0; 42 | border: 0; 43 | font-size: inherit; 44 | vertical-align: baseline; 45 | word-break: keep-all; 46 | -webkit-font-smoothing: antialiased; 47 | font-family: "Noto Sans KR", Helvetica, Arial, sans-serif; 48 | } 49 | a { 50 | color: inherit; 51 | text-decoration: none; 52 | } 53 | ol, ul { 54 | list-style: none; 55 | } 56 | blockquote, q { 57 | quotes: none; 58 | } 59 | blockquote:before, blockquote:after, 60 | q:before, q:after { 61 | content: ''; 62 | content: none; 63 | } 64 | table { 65 | border-collapse: collapse; 66 | border-spacing: 0; 67 | } 68 | body { 69 | display: flex; 70 | justify-content: center; 71 | width: 100%; 72 | min-height: 100vh; 73 | line-height: ${({ theme }) => theme.spacing(1)}; 74 | background-color: ${({ theme }) => theme.color.dark}; 75 | } 76 | #root { 77 | width: 100%; 78 | max-width: 414px; 79 | padding: ${({ theme }) => theme.spacing(5)} ${({ theme }) => 80 | theme.spacing(2)}; 81 | } 82 | `; 83 | -------------------------------------------------------------------------------- /src/assets/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/ShareButton.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const createKakaoButton = (shareImgUrl, shareTitle) => { 6 | // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다 7 | if (window.Kakao) { 8 | const kakao = window.Kakao; 9 | // 중복 initialization 방지 10 | if (!kakao.isInitialized()) { 11 | // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize 12 | kakao.init(process.env.REACT_APP_KAKAO_KEY); 13 | } 14 | kakao.Link.createDefaultButton({ 15 | // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다 16 | container: '#kakao-link-btn', 17 | objectType: 'feed', 18 | content: { 19 | title: '나와 똑 닮은 슈스 개발자는?', 20 | description: shareTitle, 21 | imageUrl: shareImgUrl, // i.e. process.env.FETCH_URL + '/logo.png' 22 | link: { 23 | mobileWebUrl: window.location.href, 24 | webUrl: window.location.href, 25 | }, 26 | }, 27 | buttons: [ 28 | { 29 | title: '바로가기', 30 | link: { 31 | webUrl: window.location.href, 32 | }, 33 | }, 34 | ], 35 | }); 36 | } 37 | }; 38 | 39 | const ShareButton = ({ 40 | className, 41 | children, 42 | type, 43 | shareImgUrl, 44 | shareTitle, 45 | }) => { 46 | useEffect(() => { 47 | if (type === 'kakao') createKakaoButton(shareImgUrl, shareTitle); 48 | }, [type, shareImgUrl, shareTitle]); 49 | 50 | const handleClick = (buttonType) => { 51 | const PAGE_URL = window.location.href; 52 | if (buttonType === 'facebook') { 53 | window.open(`http://www.facebook.com/sharer/sharer.php?u=${PAGE_URL}`); 54 | } else if (buttonType === 'link') { 55 | const dummy = document.createElement('input'); 56 | document.body.appendChild(dummy); 57 | dummy.value = PAGE_URL; 58 | dummy.select(); 59 | document.execCommand('copy'); 60 | document.body.removeChild(dummy); 61 | // eslint-disable-next-line no-alert 62 | alert('URL이 복사되었습니다!'); 63 | } 64 | }; 65 | 66 | return ( 67 | handleClick(type)} 72 | > 73 | {children} 74 | 75 | ); 76 | }; 77 | 78 | ShareButton.propTypes = { 79 | className: PropTypes.string.isRequired, 80 | children: PropTypes.node.isRequired, 81 | type: PropTypes.string.isRequired, 82 | shareImgUrl: PropTypes.string, 83 | shareTitle: PropTypes.string, 84 | }; 85 | 86 | ShareButton.defaultProps = { 87 | shareImgUrl: 88 | 'https://github.com/mkdev-genie/mkdev-front/blob/main/public/img-thumbnail.jpg?raw=true', 89 | shareTitle: '나와 가장 잘 맞는 개발자를 알아보자!', 90 | }; 91 | 92 | const StyledShareButton = styled.button` 93 | width: 4em; 94 | height: 4em; 95 | margin: ${({ theme }) => theme.spacing(1)}; 96 | border-radius: 1em; 97 | border: none; 98 | border: 1px solid ${({ theme }) => theme.color.primary}; 99 | box-sizing: border-box; 100 | background: transparent; 101 | outline: none; 102 | &:hover { 103 | cursor: pointer; 104 | } 105 | &.icon-kakao { 106 | border: 1px solid ${({ theme }) => theme.color.primary}; 107 | } 108 | &.icon-facebook { 109 | border: 1px solid ${({ theme }) => theme.color.secondary}; 110 | } 111 | &.icon-link { 112 | border: 1px solid ${({ theme }) => theme.color.gray}; 113 | } 114 | `; 115 | 116 | export default ShareButton; 117 | -------------------------------------------------------------------------------- /src/pages/Question.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import axios from 'axios'; 3 | import styled from 'styled-components'; 4 | import { Redirect } from 'react-router-dom'; 5 | import Button from '@/components/Button'; 6 | import Loading from '@/components/Loading'; 7 | 8 | const Parsing = () => { 9 | const [info, setInfo] = useState(); 10 | useEffect(() => { 11 | const apiCall = async () => { 12 | const { data } = await axios.get('https://type.o-r.kr/questions'); 13 | setInfo(data); 14 | }; 15 | apiCall(); 16 | }, []); 17 | 18 | if (!info) return null; 19 | 20 | return info; 21 | }; 22 | 23 | const Question = () => { 24 | const db = Parsing(); 25 | 26 | const [num, setNum] = useState(1); 27 | const [type, setType] = useState(new Array(12).fill(0)); 28 | const steps = Math.floor((num / 14) * 100); 29 | 30 | const onIncrease = (e) => { 31 | setNum(num + 1); 32 | setType( 33 | type.map((v, i) => v + db[num - 1].choice[e.target.id][`type${i + 1}`]), 34 | ); 35 | }; 36 | 37 | const resultNum = type.indexOf(Math.max.apply(null, type)) + 1; 38 | if (num === 15) 39 | return ( 40 | 43 | ); 44 | 45 | if (!db) return ; 46 | 47 | return ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | {num} 55 | / 14 56 | 57 | 58 | {db[num - 1].content} 59 | 60 | {db[num - 1].choice.map((elem, i) => { 61 | return ( 62 | 65 | ); 66 | })} 67 | 68 | 69 | ); 70 | }; 71 | 72 | const Group = styled.div` 73 | display: flex; 74 | flex-direction: column; 75 | justify-content: space-between; 76 | align-items: center; 77 | min-height: calc(100vh - ${({ theme }) => theme.spacing(10)}); 78 | `; 79 | 80 | const Progress = styled.div` 81 | width: ${(props) => props.width}%; 82 | height: 9px; 83 | background: ${({ theme }) => theme.color.tertiary}; 84 | border-radius: 19px; 85 | `; 86 | 87 | const ProgressBar = styled.div` 88 | width: 100%; 89 | height: 11px; 90 | margin-bottom: ${({ theme }) => theme.spacing(5)}; 91 | border: 1px solid ${({ theme }) => theme.color.tertiary}; 92 | box-sizing: border-box; 93 | border-radius: 19px; 94 | color: ${({ theme }) => theme.color.tertiary}; 95 | `; 96 | 97 | const QNum = styled.div` 98 | font-weight: 500; 99 | padding: 0 ${({ theme }) => theme.spacing(1)}; 100 | `; 101 | 102 | const TtlNum = styled.div` 103 | display: flex; 104 | justify-content: center; 105 | margin-bottom: ${({ theme }) => theme.spacing(2)}; 106 | color: ${({ theme }) => theme.color.tertiary}; 107 | font-style: normal; 108 | font-size: ${({ theme }) => theme.fontSize.md}; 109 | `; 110 | 111 | const StyledQ = styled.div` 112 | margin-top: ${({ theme }) => theme.spacing(4)}; 113 | margin-bottom: ${({ theme }) => theme.spacing(4)}; 114 | color: white; 115 | font-style: normal; 116 | font-weight: 500; 117 | font-size: ${({ theme }) => theme.fontSize.lg}; 118 | text-align: center; 119 | line-height: ${({ theme }) => theme.spacing(3.5)}; 120 | `; 121 | 122 | const ButtonWrapper = styled.div` 123 | width: 100%; 124 | `; 125 | const ProgressWrapper = styled.div` 126 | width: 100%; 127 | margin: 0 auto; 128 | `; 129 | 130 | export default Question; 131 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import axios from 'axios'; 3 | import styled from 'styled-components'; 4 | import { Link } from 'react-router-dom'; 5 | import Button from '@/components/Button'; 6 | import MainTitle from '@/components/MainTitle'; 7 | import SubTitle from '@/components/SubTitle'; 8 | import BodyText from '@/components/BodyText'; 9 | import ShareButton from '@/components/ShareButton'; 10 | import Footer from '@/components/Footer'; 11 | 12 | import ImgMain from '@/assets/images/img-main.png'; 13 | import IconWarning from '@/assets/images/icon-warning.png'; 14 | import IconFacebook from '@/assets/images/icon-facebook.svg'; 15 | import IconKakao from '@/assets/images/icon-kakaotalk.svg'; 16 | import IconLink from '@/assets/images/icon-link.svg'; 17 | 18 | const Parsing = () => { 19 | const [info, setInfo] = useState(); 20 | useEffect(() => { 21 | const apiCall = async () => { 22 | const { data } = await axios.get('https://type.o-r.kr/users'); 23 | const temp = data.result; 24 | setInfo(temp); 25 | }; 26 | apiCall(); 27 | }, []); 28 | 29 | if (!info) return null; 30 | 31 | return info; 32 | }; 33 | 34 | const Timer = ({ realUsers }) => { 35 | const [users, setUsers] = useState(realUsers - 300); 36 | 37 | useEffect(() => { 38 | if (users === realUsers) return; 39 | const interval = setInterval(() => { 40 | setUsers(users + 1); 41 | }, 1); 42 | // eslint-disable-next-line consistent-return 43 | return () => clearInterval(interval); 44 | }, [users, realUsers]); 45 | return users; 46 | }; 47 | 48 | const Home = () => { 49 | const trackUsers = () => { 50 | window.dataLayer.push({ 51 | event: 'start button', 52 | eventProps: { 53 | category: 'button', 54 | action: 'start', 55 | label: 'Home', 56 | value: 1, 57 | }, 58 | }); 59 | }; 60 | useEffect(() => { 61 | const script = document.createElement('script'); 62 | script.src = 'https://developers.kakao.com/sdk/js/kakao.js'; 63 | script.async = true; 64 | document.body.appendChild(script); 65 | return () => { 66 | document.body.removeChild(script); 67 | }; 68 | }, []); 69 | const realUsers = 10000 + Parsing(); 70 | return ( 71 | 72 | 과몰입 주의 73 | 나와 똑 닮은 슈스 개발자는? 74 | 75 | 세상은 넓고 유명한 개발자는 많다. 76 |
77 | 나와 가장 잘 맞는 개발자는 누구인지 알아보자! 78 | 79 | 80 | main thumbnail 81 | 82 | 83 | 84 | 85 | 참여자 수 86 | 87 | 88 | 89 | 공유하기 90 | 91 | 92 | kakaotalk 93 | 94 | 95 | facebook 96 | 97 | 98 | link 99 | 100 | 101 |