Merge branch 'dev' into feat/OD-201

Author: lalaurrel

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';
@@ -28,9 +28,35 @@ 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 () => {
+			try {
+				const currentUserId = getCurrentUserId();
+				if (!currentUserId) {
+					setIsAuthenticated(false);
+					return;
+				}
+
+				const response = await getUserInfoApi(currentUserId);
+				setIsAuthenticated(response.isSuccess);
+			} catch (error) {
+				setIsAuthenticated(false);
+			}
+		};
+		checkAuth();
+	}, []);
+
+	if (isAuthenticated === null) {
+		return <Loading />;
+	}
+
 	return isAuthenticated ? children : <Navigate to="/login" />;
 };
 

src/apis/matching/dto.ts

@@ -1,5 +1,3 @@
-import type { BaseSuccessResponse } from '@apis/core/dto';
-
 type RequestStatusEnum = 'accepted' | 'rejected' | 'pending';
 
 // 매칭 요청
@@ -10,16 +8,6 @@ export interface CreateMatchingRequest {
 	message: string;
 }
 
-// response
-export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
-
-export interface CreateMatchingData {
-	id: number; // matchingId
-	chatRoomId: number;
-	requesterId: number;
-	targetId: number;
-}
-
 // 최근 매칭 조회 (채팅방 리스트에서)
 export interface LatestMatchingData {
 	id?: number;
@@ -56,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/matching/index.ts

@@ -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/AccountCancel/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`

src/pages/Account/AccountEdit/styles.tsx

@@ -56,15 +56,16 @@ export const List = styled.ul`
 	padding: 0;
 	margin: 0;
 	list-style: none;
-	border-top: 0px solid ${({ theme }) => theme.colors.background.divider};
+	border-top: 0rem solid ${({ theme }) => theme.colors.background.divider};
 	position: absolute;
-	bottom: 20px;
+	bottom: 1.25rem;
 `;
 
 export const ListItem = styled.li`
 	display: flex;
 	align-items: center;
 	padding: 15px 10px;
+
 	border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
 	cursor: pointer;
 

src/pages/Account/AccountSetting/styles.tsx

@@ -30,7 +30,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
 				</ProfileImgBox>
 				<ProfileInfo>
 					<StyledText
-						$textTheme={{ style: 'body1-medium' }}
+						$textTheme={{ style: 'body2-medium' }}
 						color={theme.colors.text.primary}
 						onClick={handleUserClick}
 					>
@@ -39,7 +39,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
 					<div className="row-flex">
 						{requester.representativePost.styleTags.map((tag, index) => (
 							<div className="row-flex" key={tag}>
-								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[200]}>
+								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[600]}>
 									{tag}
 								</StyledText>
 								{index < requester.representativePost.styleTags.length - 1 && (

src/pages/Chats/MatchingRoom/Card/index.tsx

@@ -2,6 +2,8 @@ import dayjs from 'dayjs';
 
 import RcvdMessage from '@pages/Chats/RcvdMessage';
 
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
 import type { MatchingData } from '@apis/matching/dto';
 import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
 
@@ -14,7 +16,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 
 	const firstMessageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: '얘가 너 소개받고 싶대',
 		isSenderChanged: false,
 		isProfileImageVisible: true,
@@ -24,7 +26,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
 
 	const matchingMessageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: message,
 		isSenderChanged: false,
 		isProfileImageVisible: false,

src/pages/Chats/MatchingRoom/MatchingMessage/index.tsx

@@ -2,14 +2,16 @@ import dayjs from 'dayjs';
 
 import RcvdMessage from '@pages/Chats/RcvdMessage';
 
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
 import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
 
 const NoMatchingMessage: React.FC = () => {
 	const formattedTime = dayjs(new Date()).format('HH:mm');
 
 	const messageProps: RcvdMessageProps = {
 		fromUserNickname: '오딩이',
-		profilePictureUrl: '',
+		profilePictureUrl: defaultProfile,
 		content: '매칭이 들어오면 오딩이가 알려줄게!',
 		isSenderChanged: true,
 		isProfileImageVisible: true,

src/pages/Chats/MatchingRoom/NoMatchingMessage/index.tsx

@@ -1,25 +1,36 @@
 import { useNavigate } from 'react-router-dom';
 
+import { useRecoilState } from 'recoil';
+
+import theme from '@styles/theme';
+
+import { RequesterDto } from '@apis/matching/dto';
 import { useSocket } from '@context/SocketProvider';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
+
+import { StyledText } from '@components/Text/StyledText';
 
 import { ResponseButton, ResponseContainer } from './styles';
 
 export interface ResponseMessageProps {
 	matchingId: number;
 	chatRoomId: number;
+	requester: Omit<RequesterDto, 'RepresentativePostDto'>;
 	requestStatus: 'accepted' | 'rejected' | 'pending';
 }
 
-const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requestStatus }) => {
+const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requester, requestStatus }) => {
 	const socket = useSocket('matching');
 	const isPending = requestStatus === 'pending';
 	const nav = useNavigate();
+	const [, setOtherUser] = useRecoilState(OtherUserAtom);
 
 	const handlebuttonClick = (status: 'accept' | 'reject') => {
 		if (requestStatus !== 'pending') return;
 		if (socket) {
 			socket.emit('patchMatching', { id: matchingId, requestStatus: status });
 			if (status === 'accept') {
+				setOtherUser(requester);
 				nav(`/chats/${chatRoomId}`);
 			}
 		}
@@ -29,12 +40,16 @@ const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomI
 		<ResponseContainer>
 			{(requestStatus === 'pending' || requestStatus === 'rejected') && (
 				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('reject')}>
-					거절
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+						거절
+					</StyledText>
 				</ResponseButton>
 			)}
 			{(requestStatus === 'pending' || requestStatus === 'accepted') && (
 				<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('accept')}>
-					수락
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+						수락
+					</StyledText>
 				</ResponseButton>
 			)}
 		</ResponseContainer>