이수빈 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
조수연
3603166b 2 parents 63814657 a7cffbc4

Merge branch 'test1' into 'master' 

Test 마지막 수정



See merge request !19
Expand all
Inline Side-by-side
Showing 16 changed files with 291 additions and 77 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",
......@@ -12301,6 +12337,36 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-native-svg": {
"version": "12.1.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.0.tgz",
"integrity": "sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w==",
"requires": {
"css-select": "^2.1.0",
"css-tree": "^1.0.0-alpha.39"
},
"dependencies": {
"css-tree": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
"integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
"requires": {
"mdn-data": "2.0.14",
"source-map": "^0.6.1"
}
},
"mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
}
}
},
"react-reconciler": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",
......@@ -12440,6 +12506,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,15 @@
"@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-native-svg": "^12.1.0",
"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,8 @@ body
background-image : url('./main.png');
background-repeat : no-repeat;
background-size : cover;
align-items: center;
text-align: center;
}
#home
{
......@@ -22,40 +23,49 @@ 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;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-family:"button";
position: relative;
top: 100px;
left: 435px;
border: none;
border-radius: 45px;
width: 150px;
height: 70px;
color:rgb(255, 255, 255);
justify-content: center;
font-family: 'button';
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 80;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 50px;
background-color: rgba(255, 255, 255, 0);
}
#btn_group button
{
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);
bottom: 30%;
}
#btn_group button:hover
{
background-color: rgb(167, 255, 246);
}
\ No newline at end of file
background-color: rgb(255, 255, 255);
box-shadow: 0px 15px 20px #2f016466;
color: #fff;
transform: translateY(-7px);
}
button:hover, button:focus
{ animation-duration: 3s; animation-name: rainbow; animation-iteration-count: infinite; }
@keyframes rainbow
{
0% { color: #ff6060; }
15% { color: #ffa166; }
30% { color: #ffd96f }
45% { color: #8cff7d; }
60% { color: #7cb7ff; }
75% { color: #7d7dff; }
90% { color: #a781ff; }
100% { color: #f280ff; }
}
\ No newline at end of file
......
import React from 'react';
import './Home.css';
import './Home.css?v=1.0';
import './snow.css';
const Snowflake = ({ style }) => {
return (
<p className="snow-flake" style={style}>
{"\u2745"}
</p>
);
};
const makeSnowFlakes = () => {
let animationDelay = "0.1s";
let fontSize = "14px";
const arr = Array.from("Merry Christmas");
return arr.map((el, i) => {
animationDelay = `${(Math.random() * 80).toFixed(100)}s`;
fontSize = `${Math.floor(Math.random() * 10) + 25}px`;
const style = {
animationDelay,
fontSize,
};
return <Snowflake key={i} style={style} />; });
};
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>
<div className="snow-container">
{makeSnowFlakes()}
</div>
<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 fadeInDown'>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
......@@ -7,12 +7,15 @@
#season_class
{
text-align: center;
width: auto;
height: auto;
padding: auto;
border: auto;
}
.img
{
width: 100px;
height: 150px;
object-fit: cover;
max-width:100%;
height:auto;
}
@font-face
{
......@@ -23,10 +26,4 @@
{
font-family: "button";
src: url("Monday Monkey.ttf");
}
#back_btn
{
}
#btn_back
{
}
\ No newline at end of file
......
.snow-container{
display: flex;
justify-content: space-between;
}
.snow-flake {
color: rgb(255, 255, 255);
animation: fall 2.5s linear infinite;
}
@keyframes fall {
0% { opacity: 1;color: #ff7777; }
15% { opacity: 0.9;color: #ffa166; }
30% { opacity: 0.9;color: #ffd96f }
45% { opacity: 0.9;color: #8cff7d; }
60% { opacity: 0.9;color: #7cb7ff; }
75% { opacity: 0.9;color: #7d7dff; }
90% { opacity: 0.9;color: #a781ff; }
100% { transform: translate(0, 200px);
opacity: 0.3;color: #f280ff; }
}
\ No newline at end of file
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: 15px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255, 255, 255, 0);
font-family: "Q";
top: 30px;
}
#result
{
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
color:rgb(0, 0, 0);
justify-content: center;
align-items: center;
text-align: center;
font-family: 'result', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 1000;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
background-color: rgba(255, 255, 255, 0);
}
#next
{
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
color:rgb(0, 0, 0);
justify-content: center;
align-items: center;
text-align: center;
font-family: 'result', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 1000;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
background-color: rgba(255, 255, 255, 0);
}
#result:hover
{
background-color: hsl(253, 100%, 16%);
box-shadow: 0px 15px 20px #2f016466;
color: #fff;
transform: translateY(-7px);
}
#question-count
{
font-size: 50px;
......@@ -16,7 +77,12 @@ body
}
#test
{
text-align: center!important;
height: 100vh;
background-image : url("https://source.unsplash.com/random/1920x1080/?color");
background-size : cover;
background-repeat : no-repeat;
padding: 12%;
text-align: center;
line-height: 100px;
font-family: "Q";
}
......@@ -35,11 +101,17 @@ body
font-family: "Q";
src: url("po.ttf");
}
@font-face
{
font-family: "result";
src: url("YummyCupcakes.ttf");
}
#btn_answer
{
border: 1px;
color:rgb(255, 255, 255);
padding: 10px;
justify-content: center;
align-items: center;
text-align: center;
font-size: 40px;
......
......@@ -126,21 +126,21 @@ const Test = ( { history } ) =>
return (
<div id='test'>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
{showScore ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
<button className="animated infinite pulse" 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>)}
{score === "cool" ? (<button id='next' onClick={ () => {history.push("/test2")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/test3")}}>next</button>)}
</div>)
: (<div>click me!</div>)}
: (<div>click result!</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 + 1}</span>/{questions.length}
......
......@@ -83,21 +83,21 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
return (
<div id='test'>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
{showScore_c ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
<button className="animated infinite pulse" id="result" onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
{num === 1 ?
(<div className = "season">
{score === "summer cool" ? (<button onClick={ () => {history.push("/summer")}}>next</button>)
: (<button onClick={ () => {history.push("/winter")}}>next</button>)}
{score === "summer cool" ? (<button id='next' onClick={ () => {history.push("/summer")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/winter")}}>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_c + 1}</span>/{questions_cool.length}
......
......@@ -84,21 +84,22 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
return (
<div id='test'>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
{showScore_w ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
<button className="animated infinite pulse" id="result" onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
{num === 1 ?
(<div className = "season">
{score === "spring warm" ? (<button onClick={ () => {history.push("/spring")}}>next</button>)
: (<button onClick={ () => {history.push("/autumn")}}>next</button>)}
{score === "spring warm" ? (<button id='next' onClick={ () => {history.push("/spring")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/autumn")}}>next</button>)}
</div>)
: (<div>click me!</div>)}
: (<div className="animated infinite pulse">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}
......
......@@ -6,7 +6,7 @@ const Winter = ( { history } ) =>
{
return (
<div className='season_class'>
<img src = {winter} width='1300' height='600' alt = "winter"/>
<img src = {winter} alt = "winter"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
......