김원진 / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
77a07d7f 1 parent 63a71dbb

[REFACTOR] 파일 구조 및 scss 파일 정리

Inline Side-by-side
Showing 11 changed files with 69 additions and 113 deletions
...@@ -2,15 +2,12 @@ ...@@ -2,15 +2,12 @@
2 <html lang="ko"> 2 <html lang="ko">
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 - <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta name="theme-color" content="#000000" /> 6 <meta name="theme-color" content="#000000" />
8 <meta 7 <meta
9 name="description" 8 name="description"
10 content="Web site created using create-react-app" 9 content="Web site created using create-react-app"
11 /> 10 />
12 - <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 <title>React App</title> 11 <title>React App</title>
15 </head> 12 </head>
16 <body> 13 <body>
......
1 -{
2 - "short_name": "React App",
3 - "name": "Create React App Sample",
4 - "icons": [
5 - {
6 - "src": "favicon.ico",
7 - "sizes": "64x64 32x32 24x24 16x16",
8 - "type": "image/x-icon"
9 - },
10 - {
11 - "src": "logo192.png",
12 - "type": "image/png",
13 - "sizes": "192x192"
14 - },
15 - {
16 - "src": "logo512.png",
17 - "type": "image/png",
18 - "sizes": "512x512"
19 - }
20 - ],
21 - "start_url": ".",
22 - "display": "standalone",
23 - "theme_color": "#000000",
24 - "background_color": "#ffffff"
25 -}
1 import "./App.scss"; 1 import "./App.scss";
2 import MainPage from "./pages/MainPage"; 2 import MainPage from "./pages/MainPage";
3 -import SurveyPage from "./pages/SurveyPage"; 3 +import SurveyPageContainer from "./containers/SurveyPageContainer";
4 import ResultPage from "./pages/ResultPage"; 4 import ResultPage from "./pages/ResultPage";
5 import { BrowserRouter, Route, Switch } from "react-router-dom"; 5 import { BrowserRouter, Route, Switch } from "react-router-dom";
6 6
...@@ -10,7 +10,7 @@ function App() { ...@@ -10,7 +10,7 @@ function App() {
10 <div className="App"> 10 <div className="App">
11 <Switch> 11 <Switch>
12 <Route exact path="/" component={MainPage} /> 12 <Route exact path="/" component={MainPage} />
13 - <Route path="/survey" component={SurveyPage} /> 13 + <Route path="/survey" component={SurveyPageContainer} />
14 <Route path="/result" component={ResultPage} /> 14 <Route path="/result" component={ResultPage} />
15 </Switch> 15 </Switch>
16 </div> 16 </div>
......
...@@ -10,10 +10,6 @@ function Card({ question, answer, setAnswer, curIdx, setCurIdx }) { ...@@ -10,10 +10,6 @@ function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
10 height: 100%; 10 height: 100%;
11 font-size: 20px; 11 font-size: 20px;
12 font-weight: bold; 12 font-weight: bold;
13 - /* ${(props) => css`
14 - transform: translateX(${-500 * props.curIdx}px);
15 - transition: 0.5s;
16 - `} */
17 `; 13 `;
18 14
19 const CardQuest = styled.div` 15 const CardQuest = styled.div`
......
1 -import { Swiper, SwiperSlide } from 'swiper/react';
2 -// Import Swiper styles
3 -import 'swiper/swiper.scss';
4 -
5 -export default () => {
6 - return (
7 - <Swiper
8 - spaceBetween={50}
9 - slidesPerView={3}
10 - onSlideChange={() => console.log('slide change')}
11 - onSwiper={(swiper) => console.log(swiper)}
12 - >
13 - <SwiperSlide>Slide 1</SwiperSlide>
14 - <SwiperSlide>Slide 2</SwiperSlide>
15 - <SwiperSlide>Slide 3</SwiperSlide>
16 - <SwiperSlide>Slide 4</SwiperSlide>
17 - </Swiper>
18 - );
19 - };
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react'
2 +import { useSelector } from 'react-redux';
3 +import SurveyPage from '../pages/SurveyPage';
4 +
5 +export function SurveyPageContainer() {
6 + const data = useSelector((state) => state.survey.data);
7 + return (
8 + <>
9 + <SurveyPage
10 + question={data}
11 + />
12 + </>
13 + )
14 +}
15 +
16 +export default SurveyPageContainer;
...\ No newline at end of file ...\ No newline at end of file
1 -import React,{useEffect, useState} from 'react'; 1 +import React,{useEffect} from 'react';
2 import './MainPage.scss'; 2 import './MainPage.scss';
3 -import ProgressBar from "../components/progressbar/ProgressBar";
4 import {Button} from "antd"; 3 import {Button} from "antd";
5 import axios from 'axios'; 4 import axios from 'axios';
6 import mainImg from "../assets/main-soldier.png"; 5 import mainImg from "../assets/main-soldier.png";
7 -import {getSurvey,getSurveySuccess,getSurveyError} from '../store/action/survey'; 6 +import {getSurvey, getSurveySuccess, getSurveyError} from '../store/action/survey';
7 +import { useDispatch } from 'react-redux';
8 +
8 9
9 function MainPage({history}){ 10 function MainPage({history}){
10 - //const [percent,setPercent] = useState(0); 11 + const dispatch = useDispatch();
11 const onClick = () => { 12 const onClick = () => {
12 history.push('/survey'); 13 history.push('/survey');
13 } 14 }
14 useEffect(()=>{ 15 useEffect(()=>{
15 - // const getApi = async() =>{ 16 + const getApi = async() =>{
16 - // dispatch(getSurvey()); 17 + dispatch(getSurvey());
17 - // try{ 18 + try{
18 - // const {data} = await axios.get("getquestions");
19 - // setQuestion(data);
20 - // dispatch(getSurveySuccess(data));
21 - // }catch(e){
22 - // dispatch(getSurveyError(e));
23 - // }
24 - // }
25 - // getApi();
26 - const getApi = async()=>{
27 const {data} = await axios.get("getquestions"); 19 const {data} = await axios.get("getquestions");
28 - localStorage.setItem('question',JSON.stringify(data)); 20 + dispatch(getSurveySuccess(data));
21 + }catch(e){
22 + dispatch(getSurveyError(e));
23 + }
29 } 24 }
30 getApi(); 25 getApi();
31 -
32 },[]); 26 },[]);
33 27
34 return( 28 return(
...@@ -39,7 +33,6 @@ function MainPage({history}){ ...@@ -39,7 +33,6 @@ function MainPage({history}){
39 KHUSAT 특별과정, <br></br> 33 KHUSAT 특별과정, <br></br>
40 여러분의 보직을 추천드립니다. 34 여러분의 보직을 추천드립니다.
41 </div> 35 </div>
42 - {/* <ProgressBar percent={percent}/> */}
43 <Button 36 <Button
44 size="large" 37 size="large"
45 onClick={onClick} 38 onClick={onClick}
......
1 import React from 'react'; 1 import React from 'react';
2 import {useSelector} from 'react-redux'; 2 import {useSelector} from 'react-redux';
3 -import './ResultPage.scss'; 3 +import styled from 'styled-components';
4 4
5 +const Container = styled.div`
6 + display: flex;
7 + flex-direction: column;
8 + justify-content: center;
9 + align-items: center;
10 + margin-top: 100px;
11 +`;
12 +
13 +const Title = styled.div`
14 + font-size: 5rem;
15 + font-weight: bold;
16 +`;
17 +
18 +const Position = styled.div`
19 + font-size: 4.5rem;
20 +`;
21 +
22 +const Description = styled.div`
23 + margin-top: 4rem;
24 + font-size: 1.4rem;
25 +`;
5 26
6 function ResultPage(){ 27 function ResultPage(){
7 const data = useSelector(state=>state.result.data); 28 const data = useSelector(state=>state.result.data);
8 29
9 return( 30 return(
10 - <div className="container"> 31 + <>
11 {data ? ( 32 {data ? (
12 - <div className="result"> 33 + <Container>
13 - <div className="result__title">{data.high}</div> 34 + <Title>{data.high}</Title>
14 - <div className="result__position">{data.low}</div> 35 + <Position>{data.low}</Position>
15 - <div className="result__desc">{data.description}</div> 36 + <Description>{data.description}</Description>
16 - {/* <div><img src={"/Users/ijunho/Desktop/JUNHO/khusat-front/src/assets/db"+data.image.split("khusat_DB")[1]}/></div> */} 37 + </Container>)
17 - {/* {console.log(data.image.split("khusat_DB")[1])} */}
18 - {/* <div><img src={"../../assets/db"+data.image.split("khusat_DB")[1]}/></div> */}
19 - {/* /Users/daydream/Desktop/khusat_server/khusat_DB : 47*/}
20 - {/* `${(data.image).substring(47,data.image.length)}/Users/ijunho/desktop/junho/khusat-front/src/assets/db` */}
21 - </div>)
22 : <div>로딩중</div> 38 : <div>로딩중</div>
23 } 39 }
24 - </div> 40 + </>
25 ); 41 );
26 } 42 }
27 43
......
1 -// .container{
2 -// background-color:#536349;
3 -// }
4 -
5 -.result{
6 - display: flex;
7 - flex-direction: column;
8 - justify-content: center;
9 - align-items: center;
10 - margin-top: 10rem;
11 -
12 - &__title{
13 - font-size: 5rem;
14 - font-weight: bold;
15 - }
16 -
17 - &__position{
18 - font-size: 4.5rem;
19 - }
20 -
21 - &__desc{
22 - margin-top: 4rem;
23 - font-size: 1.4rem;
24 - }
25 -}
...\ No newline at end of file ...\ No newline at end of file
1 -import React, { useState } from "react"; 1 +import React, { useState, useEffect } from "react";
2 import Card from "../components/card/Card"; 2 import Card from "../components/card/Card";
3 import ProgressBar from "../components/progressbar/ProgressBar"; 3 import ProgressBar from "../components/progressbar/ProgressBar";
4 import "antd/dist/antd.css"; 4 import "antd/dist/antd.css";
...@@ -18,20 +18,27 @@ const Container = styled.div` ...@@ -18,20 +18,27 @@ const Container = styled.div`
18 `; 18 `;
19 19
20 const SliderCotainer = styled.div` 20 const SliderCotainer = styled.div`
21 - border: 1px solid gray;
22 width: 100%; 21 width: 100%;
23 display: flex; 22 display: flex;
24 align-items: center; 23 align-items: center;
25 - margin: 0 auto; 24 + /* margin: 0 auto; */
26 ${(props) => css` 25 ${(props) => css`
27 transform: translateX(${-500 * props.curIdx}px); 26 transform: translateX(${-500 * props.curIdx}px);
28 transition: 0.5s; 27 transition: 0.5s;
29 `} 28 `}
29 + margin-top: 20rem;
30 `; 30 `;
31 31
32 function SurveyPage({ history, question }) { 32 function SurveyPage({ history, question }) {
33 const [curIdx, setCurIdx] = useState(0); 33 const [curIdx, setCurIdx] = useState(0);
34 const [answer, setAnswer] = useState([]); // post로 보낼 state 34 const [answer, setAnswer] = useState([]); // post로 보낼 state
35 + const dispatch = useDispatch();
36 +
37 + useEffect(()=>{
38 + if(answer.length === 10){
39 + dispatch()
40 + }
41 + },[answer]);
35 42
36 return ( 43 return (
37 <SurveyContainer> 44 <SurveyContainer>
......