feat: 이미지 슬라이더 작성 중

이준호
Commit 4af4ebd872b892a45b2e20bf8928bc45ed065f9b 4af4ebd8 1 parent 56d58621
Showing 12 changed files with 250 additions and 56 deletions
package.json
src/App.css
src/App.js
src/App.scss
src/components/card/Card.js
src/components/card/Card.scss
src/components/silder/Slider.js
src/index.scss
src/pages/MainPage.js
src/pages/SurveyPage.js
src/pages/SurveyPage.scss
yarn.lock
--- a/package.json
View file @4af4ebd
+++ b/package.json
View file @4af4ebd
@@ -14,6 +14,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "sass-loader": "^10.1.0",
+    "styled-components": "^5.2.1",
+    "swiper": "^6.3.5",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
--- a/src/App.css deleted 100644 → 0
View file @56d5862
+++ b/src/App.css deleted 100644 → 0
View file @56d5862
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
--- a/src/App.js
View file @4af4ebd
+++ b/src/App.js
View file @4af4ebd
-import './App.css';
+import "./App.scss";
-import MainPage from './pages/MainPage';
+import MainPage from "./pages/MainPage";
-import {BrowserRouter,Route,Switch} from 'react-router-dom';
+import SurveyPage from "./pages/SurveyPage";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 function App() {
   return (
     <BrowserRouter>
+      <div className="App">
         <Switch>
-        <Route exact to="/" component={MainPage}/>
+          <Route exact path="/" component={MainPage} />
-        <Route to="/survey"></Route>
+          <Route path="/survey" component={SurveyPage} />
         </Switch>
+      </div>
     </BrowserRouter>
   );
 }
--- a/src/App.scss 0 → 100644
View file @4af4ebd
+++ b/src/App.scss 0 → 100644
View file @4af4ebd
+.App{
+  min-width: 600px;
+}
\ No newline at end of file
--- a/src/components/card/Card.js
View file @4af4ebd
+++ b/src/components/card/Card.js
View file @4af4ebd
 import React from 'react';
+import './Card.scss';
-function Card(){
+function Card({data,onClick}){
+    // type: true false
     return(
         <>
-            <div className="card">
+            <div className="card" onClick={onClick}>
-                <div className="card__content">"나는 오랫동안 서 있을 수 있다."</div>
+                <div className="card__desc">{data.desc}</div>
+                <div className="card__content">{data.ans1}</div>
+                <div className="card__content">{data.ans2}</div>
             </div>
         </>        
     );
 }
+// 나중에 데이터 넘어오면 넘어온 데이터로 카드 업데이트
 export default Card;
\ No newline at end of file
--- a/src/components/card/Card.scss
View file @4af4ebd
+++ b/src/components/card/Card.scss
View file @4af4ebd
 .card{
-    width: 5rem;
+    display: flex;
-    height: 1rem;
+    flex-direction: column;
+    align-items: center;
+    width: 30rem;
+    font-size: 2rem;
+    font-weight: bold;
+
+    &__desc{
+        font-size: 2rem;
+        font-weight: bold;
+        margin-bottom: 6rem;
+    }
+    
+    &__content{
+        cursor: pointer;
+        width: 25rem;
+        height: 5rem;
+        margin: 1rem;
+        font-size: 1rem;
+        border-radius: 1rem;
+        color: #ffffff;
         background-color: #536349;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }
\ No newline at end of file
--- a/src/components/silder/Slider.js 0 → 100644
View file @4af4ebd
+++ b/src/components/silder/Slider.js 0 → 100644
View file @4af4ebd
+import { Swiper, SwiperSlide } from 'swiper/react';
+// Import Swiper styles
+import 'swiper/swiper.scss';
+
+export default () => {
+    return (
+      <Swiper
+        spaceBetween={50}
+        slidesPerView={3}
+        onSlideChange={() => console.log('slide change')}
+        onSwiper={(swiper) => console.log(swiper)}
+      >
+        <SwiperSlide>Slide 1</SwiperSlide>
+        <SwiperSlide>Slide 2</SwiperSlide>
+        <SwiperSlide>Slide 3</SwiperSlide>
+        <SwiperSlide>Slide 4</SwiperSlide>
+      </Swiper>
+    );
+  };
\ No newline at end of file
--- a/src/index.scss
View file @4af4ebd
+++ b/src/index.scss
View file @4af4ebd
 body {
   font-size: 10px;
   margin: 0;
+  box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
--- a/src/pages/MainPage.js
View file @4af4ebd
+++ b/src/pages/MainPage.js
View file @4af4ebd
@@ -3,10 +3,10 @@ import './MainPage.scss';
 import ProgressBar from "../components/progressbar/ProgressBar";
 import {Button} from "antd";
-function MainPage(){
+function MainPage({history}){
     const [percent,setPercent] = useState(30);
     const onClick = () => {
-
+        history.push('/survey');
     }
     return(
--- a/src/pages/SurveyPage.js
View file @4af4ebd
+++ b/src/pages/SurveyPage.js
View file @4af4ebd
-import React from 'react';
+import React, { useState, useRef } from "react";
+import Card from "../components/card/Card";
+import ProgressBar from "../components/progressbar/ProgressBar";
+import "./SurveyPage.scss";
-function SurveyPage(){
+const cardList = [
+  {
+    index: 0,
+    desc: "나는 오랫동안 서 있을 수 있다.",
+    ans1: "그렇습니다.",
+    ans2: "아닙니다.",
+  },
+  {
+    index: 1,
+    desc: "배경호는 오랫동안 서 있을 수 있다.",
+    ans1: "그렇습니다.",
+    ans2: "아닙니다.",
+  },
+  {
+    index: 2,
+    desc: "이준호는 오랫동안 서 있을 수 있다.",
+    ans1: "그렇습니다.",
+    ans2: "아닙니다.",
+  },
+  {
+    index: 3,
+    desc: "박기홍은 오랫동안 서 있을 수 있다.",
+    ans1: "그렇습니다.",
+    ans2: "아닙니다.",
+  },
+];
+function SurveyPage() {
+  const [curIdx, setCurIdx] = useState(0);
+  const clickToNext = (index) =>{
+    setCurIdx(curIdx+1);
+  }
+
+  return (
+    <div className="container">
+      <div className="container__progress">
+        <ProgressBar percent={curIdx*10} />
+      </div>
+      <div className="slider">
+          {cardList.map((card) => (
+              <div className="slider__wrapper">
+                  <Card 
+                    data={card} 
+                    onClick={()=>clickToNext(card.index)}
+                    style={{
+                        transform: `translateX(${-30*card.index}rem)`,
+                        transition: "0.5s",
+                    }}
+                  />
+            </div>
+          ))}
+      </div>
+    </div>
+  );
 }
 export default SurveyPage;
--- a/src/pages/SurveyPage.scss 0 → 100644
View file @4af4ebd
+++ b/src/pages/SurveyPage.scss 0 → 100644
View file @4af4ebd
+.container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10rem;
+}
+
+.slider{
+    border: 1px solid gray;
+    width: 30rem;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    // overflow: hidden;
+
+    &__wrapper{
+        border: 1px solid red;
+        width: 30rem;
+    }
+
+    &__desc{
+        font-size: 2rem;
+        font-weight: bold;
+        margin-bottom: 2rem;
+    }
+}
+
+// swiper
--- a/yarn.lock
View file @4af4ebd
+++ b/yarn.lock
View file @4af4ebd
@@ -131,7 +131,7 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
-"@babel/helper-annotate-as-pure@^7.10.4":
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
   integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
@@ -1285,7 +1285,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
-"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5":
+"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.4.5":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.5.tgz#78a0c68c8e8a35e4cacfd31db8bb303d5606f095"
   integrity sha512-xa15FbQnias7z9a62LwYAA5SZZPkHIXpd42C6uW68o8uTuua96FHZy1y61Va5P/i83FAAcMpW8+A/QayntzuqA==
@@ -1346,6 +1346,28 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.1.6.tgz#2d0ea7d433a34b1682e2e312e8a04812210fcc60"
   integrity sha512-9RUTT3omv+5mSYFVsX143R7cTDQmT1FibCzoUVmO294mRIT0Sc8dk5srN27BTH0JKzQDWKkNCKh6q/+EkNfpkA==
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c"
@@ -2916,6 +2938,21 @@ babel-plugin-named-asset-import@^0.3.7:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
+"babel-plugin-styled-components@>= 1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
+  integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3415,6 +3452,11 @@ camelcase@^6.0.0, camelcase@^6.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -4030,6 +4072,11 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -4101,6 +4148,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4548,6 +4604,13 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
+dom7@^3.0.0-alpha.7:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
+  integrity sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==
+  dependencies:
+    ssr-window "^3.0.0-alpha.1"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -6027,7 +6090,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11618,6 +11681,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
+ssr-window@^3.0.0-alpha.1, ssr-window@^3.0.0-alpha.4:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
+  integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
+
 ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
@@ -11921,6 +11989,22 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
+styled-components@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -11935,7 +12019,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -11988,6 +12072,14 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
+swiper@^6.3.5:
+  version "6.3.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.3.5.tgz#7444b680d0fdafe84859825ac3559b5b01bd1916"
+  integrity sha512-MZkkVJ+sXukp6G3Z3BlKayhBjRIQuO1TZaTlH7ooI/0qbH0kkmItFMjFo19nOOsJaDXglA32xqyc9KCtmbJv0w==
+  dependencies:
+    dom7 "^3.0.0-alpha.7"
+    ssr-window "^3.0.0-alpha.4"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"