Merge branch 'test1' into 'master'

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



See merge request !15

-[{"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
+[{"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

@@ -2740,6 +2740,11 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.2.2",
+    "animate.css": "^4.1.1",
     "react": "^17.0.1",
     "react-console": "^1.0.0-rc.2",
     "react-dom": "^17.0.1",

@@ -5,15 +5,19 @@ const Home = ( { history } ) =>
 {
    
     return (
+        <>
+        <head>
+			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
+		</head>
         <div className='home_display'>
             <center id='home'>
-            findyourcolor
+                <div className='animated infinite pulse'>findyourcolor</div>
             </center>
             <div id="btn_group">
-                <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>
                 <button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
             </div>
         </div>
+        </>
     );
 }
 

@@ -6,10 +6,10 @@ const Test = ( { history } ) =>
  {
 	const questions = [
 		{
-			questionText: '머리카락 색이 검정에 가깝다',
+			questionText: '머리카락이 어떤 색에 가깝나요?',
 			answerOptions: [
-				{ answerText: '예', isCorrect: true },
-				{ answerText: '아니오', isCorrect: false }
+				{ answerText: '검은색', isCorrect: true },
+				{ answerText: '갈색', isCorrect: false }
 			],
 		},
 		{
@@ -20,19 +20,68 @@ const Test = ( { history } ) =>
 			],
 		},
 		{
-			questionText: '손목 혈관 색이 초록색이다',
+			questionText: '손목 혈관 색이 파란색보다는 초록색이다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: false },
 				{ answerText: '아니오', isCorrect: true }
 			],
 		},
 		{
-			questionText: '햇볕에 장시간 있으면 피부가 붉어진다',
+			questionText: '햇볕에 장시간 있으면 피부가...',
+			answerOptions: [
+				{ answerText: '붉어진다', isCorrect: true },
+				{ answerText: '검게 그을린다', isCorrect: false }
+			],
+		},
+		{
+			questionText: '순백 셔츠보다 아이보리색이 더 어울리나요?',
+			answerOptions: [
+				{ answerText: '예', isCorrect: false },
+				{ answerText: '아니오', isCorrect: true }
+			],
+		},
+		{
+			questionText: '나는 OO색의 악세사리가 어울린다',
+			answerOptions: [
+				{ answerText: '골드', isCorrect: false },
+				{ answerText: '실버', isCorrect: true }
+			],
+		},
+		{
+			questionText: '눈동자가 어떤 색에 가깝나요?',
+			answerOptions: [
+				{ answerText: '갈색', isCorrect: false },
+				{ answerText: '검은색', isCorrect: true }
+			],
+		},
+		{
+			questionText: '맨 얼굴로 검은색 옷을 입으면...',
+			answerOptions: [
+				{ answerText: '칙칙해보인다', isCorrect: false },
+				{ answerText: '이목구비가 뚜렷해보인다', isCorrect: true }
+			],
+		},
+		{
+			questionText: '얼굴이 창백해보인다는 소리를 자주 듣나요?',
 			answerOptions: [
 				{ answerText: '예', isCorrect: true },
 				{ answerText: '아니오', isCorrect: false }
 			],
 		},
+		{
+			questionText: '손가락을 지그시 눌러 피가 몰려있을 때...',
+			answerOptions: [
+				{ answerText: '탁한 빨간색이다', isCorrect: false },
+				{ answerText: '분홍색이다', isCorrect: true }
+			],
+		},
+		{
+			questionText: '주변에서 나의 첫 인상은...',
+			answerOptions: [
+				{ answerText: '차가운 분위기가 난다', isCorrect: true },
+				{ answerText: '따뜻한 분위기가 난다', isCorrect: false }
+			],
+		},
 	]; //웜,쿨 파악
 
 	const [currentQuestion, setCurrentQuestion] = useState(0); //현재 문제 번호 [변수, 함수]
@@ -40,7 +89,7 @@ const Test = ( { history } ) =>
     const [score_c, setScore_cool] = useState(0); //쿨톤 점수 -> 웜,쿨 리스트에서 사용
 	const [score_w, setScore_warm] = useState(0); //웜톤 점수 -> 웜,쿨 리스트에서 사용
 	const [score, setPersonal] = useState(""); //퍼스널컬러 결과
-	
+	const [num, setNum] = useState(0);
 
 	const handleAnswerOptionClick = (isCorrect) => {  //main 함수 1_웜쿨 검사
 		if (isCorrect) {
@@ -72,6 +121,7 @@ const Test = ( { history } ) =>
 	else{
 		setPersonal('restart');
 	}
+	setNum(num + 1);
 }; //함수2 끝.
 
 	return (
@@ -79,22 +129,29 @@ const Test = ( { history } ) =>
 			{showScore ? ( 
 				<span className='score-section'>
 					<button onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
-					{score === "cool" ? <button onClick={ () => {history.push("/test2")}}>next</button>
-					: <button onClick={ () => {history.push("/test3")}}>next</button>}
+					{num === 1 ?
+					(<div className = "season">
+						{score === "cool" ? (<button onClick={ () => {history.push("/test2")}}>next</button>)
+						: (<button onClick={ () => {history.push("/test3")}}>next</button>)}
+					</div>)
+						: (<div>click me!</div>)}
 				</span>
 			) : (
 				<>
-					<div className='question-section'>
-						<div id='question-count'>
-							<span>Question {currentQuestion + 1}</span>/{questions.length}
-						</div>
-						<div id="question-text">{questions[currentQuestion].questionText}</div>
-					</div>
-					<div className='answer-section'>
-						{questions[currentQuestion].answerOptions.map((answerOption) => (
-							<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
-						))}
+				<head>
+					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
+				</head>
+				<div className='question-section'>
+					<div id='question-count'>
+						<span>Question {currentQuestion + 1}</span>/{questions.length}
+						<div className="animated infinite pulse">{questions[currentQuestion].questionText}</div>
 					</div>
+				</div>
+				<div className='answer-section'>
+					{questions[currentQuestion].answerOptions.map((answerOption) => (
+						<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
+					))}
+				</div>
 				</>
 			)}
 		</div>

@@ -6,28 +6,35 @@ const Test2 = ( { history } ) =>
  {
 	const questions_cool = [
 		{
-			questionText: '머리카락 색이 검정에 가깝다',
+			questionText: '파스텔 같이 은은한 색상보다 쨍한 색이 어울린다',
 			answerOptions: [
-				{ answerText: '예', isCorrect: true },
-				{ answerText: '아니오', isCorrect: false }
+				{ answerText: '예', isCorrect: false },
+				{ answerText: '아니오', isCorrect: true }
 			],
 		},
 		{
-			questionText: '피부에 붉은 기가 많다',
+			questionText: '주변으로 부터 많이 듣는 나의 이미지는?',
 			answerOptions: [
-				{ answerText: '예', isCorrect: true },
-				{ answerText: '아니오', isCorrect: false }
+				{ answerText: '부드럽고, 맑은 느낌', isCorrect: true },
+				{ answerText: '카리스마, 도시적인 느낌', isCorrect: false }
 			],
 		},
 		{
-			questionText: '손목 혈관 색이 초록색이다',
+			questionText: '전체적으로 강한 대비를 이루는 색상이 잘어울린다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: false },
 				{ answerText: '아니오', isCorrect: true }
 			],
 		},
 		{
-			questionText: '햇볕에 장시간 있으면 피부가 붉어진다',
+			questionText: '또렷하고, 선명한 색상이 잘어울린다',
+			answerOptions: [
+				{ answerText: '예', isCorrect: false },
+				{ answerText: '아니오', isCorrect: true }
+			],
+		},
+		{
+			questionText: '회색기가 섞인 톤이 잘어울린다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: true },
 				{ answerText: '아니오', isCorrect: false }
@@ -40,6 +47,7 @@ const Test2 = ( { history } ) =>
 	const [score_c_s, setScore_cool_summer] = useState(0);
 	const [score_c_w, setScore_cool_winter] = useState(0);
 	const [score, setPersonal] = useState(""); //퍼스널컬러 결과
+	const [num, setNum] = useState(0);
 	
 
 	const handleAnswerOptionClick = (isCorrect) => {  //함수3_여쿨, 겨쿨 점수 +1
@@ -70,6 +78,7 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
 	else{
 		setPersonal('restart');
 	}
+	setNum(num + 1);
 }; //함수2 끝.
 
 	return (
@@ -77,22 +86,29 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
 			{showScore_c ? ( 
 				<span className='score-section'>
 					<button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
-					{score === "summer cool" ? <button onClick={ () => {history.push("/summer")}}>next</button>
-					: <button onClick={ () => {history.push("/winter")}}>next</button>}
+					{num === 1 ?
+					(<div className = "season">
+						{score === "summer cool" ? (<button onClick={ () => {history.push("/summer")}}>next</button>)
+						: (<button onClick={ () => {history.push("/winter")}}>next</button>)}
+					</div>)
+						: (<div>click me!</div>)}
 				</span>
 			) : (
 				<>
-					<div className='question-section'>
-						<div id='question-count'>
-							<span>Question {currentQuestion_c + 1}</span>/{questions_cool.length}
-						</div>
-						<div id="question-text">{questions_cool[currentQuestion_c].questionText}</div>
-					</div>
-					<div className='answer-section'>
-						{questions_cool[currentQuestion_c].answerOptions.map((answerOption) => (
-							<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
-						))}
+				 <head>
+					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
+				</head>
+				<div className='question-section'>
+					<div id='question-count'>
+						<span>Question{currentQuestion_c + 1}</span>/{questions_cool.length}
+						<div className="animated infinite pulse">{questions_cool[currentQuestion_c].questionText}</div>
 					</div>
+				</div>
+				<div className='answer-section'>
+					{questions_cool[currentQuestion_c].answerOptions.map((answerOption) => (
+						<button id = "btn_answer" onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
+					))}
+				</div>
 				</>
 			)}
 		</div>

@@ -6,28 +6,35 @@ const Test3 = ( { history } ) =>
  {
 	const questions_warm = [
 		{
-			questionText: '머리카락 색이 검정에 가깝다',
+			questionText: '어두운 색상이 잘어울린다',
 			answerOptions: [
-				{ answerText: '예', isCorrect: true },
-				{ answerText: '아니오', isCorrect: false }
+				{ answerText: '예', isCorrect: false },
+				{ answerText: '아니오', isCorrect: true }
+			],
+		},
+		{
+			questionText: '주변으로 부터 자주 듣는 나의 이미지는?',
+			answerOptions: [
+				{ answerText: '생기발랄', isCorrect: true },
+				{ answerText: '지적이고, 성숙한', isCorrect: false }
 			],
 		},
 		{
-			questionText: '피부에 붉은 기가 많다',
+			questionText: '나는 동안 이미지이다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: true },
 				{ answerText: '아니오', isCorrect: false }
 			],
 		},
 		{
-			questionText: '손목 혈관 색이 초록색이다',
+			questionText: '진하고, 톤다운 된 색상이 잘어울린다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: false },
 				{ answerText: '아니오', isCorrect: true }
 			],
 		},
 		{
-			questionText: '햇볕에 장시간 있으면 피부가 붉어진다',
+			questionText: '피부가 투명하지만 얇아 주근깨가 많이 보인다',
 			answerOptions: [
 				{ answerText: '예', isCorrect: true },
 				{ answerText: '아니오', isCorrect: false }
@@ -41,6 +48,7 @@ const Test3 = ( { history } ) =>
 	const [score_w_s, setScore_warm_spring] = useState(0);
 	const [score_w_a, setScore_warm_autumn] = useState(0);
 	const [score, setPersonal] = useState(""); //퍼스널컬러 결과
+	const [num, setNum] = useState(0);
 	
 
 	const handleAnswerOptionClick = (isCorrect) => {  //main 함수 1_봄, 가을 검사
@@ -71,6 +79,7 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
 	else{
 		setPersonal('restart');
 	}
+	setNum(num + 1);
 }; //함수2 끝.
 
 	return (
@@ -78,16 +87,23 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
 			{showScore_w ? ( 
 				<span className='score-section'>
 					<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
-					{score === "spring warm" ? <button onClick={ () => {history.push("/spring")}}>next</button>
-					: <button onClick={ () => {history.push("/autumn")}}>next</button>}
+					{num === 1 ?
+					(<div className = "season">
+						{score === "spring warm" ? (<button onClick={ () => {history.push("/spring")}}>next</button>)
+						: (<button onClick={ () => {history.push("/autumn")}}>next</button>)}
+					</div>)
+						: (<div>click me!</div>)}
 				</span>
 			) : (
 				<>
+				 <head>
+					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
+				</head>
 					<div className='question-section'>
 						<div id='question-count'>
 							<span>Question {currentQuestion_w + 1}</span>/{questions_warm.length}
+							<div className="animated infinite pulse">{questions_warm[currentQuestion_w].questionText}</div>
 						</div>
-						<div id="question-text">{questions_warm[currentQuestion_w].questionText}</div>
 					</div>
 					<div className='answer-section'>
 						{questions_warm[currentQuestion_w].answerOptions.map((answerOption) => (

@@ -137,7 +137,8 @@
             </p>
             <div class="tm-next">
               <p>
-                <br><a href="#work" class="tm-intro-text tm-btn-primary">테스트 하기</a><br>
+                <br><a href="http://josutest.pythonanywhere.com/" class="tm-intro-text tm-btn-primary">테스트 하기</a><br>
+                <br><a href="https://leesubin-khu.github.io/color/" class="tm-intro-text tm-btn-primary">자가진단 하기</a><br>
                 <p>
                   구현 중...(현재는 테스트 하기 눌러도 아무 이벤트도 없습니다.)
                 </p>