조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
22895653 1 parent bd6d2705

test 버튼 수정 및 animate.css 추가

Inline Side-by-side
Showing 7 changed files with 67 additions and 30 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","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":4885,"mtime":1607272644430,"results":"13","hashOfConfig":"11"},{"size":238,"mtime":1606589880919,"results":"14","hashOfConfig":"11"},{"size":3567,"mtime":1607273753579,"results":"15","hashOfConfig":"11"},{"size":3522,"mtime":1607274327406,"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,20 @@ 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>
</>
);
}
......
......@@ -89,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) {
......@@ -121,6 +121,7 @@ const Test = ( { history } ) =>
else{
setPersonal('restart');
}
setNum(num + 1);
}; //함수2 끝.
return (
......@@ -128,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>
......
......@@ -47,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
......@@ -77,6 +78,7 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
else{
setPersonal('restart');
}
setNum(num + 1);
}; //함수2 끝.
return (
......@@ -84,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>
......
......@@ -48,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_봄, 가을 검사
......@@ -78,6 +79,7 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
else{
setPersonal('restart');
}
setNum(num + 1);
}; //함수2 끝.
return (
......@@ -85,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) => (
......