Merge branch 'release/2.0.3'

KEEPER31337 · Dec 19, 2023 · 200c47b · 200c47b
2 parents 2d583ea + 34c3880
commit 200c47b
Show file tree

Hide file tree

Showing 45 changed files with 577 additions and 290 deletions.
diff --git a/.github/workflows/gpt_review.yml b/.github/workflows/gpt_review.yml
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Keeper Homepage Renewal2 Frontend Developers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,2 +1,135 @@
-# Homepage-Front-R2
-키퍼 홈페이지 프론트엔드 리뉴얼2
+<div align="center">
+  <img src="/src/assets/logo/logo_neon.svg" width="250" alt="keeper logo"/>
+</div>
+
+# <div align="center">Homepage-Front-R2</div>
+
+> 키퍼 홈페이지 프론트엔드 리뉴얼2
+>
+> 개발기간 : 2023. 11. 11. ~ 2023. 10. 15.
+
+## 목차
+
+[🔗 배포 주소](#-배포-주소)<br/>
+[👨‍💻 구성원](#-구성원)<br/>
+[👀 프로젝트 배경](#-프로젝트-배경)<br/>
+[🚀 프로젝트 목적](#-프로젝트-목적)<br/>
+[🔧 기술 스택](#-기술-스택)<br/>
+[💡 시작 가이드](#-시작-가이드)<br/>
+[💎 라이센스](#-라이센스)<br/>
+
+## 🔗 배포 주소
+
+> 운영 서버 주소 : https://keeper.or.kr/
+>
+> 개발 서버 주소 : https://dev.keeper.or.kr/
+
+## 👨‍💻 구성원
+
+### 🕹️ 주담당자
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://www.github.com/publdaze">
+        <img src="https://github.com/publdaze.png" width="80" alt="main manager"/>
+        <br/><b>publdaze</b>
+      </a>
+    </td>
+    <td>
+      <li>이메일 문의</li>
+      <li><a href="mailto:[email protected]">[email protected]</a></li>
+    </td>
+  </tr>
+</table>
+
+### 🛠️ 유지 보수 담당자
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/publdaze">
+        <img src="https://github.com/publdaze.png" width="80" alt="publdaze"/>
+        <br />
+        <sub><b>publdaze</b></sub>
+      </a>
+      <br />
+    </td>
+    <td align="center">
+      <a href="https://github.com/jasper200207">
+      <img src="https://github.com/jasper200207.png" width="80" alt="jasper200207"/>
+      <br />
+      <sub><b>jasper200207</b></sub>
+      </a>
+      <br />
+    </td>
+    <td align="center">
+      <a href="https://github.com/pipisebastian">
+      <img src="https://github.com/pipisebastian.png" width="80" alt="pipisebastian"/>
+      <br />
+      <sub><b>pipisebastian</b></sub>
+      </a>
+      <br />
+    </td>
+  </tr>
+</table>
+
+### 👨‍👨‍👦‍👦 기여자
+
+[![contributors](https://contrib.rocks/image?repo=KEEPER31337/Homepage-Front-R2)](https://github.com/KEEPER31337/Homepage-Front-R2/graphs/contributors)
+
+## 👀 프로젝트 배경
+
+#### 기존 리뉴얼 홈페이지의 문제점
+
+- **통일성 부족한 디자인**  
+  각 페이지마다 개별적인 디자인으로 인해 통일성이 부족했습니다.
+- **명확하지 않은 코딩 규칙**  
+  명확한 코딩 규칙이 없어 코드마다 다양한 코딩 스타일이 혼재되었습니다.
+- **부족한 코드 리뷰**  
+  리뷰 없이 머지가 가능하여 코드 리뷰 활동이 활발히 이루어지지 않았습니다.
+- **팀원 간 소통 부족**  
+  회의 및 업무 공유가 부족하여 다른 팀원들의 작업 현황을 파악하기 어려웠습니다.
+
+## 🚀 프로젝트 목적
+
+- **명확한 기획과 디자인**  
+  기획 담당과 디자인 담당을 명확히 정하고, 분야별 회의를 진행하여 통일성을 유지하고자 합니다.
+- **클린 코드**  
+  Eslint와 Prettier를 명확하게 정의하여 코드의 일관성을 높이고, 코드 리뷰를 적극적으로 수행하여 상호간에 놓친 부분을 보완하여 클린 코드를 유지하고자 합니다.
+- **가시적인 진척도와 활발한 소통**  
+  주기적인 업무 공유 및 회의를 통해 팀원 간 의견을 조율하고, GitHub의 프로젝트 기능을 활용하여 전체적인 프로젝트 진행 상황과 개별 진척도를 명확히 파악할 수 있도록 합니다.
+- **코드 재사용성 높이기**  
+  공통된 기능을 수행하는 컴포넌트를 개발하여 코드의 재사용성을 높입니다. 이를 통해 일관된 디자인을 유지하고 유지보수의 효율성을 향상시킬 수 있습니다.
+
+## 🔧 기술 스택
+
+### 🛠 Skill & Tool
+
+<img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white" /> <img src="https://img.shields.io/badge/TypeScript-0769AD?style=flat-square&logo=TypeScript&logoColor=white" /> <img src="https://img.shields.io/badge/ReactQuery-FF4154?style=flat-square&logo=ReactQuery&logoColor=white" /> <img src="https://img.shields.io/badge/Recoil-3578E5?style=flat-square&logo=Recoil&logoColor=white" /> <img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat-square&logo=tailwind-css&logoColor=white" /> <img src="https://img.shields.io/badge/MUI-007FFF?style=flat-square&logo=MUI&logoColor=white" /> <img src="https://img.shields.io/badge/ESLint-4B32C3?style=flat-square&logo=eslint&logoColor=white" /> <img src="https://img.shields.io/badge/Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=white" />
+
+### 🧩 Communication Tool
+
+<img src="https://img.shields.io/badge/Slack-4A154B?style=flat-square&logo=Slack&logoColor=white" /> <img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=GitHub&logoColor=white" /> <img src="https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=Figma&logoColor=white" /> <img src="https://img.shields.io/badge/Notion-ffffff?style=flat-square&logo=Notion&logoColor=black" />
+
+## 💡 시작 가이드
+
+- nvm 설정
+  ```
+  nvm install
+  nvm use
+  ```
+- root path에 `.env` 파일 추가
+  ```
+  REACT_APP_API_URL={{ apiUrl }}
+  HTTPS=true
+  ```
+- 필요한 패키지 설치 및 실행
+  ```
+  npm install
+  npm start
+  ```
+
+## 💎 라이센스
+
+해당 프로젝트는 [MIT LICENSE](https://github.com/KEEPER31337/Homepage-Front-R2/blob/develop/LICENSE) 를 따릅니다.
diff --git a/src/api/authApi.ts b/src/api/authApi.ts
@@ -1,19 +1,28 @@
 import { useMutation } from 'react-query';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { useSetRecoilState } from 'recoil';
 import memberState from '@recoil/member.recoil';
 
 const useSignOutMutation = () => {
-  const fetcher = () => axios.post(`/sign-out`);
-
   const navigate = useNavigate();
   const setMemberState = useSetRecoilState(memberState);
 
+  const fetcher = () => axios.post(`/sign-out`);
+  const signOut = () => {
+    navigate('/');
+    setMemberState(null);
+  };
+
   return useMutation(fetcher, {
     onSuccess: () => {
-      navigate('/');
-      setMemberState(null);
+      signOut();
+    },
+    onError: (error) => {
+      const errorStatusCode = (error as AxiosError).response?.status;
+      if (errorStatusCode === 401) {
+        signOut();
+      }
     },
   });
 };

diff --git a/src/api/memberApi.ts b/src/api/memberApi.ts
@@ -1,6 +1,7 @@
 import toast from 'react-hot-toast';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import axios from 'axios';
+import { PASSWORD } from '@constants/apiResponseMessage';
 import { useApiError } from '@hooks/useGetApiError';
 import { formatGeneration } from '@utils/converter';
 import { ProfileInfo, MemberDetailInfo } from './dto';
@@ -123,7 +124,7 @@ const useEditEmailMutation = () => {
   const { handleError } = useApiError({
     400: {
       default: () => {
-        toast.error('현재 비밀번호가 일치하지 않습니다.');
+        toast.error(PASSWORD.error.mismatch);
       },
     },
   });
@@ -138,7 +139,7 @@ const useEditPasswordMutation = () => {
   const { handleError } = useApiError({
     400: {
       default: () => {
-        toast.error('현재 비밀번호가 일치하지 않습니다.');
+        toast.error(PASSWORD.error.mismatch);
       },
     },
   });
@@ -147,7 +148,7 @@ const useEditPasswordMutation = () => {
 
   return useMutation(fetcher, {
     onSuccess: () => {
-      toast.success('비밀번호가 변경되었습니다.');
+      toast.success(PASSWORD.success.changed);
     },
     onError: (err) => handleError(err, 400),
   });
@@ -157,7 +158,7 @@ const useWithdrawalMutation = () => {
   const { handleError } = useApiError({
     400: {
       default: () => {
-        toast.error('비밀번호가 일치하지 않습니다.');
+        toast.error(PASSWORD.error.mismatch);
       },
     },
   });

diff --git a/src/api/postApi.ts b/src/api/postApi.ts
@@ -2,6 +2,7 @@ import toast from 'react-hot-toast';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
 import axios, { AxiosError } from 'axios';
+import { BOARD } from '@constants/apiResponseMessage';
 import { useApiError } from '@hooks/useGetApiError';
 import {
   BoardPosts,
@@ -151,12 +152,12 @@ const useGetEachPostQuery = (
     400: {
       default: () => {
         // TODO 페이지 문구로 띄워주기
-        toast.error('게시글 열람 조건을 충족하지 않습니다.');
+        toast.error(BOARD.error.readCondition);
       },
     },
     403: {
       40301: () => {
-        toast.error('게시글의 비밀번호가 일치하지 않습니다.');
+        toast.error(BOARD.error.mismatchPassword);
       },
       40302: () => {
         // 비밀글 여부 true로 변경
@@ -226,7 +227,7 @@ const useDownloadFileMutation = () => {
     },
     onError: (error) => {
       if ((error as AxiosError)?.response?.status === 400) {
-        toast.error('댓글 작성이 필요합니다.');
+        toast.error(BOARD.error.requiredComment);
       }
     },
   });

diff --git a/src/api/seminarApi.ts b/src/api/seminarApi.ts
@@ -1,6 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import axios from 'axios';
 import { DateTime } from 'luxon';
+import { SEMINAR } from '@constants/apiResponseMessage';
 import { useApiError } from '@hooks/useGetApiError';
 import { AttendSeminarListInfo, SeminarStatus, SeminarInfo, SeminarCardInfo } from './dto';
 
@@ -143,7 +144,7 @@ const useAddSeminarMutation = ({ setHelperText }: { setHelperText: React.Dispatc
   const { handleError } = useApiError({
     409: {
       40901: () => {
-        setHelperText('동일한 날짜의 세미나는 생성할 수 없습니다.');
+        setHelperText(SEMINAR.error.duplicateSeminarDate);
       },
     },
   });

diff --git a/src/assets/notFound/404.svg b/src/assets/notFound/404.svg
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -4,7 +4,7 @@ import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 import { VscAccount, VscGithubInverted, VscThreeBars } from 'react-icons/vsc';
 import { useRecoilValue } from 'recoil';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
-import { HEADER_HEIGHT } from '@constants/keeperTheme';
+import { KEEPER_HEIGHT, KEEPER_COLOR } from '@constants/keeperTheme';
 import memberState from '@recoil/member.recoil';
 import FilledButton from '@components/Button/FilledButton';
 import AccountMenu from './Menu/AccountMenu';
@@ -33,7 +33,7 @@ const Header = ({ setMobileSidebarOpen }: HeaderProps) => {
     <AppBar
       position="fixed"
       className="h-14 !bg-mainBlack !bg-none sm:h-header sm:border-b sm:border-pointBlue"
-      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: HEADER_HEIGHT }}
+      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: KEEPER_HEIGHT.header }}
     >
       <Toolbar className="flex items-center justify-between">
         <div className="flex items-center">
@@ -57,10 +57,10 @@ const Header = ({ setMobileSidebarOpen }: HeaderProps) => {
                 <Typography className="h-6 w-6 rounded-full bg-pointBlue text-mainBlack">W</Typography>
               </IconButton>
               <IconButton target="_blank" href="https://github.com/KEEPER31337">
-                <VscGithubInverted fill="#4CEEF9" />
+                <VscGithubInverted fill={KEEPER_COLOR.pointBlue} />
               </IconButton>
               <IconButton edge="end" onClick={handleAccountIconClick}>
-                <VscAccount fill="#4CEEF9" />
+                <VscAccount fill={KEEPER_COLOR.pointBlue} />
               </IconButton>
             </div>
             <AccountMenu userInfo={userInfo} anchorEl={anchorEl} open={profileMenuOpen} onClose={handleMenuClose} />