Merge

Author: mimizae

.github/workflows/prod_cicd.yml

@@ -36,7 +36,7 @@ jobs:
           echo "VITE_GOOGLE_CLIENT_ID=${{ secrets.VITE_GOOGLE_CLIENT_ID }}" >> .env
           echo "VITE_GOOGLE_CLIENT_SECRET=${{ secrets.VITE_GOOGLE_CLIENT_SECRET }}" >> .env
 
-      - run: yarn build-prod
+      - run: yarn build
 
       - name: deploy to s3
         uses: jakejarvis/s3-sync-action@master

src/assets/default/x.svg

@@ -41,7 +41,7 @@ export const IconWrapper = styled.div`
 		bottom: 0;
 		color: white;
 		text-align: center;
-		font-family: 'Pretendard'
+		font-family: 'Pretendard';
 		font-size: 15px;
 		font-style: normal;
 		font-weight: 500;
@@ -108,7 +108,7 @@ export const SideNavBarButton = styled.label`
 		height: 2.5rem;
 		display: flex;
 		justify-content: center;
-		align-item: center;
+		align-items: center;
 		border-radius: 50%;
 		padding: 0.6rem;
 		background: white;

src/components/NavBar/styles.tsx

@@ -28,7 +28,7 @@ const TopBar: React.FC<TopBarProps> = ({
 				>
 					<img src={LeftButtonSrc || ''} alt="뒤로가기" />
 				</LeftButton>
-				<StyledTextLayout $textTheme={{ style: 'heading2-bold' }} color={theme.colors.black}>
+				<StyledTextLayout $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
 					{text}
 				</StyledTextLayout>
 				<RightButton

src/components/TopBar/index.tsx

@@ -9,7 +9,6 @@ export const TopbarLayout = styled.header<TopbarLayoutProps>`
 	z-index: 1;
 	background-color: white;
 	width: 100%; /* 부모 너비에 맞춤 */
-	height: 2.75rem;
 	align-items: center;
 	padding: 0.5rem 1.25rem;
 	${({ $withBorder, theme }) =>

src/components/TopBar/styles.tsx

@@ -9,7 +9,7 @@ import TopBar from '../../components/TopBar';
 import back from '../../assets/arrow/left.svg';
 
 import BottomButton from '../../components/BottomButton';
-import { patchUserWithdrawApi } from '../../apis/user'; // 새로운 API import
+import { patchUserWithdrawApi } from '../../apis/user';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
@@ -27,28 +27,22 @@ const AccountCancel: React.FC = () => {
 			}
 
 			const storedUserId = Number(localStorage.getItem('my_id'));
-			const token = localStorage.getItem('jwt_token');
+			const token = localStorage.getItem('new_jwt_token');
 
 			if (!storedUserId || !token) {
-				alert('로그인이 필요합니다. 로그인 페이지로 이동합니다.');
-				navigate('/login');
 				return;
 			}
 
 			// API 요청
-			const response = await patchUserWithdrawApi(storedUserId); // 새로운 API 호출
+			const response = await patchUserWithdrawApi(storedUserId);
 
 			// 요청이 성공했는지 확인
 			if (response.isSuccess) {
 				// 성공 메시지 출력
 				alert('계정이 성공적으로 삭제되었습니다.');
 
 				// 계정 삭제 시 localStorage에서 사용자 정보 제거
-				localStorage.removeItem('my_id');
-				localStorage.removeItem('jwt_token');
-
-				// 로그인 페이지로 리다이렉트
-				navigate('/login');
+				localStorage.clear();
 			} else {
 				// 요청 실패 시 오류 메시지 출력
 				console.error('API Error:', response.code || '알 수 없는 오류가 발생했습니다.');

src/pages/AccountCancel/index.tsx

@@ -8,44 +8,48 @@ import { StyledText } from '../../components/Text/StyledText';
 import theme from '../../styles/theme';
 import TopBar from '../../components/TopBar';
 import back from '../../assets/arrow/left.svg';
-import request, { BaseResponse } from '../../apis/core';
-import { UserProfileResponse } from '../ProfileEdit/dto';
 import imageBasic from '../../assets/default/defaultProfile.svg';
-import Loading from '../../components/Loading';
 import Profile_s from './../../assets/default/my-page.svg';
 import leave from '../../assets/default/leave.svg';
+import { getUserInfoApi } from '../../apis/user'; 
+import { UserInfoData } from '../../apis/user/dto'; 
+import Loading from '../../components/Loading'; 
 
 const AccountSetting: React.FC = () => {
 	const navigate = useNavigate();
 	const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
-	const [userProfile, setUserProfile] = useState<UserProfileResponse | null>(null);
+	const [userProfile, setUserProfile] = useState<UserInfoData | null>(null);
+	const [isLoading, setIsLoading] = useState<boolean>(true);
 
+	// 사용자 정보 가져오기
 	useEffect(() => {
-		const fetchUserProfile = async () => {
+		const getUserInfo = async () => {
 			try {
-				const storedUserId = localStorage.getItem('id'); // 로그인된 사용자 ID 가져오기
-
+				const storedUserId = localStorage.getItem('my_id');
 				if (!storedUserId) {
 					console.error('User is not logged in');
 					return;
 				}
 
-				const response = await request.get<BaseResponse<UserProfileResponse>>(`/users/${storedUserId}`);
-				setUserProfile(response.result);
+				const userId = Number(storedUserId);
+				const response = await getUserInfoApi(userId);
+				setUserProfile(response.data);
 			} catch (error) {
-				console.error('Error fetching user profile:', error);
+				console.error('Error fetching user info:', error);
+			} finally {
+				setIsLoading(false);
 			}
 		};
 
-		fetchUserProfile();
+		getUserInfo();
 	}, []);
 
 	const handleConfirmLogout = () => {
 		// localStorage 비우기
 		localStorage.clear();
 		console.log('Logout confirmed');
 		setIsLogoutModalOpen(false);
-		// 로그인 페이지로 이동
+
 		navigate('/login');
 	};
 
@@ -62,8 +66,8 @@ const AccountSetting: React.FC = () => {
 		navigate('/account-cancel');
 	};
 
-	if (!userProfile) {
-		return <Loading />; // 로딩 상태
+	if (isLoading) {
+		return <Loading />; 
 	}
 
 	return (
@@ -73,19 +77,19 @@ const AccountSetting: React.FC = () => {
 
 				<ProfilePicWrapper>
 					<ProfilePic>
-						<img src={userProfile.profilePictureUrl || imageBasic} alt="프로필 사진" />
+						<img src={userProfile?.profilePictureUrl || imageBasic} alt="프로필 사진" />
 					</ProfilePic>
 					<Row>
 						<Label>
 							<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
-								{userProfile.nickname}
+								{userProfile?.nickname}
 							</StyledText>
 						</Label>
 					</Row>
 					<Row>
 						<Label>
 							<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 0 }} color={theme.colors.gray3}>
-								이름 | {userProfile.email}
+							{userProfile?.name} | {userProfile?.email}
 							</StyledText>
 						</Label>
 					</Row>

src/pages/AccountSetting/index.tsx

@@ -27,6 +27,9 @@ import Block from '../../../assets/default/block.svg';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
 import { chatRoomMessagesData } from '../../../apis/chatting/dto';
+import { postUserBlockApi } from '../../../apis/user-block';
+import { PostUserBlockRequest } from '../../../apis/user-block/dto';
+import { handleError } from '../../../apis/util/handleError';
 
 const ChatRoom: React.FC = () => {
 	const [extendedMessages, setextendedMessages] = useState<ExtendedMessageDto[]>([]);
@@ -36,6 +39,7 @@ const ChatRoom: React.FC = () => {
 	const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
 	const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
 	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
+	const [modalContent, setModalContent] = useState('');
 
 	const [isLoading, setIsLoading] = useState(true);
 	const [isScroll, setIsScroll] = useState(false);
@@ -50,6 +54,53 @@ const ChatRoom: React.FC = () => {
 	const nav = useNavigate();
 	const socket = useSocket();
 
+	// 프로필 사진 클릭 시 프로필 페이지로 이동
+	const handleUserClick = useCallback(() => {
+		const opponentId = opponentInfo?.id ? opponentInfo.id : -1;
+		if (opponentId === -1) {
+			setModalContent('유저 정보를 찾을 수 없습니다.');
+			setIsStatusModalOpen(true);
+		} else {
+			nav(`/users/${opponentId}`);
+		}
+	}, [opponentInfo, nav]);
+
+	// 유저 차단 api
+	const postUserBlock = async () => {
+		try {
+			const data: PostUserBlockRequest = {
+				fromUserId: userId,
+				toUserId: opponentInfo?.id || -1,
+				action: 'block',
+			};
+			const response = await postUserBlockApi(data);
+
+			if (response.isSuccess) {
+				setModalContent('정상적으로 처리되었습니다.');
+				nav('/chats');
+			}
+		} catch (error) {
+			const errorMessage = handleError(error, 'user');
+			setModalContent(errorMessage);
+		} finally {
+			setIsBlockModalOpen(false);
+			setIsStatusModalOpen(true);
+		}
+	};
+
+	// 채팅방 나가기 api
+	const leaveChatRoom = () => {
+		if (socket) {
+			const data = {
+				chatRoomId: Number(chatRoomId),
+				userId: userId,
+			};
+			socket.emit('leaveChatRoom', data);
+			nav('/chats', { replace: true });
+		}
+	};
+
+	// 전체 메시지 조회
 	const getChatRoomMessages = (data: chatRoomMessagesData[]) => {
 		setAllMessages(data);
 		if (data.length > messageLengthRef.current) {
@@ -58,6 +109,7 @@ const ChatRoom: React.FC = () => {
 		setIsLoading(false);
 	};
 
+	// 새 메시지 수신
 	const getNewMessage = (data: chatRoomMessagesData) => {
 		setAllMessages((prevMessages) => [...prevMessages, data]);
 		setIsScroll((prev) => !prev);
@@ -66,10 +118,10 @@ const ChatRoom: React.FC = () => {
 	useEffect(() => {
 		if (socket) {
 			// 채팅방 입장
-			socket.emit('joinChatRoom', chatRoomId);
+			socket.emit('joinChatRoom', { chatRoomId: Number(chatRoomId) });
 
 			// 전체 메시지 조회
-			socket.emit('getChatRoomMessages', chatRoomId);
+			socket.emit('getChatRoomMessages', { chatRoomId: Number(chatRoomId) });
 			socket.on('chatRoomMessages', getChatRoomMessages);
 
 			// 최근 메시지 조회
@@ -140,7 +192,7 @@ const ChatRoom: React.FC = () => {
 		isCloseButtonVisible: true,
 		button: {
 			content: '나가기',
-			onClick: () => {},
+			onClick: leaveChatRoom,
 		},
 		onClose: () => {
 			setIsLeaveModalOpen(false);
@@ -152,15 +204,15 @@ const ChatRoom: React.FC = () => {
 		isCloseButtonVisible: true,
 		button: {
 			content: '차단하기',
-			onClick: () => {},
+			onClick: postUserBlock,
 		},
 		onClose: () => {
 			setIsBlockModalOpen(false);
 		},
 	};
 
 	const statusModalProps: ModalProps = {
-		content: '사용자 정보가 없습니다',
+		content: modalContent,
 		onClose: () => {
 			setIsStatusModalOpen(false);
 		},
@@ -176,16 +228,6 @@ const ChatRoom: React.FC = () => {
 		},
 	};
 
-	// 프로필 사진 클릭 시 프로필 페이지로 이동
-	const onClickProfile = useCallback(() => {
-		const opponentId = opponentInfo?.id ? opponentInfo.id : -1;
-		if (opponentId === -1) {
-			setIsStatusModalOpen(true);
-		} else {
-			nav(`/users/${opponentId}`);
-		}
-	}, [opponentInfo, nav]);
-
 	return (
 		<OODDFrame>
 			{isLoading && <Loading />}
@@ -215,7 +257,7 @@ const ChatRoom: React.FC = () => {
 							{message.sentMessage ? (
 								<SentMessage {...message.sentMessage} />
 							) : message.rcvdMessage ? (
-								<RcvdMessage {...message.rcvdMessage} onClickProfile={onClickProfile} />
+								<RcvdMessage {...message.rcvdMessage} onClickProfile={handleUserClick} />
 							) : null}
 						</div>
 					);

src/pages/Chats/ChatRoom/index.tsx

@@ -40,10 +40,10 @@ const ChatRoomItem: React.FC<ChatRoomData> = ({ chatRoomId, otherUser, latestMes
 
 	return (
 		<ChatRoomItemLayout onClick={onClickChatRoom}>
-			<UserImage src={otherUser.profilePictureUrl || defaultProfile} alt="user" />
+			<UserImage src={otherUser?.profilePictureUrl || defaultProfile} alt="user" />
 			<LeftBox>
 				<StyledText $textTheme={{ style: 'body2-medium' }} color="#1D1D1D">
-					{otherUser.nickname || '알수없음'}
+					{otherUser?.nickname || '알수없음'}
 				</StyledText>
 				<LatestMessage $textTheme={{ style: 'caption2-regular' }} color="#1D1D1D">
 					{latestMessage.content}

src/pages/Chats/ChatRoomItem/index.tsx

@@ -27,7 +27,7 @@ const RecentChat: React.FC<RecentChatProps> = () => {
 		};
 
 		if (socket) {
-			socket.emit('getChatRooms', userId);
+			socket.emit('getChatRooms', { userId: userId });
 			socket.on('chatRoomList', getChatRooms);
 		}