♻️[Refactor] 채팅 리펙토링 #283

src/app/chat/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import ChatBubbleList from '@/features/chat-room/container/chat-bubble-list/ChatBubbleList';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import ChatCard from '@/features/chat/components/chat-card/ChatCard';
 import ParticipantCounter from '@/components/participant-counter/ParticipantCounter';
 import IconButton from '@/components/icon-button/IconButton';
@@ -26,6 +26,7 @@ import { bookClubs } from '@/api/book-club/react-query';
 import { formatDateForUI } from '@/lib/utils/formatDateForUI';
 import { getCookie } from '@/features/auth/utils/cookies';
 import { initializeSocket } from '@/features/chat/utils/socket';
+import MessageIcon from '../../../../public/icons/MessageIcon';
 
 function ChatRoomPage() {
   const pathname = usePathname();
@@ -41,10 +42,16 @@ function ChatRoomPage() {
     bookClubs.my()._ctx.joined({ order: 'DESC', page: 1, size: 10 }),
   );
 
-  const bookClubDetail = data?.data?.bookClubs?.find(
+  const bookClubDetail = data?.bookClubs?.find(
     (club: any) => club.id === Number(chatId),
   );
 
+  const router = useRouter();
+
+  const handleGoBack = () => {
+    router.push('/chat');
+  };
+
   useEffect(() => {
     const connectSocket = async () => {
       const token = getCookie('auth_token');
@@ -181,7 +188,7 @@ function ChatRoomPage() {
             <div className="flex items-center gap-2">
               <IconButton
                 icon={<GoBackIcon />}
-                onClick={() => console.log('채팅 버튼 클릭')}
+                onClick={handleGoBack}
                 className="bg-gray-light-02"
               />
               <h3>채팅</h3>
@@ -207,7 +214,7 @@ function ChatRoomPage() {
                 ? formatDateForUI(bookClubDetail.targetDate, 'KOREAN')
                 : '',
               meetingType: bookClubDetail?.meetingType || 'OFFLINE',
-              onClick: () => console.log('헤더 클릭'),
+              onClick: () => router.push(`/bookclub/${chatId}`),
             }}
           />
         </div>
@@ -219,9 +226,17 @@ function ChatRoomPage() {
           onProfileClick={() => {}}
         />
       </div>
-      <form onSubmit={handleSubmit}>
-        <MessageInput value={message} onChange={handleMessageChange} />
-      </form>
+      <div className="fixed bottom-8 left-0 right-0 flex w-full items-center justify-between gap-3 bg-white px-4 sm:px-[24px] lg:px-[102px]">
+        <form className="w-full" onSubmit={handleSubmit}>
+          <MessageInput value={message} onChange={handleMessageChange} />
+        </form>
+        <IconButton
+          icon={<MessageIcon />}
+          aria-label="메시지 전송"
+          className="h-[52px] w-[52px] bg-green-light-01"
+          onClick={handleSubmit}
+        />
+      </div>
     </div>
   );
 }

src/features/auth/api/auth.ts

@@ -97,28 +97,3 @@ export const signup = async (data: SignUpFormData) => {
     throw error;
   }
 };
-
-export const refreshAccessToken = async (refreshToken: string) => {
-  try {
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/auths/refresh`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ refreshToken }),
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error('토큰 갱신 실패');
-    }
-
-    console.log('리프레시 성공');
-    return response.json();
-  } catch (error) {
-    console.error('토큰 갱신 에러:', error);
-    throw error;
-  }
-};

src/features/auth/api/refreshAccessToken.ts

@@ -0,0 +1,24 @@
+export const refreshAccessToken = async (refreshToken: string) => {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/auths/refresh`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ refreshToken }),
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error('토큰 갱신 실패');
+    }
+
+    console.log('리프레시 성공');
+    return response.json();
+  } catch (error) {
+    console.error('토큰 갱신 에러:', error);
+    throw error;
+  }
+};

src/lib/utils/apiClient.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { getCookie, deleteCookie } from '@/features/auth/utils/cookies';
 import { useAuthStore } from '@/store/authStore';
-import { refreshAccessToken } from '@/features/auth/api/auth';
+import { refreshAccessToken } from '@/features/auth/api/refreshAccessToken';
 
 const apiClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,

src/middleware.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import { refreshAccessToken } from '@/features/auth/api/auth';
+import { refreshAccessToken } from '@/features/auth/api/refreshAccessToken';
 const AUTH_REQUIRED_PATHS = ['/wish', '/profile', '/bookclub/create', '/chat'];
 
 export async function middleware(request: NextRequest) {