Merge branch 'dev' into feat/184-signup-button-loading

Author: yoo-nji

.github/workflows/autoBuild.yml

@@ -27,6 +27,14 @@ jobs:
             # Pull latest code from dev branch
             cd /home/ubuntu/react
             git pull origin dev
+
+            # Create .env file
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > .env
+            echo "VITE_SPOTIFY_CLIENT_ID=${{ secrets.VITE_SPOTIFY_CLIENT_ID }}" >> .env
+            echo "VITE_SPOTIFY_REDIRECT_URI=${{ secrets.VITE_SPOTIFY_REDIRECT_URI }}" >> .env
+            echo "VITE_SPOTIFY_CLIENT_SECRET=${{ secrets.VITE_SPOTIFY_CLIENT_SECRET }}" >> .env
+            echo "VITE_KAKAO_CLIENT_ID=${{ secrets.VITE_KAKAO_CLIENT_ID }}" >> .env
+            echo "VITE_KAKAO_REDIRECT_URI=${{ secrets.VITE_KAKAO_REDIRECT_URI }}" >> .env
             
             # Install dependencies
             npm install

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.koc340e0a3g"
+    "revision": "0.08jje88gm9"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -23,6 +23,7 @@
     "lottie-react": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-intersection-observer": "^9.15.1",
     "react-router": "^7.1.5",
     "react-spinners": "^0.15.0",

package.json

@@ -30,15 +30,13 @@ import KaKaoRedirection from '@/components/KaKaoRedirection';
 
 function App() {
   const location = useLocation();
-  // 실제 로그인 여부를 체크하는 함수 (임시로 false, 실제 인증 로직 적용 필요)
-  // const isAuthenticated = true;
+
   const { isAuthenticated } = useAuthStore();
   const spotifyAuth = useSpotifyAuth();
   const { isChatLoadingSheetOpen } = useSheetStore();
   // soundlink 로그인한 경우에만 spotify 로그인 후 토큰 가져오기
   useEffect(() => {
     if (isAuthenticated) {
-      // isAuthenticated가 true일 때만 필요한 동작 실행
       console.log('Spotify Auth Initialized:', spotifyAuth);
     }
   }, [isAuthenticated]);
@@ -78,7 +76,7 @@ function App() {
               <Route path="/chat" element={<Chat />} />
               <Route path="/post" element={<Post />} />
               <Route path="/post/:postId/edit" element={<Post />} />
-              <Route path="/chatroom" element={<ChatRoom />} />
+              <Route path="/chatroom/:chatRoomId" element={<ChatRoom />} />
               <Route path="/mypage" element={<UserProfile isMyPage={true} />} />
               <Route path="/mypage/edit" element={<EditProfile />} />
               <Route path="/mypage/blocklist" element={<BlockList />} />

src/App.tsx

@@ -2,6 +2,11 @@ import axios from 'axios';
 import { axiosInstance } from './axios';
 import { useAuthStore } from '@/store/authStore';
 
+const API_BASE_URL =
+  import.meta.env.MODE === 'development'
+    ? '/api/auth/token' // ✅ 개발 환경에서는 프록시를 사용
+    : import.meta.env.VITE_API_URL + '/api/auth/token'; // ✅ 배포 환경에서는 직접 API 호출
+
 // 로그인
 export const login = async (loginId: string, password: string) => {
   const { data } = await axiosInstance.post('/auth/login', {
@@ -25,7 +30,7 @@ export const postLogout = async () => {
 
 // 토큰 재발급
 export const reissueToken = async () => {
-  const { data } = await axios.post('/api/auth/token', {
+  const { data } = await axios.post(`${API_BASE_URL}`, {
     withCredentials: true,
   });
 

src/apis/auth.ts

@@ -2,10 +2,36 @@ import axios from 'axios';
 import { useAuthStore } from '@/store/authStore';
 import { reissueToken } from '@/apis/auth';
 
+const API_BASE_URL =
+  import.meta.env.MODE === 'development'
+    ? '/api' // ✅ 개발 환경에서는 프록시를 사용
+    : import.meta.env.VITE_API_URL + '/api'; // ✅ 배포 환경에서는 직접 API 호출
+
 export const axiosInstance = axios.create({
-  baseURL: '/api',
+  baseURL: API_BASE_URL,
   withCredentials: true, // RT 자동 포함
 });
+export const axiosChatInstance = axios.create({
+  baseURL: '/chatapi',
+});
+
+// 요청 인터셉터
+axiosChatInstance.interceptors.request.use(
+  async (config) => {
+    // 토큰 가져오기
+    const token = useAuthStore.getState().accessToken;
+    // 토큰이 있으면 요청 헤더에 추가
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+      // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
+    }
+    return config;
+  },
+  (error) => {
+    console.log('요청 인터셉터 에러', error);
+    Promise.reject(error);
+  },
+);
 
 // 요청 인터셉터
 axiosInstance.interceptors.request.use(
@@ -50,14 +76,3 @@ axiosInstance.interceptors.response.use(
     return Promise.reject(error);
   },
 );
-
-// .env에 추가하기
-// VITE_API_URL=http://43.203.98.65:8080
-
-// 사용예시
-//  const login = async () => {
-//    const data = await axiosInstance.post('/user/login', {
-//      loginId: 'test1234',
-//      password: 'test1234!',
-//    });
-//  };

src/apis/axios.ts

@@ -1,46 +1,39 @@
-import { axiosInstance } from './axios';
+import { axiosChatInstance, axiosInstance } from './axios';
 
 //채팅 목록 불러오기(지난 대화 기록 페이지)
 export const loadChatList = async () => {
   const { data } = await axiosInstance.get(`/chat/room-list`);
   return data;
 };
-
-//채팅방 기록 불러오기(시간 끝난 채팅방 채팅 기록)
-//수신,송신자 정보 / messageList 정보
-export const loadChatMessages = async (roomId: number) => {
-  const { data } = await axiosInstance.get(`/chat/messages/${roomId}`);
-  return data;
-};
 //채팅 요청
 export const requestChat = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.post(`/chat/request`, emotionRecordId, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  const { data } = await axiosInstance.post(`/chat/request?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅 요청 취소
 export const cancelChatRequest = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.delete(`/chat/request`, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    data: JSON.stringify(emotionRecordId),
-  });
+  const { data } = await axiosInstance.delete(`/chat/request?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅방 생성
 export const createChatroom = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.post(
-    `/chat/create?recordId=${emotionRecordId}`,
-    {},
-  );
+  const { data } = await axiosInstance.post(`/chat/create?recordId=${emotionRecordId}`, {});
   return data;
 };
 //채팅방 닫기
 export const closeChatroom = async (chatRoomId: number) => {
   const { data } = await axiosInstance.post(`/chat/close?chatRoomId=${chatRoomId}`, {});
   return data;
 };
+//채팅방 기록 불러오기
+export const loadChatHistory = async (chatRoomId: number) => {
+  const { data } = await axiosChatInstance.get(`/chat/history/${chatRoomId}`);
+  return data;
+};
+//채팅방 상세 정보
+export const loadChatRoomDetail = async (chatRoomId: number) => {
+  const { data } = await axiosInstance.get(`/chat/room/detail`, {
+    params: { chatRoomId: chatRoomId },
+  });
+  return data;
+};

src/apis/chat.ts

@@ -50,9 +50,11 @@ export default function ChatConnectLoadingSheet() {
 
   const formattedTime = dayjs.duration(timeLeft, 'seconds').format('mm:ss');
 
+  const isReceiver = true;
+
   //채팅 요청 취소(요청 보낸 사람)
   const cancel = async () => {
-    if (!currentRecord) {
+    if (!currentRecord?.recordId) {
       console.log('record가 존재하지 않습니다');
       return;
     }
@@ -68,29 +70,33 @@ export default function ChatConnectLoadingSheet() {
   };
 
   //채팅방 생성 (요청 받는 사람 입장에서 생성?)
+  //sse로 받은 recordId로 채팅방 생성
+  //sse로 받은 상대 정보로 '보내는 사람' 바꾸기
   const createChat = async () => {
     try {
-      const data = await createChatroom(17);
+      //1 = recordId
+      const data = await createChatroom(1);
       console.log(data);
+      const chatRoomId = data.data.chatRoomId;
 
-      if (data.code === 200) {
-        navigate('/chatroom');
-        closeAllSheets();
-      }
-      //500 이면 이미 방 있음 => 기존 채팅방으로
+      //200
+      //409 이면 이미 채팅방 있음 => 기존 채팅방으로
+      navigate(`/chatroom/${chatRoomId}`);
+      closeAllSheets();
     } catch (error) {
       console.log(error);
     }
   };
 
   //채팅 요정 거절
+  //거절 하면 거절한 사람은 바로 시트 닫기.
+  //요청 거절당한 사람은 connectFail = true
   const refuseRequest = () => {
     closeSheet('isChatLoadingSheetOpen');
   };
 
-  //채팅 신청한 사람이 상대가 수락했다는 sse 받으면 closeAllSheet, chatroom으로 이동
-
-  const isReceiver = true;
+  //채팅 신청한 사람은 상대가 수락했다는 sse 받으면 closeAllSheet, chatroom으로 이동
+  //sse로 채팅방 번호 받기
 
   if (connetFail) {
     return (