Merge pull request #82 from ISTTP/develop

자체 회원가입 및 로그인 / 디자인
ISTTP · Aug 7, 2024 · 284f57f · 284f57f
2 parents b46d159 + 06699d5
commit 284f57f
Show file tree

Hide file tree

Showing 168 changed files with 4,479 additions and 554 deletions.
diff --git a/.github/workflows/mainDeploy.yml b/.github/workflows/mainDeploy.yml
@@ -42,6 +42,7 @@ jobs:
           echo "MESSAGING_SENDER_ID=$MESSAGING_SENDER_ID" >> .env
           echo "APP_ID=$APP_ID" >> .env
           echo "MEASUREMENT_ID=$MEASUREMENT_ID" >> .env
+          echo "PASSWORD_SALT=$PASSWORD_SALT" >> .env
         working-directory: ./apps/client
         env:
           SERVER_URL: ${{ secrets.SERVER_URL }}
@@ -54,6 +55,7 @@ jobs:
           MESSAGING_SENDER_ID: ${{ secrets.MESSAGING_SENDER_ID }}
           APP_ID: ${{ secrets.APP_ID }}
           MEASUREMENT_ID: ${{ secrets.MEASUREMENT_ID }}
+          PASSWORD_SALT: ${{ secrets.PASSWORD_SALT }}
 
       - name: Create JSON file
         env:

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -6,10 +6,15 @@
     "#images": "./src/assets/images/index.ts",
     "#icons": "./src/assets/icons/index.ts",
     "#components/*.tsx": "./src/components/*.tsx",
+    "#components/*.ts": "./src/components/*.ts",
     "#pages/*.tsx": "./src/pages/*.tsx",
     "#apis/*.ts": "./src/apis/*.ts",
+    "#apis/*.tsx": "./src/apis/*.tsx",
     "#styles/*.ts": "./src/styles/*.ts",
-    "#firebase": "./src/firebase-messaging-sw.ts"
+    "#styles/*.tsx": "./src/styles/*.tsx",
+    "#utils": "./src/utils/index.ts",
+    "#firebase": "./src/firebase-messaging-sw.ts",
+    "#hooks/*.tsx": "./src/hooks/*.tsx"
   },
   "scripts": {
     "build": "webpack --config webpack.config.prod.js",
@@ -21,8 +26,14 @@
   },
   "dependencies": {
     "@sentry/react": "^8.11.0",
+    "@tanstack/query-core": "^5.51.15",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-query-devtools": "^5.51.15",
     "axios": "^1.7.2",
+    "crypto-js": "^4.2.0",
     "firebase": "^8.2.3",
+    "lodash": "^4.17.21",
+    "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.24.0",
@@ -50,8 +61,10 @@
     "@testing-library/dom": "^10.2.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/dotenv-webpack": "^7.0.7",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.9",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",

diff --git a/apps/client/public/index.html b/apps/client/public/index.html
@@ -18,6 +18,7 @@
 
 <body>
     <div id="root"></div>
+    <div id="modal"></div>
     <script defer src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
 </body>
 

diff --git a/apps/client/src/App.css b/apps/client/src/App.css
@@ -1,14 +1,74 @@
+@import './Normalize.css';
+
 :root {
-  --white-color: #FFFFFF;
-  --black-color: #000000;
-  --orange-color: #FFA83C;
-  --light-orange-color: #FFF1DF;
-  --yellow-color: #FEE500;
-  --light-gray-color: #E9E9E9;
-  --dark-gray-color: #AAAAAA;
-  --strawberry-color: #F3A7A7;
-  --banana-color: #F1F3A7;
-  --mint-color: #BBF0A8;
-  --blueberry-color: #C4A7F3;
-  --chocolate-color: #7B4B23;
+  --orange-500: #FFA83C;
+  --orange-400: #FFC57C;
+  --orange-200: #FFF2E1;
+  --orange-100: #FFF7ED;
+  --black: #000000;
+  --gray-500: #8D8D8D;
+  --gray-400: #AEAEAE;
+  --gray-300: #ECECEC;
+  --gray-200: #DEDEDE;
+  --white: #FFFFFF;
+  --magenta: #FF6C6C;
+  --yellow: #FEE500;
+  --strawberry-200: #f08787;
+  --strawberry-100: #F3A7A7;
+  --banana-200: #e2e673;
+  --banana-100: #F1F3A7;
+  --mint-200: #82d664;
+  --mint-100: #BBF0A8;
+  --blueberry-200: #9d72e2;
+  --blueberry-100: #C4A7F3;
+  --chocolate-200: #5f320d;
+  --chocolate-100: #7B4B23;
+}
+
+@font-face {
+  font-family: "OneMobilePop";
+  font-weight: normal;
+  src: url("./assets/fonts/OneMobilePop.TTF") format("truetype");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 500;
+  src: url("./assets/fonts/Pretendard-1.3.9/web/static/woff/Pretendard-Medium.woff") format("woff"),
+    url("./assets/fonts/Pretendard-1.3.9/web/static/woff2/Pretendard-Medium.woff2") format("woff2"),
+    url("./assets/fonts/Pretendard-1.3.9/public/static/alternative/Pretendard-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 700;
+  src: url("./assets/fonts/Pretendard-1.3.9/web/static/woff/Pretendard-Bold.woff") format("woff"),
+    url("./assets/fonts/Pretendard-1.3.9/web/static/woff2/Pretendard-Bold.woff2") format("woff2"),
+    url("./assets/fonts/Pretendard-1.3.9/public/static/alternative/Pretendard-Bold.ttf") format("truetype");
+}
+
+body {
+  font-family: "Pretendard", sans-serif;
+  background-color: var(--orange-100);
+}
+
+h1 {
+  font-family: "OneMobilePop", sans-serif;
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+h2 {
+  font-size: 1.06rem;
+  font-weight: 500;
+}
+
+@media (min-width: 801px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
 }
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import './App.css';
 import { requestPermission } from '#firebase';
+import Loading from '#components/common/Loading.tsx';
+import './App.css';
+
 
 const MyPage = lazy(() =>
   import('#pages/MyPage.tsx').then((module) => ({ default: module.MyPage })),
@@ -40,25 +42,42 @@ const CreateLetter = lazy(() =>
     default: module.CreateLetter,
   })),
 );
+const MyLetter = lazy(() =>
+  import('#pages/MyLetter.tsx').then((module) => ({
+    default: module.MyLetter,
+  })),
+);
+const FindId = lazy(() =>
+  import('#pages/FindId.tsx').then((module) => ({ default: module.FindId })),
+);
+const FindPwd = lazy(() =>
+  import('#pages/FindPwd.tsx').then((module) => ({ default: module.FindPwd })),
+);
+const ResetPwd = lazy(() =>
+  import('#pages/ResetPwd.tsx').then((module) => ({ default: module.ResetPwd })),
+);
 
 const App = () => {
   useEffect(() => {
     requestPermission();
   }, []);
+
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<Loading />}>
       <Routes>
-
         <Route path="/" element={<Login />} />
-        <Route path="/signup" element={<SignUp />} />
+        <Route path="/signup/:step" element={<SignUp />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="/auth/kakao" element={<KakaoLogin />} />
         <Route path="/auth/google" element={<GoogleLogin />} />
         <Route path="/cake/:ownerId" element={<Cake />} />
         <Route path="/cake/create/:ownerId" element={<CreateCake />} />
         <Route path="/letter/choose/:ownerId" element={<ChooseCandle />} />
         <Route path="/letter/create/:ownerId" element={<CreateLetter />} />
-
+        <Route path="/myletter" element={<MyLetter />} />
+        <Route path="/find/id/:step" element={<FindId />} />
+        <Route path="/find/pwd" element={<FindPwd />} />
+        <Route path="/reset/pwd/:step" element={<ResetPwd />} />
       </Routes>
     </Suspense>
   );

diff --git a/apps/client/src/ModalPortal.ts b/apps/client/src/ModalPortal.ts
@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ModalPortalProps {
+  children: ReactNode;
+}
+
+export const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
+  const el = document.getElementById('modal');
+  if (!el) {
+    return null;
+  }
+  return ReactDOM.createPortal(children, el);
+};
diff --git a/apps/client/src/Normalize.css b/apps/client/src/Normalize.css
@@ -0,0 +1,32 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html, body,
+h1, h2, h3, h4, h5,
+p, div, form, label,
+caption, article, aside, canvas,
+header, nav, section, summary, button
+ul, li, i, u,
+table, tbody, thead, tfoot, tr, th, td
+ {
+  margin: 0;
+  padding: 0;
+}
+
+ul[role='list'],
+ol[role='list'],
+li {
+  list-style: none;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+
diff --git a/apps/client/src/apis/axios.ts b/apps/client/src/apis/axios.ts
@@ -1,8 +1,39 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 
 const axiosInstance = axios.create({
   baseURL: process.env.SERVER_URL,
   withCredentials: true,
 });
 
+axiosInstance.interceptors.response.use(
+  response => {
+    return response;
+  },
+  async error => {
+    const customError = error as AxiosError;
+    const axiosError = customError.response?.status as number;
+
+
+    // 401 에러 응답
+    if (axiosError === 401) {
+      return Promise.reject(error);
+    }
+
+    // 500 에러 응답
+    if (axiosError === 500) {
+      console.log('서버 오류');
+      return Promise.reject(error);
+    }
+
+    // 400, 404 에러 응답
+    if (axiosError === 404 || 400) {
+      return Promise.reject(error);
+    }
+
+
+    return Promise.reject(error);
+  },
+);
+
+
 export default axiosInstance;
diff --git a/apps/client/src/apis/cake/useGetCakeLetters.tsx b/apps/client/src/apis/cake/useGetCakeLetters.tsx
@@ -0,0 +1,17 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import axiosInstance from '#apis/axios.ts';
+import { getCakeLettersRes } from '@isttp/schemas/all';
+
+async function fetchCakeLetters(ownerId: string, year: string, page: number) {
+  const res = await axiosInstance.get<getCakeLettersRes>(
+    `/cake/letters/${ownerId}/${year}?keyword=false&page=${page}`
+  );
+  return res.data;
+}
+
+export const useGetCakeLetters = (ownerId: string, year: string, page: number) => {
+  return useSuspenseQuery({
+    queryKey: ['cake-letters', ownerId, year, page],
+    queryFn: () => fetchCakeLetters(ownerId, year, page),
+  });
+}
diff --git a/apps/client/src/apis/cake/useGetGridLetters.tsx b/apps/client/src/apis/cake/useGetGridLetters.tsx
@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import axiosInstance from '#apis/axios.ts';
+
+async function fetchLetters(ownerId: string, year: string, page: number) {
+  const res = await axiosInstance.get(`/cake/letters/${ownerId}/${year}?keyword=true&page=${page}`);
+  return res.data;
+};
+
+export const useGetLetters = (ownerId: string, year: string, page: number) => {
+  return useQuery({
+    queryKey: ['grid-letters', ownerId, year, page],
+    queryFn: () => fetchLetters(ownerId, year, page),
+    placeholderData: (previousData) => previousData,
+  });
+};
+
diff --git a/apps/client/src/apis/cake/useGetYear.tsx b/apps/client/src/apis/cake/useGetYear.tsx
@@ -0,0 +1,15 @@
+import axiosInstance from "#apis/axios.ts"
+import { getUserYearRes } from "@isttp/schemas/all"
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+async function fetchYear() {
+  const res = await axiosInstance.get<getUserYearRes>('user/year');
+  return res.data;
+}
+
+export const useGetYear = () => {
+  return useSuspenseQuery({
+    queryKey: ['get-year'],
+    queryFn: () => fetchYear()
+  })
+}
diff --git a/apps/client/src/apis/letter/useGetLetter.tsx b/apps/client/src/apis/letter/useGetLetter.tsx
@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import axiosInstance from '#apis/axios.ts';
+
+async function fetchLetter(letterId: number) {
+  const res = await axiosInstance.get(`/letter/${letterId}?requirement=true`);
+  return res.data;
+};
+
+export const useGetLetter = (letterId: number) => {
+  return useQuery({
+    queryKey: ['letter', letterId],
+    queryFn: () => fetchLetter(letterId),
+    enabled: !!letterId,
+    staleTime: 0,
+  });
+}
+
+async function fetchAllLetter(letterId: number) {
+  const res = await axiosInstance.get(`/letter/${letterId}?requirement=false`);
+  return res.data;
+};
+
+export const useGetAllLetter = (letterId: number) => {
+  return useQuery({
+    queryKey: ['letter', letterId],
+    queryFn: () => fetchAllLetter(letterId),
+    enabled: !!letterId
+  });
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ @@
     <body>
         <div id="root"></div>
+        <div id="modal"></div>
         <script defer src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
     </body>
@@ Expand Down @@