├── .eslintrc.js ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── package-lock.json ├── package.json ├── public ├── Data │ ├── question1.json │ ├── question2.json │ ├── question3.json │ ├── question4.json │ ├── question5.json │ ├── result 2.json │ └── result.json ├── Fonts │ └── DungGeunMo.ttf ├── Logo.png ├── Logo3.png ├── Logo5.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── pull_request_template.md ├── src ├── Components │ ├── About │ │ ├── About.js │ │ ├── AboutData.js │ │ └── AboutDetail.js │ ├── Nav.js │ ├── ProgressBar.js │ ├── Question │ │ ├── QuestionMain.js │ │ └── QuestionWindow.js │ └── ResultWindow │ │ ├── Alert.js │ │ ├── Footer.js │ │ ├── Result.js │ │ └── WindowNav.js ├── Images │ ├── About │ │ ├── click.svg │ │ └── members.jpg │ ├── AboutDetail │ │ ├── Aiden.jpg │ │ ├── BG.png │ │ ├── Carmin.jpg │ │ ├── Hong.jpg │ │ ├── Kay.jpg │ │ ├── Sol.jpg │ │ ├── Sunny.jpg │ │ └── Whybein.jpg │ ├── Group6.png │ ├── Main │ │ ├── Record.png │ │ ├── WeTV.png │ │ ├── computer.png │ │ ├── quiz.png │ │ └── trash.png │ ├── Nav │ │ ├── BF Blue Logo.png │ │ ├── BTR.png │ │ ├── Moon.png │ │ ├── SUN.png │ │ ├── close.png │ │ ├── expand.png │ │ ├── min.png │ │ └── wecode black logo.png │ ├── Progress │ │ ├── Dog.png │ │ ├── home.png │ │ └── home_bf.png │ ├── ReadMe.png │ ├── art1.png │ ├── art1.svg │ ├── grain.png │ └── logo.png ├── Pages │ ├── Intro.js │ └── Main │ │ └── Main.js ├── Redux │ ├── Actions │ │ └── index.js │ ├── Reducers │ │ ├── controlAbout.js │ │ ├── controlDetail.js │ │ ├── controlQuestion.js │ │ ├── controlResult.js │ │ └── getResult.js │ └── rootReducer.js ├── Routes.js ├── Styles │ └── Fonts │ │ ├── DungGeunMo.ttf │ │ └── monospace.ttf ├── config.js └── index.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['react-app', 'prettier'], 3 | plugins: ['prettier'], 4 | rules: { 5 | 'prettier/prettier': ['error'] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.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 | 25 | .vscode -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Project 2 | 3 | + Wecode 6기 졸업생들의 토이 프로젝트 4 | + 프론트엔드와 백엔드 중에 당신에 성향에 맞는 포지션이 무엇인지 알아보는 테스트 사이트 5 | 6 | --------- 7 | 8 | ### 개발 인원 및 기간 9 | 10 | + 개발기간 : 2020/4/20 ~ 2020/4/28 11 | + 개발 인원 : Front-End 4명, Back-End 3명 12 | 13 | --------- 14 | 15 | ### 데모 영상(이미지 클릭) 16 | 17 | ![BF-TEST 미리보기](./src/Images/ReadMe.png) 18 | 19 | --------- 20 | 21 | ### 적용 기술 22 | 23 | + Front-End : React.js, Redux, Styled Component 24 | + Back-End : Python, Django 25 | + Common : AWS, Google Analytics 26 | 27 | --------- 28 | 29 | ### 구현 기능 30 | 31 | #### COMMON 32 | + 프로젝트 기획 및 디자인 33 | + 모바일, 태블릿 사이즈 반응형 구현 34 | + 리덕스 사용하여 전역 상태 관리 35 | + Open Graph 적용 36 | + Google Analytics 적용 37 | 38 | #### Intro & Loading 39 | + React-typing-animation 사용하여 Typing 효과 구현 40 | + figlet 사용하여 ASCII Art 구현 41 | + setInterval 사용하여 progress bar 구현 42 | 43 | #### Main & Contributors 44 | + setInterval 사용하여 nav bar 시계 구현 45 | + contributor에서 클릭 시, 개인 프로필 모달 구현 46 | 47 | #### Question 48 | + React-typing-animation 사용하여 Typing 효과 구현 49 | + TEST에서 선택되는 선택지에 따라 성향 및 타입분류 50 | 51 | #### Result 52 | + 유형 결과에 따른 full, front, back 결과 체크 53 | 54 | 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bftest", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "axios": "^0.19.2", 10 | "figlet": "^1.3.0", 11 | "html2canvas": "^1.0.0-rc.5", 12 | "react": "^16.13.1", 13 | "react-dom": "^16.13.1", 14 | "react-redux": "^7.2.0", 15 | "react-router-dom": "^5.1.2", 16 | "react-scripts": "3.4.1", 17 | "react-typing-animation": "^1.6.2", 18 | "redux": "^4.0.5", 19 | "styled-components": "^5.1.0", 20 | "styled-icons": "^10.2.1", 21 | "styled-reset": "^4.1.3", 22 | "typewriter-effect": "^2.13.0" 23 | }, 24 | "scripts": { 25 | "start": "NODE_PATH=src/ react-scripts start", 26 | "build": "NODE_PATH=src/ react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": "react-app" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "eslint-config-prettier": "^6.10.1", 47 | "eslint-plugin-prettier": "^3.1.3", 48 | "prettier": "^2.0.4" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/Data/question1.json: -------------------------------------------------------------------------------- 1 | { 2 | "question_data": { 3 | "choice": [ 4 | { 5 | "choice": "나는 베이스 할래!", 6 | "id": 11 7 | }, 8 | { 9 | "choice": "나느 보컬 할래!", 10 | "id": 12 11 | } 12 | ], 13 | "id": 1, 14 | "image_url": null, 15 | "question": "밴드에 들어가기로 했어요. (실력은 동일하다고 했을 때) 심영보 유경희 홍수연 권태솔 황은지 정성혜 권기현?" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/Data/question2.json: -------------------------------------------------------------------------------- 1 | { 2 | "question_data": { 3 | "choice": [ 4 | { 5 | "choice": "이게 왜? 잠기기만 하면 된다", 6 | "id": 1 7 | }, 8 | { 9 | "choice": "신경쓰인다", 10 | "id": 2 11 | } 12 | ], 13 | "id": 2, 14 | "image_url": null, 15 | "question": "배가 아파서 화장실에 간 당신, 눈 앞에 보이는 문고리의 모습" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/Data/question3.json: -------------------------------------------------------------------------------- 1 | { 2 | "question_data": { 3 | "choice": [ 4 | { 5 | "choice": "ㅁㄴㅇㄹㅇㄴㅁㄹㄴㅁㄹㅇㄹㅇㄹㅇㄹㅇㄹ", 6 | "id": 1 7 | }, 8 | { 9 | "choice": "ㄴㅇㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴ", 10 | "id": 2 11 | } 12 | ], 13 | "id": 3, 14 | "image_url": null, 15 | "question": "1+1은 양준식은 양 준식이는 식케이는 무슨말이냐" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/Data/question4.json: -------------------------------------------------------------------------------- 1 | { 2 | "question_data": { 3 | "choice": [ 4 | { 5 | "choice": "ㅁㄴㅇㄹㅁㄴㅇ", 6 | "id": 1 7 | }, 8 | { 9 | "choice": "ㅁㄴㅇㄹㄴㅁㅇㄹ", 10 | "id": 2 11 | } 12 | ], 13 | "id": 4, 14 | "image_url": null, 15 | "question": "이게뭐냐 뭐가 뭐긴 뭐냐" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/Data/question5.json: -------------------------------------------------------------------------------- 1 | { 2 | "question_data": { 3 | "choice": [ 4 | { 5 | "choice": "이게 왜? 잠기기만 하면 된다", 6 | "id": 1 7 | }, 8 | { 9 | "choice": "신경쓰인다", 10 | "id": 2 11 | } 12 | ], 13 | "id": 5, 14 | "image_url": null, 15 | "question": "가나다라마바사 아자차카 타파하 거너더러 머버서 어저처커 터퍼허" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/Data/result 2.json: -------------------------------------------------------------------------------- 1 | { 2 | "result": { 3 | "name": "기브미관심 귀여운 답정너 프론트엔드", 4 | "description": "css는 미안해ㅜㅜ 대신 기능은 내가 책임져보겠다구우~!눈으로 무언가를 만들어 내는 것도 좋지만 로직을 생각하면 마음이 설레이는 당신.새로운 웹 사이트를 보면 빨리 저 기능을 구현해보고 싶어 마음이 콩닥콩닥 합니다.기능은 좋지만 css 만질 생각에 머리가 지끈거린다구요? 너무 걱정하지 마세요~ 지금은 완벽하지 않아도 괜찮아요~ css는 하다보면 익숙해 질 거예요.", 5 | "image_url": "https://user-images.githubusercontent.com/53595582/80205034-ed0b1700-8664-11ea-96c5-d4d6ec7075d8.png", 6 | "audio_url": null, 7 | "dev_fit": "천사표, 나는 다 좋아요 백엔드" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /public/Data/result.json: -------------------------------------------------------------------------------- 1 | { 2 | "result": { 3 | "name": "기브미관심 귀여운 답정너 프론트엔드", 4 | "description": "css는 미안해ㅜㅜ 대신 기능은 내가 책임져보겠다구우~!눈으로 무언가를 만들어 내는 것도 좋지만 로직을 생각하면 마음이 설레이는 당신.새로운 웹 사이트를 보면 빨리 저 기능을 구현해보고 싶어 마음이 콩닥콩닥 합니다.기능은 좋지만 css 만질 생각에 머리가 지끈거린다구요? 너무 걱정하지 마세요~ 지금은 완벽하지 않아도 괜찮아요~ css는 하다보면 익숙해 질 거예요.", 5 | "image_url": "https://user-images.githubusercontent.com/53595582/80205034-ed0b1700-8664-11ea-96c5-d4d6ec7075d8.png", 6 | "audio_url": null, 7 | "dev_fit": "천사표, 나는 다 좋아요 백엔드" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /public/Fonts/DungGeunMo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/Fonts/DungGeunMo.ttf -------------------------------------------------------------------------------- /public/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/Logo.png -------------------------------------------------------------------------------- /public/Logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/Logo3.png -------------------------------------------------------------------------------- /public/Logo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/Logo5.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | BF-TEST 23 | 24 | 25 | 26 | 27 | 31 | 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wanderlust-sol/BF_test_front-end/0c0c48db40bf7dc337a320a7d1093312be80810f/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | FB_test PR message template 및 체크 리스트 입니다. 2 | 아래 사항들을 전부 작성/체크 하시고 PR 해주세요! 3 | 4 | ## 수정 사항 간략한 한줄 요약 5 | 6 | 7 | ## 수정 사항들 자세한 내용 8 | 9 | 10 | 11 | ## 체크 리스트 (아래 사항들이 전부 체크되어야만 merge가 됩니다!) 12 | - [ ] 필요한 test들을 완료하였고 기능이 제대로 실행되는지 확인 하였습니다. 13 | - [ ] Airbnb의 코드 스타일 가이드에 맞추어 코드를 작성 하였습니다. 14 | - [ ] 제가 의도한 파일들과 수정 사항들만 커밋이 된 것을 확인 하였습니다. 15 | - [ ] 본 수정 사항들을 팀원들과 사전에 상의하였고 팀원들 모두 해당 PR에 대하여 알고 있습니다. 16 | -------------------------------------------------------------------------------- /src/Components/About/About.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { connect } from "react-redux"; 3 | import { openDetail } from "Redux/Actions"; 4 | import styled, { keyframes } from "styled-components"; 5 | import WindowNav from "Components/ResultWindow/WindowNav"; 6 | import AboutDetail from "Components/About/AboutDetail"; 7 | import InfoData from "./AboutData"; 8 | import MEMBERS from "Images/About/members.jpg"; 9 | import CLICK from "Images/About/click.svg"; 10 | import Footer from "Components/ResultWindow/Footer"; 11 | 12 | const About = (props) => { 13 | const { detail, openDetail } = props; 14 | const [info, setInfo] = useState({}); 15 | 16 | const Data = { InfoData }.InfoData; 17 | 18 | const handleOpenDetail = (id) => { 19 | setInfo(Data[id]); 20 | openDetail(); 21 | }; 22 | 23 | return ( 24 | 25 | 26 |
27 | 28 |
29 | 안녕하세요! 30 |
31 | BF Test는 위코드 6기 수강생 7명이 모여 진행한 토이 프로젝트입니다. 32 |
33 |
34 | 코딩의 코자도 모르던 저희는 위코드를 통해 처음 코딩을 배우게 되었고, 35 | 백엔드와 프론트엔드를 선택하는 과정에서 어려움을 겪었습니다. 36 |
37 |
38 | 저희뿐만 아니라 코딩을 배우고자 결심하신 많은 분이 같은 고민을 겪었을 39 | 거라 생각했습니다. 그런 여러분들의 고민을 조금이나마 덜어드리고자 이번 40 | 프로젝트를 준비하게 됐습니다. 41 |
42 |
43 | 단순히 개인의 성향을 알아보는 심리 테스트이기 때문에 크게 의미 부여는 44 | 삼가해주세요! 참고용으로 가볍게 즐겨주시길 바랍니다. 45 |
46 |
47 | 그럼 다들 멋진 개발자로 성장하시길 응원합니다!! 48 |
49 | 50 | 51 | members 52 | 53 | {Data.map((card) => { 54 | return ( 55 | handleOpenDetail(card.id)} 59 | > 60 | {card.name} 61 | 62 | ); 63 | })} 64 | 65 | 66 |

click here

67 | click 68 | 69 | 70 | {detail && } 71 |
72 |