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

Author: xxinzzi

src/apis/chatting/dto.ts

@@ -2,15 +2,15 @@
 // base response 형태를 따르지 않으므로 data 접미사를 사용했습니다.
 // response
 export interface ChatRoomData {
-	chatRoomId: number;
+	id: number;
 	otherUser: OtherUserDto;
 	latestMessage: LatestMessageDto;
 }
 
 export interface OtherUserDto {
 	id: number;
 	nickname: string;
-	profileUrl: string;
+	profilePictureUrl: string;
 }
 
 export interface LatestMessageDto {

src/apis/matching/dto.ts

@@ -1,4 +1,4 @@
-import { BaseSuccessResponse } from '../core/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
 
 // 매칭 요청
 // request
@@ -12,36 +12,37 @@ export interface CreateMatchingRequest {
 export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
 
 export interface CreateMatchingData {
+	id: number; // matchingId
 	chatRoomId: number;
-	fromUserId: number;
-	toUserId: number;
+	requesterId: number;
+	targetId: number;
 }
 
 // 매칭 리스트 조회
 // response
 export type GetMatchingListResponse = BaseSuccessResponse<GetMatchingListData>;
 
 export interface GetMatchingListData {
-	isMatching: boolean; // 매칭 요청 존재 여부
-	matchingsCount: number; // 매칭 요청 개수
+	hasMatching: boolean;
+	matchingsCount: number;
 	matching: MatchingDto[];
 }
 
 export interface MatchingDto {
-	matchingId: number;
+	id: number; // matchingId
 	requester: RequesterDto;
-	requesterPost: RequesterPostDto;
 }
 
 export interface RequesterDto {
-	requesterId: number;
+	id: number; // requesterId
 	nickname: string;
 	profilePictureUrl: string;
+	representativePost: RepresentativePost;
 }
 
-export interface RequesterPostDto {
-	postImages: PostImageDto[]; // 대표 게시글 이미지
-	styleTags: string[]; // 게시글 스타일 태그
+export interface RepresentativePost {
+	postImages: PostImageDto[];
+	styleTags: string[];
 }
 
 export interface PostImageDto {
@@ -59,7 +60,7 @@ export interface ModifyMatchingStatusRequest {
 export type ModifyMatchingStatusResponse = BaseSuccessResponse<ModifyMatchingStatusData>;
 
 export interface ModifyMatchingStatusData {
-	matchingId: number;
+	id: number; // matchingId
 	requesterId: number;
 	targetId: number;
 	requestStatus: string;

src/apis/matching/index.ts

@@ -1,5 +1,5 @@
-import { newRequest } from '../core';
-import {
+import { newRequest } from '@apis/core';
+import type {
 	CreateMatchingRequest,
 	CreateMatchingResponse,
 	GetMatchingListResponse,

src/components/BottomSheet/OptionsBottomSheet/ReportBottomSheetMenu/styles.tsx

@@ -11,21 +11,27 @@ export const InputLayout = styled.div`
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	background-color: ${({ theme }) => theme.colors.background.primary};
+	padding: 0 1rem;
+	margin-bottom: 6.25rem;
+	margin-top: -1rem;
 
 	textarea {
 		display: block;
 		width: 100%;
 		height: 5.25rem;
-		border-radius: 0.5rem;
-		border: 0.0625rem solid #ededed;
-		margin-bottom: 5.25rem;
-		margin-top: -1rem;
+		padding: 0.8rem 0.9375rem;
 		outline: none;
-		padding: 1rem 0.9375rem;
+		border-radius: 0.5rem;
+		border: 0.0625rem solid ${({ theme }) => theme.colors.border.divider};
 		${({ theme }) => theme.fontStyles['body1-medium']};
-		line-height: 1.25%;
-		color: #1d1d1d;
-		background-color: #f8f8f8;
+		color: ${({ theme }) => theme.colors.text.primary};
+		background-color: ${({ theme }) => theme.colors.background.secondary};
 		resize: none;
+
+		&::placeholder {
+			color: ${({ theme }) => theme.colors.text.tertiary};
+			${({ theme }) => theme.fontStyles['body2-regular']};
+		}
 	}
 `;

src/components/BottomSheet/OptionsBottomSheet/index.tsx

@@ -200,7 +200,7 @@ const OptionsBottomSheet: React.FC<OptionsBottomSheetProps> = ({
 					<ReportModalWrapper onClick={handleBackgroundClick}>
 						<ReportModalContainer>
 							<ReportModalHeader>
-								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.white}>
+								<StyledText $textTheme={{ style: 'heading1-bold' }} color={theme.colors.text.contrast}>
 									신고 사유 선택
 								</StyledText>
 								<CloseButton

src/components/BottomSheet/OptionsBottomSheet/styles.tsx

@@ -33,7 +33,7 @@ export const ReportModalContainer = styled.div`
 	justify-content: center;
 	align-items: center;
 	border-radius: 0.38rem;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 `;
 
 export const ReportModalHeader = styled.header`
@@ -44,7 +44,7 @@ export const ReportModalHeader = styled.header`
 	justify-content: space-between;
 	align-items: center;
 	border-radius: 0.38rem 0.38rem 0 0;
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 `;
 
 export const ReportModalBox = styled.section`

src/components/BottomSheet/styles.tsx

@@ -31,7 +31,7 @@ export const BottomSheetLayout = styled.div.attrs<{ $currentTranslateY: number;
 	max-width: 512px;
 	left: 50%;
 	border-radius: 0.938rem 0.938rem 0 0;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	padding: 0 1.25rem;
 	z-index: 200;
 	user-select: none;
@@ -43,7 +43,7 @@ export const Handler = React.memo(styled.hr`
 	width: 2.88rem;
 	margin: 0.6rem auto 0 auto;
 	height: 0.125rem;
-	background-color: #d9d9d9;
+	background-color: ${({ theme }) => theme.colors.gray[300]};
 	border: none;
 	border-radius: 0.125rem;
 	z-index: 300;
@@ -56,7 +56,7 @@ export const SideBarLayout = styled.div<{ $isSideBarOpen: boolean }>`
 	height: 100%;
 	position: fixed;
 	right: 0;
-	background: white;
+	background: ${({ theme }) => theme.colors.background.primary};
 	transform: translateX(${({ $isSideBarOpen }) => ($isSideBarOpen ? 0 : '100%')});
 	transition: transform 0.3s;
 `;

src/components/BottomSheetMenu/index.tsx

@@ -2,14 +2,15 @@ import { StyledText } from '@components/Text/StyledText';
 import { BottomSheetMenuLayout, SheetItem, IconButton } from './styles';
 import type { BottomSheetMenuProps, SheetItemDto } from './dto';
 import React from 'react';
+import theme from '@styles/theme';
 
 const BottomSheetMenu: React.FC<BottomSheetMenuProps> = React.memo(({ items }) => {
 	return (
 		<BottomSheetMenuLayout>
 			{items.map((item: SheetItemDto, index) => (
 				<div key={index}>
 					<SheetItem onClick={item.action}>
-						<StyledText $textTheme={{ style: 'body1-medium' }} color={'#7b7b7b'}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.text.tertiary}>
 							{item.text}
 						</StyledText>
 						{item.icon && (

src/components/BottomSheetMenu/styles.tsx

@@ -13,7 +13,7 @@ export const SheetItem = styled.li`
 	align-items: center;
 	justify-content: space-between;
 	cursor: pointer;
-	border-bottom: 1px solid rgb(0, 0, 0, 0.2);
+	border-bottom: 1px solid ${({ theme }) => theme.colors.gray[300]};
 `;
 
 export const IconButton = styled.button`

src/components/CommentBottomSheet/Comment/index.tsx

@@ -2,7 +2,7 @@ import { StyledText } from '@components/Text/StyledText';
 import { CommentLayout, SendContainer, CommentTextarea, SendButton } from './styles';
 import send from '@assets/default/send-comment.svg';
 import React, { useEffect, useRef, useState } from 'react';
-import { CommentProps } from './dto';
+import type { CommentProps } from './dto';
 
 const Comment: React.FC<CommentProps> = ({ content, sendComment, isModal = false }) => {
 	const [comment, setComment] = useState('');