From 2b4d9e8f2492a1175471f65141bf3491b7ea9f68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Tue, 12 Dec 2023 17:52:27 +0900 Subject: [PATCH 1/7] Style : add prettier config --- .prettierrc.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .prettierrc.js diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..d3f19ed --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + arrowParens: 'always', + bracketSpacing: true, + jsxBracketSameLine: false, + singleQuote: true, + useTabs: false, +}; From 5615063a74371d29851e7c74577872d1d1399d44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Tue, 12 Dec 2023 18:21:36 +0900 Subject: [PATCH 2/7] Style : edit import baseUrl --- tsconfig.json | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index a273b0c..181a58d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,8 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "baseUrl": "./src", + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +17,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": ["src"] } From a726c9ffe0c693c48e96c9e8e6dfec167456e1bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Tue, 12 Dec 2023 18:22:54 +0900 Subject: [PATCH 3/7] Feat : add router and auth check --- package-lock.json | 68 ++++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/index.tsx | 5 +-- src/layout/DefaultLayout.tsx | 15 ++++++++ src/pages/Home.tsx | 3 ++ src/pages/Login.tsx | 3 ++ src/routes/Router.tsx | 17 +++++++++ src/shared/axios.ts | 68 ++++++++++++++++++++++++++++++++++++ 8 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 src/layout/DefaultLayout.tsx create mode 100644 src/pages/Home.tsx create mode 100644 src/pages/Login.tsx create mode 100644 src/routes/Router.tsx create mode 100644 src/shared/axios.ts diff --git a/package-lock.json b/package-lock.json index 9c44440..84eba78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,10 @@ "@types/node": "^16.18.68", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", + "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -3247,6 +3249,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz", + "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -5078,6 +5088,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz", + "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -14201,6 +14234,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -14497,6 +14535,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz", + "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==", + "dependencies": { + "@remix-run/router": "1.13.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz", + "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==", + "dependencies": { + "@remix-run/router": "1.13.1", + "react-router": "6.20.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 919ef0d..699d10a 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "@types/node": "^16.18.68", "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", + "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" diff --git a/src/index.tsx b/src/index.tsx index 032464f..72da4ad 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,15 +1,16 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; import reportWebVitals from './reportWebVitals'; +import { RouterProvider } from 'react-router-dom'; +import { router } from './routes/Router'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - + ); diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx new file mode 100644 index 0000000..812bffa --- /dev/null +++ b/src/layout/DefaultLayout.tsx @@ -0,0 +1,15 @@ +import { useEffect } from 'react'; +import { Outlet, useNavigate } from 'react-router'; + +export default function DefaultLayout() { + const isLogin = localStorage.getItem('token'); + const navigate = useNavigate(); + + useEffect(() => { + if (!isLogin) { + navigate('/login'); + } + }, []); + + return ; +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..02c907f --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,3 @@ +export default function Home() { + return <>Home; +} diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..72428dc --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,3 @@ +export default function Login() { + return <>login; +} diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx new file mode 100644 index 0000000..8d22b85 --- /dev/null +++ b/src/routes/Router.tsx @@ -0,0 +1,17 @@ +import { createBrowserRouter } from 'react-router-dom'; +import DefaultLayout from 'layout/DefaultLayout'; +import Login from 'pages/Login'; +import Home from 'pages/Home'; + +export const router = createBrowserRouter([ + { + element: , + children: [ + { + path: '/', + element: , + }, + { path: '/login', element: }, + ], + }, +]); diff --git a/src/shared/axios.ts b/src/shared/axios.ts new file mode 100644 index 0000000..27d283d --- /dev/null +++ b/src/shared/axios.ts @@ -0,0 +1,68 @@ +import axios, { InternalAxiosRequestConfig } from 'axios'; + +const token = localStorage.getItem('token'); + +const baseURL = process.env.REACT_APP_BASE_URL; + +const instance = axios.create({ baseURL }); + +const setToken = ( + config: InternalAxiosRequestConfig +): InternalAxiosRequestConfig => { + config.headers['Authorization'] = `Bearer ${token}`; + return config; +}; + +if (token) { + instance.interceptors.request.use(setToken); +} + +instance.interceptors.response.use( + (response) => { + return response; + }, + async (error) => { + const { response, config } = error; + const originalRequest = config; + if (response.status === 403 || response.status === 401) { + let refreshToken = localStorage.getItem('retoken'); + let accessToken = localStorage.getItem('token'); + let userId = localStorage.getItem('id'); + const tokens = { + refreshToken, + accessToken, + userId, + }; + // if (refreshToken) { + // const { data } = await checkToken(tokens); + // const access = data.data.accessToken; + // const refresh = data.data.refreshToken; + // localStorage.setItem('token', access); + // localStorage.setItem('retoken', refresh); + // window.location.reload(); + // } + return axios(originalRequest); + } + if (response.status === 404) { + return window.location.replace('/notfound'); + } + if (response.status === 504) { + return window.location.replace('/connectfail'); + } + if (response.status === 400) { + return response; + } + return Promise.reject(error); + } +); + +// const checkToken = async ({ accessToken, refreshToken, userId }) => { +// const response = await axios.post(`${baseURL}/user/reissue`, { +// accessToken, +// refreshToken, +// userId, +// }); +// return response; +// }; + +export default instance; From 4fb9d843de57e24e9c8415e4f611e372b666460b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Thu, 14 Dec 2023 21:59:11 +0900 Subject: [PATCH 4/7] Chore : update gitignore and github action script --- .github/workflows/main.yml | 8 ++++---- .gitignore | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 45f3df5..7584f0a 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -11,8 +11,8 @@ jobs: build: runs-on: ubuntu-20.04 env: - REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }} - REACT_APP_SOCIAL_URL: ${{ secrets.REACT_APP_SOCIAL_URL }} + REACT_APP_KAKAO_CLIENT_ID: ${{ secrets.KAKAO_CLIENT_ID }} + REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }} AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_REGION: '${{ secrets.AWS_REGION }}' @@ -41,8 +41,8 @@ jobs: echo "REACT_APP_REGION=$REACT_APP_REGION" >> .env.production env: - REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }} - REACT_APP_SOCIAL_URL: ${{ secrets.REACT_APP_SOCIAL_URL }} + REACT_APP_KAKAO_CLIENT_ID: ${{ secrets.KAKAO_CLIENT_ID }} + REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }} REACT_APP_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY_ID }} REACT_APP_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} REACT_APP_REGION: ${{ secrets.AWS_REGION }} diff --git a/.gitignore b/.gitignore index 8692cf6..475737c 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ # misc .DS_Store .env +.env.production .env.local .env.development.local .env.test.local From 7e378fc54dc56593c4819a3b6224febe81930a28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Thu, 14 Dec 2023 22:00:34 +0900 Subject: [PATCH 5/7] Feat : add kakao social login --- src/asset/login/logo.png | Bin 0 -> 15197 bytes src/component/home/KakaoOauth.tsx | 11 ++++ src/layout/DefaultLayout.tsx | 16 +++++- src/pages/Login.tsx | 91 +++++++++++++++++++++++++++++- src/routes/Router.tsx | 5 ++ 5 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/asset/login/logo.png create mode 100644 src/component/home/KakaoOauth.tsx diff --git a/src/asset/login/logo.png b/src/asset/login/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..3b908106d02718d091ecf77d34086e324158e2d5 GIT binary patch literal 15197 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 U?=bi=8x~DfQA?pl?oH_b0aYbsg#Z8m literal 0 HcmV?d00001 diff --git a/src/component/home/KakaoOauth.tsx b/src/component/home/KakaoOauth.tsx new file mode 100644 index 0000000..3b5a525 --- /dev/null +++ b/src/component/home/KakaoOauth.tsx @@ -0,0 +1,11 @@ +import { useLocation } from 'react-router'; + +export default function KakaoOauth() { + const location = useLocation(); + const urlParams = new URLSearchParams(location.search); + const codeValue = urlParams.get('code'); + + console.log(codeValue); + + return <>카카오 리다이렉트 페이지; +} diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index 812bffa..b87d722 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react'; import { Outlet, useNavigate } from 'react-router'; +import styled from 'styled-components'; export default function DefaultLayout() { const isLogin = localStorage.getItem('token'); @@ -11,5 +12,18 @@ export default function DefaultLayout() { } }, []); - return ; + return ( + + + + ); } + +const DefaultLayoutContainer = styled.div` + max-width: 375px; + min-height: 100vh; + margin: auto; + padding: 0px 24px; + + /* background-color: aliceblue; */ +`; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 72428dc..574f940 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,3 +1,92 @@ +import styled from 'styled-components'; +import onBoardingLogo from 'asset/login/logo.png'; + export default function Login() { - return <>login; + const onClickKakaoLogin = () => { + window.location.href = kakaoLoginURL; + }; + + const kakaoClientId = process.env.REACT_APP_KAKAO_CLIENT_ID; + const kakaoRedirectURI = process.env.REACT_APP_KAKAO_REDIRECT_URI; + const kakaoLoginURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${kakaoRedirectURI}&response_type=code`; + + return ( + + + + + AI가 감정을 분석하고
한 줄로 요약해요 + + + 오늘 있었던 일을 자유롭게 적어보세요.
잘 알아차리지 못했던 + 감정들을 AI가 찾아줄게요 + + + + + 네이버로 로그인하기 + + 카카오톡으로 로그인하기 + + + + ); } +const LoginPageContainer = styled.div` + padding-top: 80px; +`; + +const LoginLogo = styled.div` + height: 60px; + width: 277px; + background-size: cover; + background-image: url(${onBoardingLogo}); + margin: auto; +`; + +const LoginTitleContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 57px; + margin-top: 57px; +`; + +const LoginTitle = styled.h1` + font-size: 1.5rem; + font-weight: 900; + word-break: keep-all; + text-align: center; + line-height: 1.8rem; +`; + +const LoginSubtitle = styled.div` + word-break: keep-all; + text-align: center; + line-height: 1.2rem; +`; + +const SocialLoginContainer = styled.div` + display: flex; + flex-direction: column; + gap: 12px; +`; + +const SocialLoginBtn = styled.div` + width: 100%; + height: 56px; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +`; + +const KakaoLoginBtn = styled(SocialLoginBtn)` + background-color: #fee600; +`; + +const NaverLoginBtn = styled(SocialLoginBtn)` + background-color: #00c300; + color: #fff; +`; diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index 8d22b85..db62c52 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -2,6 +2,7 @@ import { createBrowserRouter } from 'react-router-dom'; import DefaultLayout from 'layout/DefaultLayout'; import Login from 'pages/Login'; import Home from 'pages/Home'; +import KakaoOauth from 'component/home/KakaoOauth'; export const router = createBrowserRouter([ { @@ -12,6 +13,10 @@ export const router = createBrowserRouter([ element: , }, { path: '/login', element: }, + { + path: '/oauth', + children: [{ path: 'kakao', element: }], + }, ], }, ]); From 72725b9cad27468dff995d1d89e0dd68761cc1b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Thu, 14 Dec 2023 22:01:53 +0900 Subject: [PATCH 6/7] Design : add styled-components and global styles --- package-lock.json | 213 ++++++++++++++++++++++++++++++++++++ package.json | 4 + src/index.tsx | 18 ++- src/styles/globalStyles.tsx | 71 ++++++++++++ 4 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 src/styles/globalStyles.tsx diff --git a/package-lock.json b/package-lock.json index 84eba78..585ca09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,10 +16,14 @@ "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "axios": "^1.6.2", + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-query": "^3.39.3", "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", + "recoil": "^0.7.7", + "styled-components": "^6.1.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" } @@ -2292,6 +2296,24 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4209,6 +4231,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz", + "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5424,6 +5451,14 @@ "node": ">= 8.0.0" } }, + "node_modules/big-integer": { + "version": "1.6.52", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", + "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -5536,6 +5571,21 @@ "node": ">=8" } }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "node_modules/browser-process-hrtime": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", @@ -5653,6 +5703,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6088,6 +6146,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6269,6 +6335,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -6484,6 +6560,11 @@ "node": ">=10" } }, + "node_modules/dayjs": { + "version": "1.11.10", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", + "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -8639,6 +8720,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -11639,6 +11725,11 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12031,6 +12122,15 @@ "tmpl": "1.0.5" } }, + "node_modules/match-sorter": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz", + "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "remove-accents": "0.4.2" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -12093,6 +12193,11 @@ "node": ">=8.6" } }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -12268,6 +12373,14 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "dependencies": { + "big-integer": "^1.6.16" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -12539,6 +12652,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -14527,6 +14645,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14669,6 +14812,25 @@ "node": ">=8.10.0" } }, + "node_modules/recoil": { + "version": "0.7.7", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", + "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", + "dependencies": { + "hamt_plus": "1.0.2" + }, + "peerDependencies": { + "react": ">=16.13.1" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -14804,6 +14966,11 @@ "node": ">= 0.10" } }, + "node_modules/remove-accents": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", + "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -15412,6 +15579,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15908,6 +16080,33 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz", + "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15923,6 +16122,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", @@ -16637,6 +16841,15 @@ "node": ">= 10.0.0" } }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 699d10a..a82ac2b 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,14 @@ "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "axios": "^1.6.2", + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-query": "^3.39.3", "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", + "recoil": "^0.7.7", + "styled-components": "^6.1.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/src/index.tsx b/src/index.tsx index 72da4ad..ff390b1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,13 +4,29 @@ import './index.css'; import reportWebVitals from './reportWebVitals'; import { RouterProvider } from 'react-router-dom'; import { router } from './routes/Router'; +import { QueryClient, QueryClientProvider } from 'react-query'; +import { RecoilRoot } from 'recoil'; +import { GlobalStyle } from 'styles/globalStyles'; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + }, + }, +}); const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - + + + + + + ); diff --git a/src/styles/globalStyles.tsx b/src/styles/globalStyles.tsx new file mode 100644 index 0000000..ea95d98 --- /dev/null +++ b/src/styles/globalStyles.tsx @@ -0,0 +1,71 @@ +import { createGlobalStyle } from 'styled-components'; + +//전역 스타일링 +export const GlobalStyle = createGlobalStyle` + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, menu, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + main, menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; + } + + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, main, menu, nav, section { + display: block; + } + + /* HTML5 hidden-attribute fix for newer browsers */ + *[hidden] { + display: none; + } + + * { + box-sizing: border-box; + } + + html { + width: 100%; + height: 100%; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none + } + + body { + line-height: 1; + overflow-x: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + /* h1, h2, h3, h4, h5, h6 { + font-family:"SpoqaMedium" + } */ + + a { + text-decoration: none; + } + + button { + cursor: pointer; + } +`; From 0546268969ca7309e17d952bbe7e0c62c82cfbb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=86=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=80=E1=85=A7=E1=86=BC?= Date: Thu, 14 Dec 2023 22:09:58 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Fix=20:=20=EC=86=8C=EC=85=9C=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89?= =?UTF-8?q?=ED=8A=B8=20=EA=B3=BC=EC=A0=95=20=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/DefaultLayout.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index b87d722..09c9d63 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -1,13 +1,14 @@ import { useEffect } from 'react'; -import { Outlet, useNavigate } from 'react-router'; +import { Outlet, useMatches, useNavigate } from 'react-router'; import styled from 'styled-components'; export default function DefaultLayout() { const isLogin = localStorage.getItem('token'); const navigate = useNavigate(); + const matches = useMatches(); useEffect(() => { - if (!isLogin) { + if (!isLogin && matches[1].pathname !== '/oauth') { navigate('/login'); } }, []);