Merge branch 'test1' into 'master'

spring 결과 나타내기



See merge request !5

-[{"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"},{"size":625,"mtime":1606850624017,"results":"7","hashOfConfig":"8"},{"size":493,"mtime":1606850624022,"results":"9","hashOfConfig":"8"},{"size":3347,"mtime":1606849098689,"results":"10","hashOfConfig":"8"},{"size":238,"mtime":1606589880919,"results":"11","hashOfConfig":"8"},{"size":3249,"mtime":1606848650428,"results":"12","hashOfConfig":"8"},{"size":3313,"mtime":1606851847769,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pqxpq",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26"},"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",["27"],"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",["28"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js",["29","30"],"import React, { useState } from 'react'; //리액트 불러오기\r\nimport console from 'react-console'; //리액트 콘솔_크롬으로 실행\r\nimport './test.css';//test.css 불러오기\r\n\r\nconst Test3 = ( { history } ) =>\r\n {\r\n\tconst questions_warm = [\r\n\t\t{\r\n\t\t\tquestionText: '머리카락 색이 검정에 가깝다',\r\n\t\t\tanswerOptions: [\r\n\t\t\t\t{ answerText: '예', isCorrect: true },\r\n\t\t\t\t{ answerText: '아니오', isCorrect: false }\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\tquestionText: '피부에 붉은 기가 많다',\r\n\t\t\tanswerOptions: [\r\n\t\t\t\t{ answerText: '예', isCorrect: true },\r\n\t\t\t\t{ answerText: '아니오', isCorrect: false }\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\tquestionText: '손목 혈관 색이 초록색이다',\r\n\t\t\tanswerOptions: [\r\n\t\t\t\t{ answerText: '예', isCorrect: false },\r\n\t\t\t\t{ answerText: '아니오', isCorrect: true }\r\n\t\t\t],\r\n\t\t},\r\n\t\t{\r\n\t\t\tquestionText: '햇볕에 장시간 있으면 피부가 붉어진다',\r\n\t\t\tanswerOptions: [\r\n\t\t\t\t{ answerText: '예', isCorrect: true },\r\n\t\t\t\t{ answerText: '아니오', isCorrect: false }\r\n\t\t\t],\r\n\t\t},\r\n\t]; //봄웜톤, 가을웜톤 파악\r\n\r\n\r\n\tconst [currentQuestion_w, setCurrentQuestion] = useState(0); //현재 문제 번호 [변수, 함수]\r\n\tconst [showScore_w, setShowScore] = useState(false); //결과 보여줄까?\r\n\tconst [score_w_s, setScore_warm_spring] = useState(0);\r\n\tconst [score_w_a, setScore_warm_autumn] = useState(0);\r\n\tconst [score, setPersonal] = useState(\"\"); //퍼스널컬러 결과\r\n\t\r\n\r\n\tconst handleAnswerOptionClick = (isCorrect) => {  //main 함수 1_웜쿨 검사\r\n\t\tif (isCorrect) {\r\n\t\t\tsetScore_warm_spring(score_w_s+1);\r\n\t\t}\r\n\t\telse{\r\n\t\t\tsetScore_warm_autumn(score_w_a+1);\r\n\t\t} ///웜,쿨 if문으로 점수 올리기\r\n\r\n\t\tconst nextQuestion = currentQuestion_w + 1;\r\n\t\tif (nextQuestion < questions_warm.length) {\r\n\t\t\tsetCurrentQuestion(nextQuestion);\r\n\t\t}\r\n\t\telse{\r\n\t\t\tsetShowScore(true); //questions 끝나면 점수 보여줄까? true -> className='score-section'\r\n\t\t}\r\n       \r\n }; //함수1 끝.\r\n\r\nconst handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨쿨 점수로 결과 구하기\r\n\tif(score_w_s>score_w_a){\r\n\t\tsetPersonal('spring warm');\r\n\t}\r\n\telse if(score_w_s<score_w_a){\r\n\t\tsetPersonal('autumn warm');\r\n\t}\r\n\telse{\r\n\t\tsetPersonal('restart');\r\n\t}\r\n}; //함수3 끝.\r\n\r\n\treturn (\r\n\t\t<div className='app'>\r\n\t\t\t{showScore_w ? ( \r\n\t\t\t\t<span className='score-section'>\r\n\t\t\t\t\tYou scored {score} out of {questions_warm.length}\r\n\t\t\t\t\t<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>\r\n\t\t\t\t\t{score === \"spring warm\" ? <img id = \"season\" src={require(\"./season/spring.jpg\")}/>\r\n\t\t\t\t\t: <button onClick={ () => {history.push(\"/test3\")}}>next</button>}\r\n\t\t\t\t</span>\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<div className='question-section'>\r\n\t\t\t\t\t\t<div className='question-count'>\r\n\t\t\t\t\t\t\t<span>Question {currentQuestion_w + 1}</span>/{questions_warm.length}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className='question-text'>{questions_warm[currentQuestion_w].questionText}</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className='answer-section'>\r\n\t\t\t\t\t\t{questions_warm[currentQuestion_w].answerOptions.map((answerOption) => (\r\n\t\t\t\t\t\t\t<button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\n\r\nexport default Test3;",{"ruleId":"31","severity":1,"message":"32","line":1,"column":17,"nodeType":"33","messageId":"34","endLine":1,"endColumn":26},{"ruleId":"31","severity":1,"message":"35","line":2,"column":8,"nodeType":"33","messageId":"34","endLine":2,"endColumn":15},{"ruleId":"31","severity":1,"message":"35","line":2,"column":8,"nodeType":"33","messageId":"34","endLine":2,"endColumn":15},{"ruleId":"36","severity":1,"message":"37","line":82,"column":33,"nodeType":"38","endLine":82,"endColumn":90},"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'console' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement"]
\ 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"},{"size":1032,"mtime":1607016219720,"results":"8","hashOfConfig":"9"},{"size":493,"mtime":1607016099321,"results":"10","hashOfConfig":"9"},{"size":3347,"mtime":1607016031275,"results":"11","hashOfConfig":"9"},{"size":238,"mtime":1606589880919,"results":"12","hashOfConfig":"9"},{"size":3249,"mtime":1606848650428,"results":"13","hashOfConfig":"9"},{"size":3338,"mtime":1607016209869,"results":"14","hashOfConfig":"9"},{"size":293,"mtime":1607016257573,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pqxpq",{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","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",["30"],"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",["31"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\test3.js",["32"],"C:\\Users\\subin\\Desktop\\khuhub_color\\Find_your_own_personal_color\\front\\src\\spring.js",[],{"ruleId":"33","severity":1,"message":"34","line":1,"column":17,"nodeType":"35","messageId":"36","endLine":1,"endColumn":26},{"ruleId":"33","severity":1,"message":"37","line":2,"column":8,"nodeType":"35","messageId":"36","endLine":2,"endColumn":15},{"ruleId":"33","severity":1,"message":"37","line":2,"column":8,"nodeType":"35","messageId":"36","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

@@ -4,6 +4,10 @@ import Home from './Home';
 import Test from './test';
 import Test from './test';
 import Test2 from './test2';
 import Test2 from './test2';
 import Test3 from './test3';
 import Test3 from './test3';
+import Spring from './spring';
+import Summer from './summer';
+import Autumn from './autumn';
+import Winter from './winter';
 
 
 
 
 class App extends Component {
 class App extends Component {
@@ -15,6 +19,10 @@ class App extends Component {
           <Route path="/test" exact component={Test} />
           <Route path="/test" exact component={Test} />
           <Route path="/test2" exact component={Test2} />    
           <Route path="/test2" exact component={Test2} />    
           <Route path="/test3" exact component={Test3} />
           <Route path="/test3" exact component={Test3} />
+          <Route path="/spring?ver=<%=version%>" exact component={Spring} />
+          <Route path="/summer?ver=0" exact component={Summer} />
+          <Route path="/autumn?ver=0" exact component={Autumn} />
+          <Route path="/winter?ver=0" exact component={Winter} />
         </BrowserRouter>
         </BrowserRouter>
       </div>
       </div>
     )
     )

 body 
 body 
         {
         {
-            background-image : url('main.png');
+            background-image : url('./main.png');
             background-repeat : no-repeat;
             background-repeat : no-repeat;
             background-size : cover;
             background-size : cover;
            
            

+body 
+        {
+            background-image : url('./season/spring.jpg');
+            background-repeat : no-repeat;
+            background-size : cover;
+           
+        }
+        @font-face 
+        {
+            font-family: "title";
+            src: url("Christmas Time Personal Use.ttf");
+        }
+        @font-face 
+        {
+            font-family: "button";
+            src: url("Monday Monkey.ttf");
+        }
+        #back_btn
+        {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+            font-family: "button";
+            position: relative;
+            top: -50px;
+            left: 550px;
+        }
+        #btn_back
+        {
+            border: 1px;
+            color:rgb(255, 255, 255);
+            padding: 30px;
+            align-items: center;
+            text-align: center; 
+            font-size: 40px;
+            background-color: rgba(255,255,255,0.5);
+            
+        }
+        #btn_back:hover
+        {
+            background-color: rgb(167, 255, 246);
+        }
\ No newline at end of file

+import React from 'react';
+import './spring.css?ver=1.3';
+
+const Spring = ( { history } ) => 
+{
+    return (
+            <div id="btn_back">
+                <button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
+            </div>
+    );
+}
+
+export default Spring;
\ No newline at end of file

@@ -79,9 +79,8 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨
 				<span className='score-section'>
 				<span className='score-section'>
 					You scored {score} out of {questions_warm.length}
 					You scored {score} out of {questions_warm.length}
 					<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
 					<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
-					{score === "spring warm" ? <ImageBackground source={require("./season/spring.jpg")} style={{width:"100%",height:"100%"}}>
-					</ImageBackground>
-					: <button onClick={ () => {history.push("/test3")}}>next</button>}
+					{score === "spring warm" ? <button onClick={ () => {history.push("/spring?ver=<%=version%>")}}>next</button>
+					: <button onClick={ () => {history.push("/autumn")}}>next</button>}
 				</span>
 				</span>
 			) : (
 			) : (
 				<>
 				<>