Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
nowgnas committed Jun 26, 2022
2 parents 0d36487 + dade0a9 commit c9e2e4e
Show file tree
Hide file tree
Showing 33 changed files with 1,787 additions and 400 deletions.
122 changes: 65 additions & 57 deletions front/package.json
Original file line number Diff line number Diff line change
@@ -1,59 +1,67 @@
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.3",
"@mui/material": "^5.8.2",
"@mui/utils": "^5.8.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"lodash": "^4.17.21",
"react": "^18.1.0",
"react-burger-menu": "^3.0.8",
"react-dom": "^18.1.0",
"react-dropzone": "^14.2.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.3-alpha.2",
"styled-components": "^5.3.5",
"styled-reset": "^4.4.1",
"swiper": "^8.2.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.6.2"
}
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.3",
"@mui/material": "^5.8.2",
"@mui/utils": "^5.8.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"react": "^18.1.0",
"react-burger-menu": "^3.0.8",
"react-card-flip": "^1.1.5",
"react-dom": "^18.1.0",
"react-dropzone": "^14.2.1",
"react-flippy": "^1.1.0",
"react-hook-form": "^7.32.2",
"react-lottie": "^1.2.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.3",
"recoil-persist": "^4.2.0",
"styled-components": "^5.3.5",
"styled-reset": "^4.4.1",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.4.17",
"swiper": "^8.2.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.6.2"
}
}
18 changes: 4 additions & 14 deletions front/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d5fc6b7b0327cb7f489de9dd0515b04b"
></script>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand All @@ -26,21 +22,15 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<<<<<<< HEAD
<title>React App</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b1fa53cd34bf7c78644e64819bead127"></script>
</head>
<body style="margin: 0; padding: 0">
<div id="root"></div>
<!--
=======
<title>React App</title>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b1fa53cd34bf7c78644e64819bead127"
></script>
</head>
<body style="margin: 0; padding: 0">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
>>>>>>> ff2e6fa16c0bf40d101107b57c87d59cc4ec4f67
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
109 changes: 67 additions & 42 deletions front/src/App.js
Original file line number Diff line number Diff line change
@@ -1,81 +1,106 @@
import React, { useState, useEffect, useReducer, createContext, Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { BrowserRouter as Router, Routes, Route, useLocation, useNavigate } from 'react-router-dom';
import { ROUTES } from './Route';
import Lottie from 'react-lottie';
import loading from './loading.json';

import * as Api from './api';
import './App.css';
import { loginReducer } from './reducer';

import { GlobalStyles } from './styledCompo/GlobalStyle';
import { useRecoilValue } from 'recoil';
import { userInfoState, tokenState } from './atom';

const Home = lazy(() => import('./components/home/Home'));
const Login = lazy(() => import('./components/user/Login'));
const Signin = lazy(() => import('./components/user/Signin'));
const Password = lazy(() => import('./components/user/Password'));
const Mypage = lazy(() => import('./components/mypage/Mypage'));
const Upload = lazy(() => import('./components/upload/Upload'));
const UploadResult = lazy(() => import('./components/upload/UploadResult'));
const BoardUpload = lazy(() => import('./components/board/Board'));
const Board = lazy(() => import('./components/board/Board'));
const EachBoard = lazy(() => import('./components/board/EachBoard'));

export const UserStateContext = createContext(null);
export const DispatchContext = createContext(null);

function App() {
const navigate = useNavigate();
const location = useLocation();

const user = useRecoilValue(tokenState);
useEffect(() => {
window.scrollTo({ top: 0 });
}, [location]);
// useReducer 훅을 통해 userState 상태와 dispatch함수를 생성함.
const [userState, dispatch] = useReducer(loginReducer, {
user: null,
});

// 아래의 fetchCurrentUser 함수가 실행된 다음에 컴포넌트가 구현되도록 함.
// 아래 코드를 보면 isFetchCompleted 가 true여야 컴포넌트가 구현됨.
const [isFetchCompleted, setIsFetchCompleted] = useState(false);

const fetchCurrentUser = async () => {
try {
// 이전에 발급받은 토큰이 있다면, 이를 가지고 유저 정보를 받아옴.
const res = await Api.get('current/info');
const currentUser = res.data;
console.log(currentUser);
// const fetchCurrentUser = async () => {
// try {
// // 이전에 발급받은 토큰이 있다면, 이를 가지고 유저 정보를 받아옴.
// const res = await Api.get('users/current/info');
// const currentUser = res.data;
// console.log('currentUser:', currentUser);

// dispatch 함수를 통해 로그인 성공 상태로 만듦.
dispatch({
type: 'LOGIN_SUCCESS',
payload: currentUser,
});
console.log('%c sessionStorage에 토큰 있음.', 'color: #d93d1a;');
} catch (error) {
console.log(error);
console.log('%c SessionStorage에 토큰 없음.', 'color: #d93d1a;');
}
// fetchCurrentUser 과정이 끝났으므로, isFetchCompleted 상태를 true로 바꿔줌
setIsFetchCompleted(true);
};
// console.log('%c sessionStorage에 토큰 있음.', 'color: #d93d1a;');
// } catch (error) {
// console.log(error);
// console.log('%c SessionStorage에 토큰 없음.', 'color: #d93d1a;');
// }
// // fetchCurrentUser 과정이 끝났으므로, isFetchCompleted 상태를 true로 바꿔줌
// setIsFetchCompleted(true);
// };

// useEffect함수를 통해 fetchCurrentUser 함수를 실행함.
// useEffect(() => {
// fetchCurrentUser();
// }, []);

// if (!isFetchCompleted) {
// return 'loading...';
// }

const defaultOptions = {
loop: true,
autoplay: true,
animationData: loading,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
return (
<>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/mypage" element={<Mypage />} />
<Route path="/register" element={<Signin />} />
<Route path="/upload" element={<Upload />} />
<Route path="/uploadResult" element={<UploadResult />} />
<Route path="*" element={<Home />} />
</Routes>
</Suspense>
{user ? (
<Suspense
fallback={<Lottie options={defaultOptions} height={100} width={100}></Lottie>}
>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/mypage" element={<Mypage />} />
<Route path="/register" element={<Signin />} />
<Route path="/upload" element={<Upload />} />
<Route path="/uploadResult" element={<UploadResult />} />
<Route path="/boardUpload" element={<BoardUpload />} />
<Route path="/board" element={<Board />} />
<Route path="/Password" element={<Password />} />
<Route path="/board/:board_id" element={<EachBoard />} />
<Route path="*" element={<Home />} />
</Routes>
</Suspense>
) : (
<Suspense
fallback={<Lottie options={defaultOptions} height={100} width={100}></Lottie>}
>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Signin />} />
<Route path="/upload" element={<Upload />} />
<Route path="/uploadResult" element={<UploadResult />} />
<Route path="/boardUpload" element={<BoardUpload />} />
<Route path="/Board" element={<Board />} />
<Route path="*" element={<Home />} />
</Routes>
</Suspense>
)}
</>
);
}
Expand Down
Loading

0 comments on commit c9e2e4e

Please sign in to comment.