Develop client (#211)

* feat: 불필요하게 분리된 컴폰넌트 제거

* design: 슬라이더 UI수정 및 모바일 대응

* design: 로드맵 디테일 페이지 UI수정 및 모바일 대응

* feat: 모집중인 골룸이 존재하지 않을 때 대체 UI 표시

* refactor: console.log 일괄 제거

* chore: class컴포넌트 사용을 위한 설정 추가

* feat: critical errorBoudnary 적용

* refactor: errorboundary reset메서드 수정

* feat: API에러바운더리 생성

* feat: Network에러바운더리 생성

* feat: Runtime에러바운더리 생성

* feat: Critical에러바운더리 생성

* feat: Base에러바운더리 생성

* feat: Async에러바운더리 생성

* feat: 커스텀  에러 생성로직 구현

* refactor: 불필요한 에러바운더리 제거

* refactor: 에버바운더리 props & state 타입 수정

* feat: 에러바운더리 적용

* build: react-lightweight-form 설치

* refactor: 로그인, 회원가입 Form에 react-lightweight-form 적용

* build: react-lightweight-form v1.2.5로 업데이트

* refactor: 아이디와 비밀번호 필드에 대해 required 속성 적용

* fix: babel플러그인 활성화

* refactor: 불필요한 suspense 제거

* feat: 에러바운더리 fallbackUI생성 및 추가

* feat: 에러바운더리에 callback props추가

* refactor: onError callback을 실행할 수 있게 로직 변경

* style: ErrorBoundarySharedProps 타입 export

* [feat/CK-233] 데이터 통신로직 리팩토링 & mutate시에 에러 핸들링을 적용한다 (#195)

* refactor:  api경로 추상화

* chore: 사용하지 않는 파일 삭제

* design: 토스트 아이콘 삽입

* refactor: toast 경로변경

* refactor: mutation queryclient 제거

* design: toast 디자인 변경

* feat: toast context 분리 및 파일명 변경

* feat: useMutationWithKey 구현

* feat: useMutationWithKey 적용

* feat: useMutationWithKey 적용

* feat: toast contents 상수화

* [feat/CK-243] 공통컴포넌트 라이브러리를 적용한다 (#208)

* chore: ck-util-component 라이브러리 설치

* refactor: roadmap create select컴포넌트 유틸 라이브러리 적용

* refactor: goalroom filter select컴포넌트 유틸 라이브러리 적용

* refactor: 불필요한 코드 제거

* refactor: roadmap create 난이도 select컴포넌트 유틸 라이브러리 적용

* feat: invariantType 함수 추가

* refactor: roadmap search select컴포넌트 유틸 라이브러리 적용

* chore: 불필요한 코드 제거

* chore: ck-util-components version update

* refactor: goalroomDashboard modal 컴포넌트 라이브러리 적용

* chore: 사용하지 않는 모듈 제거

* chore: ck-util-components version update

* [feat/CK-244] 에러바운더리 오류를 해결하고, 골루 대시보드에 적용한다 (#210)

* chore: ck-util-component 라이브러리 설치

* refactor: roadmap create select컴포넌트 유틸 라이브러리 적용

* refactor: goalroom filter select컴포넌트 유틸 라이브러리 적용

* refactor: 불필요한 코드 제거

* refactor: roadmap create 난이도 select컴포넌트 유틸 라이브러리 적용

* feat: invariantType 함수 추가

* refactor: roadmap search select컴포넌트 유틸 라이브러리 적용

* chore: 불필요한 코드 제거

* chore: ck-util-components version update

* refactor: goalroomDashboard modal 컴포넌트 라이브러리 적용

* chore: 사용하지 않는 모듈 제거

* chore: ck-util-components version update

* fix: lazy suspense 적용 오류 해결

* refactor: 데이터 패칭 의존성 분리

* feat: goalroomDashboard 에러바운더리 적용

---------

Co-authored-by: Jungwoo <[email protected]>
Co-authored-by: 부엉이 <[email protected]>
Co-authored-by: Woody <[email protected]>

client/.babelrc

@@ -16,6 +16,12 @@
         "displayName": true
       }
     ],
-    "@babel/plugin-transform-runtime"
+    "@babel/plugin-transform-runtime",
+    [
+      "babel-plugin-transform-builtin-extend",
+      {
+        "globals": ["Error", "Array"]
+      }
+    ]
   ]
 }

client/package.json

@@ -33,8 +33,11 @@
     "@tanstack/react-query-devtools": "^4.29.19",
     "ajv": "^8.12.0",
     "axios": "^1.4.0",
+    "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "ck-util-components": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lightweight-form": "^1.2.5",
     "react-router-dom": "^6.14.1",
     "styled-components": "^6.0.0"
   },

client/src/App.tsx

@@ -8,19 +8,19 @@ import SignUpPage from '@pages/signUpPage/SignUpPage';
 import LoginPage from '@pages/loginPage/LoginPage';
 import PageLayout from '@components/_common/pageLayout/PageLayout';
 import RoadmapListPage from '@pages/roadmapListPage/roadmapListPage';
-import Fallback from '@components/_common/fallback/Fallback';
 import RoadmapDetailPage from './pages/roadmapDetailPage/RoadmapDetailPage';
 import RoadmapCreatePage from './pages/roadmapCreatePage/RoadmapCreatePage';
-import ToastProvider from '@components/_common/toastProvider/ToastProvider';
+import ToastProvider from '@/components/_common/toast/Toast';
 import MyPage from '@pages/myPage/MyPage';
 import UserInfoProvider from './components/_providers/UserInfoProvider';
 import RoadmapSearchResult from './components/roadmapListPage/roadmapSearch/RoadmapSearchResult';
 import MainPage from '@pages/mainPage/MainPage';
 import OAuthRedirect from './components/loginPage/OAuthRedirect';
-import AsyncBoundary from './components/_common/errorBoundary/AsyncBoundary';
 import SessionHandler from '@components/_common/sessionHandler/SessionHandler';
 import RouteChangeTracker from '@components/_common/routeChangeTracker/RouteChangeTracker';
 import PrivateRouter from '@components/_common/privateRouter/PrivateRouter';
+import { Spinner } from './components/_common/spinner/Spinner.styles';
+import { CriticalErrorBoundary } from './components/_common/errorBoundary/CriticalErrorBoundary';
 
 const GoalRoomDashboardPage = lazy(
   () => import('@pages/goalRoomDashboardPage/GoalRoomDashboardPage')
@@ -40,8 +40,8 @@ const App = () => {
             <RouteChangeTracker>
               <ResponsiveContainer>
                 <PageLayout>
-                  <AsyncBoundary>
-                    <SessionHandler>
+                  <SessionHandler>
+                    <CriticalErrorBoundary>
                       <Routes>
                         <Route path='/' element={<MainPage />} />
                         <Route path='/login' element={<LoginPage />} />
@@ -52,18 +52,15 @@ const App = () => {
                             element={<RoadmapSearchResult />}
                           />
                         </Route>
+                        <Route path='/roadmap/:id' element={<RoadmapDetailPage />} />
                         <Route
-                          path='/roadmap/:id'
+                          path='/roadmap/:id/goalroom-list'
                           element={
-                            <Suspense fallback={<Fallback />}>
-                              <RoadmapDetailPage />
+                            <Suspense fallback={<Spinner />}>
+                              <GoalRoomListPage />
                             </Suspense>
                           }
                         />
-                        <Route
-                          path='/roadmap/:id/goalroom-list'
-                          element={<GoalRoomListPage />}
-                        />
                         <Route
                           path='/roadmap-create'
                           element={
@@ -76,13 +73,19 @@ const App = () => {
                           path='/roadmap/:id/goalroom-create'
                           element={
                             <PrivateRouter>
-                              <GoalRoomCreatePage />
+                              <Suspense fallback={<Spinner />}>
+                                <GoalRoomCreatePage />
+                              </Suspense>
                             </PrivateRouter>
                           }
                         />
                         <Route
                           path='/goalroom-dashboard/:goalroomId'
-                          element={<GoalRoomDashboardPage />}
+                          element={
+                            <Suspense fallback={<Spinner />}>
+                              <GoalRoomDashboardPage />
+                            </Suspense>
+                          }
                         />
                         <Route
                           path='/myPage'
@@ -94,8 +97,8 @@ const App = () => {
                         />
                         <Route path='/oauth/redirect' element={<OAuthRedirect />} />
                       </Routes>
-                    </SessionHandler>
-                  </AsyncBoundary>
+                    </CriticalErrorBoundary>
+                  </SessionHandler>
                 </PageLayout>
               </ResponsiveContainer>
             </RouteChangeTracker>

client/src/apis/goalRoom.ts

@@ -15,6 +15,7 @@ import {
 } from '@/myTypes/goalRoom/remote';
 import client from '@apis/axios/client';
 import { GoalRoomRecruitmentStatus, MyPageGoalRoom } from '@myTypes/goalRoom/internal';
+import { API_PATH } from '@/constants/_common/api';
 
 export const getGoalRoomList = async ({
   roadmapId,
@@ -24,7 +25,7 @@ export const getGoalRoomList = async ({
   lastId,
 }: GoalRoomListRequest): Promise<GoalRoomDetailResponse> => {
   const { data } = await client.get<GoalRoomDetailResponse>(
-    `/roadmaps/${roadmapId}/goal-rooms`,
+    API_PATH.GOALROOMS(roadmapId),
     {
       params: {
         ...(lastId && { lastId }),
@@ -39,36 +40,36 @@ export const getGoalRoomList = async ({
 };
 
 export const getMyGoalRoomList = async (statusCond: GoalRoomRecruitmentStatus) => {
-  const { data } = await client.get<MyPageGoalRoom[]>(
-    `/goal-rooms/me?statusCond=${statusCond}`
-  );
+  const { data } = await client.get<MyPageGoalRoom[]>(API_PATH.MY_GOALROOMS(statusCond));
 
   return data;
 };
 
 export const getGoalRoomDetail = async (
   goalRoomId: number
 ): Promise<GoalRoomInfoResponse> => {
-  const { data } = await client.get<GoalRoomInfoResponse>(`/goal-rooms/${goalRoomId}`);
+  const { data } = await client.get<GoalRoomInfoResponse>(
+    API_PATH.GOALROOM_DETAIL(goalRoomId)
+  );
   return data;
 };
 
 export const getGoalRoomDashboard = async (goalRoomId: string) => {
   const { data } = await client.get<GoalRoomBrowseResponse>(
-    `/goal-rooms/${goalRoomId}/me`
+    API_PATH.GOALROOM_DASHBOARD(goalRoomId)
   );
   return data;
 };
 
 export const postCreateGoalRoom = async (body: CreateGoalRoomRequest) => {
-  const { data } = await client.post(`/goal-rooms`, body);
+  const { data } = await client.post(API_PATH.CREATE_GOALROOM, body);
 
   return data;
 };
 
 export const getGoalRoomTodos = async (goalRoomId: string) => {
   const { data } = await client.get<GoalRoomTodoResponse>(
-    `/goal-rooms/${goalRoomId}/todos`
+    `${API_PATH.GOALROOM_TODOS(goalRoomId)}/90`
   );
 
   return data;
@@ -78,34 +79,34 @@ export const postToChangeTodoCheckStatus = async ({
   goalRoomId,
   todoId,
 }: GoalRoomTodoChangeStatusRequest) => {
-  return client.post(`/goal-rooms/${goalRoomId}/todos/${todoId}`);
+  return client.post(API_PATH.CHANGE_TODO_CHECKS(goalRoomId, todoId));
 };
 
 export const postCreateNewTodo = (goalRoomId: string, body: newTodoPayload) => {
-  return client.post(`/goal-rooms/${goalRoomId}/todos`, body);
+  return client.post(API_PATH.CREATE_TODO(goalRoomId), body);
 };
 
 export const postCreateNewCertificationFeed = (
   goalRoomId: string,
   formData: FormData
 ) => {
-  return client.post(`/goal-rooms/${goalRoomId}/checkFeeds`, formData, {
+  return client.post(API_PATH.CREATE_FEED(goalRoomId), formData, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
 };
 
 export const postJoinGoalRoom = (goalRoomId: string) => {
-  return client.post(`/goal-rooms/${goalRoomId}/join`);
+  return client.post(API_PATH.JOIN_GOALROOM(goalRoomId));
 };
 
 export const getGoalRoomParticipants = async (
   goalRoomId: string,
   participantsSortOrder: ParticipantsSortOrder
 ) => {
   const { data } = await client.get<GoalRoomParticipantsResponse>(
-    `/goal-rooms/${goalRoomId}/members`,
+    API_PATH.GOALROOM_PARTICIPANTS(goalRoomId),
     {
       params: {
         sortCond: participantsSortOrder,
@@ -118,19 +119,19 @@ export const getGoalRoomParticipants = async (
 
 export const getCertificationFeeds = async (goalRoomId: string) => {
   const { data } = await client.get<GoalRoomCertificationFeedsResponse>(
-    `/goal-rooms/${goalRoomId}/checkFeeds`
+    API_PATH.GOALROOM_FEEDS(goalRoomId)
   );
 
   return data;
 };
 
 export const postStartGoalRoom = async (goalRoomId: string) => {
-  return client.post(`/goal-rooms/${goalRoomId}/start`);
+  return client.post(API_PATH.START_GOALROOM(goalRoomId));
 };
 
 export const getGoalRoomNodeList = async (goalRoomId: string) => {
   const { data } = await client.get<GoalRoomNodeListResponse>(
-    `/goal-rooms/${goalRoomId}/nodes`
+    API_PATH.GOALROOM_NODE_LIST(goalRoomId)
   );
   return data;
 };

client/src/apis/roadmap.ts

@@ -1,3 +1,4 @@
+import { API_PATH } from '@/constants/_common/api';
 import type {
   RoadmapDetailResponse,
   RoadmapListRequest,
@@ -12,7 +13,7 @@ export const getRoadmapList = async ({
   filterCond,
   lastId,
 }: RoadmapListRequest) => {
-  const { data } = await client.get<RoadmapListResponse>(`/roadmaps`, {
+  const { data } = await client.get<RoadmapListResponse>(API_PATH.ROADMAPS, {
     params: {
       ...(categoryId && { categoryId }),
       ...(lastId && { lastId }),
@@ -31,7 +32,7 @@ export const getSearchRoadmapList = async ({
   lastId = '',
   size = 10,
 }: any) => {
-  const { data } = await client.get<RoadmapListResponse>(`/roadmaps/search`, {
+  const { data } = await client.get<RoadmapListResponse>(API_PATH.ROADMAP_SEARCH, {
     params: {
       [category]: search,
       filterCond,
@@ -44,22 +45,26 @@ export const getSearchRoadmapList = async ({
 };
 
 export const getRoadmapDetail = async (id: number): Promise<RoadmapDetailResponse> => {
-  const { data } = await client.get<RoadmapDetailResponse>(`/roadmaps/${id}`);
+  const { data } = await client.get<RoadmapDetailResponse>(API_PATH.ROADMAP_DETAIL(id));
 
   return data;
 };
 
 export const postCreateRoadmap = (roadmapValue: FormData) => {
-  const resposne = client.post<RoadmapValueRequest>('/roadmaps', roadmapValue, {
-    headers: {
-      'Content-Type': 'multipart/form-data;charset=UTF-8',
-    },
-  });
+  const resposne = client.post<RoadmapValueRequest>(
+    API_PATH.CREATE_ROADMAP,
+    roadmapValue,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data;charset=UTF-8',
+      },
+    }
+  );
   return resposne;
 };
 
 export const getMyRoadmapList = async (size: number, lastId?: number) => {
-  const { data } = await client.get<RoadmapListResponse>('/roadmaps/me', {
+  const { data } = await client.get<RoadmapListResponse>(API_PATH.MY_ROADMAPS, {
     params: {
       size,
       ...(lastId && { lastId }),

client/src/apis/user.ts

@@ -1,3 +1,4 @@
+import { API_PATH } from '@/constants/_common/api';
 import client from '@apis/axios/client';
 import {
   MemberJoinRequest,
@@ -9,17 +10,19 @@ import {
 } from '@myTypes/user/remote';
 
 export const signUp = (body: MemberJoinRequest) => {
-  return client.post('/members/join', body);
+  return client.post(API_PATH.SIGN_UP, body);
 };
 
 export const getNaverLoginRedirectUrl = async () => {
-  const { data } = await client.get<NaverLoginRedirectResponse>('/auth/oauth/naver');
+  const { data } = await client.get<NaverLoginRedirectResponse>(
+    API_PATH.NAVER_LOGIN_REDIRECT
+  );
 
   return data;
 };
 
 export const naverOAuthToken = async (code: string, state: string) => {
-  const { data } = await client.get<OAuthResponse>('/auth/login/oauth', {
+  const { data } = await client.get<OAuthResponse>(API_PATH.NAVER_TOKEN, {
     params: {
       code,
       state,
@@ -30,11 +33,11 @@ export const naverOAuthToken = async (code: string, state: string) => {
 };
 
 export const login = (body: UserLoginRequest) => {
-  return client.post<UserLoginResponse>('/auth/login', body);
+  return client.post<UserLoginResponse>(API_PATH.LOGIN, body);
 };
 
 export const getUserInfo = (signal?: AbortSignal) => {
-  return client.get<UserInfoResponse>('/members/me', {
+  return client.get<UserInfoResponse>(API_PATH.USER_INFO, {
     signal,
   });
 };