조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
조수연
17f91aad 2 parents 8c756350 05048a4b

Merge branch 'test1' into 'master' 

인공지능&자가진단 도메인 연결



See merge request !15
Inline Side-by-side
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>
......