이수빈 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
ea910909 1 parent fc813c7f

spring 결과 나타내기

Inline Side-by-side
Showing 9 changed files with 68 additions and 5 deletions
[{"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 Test2 from './test2';
import Test3 from './test3';
import Spring from './spring';
import Summer from './summer';
import Autumn from './autumn';
import Winter from './winter';
class App extends Component {
......@@ -15,6 +19,10 @@ class App extends Component {
<Route path="/test" exact component={Test} />
<Route path="/test2" exact component={Test2} />
<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>
</div>
)
......
body
{
background-image : url('main.png');
background-image : url('./main.png');
background-repeat : no-repeat;
background-size : cover;
......
File mode changed
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
File mode changed
......@@ -79,9 +79,8 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨
<span className='score-section'>
You scored {score} out of {questions_warm.length}
<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>
) : (
<>
......
File mode changed