[refactor] 코드 개선

src/App.tsx

@@ -1,66 +1,67 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { AppLayout, AuthLayout, HomeLayout } from './components/Layout';
-import ApplicationPage from './pages/Application';
-import ApplyFinishPage from './pages/Application/applyFinishPage';
-import ClubFeePage from './pages/Application/clubFeePage';
+
+import Layout from './components/layout';
+import Login from './pages/Auth/Login';
+import FinishStep from './pages/Auth/SignUp/FinishStep';
+import NameStep from './pages/Auth/SignUp/NameStep';
+import StudentIdStep from './pages/Auth/SignUp/StudentIdStep';
+import TermStep from './pages/Auth/SignUp/TermStep';
+import UniversityStep from './pages/Auth/SignUp/UniversityStep';
 import ChatListPage from './pages/Chat';
 import ChatRoom from './pages/Chat/ChatRoom';
-import ClubDetail from './pages/ClubDetail';
-import ClubList from './pages/ClubList';
-import ClubSearch from './pages/ClubSearch';
-import CouncilDetail from './pages/CouncilDetail';
-import CouncilNotice from './pages/CouncilNotice';
+import ApplicationPage from './pages/Club/Application';
+import ApplyCompletePage from './pages/Club/Application/applyCompletePage';
+import ClubFeePage from './pages/Club/Application/clubFeePage';
+import ClubDetail from './pages/Club/ClubDetail';
+import ClubList from './pages/Club/ClubList';
+import ClubSearch from './pages/Club/ClubSearch';
+import CouncilDetail from './pages/Council/CouncilDetail';
+import CouncilNotice from './pages/Council/CouncilNotice';
 import Home from './pages/Home';
 import LicensePage from './pages/legal/LicensePage';
 import MarketingPolicyPage from './pages/legal/MarketingPolicyPage';
 import PrivacyPolicyPage from './pages/legal/PrivacyPolicyPage';
 import TermsPage from './pages/legal/TermsPage';
-import Login from './pages/Login';
-import MyPage from './pages/MyPage';
-import Profile from './pages/Profile';
-import FinishStep from './pages/SignUp/FinishStep';
-import NameStep from './pages/SignUp/NameStep';
-import StudentIdStep from './pages/SignUp/StudentIdStep';
-import TermStep from './pages/SignUp/TermStep';
-import UniversityStep from './pages/SignUp/UniversityStep';
+import MyPage from './pages/User/MyPage';
+import Profile from './pages/User/Profile';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route element={<AuthLayout />}>
+        <Route element={<Layout contentClassName="bg-indigo-0" />}>
           <Route path="/" element={<Login />} />
-          <Route path="/signup">
+          <Route path="signup">
             <Route index element={<TermStep />} />
             <Route path="university" element={<UniversityStep />} />
-            <Route path="student-id" element={<StudentIdStep />} />
+            <Route path="studentid" element={<StudentIdStep />} />
             <Route path="name" element={<NameStep />} />
             <Route path="finish" element={<FinishStep />} />
           </Route>
         </Route>
-        <Route element={<HomeLayout />}>
-          <Route path="/home" element={<Home />} />
-          <Route path="/me" element={<MyPage />} />
-          <Route path="/council">
+        <Route element={<Layout showBottomNav />}>
+          <Route path="home" element={<Home />} />
+          <Route path="me" element={<MyPage />} />
+          <Route path="council">
             <Route index element={<CouncilDetail />} />
             <Route path="notice/:noticeId" element={<CouncilNotice />} />
           </Route>
         </Route>
-        <Route element={<AppLayout />}>
+        <Route element={<Layout />}>
           <Route path="profile" element={<Profile />} />
           <Route path="legal">
             <Route path="oss" element={<LicensePage />} />
             <Route path="terms" element={<TermsPage />} />
             <Route path="privacy" element={<PrivacyPolicyPage />} />
             <Route path="marketing" element={<MarketingPolicyPage />} />
           </Route>
-          <Route path="/clubs">
+          <Route path="clubs">
             <Route index element={<ClubList />} />
             <Route path="search" element={<ClubSearch />} />
             <Route path=":clubId" element={<ClubDetail />} />
             <Route path=":clubId/applications" element={<ApplicationPage />} />
             <Route path=":clubId/fee" element={<ClubFeePage />} />
-            <Route path=":clubId/finish" element={<ApplyFinishPage />} />
+            <Route path=":clubId/complete" element={<ApplyCompletePage />} />
           </Route>
           <Route path="chats">
             <Route index element={<ChatListPage />} />

src/apis/auth/index.ts

@@ -2,37 +2,37 @@ import { apiClient } from '../client';
 import type { ModifyMyInfoRequest, MyInfoResponse, SignupRequest } from './entity';
 
 export const signup = async (data: SignupRequest) => {
-  const response = await apiClient.post('/users/signup', {
+  const response = await apiClient.post('users/signup', {
     body: data,
     requiresAuth: true,
   });
   return response;
 };
 
 export const getMyInfo = async () => {
-  const response = await apiClient.get<MyInfoResponse>('/users/me', {
+  const response = await apiClient.get<MyInfoResponse>('users/me', {
     requiresAuth: true,
   });
   return response;
 };
 
 export const logout = async () => {
-  const response = await apiClient.post('/users/logout', {
+  const response = await apiClient.post('users/logout', {
     requiresAuth: true,
   });
   return response;
 };
 
 export const putMyInfo = async (data: ModifyMyInfoRequest) => {
-  const response = await apiClient.put('/users/me', {
+  const response = await apiClient.put('users/me', {
     body: data,
     requiresAuth: true,
   });
   return response;
 };
 
 export const deleteMyAccount = async () => {
-  const response = await apiClient.delete('/users/withdraw', {
+  const response = await apiClient.delete('users/withdraw', {
     requiresAuth: true,
   });
   return response;

src/apis/chat/index.ts

@@ -8,22 +8,22 @@ import type {
 } from './entity';
 
 export const getChatRooms = async () => {
-  const response = await apiClient.get<ChatRoomsResponse>('/chats/rooms', {
+  const response = await apiClient.get<ChatRoomsResponse>('chats/rooms', {
     requiresAuth: true,
   });
   return response;
 };
 
 export const postChatRooms = async (clubId: number) => {
-  const response = await apiClient.post<CreateChatRoomResponse>('/chats/rooms', {
+  const response = await apiClient.post<CreateChatRoomResponse>('chats/rooms', {
     body: { clubId },
     requiresAuth: true,
   });
   return response;
 };
 
 export const postChatMessage = async (chatRoomId: number, content: string) => {
-  const response = await apiClient.post<ChatMessage>(`/chats/rooms/${chatRoomId}/messages`, {
+  const response = await apiClient.post<ChatMessage>(`chats/rooms/${chatRoomId}/messages`, {
     body: { content },
     requiresAuth: true,
   });
@@ -32,7 +32,7 @@ export const postChatMessage = async (chatRoomId: number, content: string) => {
 
 export const getChatMessages = async (params: ChatMessageRequestParam) => {
   const response = await apiClient.get<ChatMessagesResponse, ChatMessageRequestParam>(
-    `/chats/rooms/${params.chatRoomId}`,
+    `chats/rooms/${params.chatRoomId}`,
     { params, requiresAuth: true }
   );
   return response;

src/components/Layout/Header/index.tsx → src/components/layout/Header/index.tsx

@@ -2,7 +2,7 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import ChatCircleIcon from '@/assets/svg/chat-circle.svg';
 import ChevronLeftIcon from '@/assets/svg/chevron-left.svg';
 import useChat from '@/pages/Chat/hooks/useChat';
-import { useMyInfo } from '@/pages/Profile/hooks/useMyInfo';
+import { useMyInfo } from '@/pages/User/Profile/hooks/useMyInfo';
 import { ROUTE_TITLES } from './routeTitles';
 
 const INFO_HEADER_LIST = ['/home', '/council'];

src/components/layout/index.tsx

@@ -0,0 +1,30 @@
+import { Suspense } from 'react';
+import { Outlet } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+import BottomNav from './BottomNav';
+import Header from './Header';
+
+interface LayoutProps {
+  showBottomNav?: boolean;
+  contentClassName?: string;
+}
+
+export default function Layout({ showBottomNav = false, contentClassName }: LayoutProps) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <Suspense>
+        <main
+          className={twMerge(
+            'bg-background flex flex-1 flex-col overflow-y-auto pt-11',
+            showBottomNav && 'pb-19',
+            contentClassName
+          )}
+        >
+          <Outlet />
+        </main>
+      </Suspense>
+      {showBottomNav && <BottomNav />}
+    </div>
+  );
+}

src/index.css

@@ -18,8 +18,13 @@
 }
 
 @layer base {
+  html {
+    overscroll-behavior: none;
+  }
+
   body {
     position: relative;
+    overscroll-behavior-y: contain;
   }
 
   button {

src/pages/SignUp/FinishStep.tsx → src/pages/Auth/SignUp/FinishStep.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import CheckInCircleIcon from '@/assets/svg/check-in-circle.svg';
-import { useMyInfo } from '../Profile/hooks/useMyInfo';
+import { useMyInfo } from '@/pages/User/Profile/hooks/useMyInfo';
 
 function FinishStep() {
   const navigate = useNavigate();

src/pages/SignUp/UniversityStep.tsx → src/pages/Auth/SignUp/UniversityStep.tsx

@@ -30,7 +30,7 @@ function UniversityStep() {
 
   const handleUniversitySelect = (universityId: string) => () => {
     update({ universityId });
-    navigate('/signup/student-id');
+    navigate('/signup/studentid');
   };
 
   return (

src/pages/Application/applyFinishPage.tsx → src/pages/Club/Application/applyCompletePage.tsx

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 import CheckCircleIcon from '@/assets/svg/check-circle.svg';
 import { useGetClubDetail } from '../ClubDetail/hooks/useGetClubDetail';
 
-function ApplyFinishPage() {
+function ApplyCompletePage() {
   const { clubId } = useParams();
   const { data: clubDetail } = useGetClubDetail(Number(clubId));
 
@@ -30,4 +30,4 @@ function ApplyFinishPage() {
   );
 }
 
-export default ApplyFinishPage;
+export default ApplyCompletePage;

src/pages/Application/clubFeePage.tsx → src/pages/Club/Application/clubFeePage.tsx

@@ -32,7 +32,7 @@ function ClubFeePage() {
       <button
         type="button"
         className="bg-primary mt-auto w-full rounded-lg py-3.5 text-center text-lg leading-7 font-bold text-white"
-        onClick={() => navigate(`/clubs/${clubId}/finish`)}
+        onClick={() => navigate(`/clubs/${clubId}/complete`)}
       >
         제출하기
       </button>

src/pages/ClubDetail/components/ClubAccount.tsx → src/pages/Club/ClubDetail/components/ClubAccount.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
-import AccountInfoCard from '@/pages/Application/components/AccountInfo';
-import { useGetClubFee } from '@/pages/Application/hooks/useGetClubFee';
+import AccountInfoCard from '../../Application/components/AccountInfo';
+import { useGetClubFee } from '../../Application/hooks/useGetClubFee';
 
 function ClubAccount() {
   const { clubId } = useParams();

src/pages/ClubDetail/index.tsx → src/pages/Club/ClubDetail/index.tsx

@@ -22,6 +22,10 @@ function ClubDetail() {
     setSearchParams({ tab }, { replace: true });
   };
 
+  if (!clubDetail) {
+    return <div>잘못된 경로입니다</div>;
+  }
+
   const tabs: { key: TabType; label: string; show: boolean }[] = [
     { key: 'recruitment', label: '모집', show: clubDetail.recruitment.status !== 'CLOSED' },
     { key: 'intro', label: '소개', show: true },
@@ -31,10 +35,6 @@ function ClubDetail() {
 
   const visibleTabs = tabs.filter((tab) => tab.show);
 
-  if (!clubDetail) {
-    return <div>잘못된 경로입니다</div>;
-  }
-
   return (
     <>
       <div className="fixed right-0 left-0 bg-white shadow-[0_1px_2px_0_rgba(0,0,0,0.04)]">

src/pages/CouncilDetail/components/CouncilNotice.tsx → src/pages/Council/CouncilDetail/components/CouncilNotice.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
-import { useCouncilNotice } from '@/pages/ClubDetail/hooks/useCouncilNotices';
+import { useCouncilNotice } from '@/pages/Club/ClubDetail/hooks/useCouncilNotices';
 
 function CouncilNotice() {
   const observerRef = useRef<HTMLDivElement>(null);

src/pages/CouncilNotice/hooks/useCouncilNoticeDetail.ts → src/pages/Council/CouncilNotice/hooks/useCouncilNoticeDetail.ts

@@ -44,6 +44,8 @@ export const useGetCouncilNoticeDetail = ({ noticeId }: UseGetCouncilNoticeDetai
 
       return changed ? next : old;
     });
+
+    queryClient.invalidateQueries({ queryKey: ['myInfo'], refetchType: 'all' });
   }, [noticeId, query.data, queryClient]);
 
   return query;

src/pages/Home/index.tsx

@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom';
 import CalendarIcon from '@/assets/svg/calendar.svg';
 import Card from '@/components/common/Card';
-import ClubCard from '../ClubList/components/ClubCard';
-import { useGetClubs } from '../ClubList/hooks/useGetClubs';
+import ClubCard from '../Club/ClubList/components/ClubCard';
+import { useGetClubs } from '../Club/ClubList/hooks/useGetClubs';
 import SimpleClubCard from './components/SimpleClubCard';
 import { useGetJoinedClubs } from './hooks/useGetJoinedClubs';
 import { useGetScheduleList } from './hooks/useGetScheduleList';