Merge branch 'dev' of https://github.com/oodd-team/oodd-web-react into feat/OD-132

Author: lalaurrel

.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

@@ -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

@@ -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';
+import { PostUserBlockRequest } from '../../../apis/user/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);
 		}
 

src/pages/Chats/RecentChat/index.tsx

@@ -9,6 +9,7 @@ import {
 	ArrowButton,
 	Btn,
 	CardLayout,
+	OOTDImgBackground,
 	OOTDImgBox,
 	ProfileContainer,
 	ProfileImgBox,
@@ -66,6 +67,10 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 		}
 	};
 
+	const handleUserClick = () => {
+		nav(`/users/${matching.requester.requesterId}`);
+	};
+
 	const handleRejectButtonClick = () => {
 		modifyMatchingStatus('reject');
 	};
@@ -85,16 +90,27 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 		<CardLayout>
 			{isStatusModalOpen && <Modal {...statusModalProps} />}
 			<ProfileContainer>
-				<ProfileImgBox>
+				<ProfileImgBox onClick={handleUserClick}>
 					<img src={requester.profilePictureUrl || defaultProfile} alt="profile" />
 				</ProfileImgBox>
 				<ProfileInfo>
-					<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.black}>
+					<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.black} onClick={handleUserClick}>
 						{requester.nickname || '알수없음'}
 					</StyledText>
-					<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
-						{matching.requesterPost.styleTags}
-					</StyledText>
+					<div className="row-flex">
+						{matching.requesterPost.styleTags.map((tag, index) => (
+							<div className="row-flex" key={tag}>
+								<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
+									{tag}
+								</StyledText>
+								{index < matching.requesterPost.styleTags.length - 1 && (
+									<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray1}>
+										,&nbsp;
+									</StyledText>
+								)}
+							</div>
+						))}
+					</div>
 				</ProfileInfo>
 				<SeeMore onClick={() => nav(`/users/${requester.requesterId}`)}>
 					<StyledText $textTheme={{ style: 'caption2-regular' }} color="#8e8e93">
@@ -106,15 +122,19 @@ const Card: React.FC<CardProps> = ({ removeRejectedMatching, matching }) => {
 			<OOTDImgBox>
 				<Swiper
 					direction="vertical"
+					slidesPerView={1}
+					effect="slide"
 					pagination={{
 						clickable: true,
 					}}
 					modules={[Pagination]}
 					className="childSwiper"
 				>
-					{matching.requesterPost.postImages.map((image) => (
-						<SwiperSlide key={image.url}>
-							<img src={image.url} alt="OOTD" className="slide-image-small" />
+					{matching.requesterPost.postImages.map((postImage) => (
+						<SwiperSlide key={postImage.url}>
+							<img src={postImage.url} alt="OOTD" className="slide-image-small" />
+							<div className="blur"></div>
+							<OOTDImgBackground $src={postImage.url} />
 						</SwiperSlide>
 					))}
 				</Swiper>

src/pages/Chats/Request/Cards/Card/index.tsx

@@ -5,6 +5,7 @@ export const CardLayout = styled.div`
 	background-color: #ececec;
 	border-radius: 0.5rem;
 	position: relative;
+	height: 100%;
 `;
 
 export const ProfileContainer = styled.div`
@@ -37,6 +38,10 @@ export const ProfileImgBox = styled.div`
 export const ProfileInfo = styled.div`
 	gap: 0.463rem;
 	cursor: pointer;
+
+	.row-flex {
+		display: flex;
+	}
 `;
 
 export const SeeMore = styled.div`
@@ -57,24 +62,38 @@ export const ArrowButton = styled.button`
 export const OOTDImgBox = styled.div`
 	position: relative;
 	width: 100%;
-	bottom: 0;
+	height: 100%;
 	border-radius: 0 0 0.5rem 0.5rem;
-	background-color: #d9d9d9;
 	overflow: hidden;
-	margin: 0 auto;
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	aspect-ratio: 1/1;
 
 	.slide-image-small {
 		width: 100%;
+		max-width: 640px;
 		height: 100%;
-		object-fit: cover;
-		aspect-ratio: 4/5;
+		object-fit: contain;
+	}
+
+	.childSwiper {
+		z-index: 10;
+		// align-items: stretch;
+		width: 100%;
+		height: 100%;
+	}
+
+	.childSwiper .swiper-slide {
+		display: flex;
+		justify-content: center;
 	}
 
 	.childSwiper .swiper-pagination {
+		position: absolute;
 		right: 1.25rem;
+		z-index: 10;
+		pointer-events: none; /* 마우스 이벤트 무시 */
 	}
 
 	.childSwiper .swiper-pagination-bullet {
@@ -83,6 +102,7 @@ export const OOTDImgBox = styled.div`
 		border: 0.0625rem solid ${({ theme }) => theme.colors.white};
 		background: rgba(255, 255, 255, 0.5);
 		opacity: 1;
+		pointer-events: auto; /* 페이지네이션 클릭 가능 */
 	}
 
 	.childSwiper .swiper-pagination-bullet-active {
@@ -92,9 +112,28 @@ export const OOTDImgBox = styled.div`
 		opacity: 1;
 	}
 
-	.childSwiper .swiper-slide-small img {
+	.childSwiper .slide-small {
 		transition: none !important;
 	}
+
+	.blur {
+		position: absolute;
+		z-index: -10;
+		width: 100%;
+		height: 100%;
+		background: rgba(177, 177, 177, 0.5);
+		backdrop-filter: blur(100px);
+	}
+`;
+
+export const OOTDImgBackground = styled.div<{ $src: string }>`
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: -20;
+	background-image: url(${({ $src }) => $src});
+	background-repeat: no-repeat;
+	background-size: cover;
 `;
 
 export const Reaction = styled.div`