Merge branch 'test1' into 'master'
인공지능&자가진단 도메인 연결 See merge request !15
Showing
8 changed files
with
151 additions
and
51 deletions
1 | -[{"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\App.js":"1","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\Home.js":"2","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test.js":"3","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\index.js":"4","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test2.js":"5","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js":"6","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\spring.js":"7","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\autumn.js":"8","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\winter.js":"9"},{"size":997,"mtime":1607087770504,"results":"10","hashOfConfig":"11"},{"size":716,"mtime":1607088352940,"results":"12","hashOfConfig":"11"},{"size":3300,"mtime":1607106982071,"results":"13","hashOfConfig":"11"},{"size":238,"mtime":1606589880919,"results":"14","hashOfConfig":"11"},{"size":3240,"mtime":1607106428167,"results":"15","hashOfConfig":"11"},{"size":3269,"mtime":1607106440539,"results":"16","hashOfConfig":"11"},{"size":464,"mtime":1607071859252,"results":"17","hashOfConfig":"11"},{"size":464,"mtime":1607085079320,"results":"18","hashOfConfig":"11"},{"size":464,"mtime":1607103197037,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pqxpq",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\App.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\Home.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test.js",["38"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\index.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test2.js",["39"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js",["40"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\spring.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\autumn.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\winter.js",[],{"ruleId":"41","severity":1,"message":"42","line":1,"column":17,"nodeType":"43","messageId":"44","endLine":1,"endColumn":26},{"ruleId":"41","severity":1,"message":"45","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":15},{"ruleId":"41","severity":1,"message":"45","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":15},"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'console' is defined but never used."] | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | +[{"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\App.js":"1","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\Home.js":"2","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test.js":"3","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\index.js":"4","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test2.js":"5","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js":"6","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\spring.js":"7","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\autumn.js":"8","C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\winter.js":"9"},{"size":997,"mtime":1607087770504,"results":"10","hashOfConfig":"11"},{"size":934,"mtime":1607283791546,"results":"12","hashOfConfig":"11"},{"size":5193,"mtime":1607283257262,"results":"13","hashOfConfig":"11"},{"size":238,"mtime":1606589880919,"results":"14","hashOfConfig":"11"},{"size":3878,"mtime":1607283852444,"results":"15","hashOfConfig":"11"},{"size":3845,"mtime":1607283822905,"results":"16","hashOfConfig":"11"},{"size":464,"mtime":1607071859252,"results":"17","hashOfConfig":"11"},{"size":464,"mtime":1607085079320,"results":"18","hashOfConfig":"11"},{"size":464,"mtime":1607103197037,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pqxpq",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\App.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\Home.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test.js",["38"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\index.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test2.js",["39"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js",["40"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\spring.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\autumn.js",[],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\winter.js",[],{"ruleId":"41","severity":1,"message":"42","line":1,"column":17,"nodeType":"43","messageId":"44","endLine":1,"endColumn":26},{"ruleId":"41","severity":1,"message":"45","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":15},{"ruleId":"41","severity":1,"message":"45","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":15},"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'console' is defined but never used."] | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -2740,6 +2740,11 @@ | ... | @@ -2740,6 +2740,11 @@ |
2740 | "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", | 2740 | "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", |
2741 | "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=" | 2741 | "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=" |
2742 | }, | 2742 | }, |
2743 | + "animate.css": { | ||
2744 | + "version": "4.1.1", | ||
2745 | + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", | ||
2746 | + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" | ||
2747 | + }, | ||
2743 | "ansi-colors": { | 2748 | "ansi-colors": { |
2744 | "version": "4.1.1", | 2749 | "version": "4.1.1", |
2745 | "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", | 2750 | "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", | ... | ... |
... | @@ -6,6 +6,7 @@ | ... | @@ -6,6 +6,7 @@ |
6 | "@testing-library/jest-dom": "^5.11.6", | 6 | "@testing-library/jest-dom": "^5.11.6", |
7 | "@testing-library/react": "^11.2.2", | 7 | "@testing-library/react": "^11.2.2", |
8 | "@testing-library/user-event": "^12.2.2", | 8 | "@testing-library/user-event": "^12.2.2", |
9 | + "animate.css": "^4.1.1", | ||
9 | "react": "^17.0.1", | 10 | "react": "^17.0.1", |
10 | "react-console": "^1.0.0-rc.2", | 11 | "react-console": "^1.0.0-rc.2", |
11 | "react-dom": "^17.0.1", | 12 | "react-dom": "^17.0.1", | ... | ... |
... | @@ -5,15 +5,19 @@ const Home = ( { history } ) => | ... | @@ -5,15 +5,19 @@ const Home = ( { history } ) => |
5 | { | 5 | { |
6 | 6 | ||
7 | return ( | 7 | return ( |
8 | + <> | ||
9 | + <head> | ||
10 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link> | ||
11 | + </head> | ||
8 | <div className='home_display'> | 12 | <div className='home_display'> |
9 | <center id='home'> | 13 | <center id='home'> |
10 | - findyourcolor | 14 | + <div className='animated infinite pulse'>findyourcolor</div> |
11 | </center> | 15 | </center> |
12 | <div id="btn_group"> | 16 | <div id="btn_group"> |
13 | - <button id="soo_btn1" onClick={()=>{window.open('https://stackoverflow.com/questions/51057153/how-to-use-window-open-onclick-reactjs', "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30")}}>image</button> | ||
14 | <button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button> | 17 | <button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button> |
15 | </div> | 18 | </div> |
16 | </div> | 19 | </div> |
20 | + </> | ||
17 | ); | 21 | ); |
18 | } | 22 | } |
19 | 23 | ... | ... |
... | @@ -6,10 +6,10 @@ const Test = ( { history } ) => | ... | @@ -6,10 +6,10 @@ const Test = ( { history } ) => |
6 | { | 6 | { |
7 | const questions = [ | 7 | const questions = [ |
8 | { | 8 | { |
9 | - questionText: '머리카락 색이 검정에 가깝다', | 9 | + questionText: '머리카락이 어떤 색에 가깝나요?', |
10 | answerOptions: [ | 10 | answerOptions: [ |
11 | - { answerText: '예', isCorrect: true }, | 11 | + { answerText: '검은색', isCorrect: true }, |
12 | - { answerText: '아니오', isCorrect: false } | 12 | + { answerText: '갈색', isCorrect: false } |
13 | ], | 13 | ], |
14 | }, | 14 | }, |
15 | { | 15 | { |
... | @@ -20,19 +20,68 @@ const Test = ( { history } ) => | ... | @@ -20,19 +20,68 @@ const Test = ( { history } ) => |
20 | ], | 20 | ], |
21 | }, | 21 | }, |
22 | { | 22 | { |
23 | - questionText: '손목 혈관 색이 초록색이다', | 23 | + questionText: '손목 혈관 색이 파란색보다는 초록색이다', |
24 | answerOptions: [ | 24 | answerOptions: [ |
25 | { answerText: '예', isCorrect: false }, | 25 | { answerText: '예', isCorrect: false }, |
26 | { answerText: '아니오', isCorrect: true } | 26 | { answerText: '아니오', isCorrect: true } |
27 | ], | 27 | ], |
28 | }, | 28 | }, |
29 | { | 29 | { |
30 | - questionText: '햇볕에 장시간 있으면 피부가 붉어진다', | 30 | + questionText: '햇볕에 장시간 있으면 피부가...', |
31 | + answerOptions: [ | ||
32 | + { answerText: '붉어진다', isCorrect: true }, | ||
33 | + { answerText: '검게 그을린다', isCorrect: false } | ||
34 | + ], | ||
35 | + }, | ||
36 | + { | ||
37 | + questionText: '순백 셔츠보다 아이보리색이 더 어울리나요?', | ||
38 | + answerOptions: [ | ||
39 | + { answerText: '예', isCorrect: false }, | ||
40 | + { answerText: '아니오', isCorrect: true } | ||
41 | + ], | ||
42 | + }, | ||
43 | + { | ||
44 | + questionText: '나는 OO색의 악세사리가 어울린다', | ||
45 | + answerOptions: [ | ||
46 | + { answerText: '골드', isCorrect: false }, | ||
47 | + { answerText: '실버', isCorrect: true } | ||
48 | + ], | ||
49 | + }, | ||
50 | + { | ||
51 | + questionText: '눈동자가 어떤 색에 가깝나요?', | ||
52 | + answerOptions: [ | ||
53 | + { answerText: '갈색', isCorrect: false }, | ||
54 | + { answerText: '검은색', isCorrect: true } | ||
55 | + ], | ||
56 | + }, | ||
57 | + { | ||
58 | + questionText: '맨 얼굴로 검은색 옷을 입으면...', | ||
59 | + answerOptions: [ | ||
60 | + { answerText: '칙칙해보인다', isCorrect: false }, | ||
61 | + { answerText: '이목구비가 뚜렷해보인다', isCorrect: true } | ||
62 | + ], | ||
63 | + }, | ||
64 | + { | ||
65 | + questionText: '얼굴이 창백해보인다는 소리를 자주 듣나요?', | ||
31 | answerOptions: [ | 66 | answerOptions: [ |
32 | { answerText: '예', isCorrect: true }, | 67 | { answerText: '예', isCorrect: true }, |
33 | { answerText: '아니오', isCorrect: false } | 68 | { answerText: '아니오', isCorrect: false } |
34 | ], | 69 | ], |
35 | }, | 70 | }, |
71 | + { | ||
72 | + questionText: '손가락을 지그시 눌러 피가 몰려있을 때...', | ||
73 | + answerOptions: [ | ||
74 | + { answerText: '탁한 빨간색이다', isCorrect: false }, | ||
75 | + { answerText: '분홍색이다', isCorrect: true } | ||
76 | + ], | ||
77 | + }, | ||
78 | + { | ||
79 | + questionText: '주변에서 나의 첫 인상은...', | ||
80 | + answerOptions: [ | ||
81 | + { answerText: '차가운 분위기가 난다', isCorrect: true }, | ||
82 | + { answerText: '따뜻한 분위기가 난다', isCorrect: false } | ||
83 | + ], | ||
84 | + }, | ||
36 | ]; //웜,쿨 파악 | 85 | ]; //웜,쿨 파악 |
37 | 86 | ||
38 | const [currentQuestion, setCurrentQuestion] = useState(0); //현재 문제 번호 [변수, 함수] | 87 | const [currentQuestion, setCurrentQuestion] = useState(0); //현재 문제 번호 [변수, 함수] |
... | @@ -40,7 +89,7 @@ const Test = ( { history } ) => | ... | @@ -40,7 +89,7 @@ const Test = ( { history } ) => |
40 | const [score_c, setScore_cool] = useState(0); //쿨톤 점수 -> 웜,쿨 리스트에서 사용 | 89 | const [score_c, setScore_cool] = useState(0); //쿨톤 점수 -> 웜,쿨 리스트에서 사용 |
41 | const [score_w, setScore_warm] = useState(0); //웜톤 점수 -> 웜,쿨 리스트에서 사용 | 90 | const [score_w, setScore_warm] = useState(0); //웜톤 점수 -> 웜,쿨 리스트에서 사용 |
42 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 | 91 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 |
43 | - | 92 | + const [num, setNum] = useState(0); |
44 | 93 | ||
45 | const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_웜쿨 검사 | 94 | const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_웜쿨 검사 |
46 | if (isCorrect) { | 95 | if (isCorrect) { |
... | @@ -72,6 +121,7 @@ const Test = ( { history } ) => | ... | @@ -72,6 +121,7 @@ const Test = ( { history } ) => |
72 | else{ | 121 | else{ |
73 | setPersonal('restart'); | 122 | setPersonal('restart'); |
74 | } | 123 | } |
124 | + setNum(num + 1); | ||
75 | }; //함수2 끝. | 125 | }; //함수2 끝. |
76 | 126 | ||
77 | return ( | 127 | return ( |
... | @@ -79,22 +129,29 @@ const Test = ( { history } ) => | ... | @@ -79,22 +129,29 @@ const Test = ( { history } ) => |
79 | {showScore ? ( | 129 | {showScore ? ( |
80 | <span className='score-section'> | 130 | <span className='score-section'> |
81 | <button onClick={() => handlePersonalScore(score_c,score_w)}>result</button> | 131 | <button onClick={() => handlePersonalScore(score_c,score_w)}>result</button> |
82 | - {score === "cool" ? <button onClick={ () => {history.push("/test2")}}>next</button> | 132 | + {num === 1 ? |
83 | - : <button onClick={ () => {history.push("/test3")}}>next</button>} | 133 | + (<div className = "season"> |
134 | + {score === "cool" ? (<button onClick={ () => {history.push("/test2")}}>next</button>) | ||
135 | + : (<button onClick={ () => {history.push("/test3")}}>next</button>)} | ||
136 | + </div>) | ||
137 | + : (<div>click me!</div>)} | ||
84 | </span> | 138 | </span> |
85 | ) : ( | 139 | ) : ( |
86 | <> | 140 | <> |
87 | - <div className='question-section'> | 141 | + <head> |
88 | - <div id='question-count'> | 142 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link> |
89 | - <span>Question {currentQuestion + 1}</span>/{questions.length} | 143 | + </head> |
90 | - </div> | 144 | + <div className='question-section'> |
91 | - <div id="question-text">{questions[currentQuestion].questionText}</div> | 145 | + <div id='question-count'> |
92 | - </div> | 146 | + <span>Question {currentQuestion + 1}</span>/{questions.length} |
93 | - <div className='answer-section'> | 147 | + <div className="animated infinite pulse">{questions[currentQuestion].questionText}</div> |
94 | - {questions[currentQuestion].answerOptions.map((answerOption) => ( | ||
95 | - <button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button> | ||
96 | - ))} | ||
97 | </div> | 148 | </div> |
149 | + </div> | ||
150 | + <div className='answer-section'> | ||
151 | + {questions[currentQuestion].answerOptions.map((answerOption) => ( | ||
152 | + <button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button> | ||
153 | + ))} | ||
154 | + </div> | ||
98 | </> | 155 | </> |
99 | )} | 156 | )} |
100 | </div> | 157 | </div> | ... | ... |
... | @@ -6,28 +6,35 @@ const Test2 = ( { history } ) => | ... | @@ -6,28 +6,35 @@ const Test2 = ( { history } ) => |
6 | { | 6 | { |
7 | const questions_cool = [ | 7 | const questions_cool = [ |
8 | { | 8 | { |
9 | - questionText: '머리카락 색이 검정에 가깝다', | 9 | + questionText: '파스텔 같이 은은한 색상보다 쨍한 색이 어울린다', |
10 | answerOptions: [ | 10 | answerOptions: [ |
11 | - { answerText: '예', isCorrect: true }, | 11 | + { answerText: '예', isCorrect: false }, |
12 | - { answerText: '아니오', isCorrect: false } | 12 | + { answerText: '아니오', isCorrect: true } |
13 | ], | 13 | ], |
14 | }, | 14 | }, |
15 | { | 15 | { |
16 | - questionText: '피부에 붉은 기가 많다', | 16 | + questionText: '주변으로 부터 많이 듣는 나의 이미지는?', |
17 | answerOptions: [ | 17 | answerOptions: [ |
18 | - { answerText: '예', isCorrect: true }, | 18 | + { answerText: '부드럽고, 맑은 느낌', isCorrect: true }, |
19 | - { answerText: '아니오', isCorrect: false } | 19 | + { answerText: '카리스마, 도시적인 느낌', isCorrect: false } |
20 | ], | 20 | ], |
21 | }, | 21 | }, |
22 | { | 22 | { |
23 | - questionText: '손목 혈관 색이 초록색이다', | 23 | + questionText: '전체적으로 강한 대비를 이루는 색상이 잘어울린다', |
24 | answerOptions: [ | 24 | answerOptions: [ |
25 | { answerText: '예', isCorrect: false }, | 25 | { answerText: '예', isCorrect: false }, |
26 | { answerText: '아니오', isCorrect: true } | 26 | { answerText: '아니오', isCorrect: true } |
27 | ], | 27 | ], |
28 | }, | 28 | }, |
29 | { | 29 | { |
30 | - questionText: '햇볕에 장시간 있으면 피부가 붉어진다', | 30 | + questionText: '또렷하고, 선명한 색상이 잘어울린다', |
31 | + answerOptions: [ | ||
32 | + { answerText: '예', isCorrect: false }, | ||
33 | + { answerText: '아니오', isCorrect: true } | ||
34 | + ], | ||
35 | + }, | ||
36 | + { | ||
37 | + questionText: '회색기가 섞인 톤이 잘어울린다', | ||
31 | answerOptions: [ | 38 | answerOptions: [ |
32 | { answerText: '예', isCorrect: true }, | 39 | { answerText: '예', isCorrect: true }, |
33 | { answerText: '아니오', isCorrect: false } | 40 | { answerText: '아니오', isCorrect: false } |
... | @@ -40,6 +47,7 @@ const Test2 = ( { history } ) => | ... | @@ -40,6 +47,7 @@ const Test2 = ( { history } ) => |
40 | const [score_c_s, setScore_cool_summer] = useState(0); | 47 | const [score_c_s, setScore_cool_summer] = useState(0); |
41 | const [score_c_w, setScore_cool_winter] = useState(0); | 48 | const [score_c_w, setScore_cool_winter] = useState(0); |
42 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 | 49 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 |
50 | + const [num, setNum] = useState(0); | ||
43 | 51 | ||
44 | 52 | ||
45 | const handleAnswerOptionClick = (isCorrect) => { //함수3_여쿨, 겨쿨 점수 +1 | 53 | const handleAnswerOptionClick = (isCorrect) => { //함수3_여쿨, 겨쿨 점수 +1 |
... | @@ -70,6 +78,7 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨 | ... | @@ -70,6 +78,7 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨 |
70 | else{ | 78 | else{ |
71 | setPersonal('restart'); | 79 | setPersonal('restart'); |
72 | } | 80 | } |
81 | + setNum(num + 1); | ||
73 | }; //함수2 끝. | 82 | }; //함수2 끝. |
74 | 83 | ||
75 | return ( | 84 | return ( |
... | @@ -77,22 +86,29 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨 | ... | @@ -77,22 +86,29 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨 |
77 | {showScore_c ? ( | 86 | {showScore_c ? ( |
78 | <span className='score-section'> | 87 | <span className='score-section'> |
79 | <button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button> | 88 | <button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button> |
80 | - {score === "summer cool" ? <button onClick={ () => {history.push("/summer")}}>next</button> | 89 | + {num === 1 ? |
81 | - : <button onClick={ () => {history.push("/winter")}}>next</button>} | 90 | + (<div className = "season"> |
91 | + {score === "summer cool" ? (<button onClick={ () => {history.push("/summer")}}>next</button>) | ||
92 | + : (<button onClick={ () => {history.push("/winter")}}>next</button>)} | ||
93 | + </div>) | ||
94 | + : (<div>click me!</div>)} | ||
82 | </span> | 95 | </span> |
83 | ) : ( | 96 | ) : ( |
84 | <> | 97 | <> |
85 | - <div className='question-section'> | 98 | + <head> |
86 | - <div id='question-count'> | 99 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link> |
87 | - <span>Question {currentQuestion_c + 1}</span>/{questions_cool.length} | 100 | + </head> |
88 | - </div> | 101 | + <div className='question-section'> |
89 | - <div id="question-text">{questions_cool[currentQuestion_c].questionText}</div> | 102 | + <div id='question-count'> |
90 | - </div> | 103 | + <span>Question{currentQuestion_c + 1}</span>/{questions_cool.length} |
91 | - <div className='answer-section'> | 104 | + <div className="animated infinite pulse">{questions_cool[currentQuestion_c].questionText}</div> |
92 | - {questions_cool[currentQuestion_c].answerOptions.map((answerOption) => ( | ||
93 | - <button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button> | ||
94 | - ))} | ||
95 | </div> | 105 | </div> |
106 | + </div> | ||
107 | + <div className='answer-section'> | ||
108 | + {questions_cool[currentQuestion_c].answerOptions.map((answerOption) => ( | ||
109 | + <button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button> | ||
110 | + ))} | ||
111 | + </div> | ||
96 | </> | 112 | </> |
97 | )} | 113 | )} |
98 | </div> | 114 | </div> | ... | ... |
... | @@ -6,28 +6,35 @@ const Test3 = ( { history } ) => | ... | @@ -6,28 +6,35 @@ const Test3 = ( { history } ) => |
6 | { | 6 | { |
7 | const questions_warm = [ | 7 | const questions_warm = [ |
8 | { | 8 | { |
9 | - questionText: '머리카락 색이 검정에 가깝다', | 9 | + questionText: '어두운 색상이 잘어울린다', |
10 | answerOptions: [ | 10 | answerOptions: [ |
11 | - { answerText: '예', isCorrect: true }, | 11 | + { answerText: '예', isCorrect: false }, |
12 | - { answerText: '아니오', isCorrect: false } | 12 | + { answerText: '아니오', isCorrect: true } |
13 | + ], | ||
14 | + }, | ||
15 | + { | ||
16 | + questionText: '주변으로 부터 자주 듣는 나의 이미지는?', | ||
17 | + answerOptions: [ | ||
18 | + { answerText: '생기발랄', isCorrect: true }, | ||
19 | + { answerText: '지적이고, 성숙한', isCorrect: false } | ||
13 | ], | 20 | ], |
14 | }, | 21 | }, |
15 | { | 22 | { |
16 | - questionText: '피부에 붉은 기가 많다', | 23 | + questionText: '나는 동안 이미지이다', |
17 | answerOptions: [ | 24 | answerOptions: [ |
18 | { answerText: '예', isCorrect: true }, | 25 | { answerText: '예', isCorrect: true }, |
19 | { answerText: '아니오', isCorrect: false } | 26 | { answerText: '아니오', isCorrect: false } |
20 | ], | 27 | ], |
21 | }, | 28 | }, |
22 | { | 29 | { |
23 | - questionText: '손목 혈관 색이 초록색이다', | 30 | + questionText: '진하고, 톤다운 된 색상이 잘어울린다', |
24 | answerOptions: [ | 31 | answerOptions: [ |
25 | { answerText: '예', isCorrect: false }, | 32 | { answerText: '예', isCorrect: false }, |
26 | { answerText: '아니오', isCorrect: true } | 33 | { answerText: '아니오', isCorrect: true } |
27 | ], | 34 | ], |
28 | }, | 35 | }, |
29 | { | 36 | { |
30 | - questionText: '햇볕에 장시간 있으면 피부가 붉어진다', | 37 | + questionText: '피부가 투명하지만 얇아 주근깨가 많이 보인다', |
31 | answerOptions: [ | 38 | answerOptions: [ |
32 | { answerText: '예', isCorrect: true }, | 39 | { answerText: '예', isCorrect: true }, |
33 | { answerText: '아니오', isCorrect: false } | 40 | { answerText: '아니오', isCorrect: false } |
... | @@ -41,6 +48,7 @@ const Test3 = ( { history } ) => | ... | @@ -41,6 +48,7 @@ const Test3 = ( { history } ) => |
41 | const [score_w_s, setScore_warm_spring] = useState(0); | 48 | const [score_w_s, setScore_warm_spring] = useState(0); |
42 | const [score_w_a, setScore_warm_autumn] = useState(0); | 49 | const [score_w_a, setScore_warm_autumn] = useState(0); |
43 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 | 50 | const [score, setPersonal] = useState(""); //퍼스널컬러 결과 |
51 | + const [num, setNum] = useState(0); | ||
44 | 52 | ||
45 | 53 | ||
46 | const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_봄, 가을 검사 | 54 | const handleAnswerOptionClick = (isCorrect) => { //main 함수 1_봄, 가을 검사 |
... | @@ -71,6 +79,7 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을 | ... | @@ -71,6 +79,7 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을 |
71 | else{ | 79 | else{ |
72 | setPersonal('restart'); | 80 | setPersonal('restart'); |
73 | } | 81 | } |
82 | + setNum(num + 1); | ||
74 | }; //함수2 끝. | 83 | }; //함수2 끝. |
75 | 84 | ||
76 | return ( | 85 | return ( |
... | @@ -78,16 +87,23 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을 | ... | @@ -78,16 +87,23 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을 |
78 | {showScore_w ? ( | 87 | {showScore_w ? ( |
79 | <span className='score-section'> | 88 | <span className='score-section'> |
80 | <button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button> | 89 | <button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button> |
81 | - {score === "spring warm" ? <button onClick={ () => {history.push("/spring")}}>next</button> | 90 | + {num === 1 ? |
82 | - : <button onClick={ () => {history.push("/autumn")}}>next</button>} | 91 | + (<div className = "season"> |
92 | + {score === "spring warm" ? (<button onClick={ () => {history.push("/spring")}}>next</button>) | ||
93 | + : (<button onClick={ () => {history.push("/autumn")}}>next</button>)} | ||
94 | + </div>) | ||
95 | + : (<div>click me!</div>)} | ||
83 | </span> | 96 | </span> |
84 | ) : ( | 97 | ) : ( |
85 | <> | 98 | <> |
99 | + <head> | ||
100 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link> | ||
101 | + </head> | ||
86 | <div className='question-section'> | 102 | <div className='question-section'> |
87 | <div id='question-count'> | 103 | <div id='question-count'> |
88 | <span>Question {currentQuestion_w + 1}</span>/{questions_warm.length} | 104 | <span>Question {currentQuestion_w + 1}</span>/{questions_warm.length} |
105 | + <div className="animated infinite pulse">{questions_warm[currentQuestion_w].questionText}</div> | ||
89 | </div> | 106 | </div> |
90 | - <div id="question-text">{questions_warm[currentQuestion_w].questionText}</div> | ||
91 | </div> | 107 | </div> |
92 | <div className='answer-section'> | 108 | <div className='answer-section'> |
93 | {questions_warm[currentQuestion_w].answerOptions.map((answerOption) => ( | 109 | {questions_warm[currentQuestion_w].answerOptions.map((answerOption) => ( | ... | ... |
... | @@ -137,7 +137,8 @@ | ... | @@ -137,7 +137,8 @@ |
137 | </p> | 137 | </p> |
138 | <div class="tm-next"> | 138 | <div class="tm-next"> |
139 | <p> | 139 | <p> |
140 | - <br><a href="#work" class="tm-intro-text tm-btn-primary">테스트 하기</a><br> | 140 | + <br><a href="http://josutest.pythonanywhere.com/" class="tm-intro-text tm-btn-primary">테스트 하기</a><br> |
141 | + <br><a href="https://leesubin-khu.github.io/color/" class="tm-intro-text tm-btn-primary">자가진단 하기</a><br> | ||
141 | <p> | 142 | <p> |
142 | 구현 중...(현재는 테스트 하기 눌러도 아무 이벤트도 없습니다.) | 143 | 구현 중...(현재는 테스트 하기 눌러도 아무 이벤트도 없습니다.) |
143 | </p> | 144 | </p> | ... | ... |
-
Please register or login to post a comment