기능개발 v1.2

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 
 import Home from '@pages/Home';
@@ -7,6 +7,7 @@ import LoginComplete from '@pages/Login/LoginComplete';
 
 import SignUp from '@pages/SignUp';
 import TermsAgreement from '@pages/SignUp/TermsAgreement';
+import PickMyStyle from '@pages/SignUp/PickMyStyle';
 
 import Profile from '@pages/Profile';
 import ProfileEdit from '@pages/Profile/ProfileEdit';
@@ -24,11 +25,29 @@ import PostInstaFeedSelect from '@pages/Post/PostInstaFeedSelect';
 
 import Chats from '@pages/Chats';
 import ChatRoom from '@pages/Chats/ChatRoom';
+import MatchingRoom from '@pages/Chats/MatchingRoom';
 
 import NotFound from '@pages/NotFound';
+import { getUserInfoApi } from '@apis/user';
+import { getCurrentUserId } from '@utils/getCurrentUserId';
+import Loading from '@components/Loading';
 
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
-	const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token'));
+	const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+	useEffect(() => {
+		const checkAuth = async () => {
+			const currentUserId = getCurrentUserId();
+			const response = await getUserInfoApi(currentUserId);
+			setIsAuthenticated(response.isSuccess);
+		};
+		checkAuth();
+	}, []);
+
+	if (isAuthenticated === null) {
+		return <Loading />;
+	}
+
 	return isAuthenticated ? children : <Navigate to="/login" />;
 };
 
@@ -55,6 +74,7 @@ const protectedRoutes = [
 	// 메시지/채팅
 	{ path: '/chats', element: <Chats /> },
 	{ path: '/chats/:chatRoomId', element: <ChatRoom /> },
+	{ path: '/matching', element: <MatchingRoom /> },
 ];
 
 // 인증이 필요 없는 페이지 배열
@@ -64,6 +84,7 @@ const publicRoutes = [
 
 	{ path: '/signup', element: <SignUp /> },
 	{ path: '/signup/terms-agreement', element: <TermsAgreement /> },
+	{ path: '/signup/pick-my-style', element: <PickMyStyle /> },
 ];
 
 const App: React.FC = () => {

src/apis/auth/dto.ts

@@ -12,4 +12,5 @@ export interface getUserInfoByJwtData {
 	profilePictureUrl: string;
 	bio: string;
 	birthDate: string;
+	userStyletags: string[];
 }

src/apis/chatting/dto.ts

@@ -21,7 +21,7 @@ export interface LatestMessageDto {
 // 채팅방 전체 대화 내역 조회
 // 최근 메시지 수신
 // response
-export interface chatRoomMessagesData {
+export interface ChatRoomMessagesData {
 	id: number;
 	content: string;
 	fromUser: FromUserDto;

src/apis/matching/dto.ts

@@ -1,4 +1,4 @@
-import type { BaseSuccessResponse } from '@apis/core/dto';
+type RequestStatusEnum = 'accepted' | 'rejected' | 'pending';
 
 // 매칭 요청
 // request
@@ -8,39 +8,34 @@ export interface CreateMatchingRequest {
 	message: string;
 }
 
-// response
-export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
+// 최근 매칭 조회 (채팅방 리스트에서)
+export interface LatestMatchingData {
+	id?: number;
+	requesterId?: number;
+	targetId?: number;
+	requestStatus?: RequestStatusEnum;
+	createdAt: Date;
+}
 
-export interface CreateMatchingData {
-	id: number; // matchingId
+// 전체 매칭 리스트 조회
+export interface MatchingData {
+	id: number;
+	message: string;
+	createdAt: string;
 	chatRoomId: number;
-	requesterId: number;
 	targetId: number;
-}
-
-// 매칭 리스트 조회
-// response
-export type GetMatchingListResponse = BaseSuccessResponse<GetMatchingListData>;
-
-export interface GetMatchingListData {
-	hasMatching: boolean;
-	matchingsCount: number;
-	matching: MatchingDto[];
-}
-
-export interface MatchingDto {
-	id: number; // matchingId
 	requester: RequesterDto;
+	requestStatus: RequestStatusEnum;
 }
 
 export interface RequesterDto {
-	id: number; // requesterId
+	id: number;
 	nickname: string;
 	profilePictureUrl: string;
-	representativePost: RepresentativePost;
+	representativePost: RepresentativePostDto;
 }
 
-export interface RepresentativePost {
+export interface RepresentativePostDto {
 	postImages: PostImageDto[];
 	styleTags: string[];
 }
@@ -49,20 +44,3 @@ export interface PostImageDto {
 	url: string;
 	orderNum: number;
 }
-
-// 매칭 요청 수락 및 거절
-// request
-export interface ModifyMatchingStatusRequest {
-	requestStatus: 'accept' | 'reject';
-}
-
-// response
-export type ModifyMatchingStatusResponse = BaseSuccessResponse<ModifyMatchingStatusData>;
-
-export interface ModifyMatchingStatusData {
-	id: number; // matchingId
-	requesterId: number;
-	targetId: number;
-	requestStatus: string;
-	chatRoomId: number;
-}

src/apis/user/dto.ts

@@ -11,6 +11,7 @@ export interface UserInfoData {
 	bio: string;
 	birthDate: string;
 	isFriend: boolean;
+	userStyletags: string[];
 }
 
 // 사용자 정보 조회 응답
@@ -28,6 +29,7 @@ export interface PatchUserInfoRequest {
 	nickname: string;
 	profilePictureUrl: string;
 	bio: string;
+	userStyletags: string[];
 }
 
 // 회원 탈퇴 응답

src/context/SocketProvider.tsx

@@ -2,47 +2,55 @@ import { createContext, useContext, useEffect, useState } from 'react';
 
 import { io, Socket } from 'socket.io-client';
 
-const SocketContext = createContext<Socket | null>(null);
+type SocketMap = { [endpoint: string]: Socket };
+
+const SocketContext = createContext<SocketMap | null>(null);
 
 export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-	const [socket, setSocket] = useState<Socket | null>(null);
+	const [socketMap, setSocketMap] = useState<SocketMap>({});
 
 	useEffect(() => {
-		const newSocket = io(`${import.meta.env.VITE_NEW_API_URL}/socket/chatting`, {
-			transports: ['websocket'],
-		});
-		setSocket(newSocket);
-
-		newSocket.on('connect', () => {
-			console.log('connection is open');
+		const endpoints = ['chatting', 'matching']; // 필요한 엔드포인트 추가
+		const newSockets: SocketMap = {};
+
+		endpoints.forEach((endpoint) => {
+			const socket = io(`${import.meta.env.VITE_NEW_API_URL}/socket/${endpoint}`, {
+				transports: ['websocket'],
+			});
+			newSockets[endpoint] = socket;
+
+			socket.on('connect', () => {
+				console.log(`${endpoint} connection is open`);
+			});
+
+			socket.on('disconnect', (reason) => {
+				console.log(`${endpoint} Disconnected from server:`, reason);
+			});
+
+			socket.on('connect_error', (err) => {
+				console.log(`${endpoint} connect error:`, err.message);
+			});
 		});
 
-		newSocket.on('disconnect', (reason) => {
-			console.log('Disconnected from server:', reason);
-		});
-
-		newSocket.on('connect_error', (err) => {
-			console.log(err.message);
-		});
+		setSocketMap(newSockets);
 
 		return () => {
-			newSocket.disconnect();
+			Object.values(newSockets).forEach((socket) => socket.disconnect());
 		};
 	}, []);
 
-	// 소켓 설정이 완료되지 않은 경우 렌더링 방지
-	// 채팅방에서 새로고침했을 때 오류 방지
-	if (!socket) {
+	if (!Object.keys(socketMap).length) {
 		return null;
 	}
 
-	return <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>;
+	return <SocketContext.Provider value={socketMap}>{children}</SocketContext.Provider>;
 };
 
-export const useSocket = () => {
-	const context = useContext(SocketContext);
-	if (context === null) {
-		throw new Error('useSocket must be used within a SocketProvider');
+// 엔드포인트를 인자로 받아 해당 소켓을 반환하는 훅
+export const useSocket = (endpoint = 'chatting') => {
+	const socketMap = useContext(SocketContext);
+	if (!socketMap || !socketMap[endpoint]) {
+		throw new Error(`useSocket must be used within a SocketProvider with a valid endpoint (${endpoint})`);
 	}
-	return context;
+	return socketMap[endpoint];
 };

src/pages/Account/AccountCancel/styles.tsx

@@ -16,30 +16,30 @@ export const SubTitle = styled.h3`
 	margin-bottom: 0.625rem;
 	text-align: center;
 	text-align: left;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	padding: 1.25rem;
 `;
 
 export const Text = styled.p`
 	font-size: 0.875rem;
-	margin-bottom: 5px;
+	margin-bottom: 0.3125rem;
 	text-align: left;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	padding: 0rem 1.25rem;
 `;
 
 export const InfoBox = styled.div`
 	background: ${({ theme }) => theme.colors.background.secondary};
-	padding: 70px;
-	margin-top: 10px;
-	border-radius: 10px;
-	margin: 10px 20px 1.25rem 20px;
+	padding: 4.375rem;
+	margin-top: 0.625rem;
+	border-radius: 0.625rem;
+	margin: 0.625rem 1.25rem 1.25rem 1.25rem;
 `;
 
 export const InfoItem = styled.p`
 	font-size: 0.875rem;
 	margin-bottom: 0.625rem;
-	padding: 2px 10px;
+	padding: 0.125rem 0.625rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -51,7 +51,7 @@ export const CheckboxWrapper = styled.div`
 	display: flex;
 	align-items: center;
 	margin-bottom: 1.25rem;
-	padding: 0rem 15px;
+	padding: 0rem 0.9375rem;
 
 	input[type='checkbox'] {
 		margin-right: 0.625rem;

src/pages/Account/AccountEdit/styles.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
 export const ProfileEditContainer = styled.div`
-	max-width: 512px;
+	max-width: 32rem;
 	display: flex;
 	flex-direction: column;
 	position: relative;
@@ -11,7 +11,7 @@ export const Section = styled.div`
 	margin-top: 1.875rem;
 	margin-bottom: 1.875rem;
 	width: 100%;
-	padding: 0px 30px;
+	padding: 0rem 1.875rem;
 `;
 
 export const SectionTitle = styled.div`
@@ -62,7 +62,7 @@ export const SnsConnection = styled.div`
 export const MemberInfo = styled.div`
 	display: flex;
 	flex-direction: column;
-	margin-top: 35px;
+	margin-top: 2.1875rem;
 	width: 100%;
 `;
 
@@ -71,7 +71,7 @@ export const MemberInfoRow = styled.div`
 	align-items: center;
 	justify-content: flex-start;
 	margin-bottom: 0.625rem;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 `;
 
 export const Label = styled.div`