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