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

이수빈
Commit 151a2934bfab685f8386735a09f5d96cc49fa40e 151a2934 1 parent 05048a4b
Showing 11 changed files with 102 additions and 32 deletions
front/.eslintcache
front/package-lock.json
front/package.json
front/public/favicon.ico
front/public/logo192.png
front/public/logo512.png
front/src/Home.css
front/src/Home.js
front/src/YummyCupcakes.ttf
front/src/test.css
front/src/test.js
--- a/front/.eslintcache
View file @151a293
+++ b/front/.eslintcache
View file @151a293
--- a/front/package-lock.json
View file @151a293
+++ b/front/package-lock.json
View file @151a293
@@ -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",
--- a/front/package.json
View file @151a293
+++ b/front/package.json
View file @151a293
@@ -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": {
--- a/front/public/favicon.ico deleted 100644 → 0
View file @05048a4
+++ b/front/public/favicon.ico deleted 100644 → 0
View file @05048a4
--- a/front/public/logo192.png deleted 100644 → 0
View file @05048a4
+++ b/front/public/logo192.png deleted 100644 → 0
View file @05048a4
--- a/front/public/logo512.png deleted 100644 → 0
View file @05048a4
+++ b/front/public/logo512.png deleted 100644 → 0
View file @05048a4
--- a/front/src/Home.css
View file @151a293
+++ b/front/src/Home.css
View file @151a293
@@ -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;
+            top: 80px;
-            left: 435px;
+            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
--- a/front/src/Home.js
View file @151a293
+++ b/front/src/Home.js
View file @151a293
 import React from 'react';
 import './Home.css';
+
 const Home = ( { history } ) => 
 {
     return (
         <>
-        <head>
+            <div id='root'>
-			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
+                <head>
-		</head>
+                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
-        <div className='home_display'>
+                </head>
-            <center id='home'>
+                <div className='home_display'>
-                <div className='animated infinite pulse'>findyourcolor</div>
+                <center id='home'>
-            </center>
+                    <div className='animated infinite pulse'>findyourcolor</div>
-            <div id="btn_group">
+                </center>
-                <button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
+                    <div id="btn_group">
+                        <button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
+                    </div>
+                </div>
             </div>
-        </div>
         </>
     );
 }
--- a/front/src/YummyCupcakes.ttf 0 → 100644
View file @151a293
+++ b/front/src/YummyCupcakes.ttf 0 → 100644
View file @151a293
--- a/front/src/test.css
View file @151a293
+++ b/front/src/test.css
View file @151a293
-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;
--- a/front/src/test.js
View file @151a293
+++ b/front/src/test.js
View file @151a293
@@ -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>
 			) : (
 				<>