조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
151a2934 1 parent 05048a4b

랜덤배경 api 적용 및 test.css 수정

Expand all
Inline Side-by-side
Showing 11 changed files with 102 additions and 32 deletions
This diff is collapsed. Click to expand it.
......@@ -2309,11 +2309,33 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.5.tgz",
"integrity": "sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ=="
},
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
},
"@types/q": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
"@types/react": {
"version": "17.0.0",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz",
"integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==",
"requires": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
},
"@types/react-transition-group": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-1.1.6.tgz",
"integrity": "sha512-zzoJIWFAqvI3EwDizpeJoShUEe6dVIw3EDRmnqLlpmQgfbaw6XUmJYFVOiAyZVnO/9L7zPSe3kN8aZ2q3JP2DA==",
"requires": {
"@types/react": "*"
}
},
"@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
......@@ -4734,6 +4756,11 @@
}
}
},
"csstype": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
"integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
},
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
......@@ -5055,6 +5082,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
"integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
......@@ -12440,6 +12476,17 @@
"workbox-webpack-plugin": "5.1.4"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
......
......@@ -6,12 +6,14 @@
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"@types/react-transition-group": "^1.1.6",
"animate.css": "^4.1.1",
"react": "^17.0.1",
"react-console": "^1.0.0-rc.2",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-transition-group": "^4.4.1",
"web-vitals": "^0.2.4"
},
"scripts": {
......
No preview for this file type
......@@ -3,7 +3,6 @@ body
background-image : url('./main.png');
background-repeat : no-repeat;
background-size : cover;
}
#home
{
......@@ -22,17 +21,6 @@ body
font-family: "button";
src: url("Monday Monkey.ttf");
}
#soo_btn1
{
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;
}
#soo_btn2
{
border-top-left-radius: 5px;
......@@ -41,8 +29,9 @@ body
border-bottom-right-radius: 5px;
font-family:"button";
position: relative;
top: 100px;
left: 435px;
top: 80px;
left: 550px;
text-align: center;
}
#btn_group button
{
......@@ -58,4 +47,5 @@ body
#btn_group button:hover
{
background-color: rgb(167, 255, 246);
}
\ No newline at end of file
}
\ No newline at end of file
......
import React from 'react';
import './Home.css';
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'>
<div className='animated infinite pulse'>findyourcolor</div>
</center>
<div id="btn_group">
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
<div id='root'>
<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'>
<div className='animated infinite pulse'>findyourcolor</div>
</center>
<div id="btn_group">
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
</div>
</div>
</div>
</div>
</>
);
}
......
No preview for this file type
body
body
{
background-image : url('main.png');
background-repeat : no-repeat;
background-size : cover;
color:rgb(230, 255, 255);
width: auto;
height: auto;
padding: auto;
border: auto;
}
span
{
border: 1px;
color:rgb(255, 255, 255);
padding: 10px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255, 255, 255, 0);
font-family: "Q";
top: 30px;
}
#result
{
border: 0%;
color:rgb(0, 0, 0);
justify-content: center;
align-items: center;
text-align: center;
font-family: "button";
font-size: 80%;
background-color: hsl(182, 100%, 88%);
}
#question-count
{
......@@ -16,6 +39,10 @@ body
}
#test
{
background-image : url("https://source.unsplash.com/random/1920x1080/?color");
background-size : cover;
background-repeat : no-repeat;
padding: 12%;
text-align: center!important;
line-height: 100px;
font-family: "Q";
......@@ -40,6 +67,7 @@ body
border: 1px;
color:rgb(255, 255, 255);
padding: 10px;
justify-content: center;
align-items: center;
text-align: center;
font-size: 40px;
......
......@@ -128,13 +128,13 @@ const Test = ( { history } ) =>
<div id='test'>
{showScore ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
<button id="result" onClick={() => handlePersonalScore(score_c,score_w)}>result</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>)}
: (<div>click result!</div>)}
</span>
) : (
<>
......