feat: 매칭 메시지 UI 구현

Author: gustn99

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

@@ -1,89 +1,27 @@
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useRecoilState } from 'recoil';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/pagination';
 
 import theme from '@styles/theme';
 
-import { modifyMatchingStatusApi } from '@apis/matching';
-import { handleError } from '@apis/util/handleError';
-import { OtherUserAtom } from '@recoil/util/OtherUser';
-
-import acceptButton from '@assets/default/accept.svg';
 import defaultProfile from '@assets/default/defaultProfile.svg';
-import rejectButton from '@assets/default/reject.svg';
 
-import Modal from '@components/Modal';
 import { StyledText } from '@components/Text/StyledText';
 
-import type { ModalProps } from '@components/Modal/dto';
-
 import type { CardProps } from './dto';
 
-import {
-	ArrowButton,
-	Btn,
-	CardLayout,
-	OOTDImgBackground,
-	OOTDImgBox,
-	ProfileContainer,
-	ProfileImgBox,
-	ProfileInfo,
-	Reaction,
-	SeeMore,
-} from './styles';
+import { CardLayout, OOTDImgBackground, OOTDImgBox, ProfileContainer, ProfileImgBox, ProfileInfo } from './styles';
 
-const Card: React.FC<CardProps> = ({ id, chatRoomId, requester }) => {
-	const [isStatusModalOpen, setIsStatusModalOpen] = useState(false);
-	const [modalContent, setModalContent] = useState('알 수 없는 오류가 발생했습니다.\n관리자에게 문의해 주세요.');
-	const [, setOtherUser] = useRecoilState(OtherUserAtom);
+const Card: React.FC<CardProps> = ({ requester }) => {
 	const nav = useNavigate();
 
 	const handleUserClick = () => {
 		nav(`/profile/${requester.id}`);
 	};
 
-	const handleRejectButtonClick = () => {
-		modifyMatchingStatus('reject');
-	};
-
-	const handleAcceptButtonClick = () => {
-		modifyMatchingStatus('accept');
-	};
-
-	// 매칭 거절 및 수락 api
-	const modifyMatchingStatus = async (status: 'accept' | 'reject') => {
-		try {
-			const response = await modifyMatchingStatusApi(id, { requestStatus: status });
-
-			if (response.isSuccess) {
-				if (status === 'accept') {
-					setOtherUser({
-						id: requester.id,
-						nickname: requester.nickname,
-						profilePictureUrl: requester.profilePictureUrl,
-					});
-					nav(`/chats/${chatRoomId}`);
-				}
-			}
-		} catch (error) {
-			const errorMessage = handleError(error);
-			setModalContent(errorMessage);
-			setIsStatusModalOpen(true);
-		}
-	};
-
-	const statusModalProps: ModalProps = {
-		content: modalContent,
-		onClose: () => {
-			setIsStatusModalOpen(false);
-		},
-	};
-
 	return (
 		<CardLayout>
 			<ProfileContainer>
@@ -113,12 +51,6 @@ const Card: React.FC<CardProps> = ({ id, chatRoomId, requester }) => {
 						))}
 					</div>
 				</ProfileInfo>
-				<SeeMore onClick={() => nav(`/profile/${requester.id}`)}>
-					<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.text.caption}>
-						OOTD 더 보기
-					</StyledText>
-					<ArrowButton />
-				</SeeMore>
 			</ProfileContainer>
 			<OOTDImgBox>
 				<Swiper
@@ -139,16 +71,7 @@ const Card: React.FC<CardProps> = ({ id, chatRoomId, requester }) => {
 						</SwiperSlide>
 					))}
 				</Swiper>
-				<Reaction>
-					<Btn onClick={handleRejectButtonClick}>
-						<img src={rejectButton} alt="reject" />
-					</Btn>
-					<Btn onClick={handleAcceptButtonClick}>
-						<img src={acceptButton} alt="accept" />
-					</Btn>
-				</Reaction>
 			</OOTDImgBox>
-			{isStatusModalOpen && <Modal {...statusModalProps} />}
 		</CardLayout>
 	);
 };

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

@@ -1,24 +1,20 @@
 import { styled } from 'styled-components';
 
-import ArrowIcon from '@assets/arrow/min-right.svg';
-
 export const CardLayout = styled.div`
-	background-color: ${({ theme }) => theme.colors.background.divider};
 	border-radius: 0.5rem;
 	position: relative;
-	height: 100%;
 `;
 
 export const ProfileContainer = styled.div`
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	padding: 1rem 0.5rem;
+	padding: 0.5rem 0;
 `;
 
 export const ProfileImgBox = styled.div`
-	width: 3.25rem;
-	height: 3.25rem;
+	width: 2.25rem;
+	height: 2.25rem;
 	margin-right: 0.5rem;
 	border-radius: 50%;
 	cursor: pointer;
@@ -45,35 +41,19 @@ export const ProfileInfo = styled.div`
 	}
 `;
 
-export const SeeMore = styled.div`
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	margin-bottom: 2.13rem;
-`;
-
-export const ArrowButton = styled.button`
-	width: 1.125rem;
-	height: 1.125rem;
-	background-image: url(${ArrowIcon});
-	background-repeat: no-repeat;
-	background-position: center;
-`;
-
 export const OOTDImgBox = styled.div`
 	position: relative;
 	width: 100%;
-	height: 100%;
-	border-radius: 0 0 0.5rem 0.5rem;
+	height: fit-content;
+	margin-bottom: 0.5rem;
+	border-radius: 0.5rem;
 	overflow: hidden;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	aspect-ratio: 1/1;
 
 	.slide-image-small {
 		width: 100%;
-		max-width: 640px;
 		height: 100%;
 		object-fit: contain;
 	}
@@ -136,24 +116,3 @@ export const OOTDImgBackground = styled.div<{ $src: string }>`
 	background-repeat: no-repeat;
 	background-size: cover;
 `;
-
-export const Reaction = styled.div`
-	position: absolute;
-	bottom: 0;
-	padding: 1rem 0rem;
-	display: flex;
-	align-items: center;
-	gap: 0.9375rem;
-	z-index: 100;
-`;
-
-export const Btn = styled.button`
-	cursor: pointer;
-	width: 3.5rem;
-	height: 3.5rem;
-	background-color: transparent;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;