리팩토링 v1.1.0 (2차)

src/apis/auth/index.ts

@@ -1,4 +1,5 @@
 import { newRequest } from '@apis/core';
+
 import type { getUserInfoByJwtResponse } from './dto';
 
 // jwt로 사용자 정보 조회 api /auth/me

src/apis/chatting/dto.ts

@@ -27,7 +27,7 @@ export interface chatRoomMessagesData {
 	fromUser: FromUserDto;
 	toUser: ToUserDto;
 	createdAt: string;
-	toUserReadAt: any;
+	toUserReadAt: Date;
 }
 
 export interface FromUserDto {

src/apis/core/index.ts

@@ -5,6 +5,7 @@ import axios, {
 	AxiosResponse,
 	InternalAxiosRequestConfig,
 } from 'axios';
+
 import { NEW_JWT_KEY } from '../../config/constant';
 
 // 기존 서버 응답 타입

src/apis/matching/index.ts

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

src/apis/post-comment/dto.ts

@@ -17,7 +17,7 @@ interface Content {
 	content: string;
 }
 
-interface CreateCommentData extends Content {}
+type CreateCommentData = Content;
 
 export interface Comment {
 	id: number;

src/apis/post-comment/index.ts

@@ -1,6 +1,8 @@
-import { newRequest } from '../core';
-import { CreateCommentRequest, CreateCommentResponse, GetCommentListResponse } from './dto';
-import { EmptySuccessResponse } from '../core/dto';
+import { newRequest } from '@apis/core';
+
+import type { EmptySuccessResponse } from '@apis/core/dto';
+
+import type { CreateCommentRequest, CreateCommentResponse, GetCommentListResponse } from './dto';
 
 // 게시글 댓글 생성 API
 export const createCommentApi = (postId: number, data: CreateCommentRequest) =>

src/apis/post-like/dto.ts

@@ -1,5 +1,5 @@
-import { BaseSuccessResponse } from '../core/dto';
-import { PaginationMeta } from '../util/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
+import type { PaginationMeta } from '@apis/util/dto';
 
 // 좋아요 누르기/취소
 export type TogglePostLikeStatusResponse = BaseSuccessResponse<TogglePostLikeStatusData>;

src/apis/post-like/index.ts

@@ -1,5 +1,6 @@
-import { newRequest } from '../core';
-import { TogglePostLikeStatusResponse, GetPostLikeListResponse } from './dto';
+import { newRequest } from '@apis/core';
+
+import type { TogglePostLikeStatusResponse, GetPostLikeListResponse } from './dto';
 
 // 게시글 좋아요 누르기/취소
 export const togglePostLikeStatusApi = (postId: number) =>

src/apis/post-report/dto.ts

@@ -1,27 +1,26 @@
-import { BaseSuccessResponse } from '../core/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
 
 interface BaseReport {
-  id: number;           // 신고 ID
-  userId: number;       // 신고 생성 사용자 ID
-  postId: number;       // 신고된 게시글 ID
-  content: string;      // 신고된 게시글 내용
-  repostReason: string; // 신고 사유
+	id: number; // 신고 ID
+	userId: number; // 신고 생성 사용자 ID
+	postId: number; // 신고된 게시글 ID
+	content: string; // 신고된 게시글 내용
+	repostReason: string; // 신고 사유
 }
 
 // 게시글 신고 요청 DTO
 export interface SendPostReportRequest {
-  requesterId: number; // 신고하는 사용자 ID
-  postId: number;      // 신고 대상 게시글 ID
-  reason: string;      // 신고 사유
+	requesterId: number; // 신고하는 사용자 ID
+	postId: number; // 신고 대상 게시글 ID
+	reason: string; // 신고 사유
 }
 
 // 게시물 신고 응답 데이터
 export interface SendPostReportData extends BaseReport {
-  requesterId: number; // 신고하는 사용자 ID
-  postId: number;      // 신고 대상 게시글 ID
-  reason: string;      // 신고 사유
+	requesterId: number; // 신고하는 사용자 ID
+	postId: number; // 신고 대상 게시글 ID
+	reason: string; // 신고 사유
 }
 
 // 게시물 신고 응답 타입
 export type SendPostReportResponse = BaseSuccessResponse<SendPostReportData>;
-

src/apis/post-report/index.ts

@@ -1,6 +1,7 @@
-import { newRequest } from "../core";
-import { SendPostReportRequest, SendPostReportResponse } from "./dto";
+import { newRequest } from '@apis/core';
+
+import type { SendPostReportRequest, SendPostReportResponse } from './dto';
 
 // 게시글 신고 API
 export const sendPostReportApi = (data: SendPostReportRequest) =>
-  newRequest.post<SendPostReportResponse>('/post-report', data);
+	newRequest.post<SendPostReportResponse>('/post-report', data);

src/apis/post/dto.ts

@@ -1,5 +1,5 @@
-import { BaseSuccessResponse } from '../core/dto';
-import { PaginationMeta } from '../util/dto';
+import type { BaseSuccessResponse } from '@apis/core/dto';
+import type { PaginationMeta } from '@apis/util/dto';
 
 // 게시글 생성
 //request
@@ -28,7 +28,7 @@ export interface PostBase {
 	postClothings?: PostClothing[] | null;
 	isRepresentative: boolean;
 }
-export interface CreatePostData extends PostBase {}
+export type CreatePostData = PostBase;
 export interface PostSummary {
 	id: number;
 	content: string;

src/apis/post/index.ts

@@ -1,5 +1,8 @@
-import { newRequest } from '../core';
-import {
+import { newRequest } from '@apis/core';
+
+import type { EmptySuccessResponse } from '@apis/core/dto';
+
+import type {
 	CreatePostRequest,
 	CreatePostResponse,
 	GetPostListResponse,
@@ -8,7 +11,6 @@ import {
 	ModifyPostRequest,
 	ModifyPostResponse,
 } from './dto';
-import { EmptySuccessResponse } from '../core/dto';
 
 // 게시글 생성
 export const createPostApi = (data: CreatePostRequest) => newRequest.post<CreatePostResponse>('/post', data);

src/apis/user-block/index.ts

@@ -1,5 +1,7 @@
 import { newRequest } from '@apis/core';
+
 import type { EmptySuccessResponse } from '@apis/core/dto';
+
 import type { PostUserBlockRequest } from './dto';
 
 // 유저 차단 api

src/apis/user-report/index.ts

@@ -1,5 +1,7 @@
 import { newRequest } from '@apis/core';
+
 import type { EmptySuccessResponse } from '@apis/core/dto';
+
 import type { PostUserReportRequest } from './dto';
 
 // 유저 신고 api

src/apis/user/index.ts

@@ -1,5 +1,7 @@
 import { newRequest } from '@apis/core';
+
 import type { EmptySuccessResponse } from '@apis/core/dto';
+
 import type {
 	GetUserInfoResponse,
 	PatchUserInfoRequest,

src/components/BottomButton/index.tsx

@@ -8,7 +8,7 @@ const BottomButton: React.FC<BottomButtonProps> = ({ content, onClick, disabled
 	return (
 		<ButtonWrapper>
 			<Button onClick={onClick} disabled={disabled}>
-				<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
+				<StyledText $textTheme={{ style: 'body1-regular' }}>{content}</StyledText>
 			</Button>
 		</ButtonWrapper>
 	);

src/components/ClothingInfoItem/index.tsx

@@ -21,10 +21,10 @@ const ClothingInfoItem: React.FC<ClothingInfoItemProps> = ({ clothingObj, onDele
 					<img src={clothingObj.imageUrl} alt="ClothingImg" />
 				</ClothingImage>
 				<div className="infoDetail">
-					<StyledText className="brand" $textTheme={{ style: 'body2-bold', lineHeight: 2 }}>
+					<StyledText className="brand" $textTheme={{ style: 'body2-bold' }}>
 						{clothingObj.brandName}
 					</StyledText>
-					<ClothingModel className="model" $textTheme={{ style: 'body4-light', lineHeight: 1 }}>
+					<ClothingModel className="model" $textTheme={{ style: 'body4-light' }}>
 						{clothingObj.modelName}
 					</ClothingModel>
 				</div>

src/components/ClothingInfoItem/styles.tsx

@@ -39,7 +39,7 @@ export const ClothingInfoLeft = styled.div`
 
 	.model {
 		margin-right: auto;
-		color: ${({ theme }) => theme.colors.black};
+		color: ${({ theme }) => theme.colors.text.primary};
 		overflow: hidden;
 		text-overflow: ellipsis;
 		display: -webkit-box;

src/components/ConfirmationModal/index.tsx

@@ -24,7 +24,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 		>
 			<ConfirmationModalLayout>
 				<ContentBox>
-					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 						{content}
 					</StyledText>
 				</ContentBox>
@@ -36,14 +36,14 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 									onCloseModal();
 								}}
 							>
-								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
+								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
 									취소
 								</StyledText>
 							</Button>
 						</>
 					)}
 					<Button onClick={confirm.action}>
-						<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 1.5 }} color={'#F00'}>
+						<StyledText $textTheme={{ style: 'body2-regular' }} color={'#F00'}>
 							{confirm.text}
 						</StyledText>
 					</Button>

src/components/Icons/Alarm.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Alarm: React.FC<IconsProps> = ({ isFilled = false, width = '14', height = '18' }) => {

src/components/Icons/Heart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Heart: React.FC<IconsProps> = ({ isFilled = false, width = '56', height = '56' }) => {

src/components/Icons/Home.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Home: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '14', height = '14' }) => {

src/components/Icons/Like.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Like: React.FC<IconsProps> = ({ isFilled = false, color = '', width = '16', height = '14' }) => {

src/components/Icons/Message.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Message: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '14', height = '12' }) => {

src/components/Icons/MyPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const MyPage: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '16', height = '16' }) => {

src/components/Icons/Photo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IconsProps } from './dto';
 
 const Photo: React.FC<IconsProps> = ({ width = '18', height = '18', color = '#8E8E8E' }) => {

src/components/Text/dto.ts

@@ -10,7 +10,6 @@ interface FontStylesByPlatform {
 export interface StyledTextProps {
 	$textTheme: {
 		style: FontStyleKey | FontStylesByPlatform;
-		lineHeight?: number;
 	};
 	color?: string;
 	children: unknown;

src/components/TopBar/styles.tsx

@@ -4,8 +4,7 @@ import theme from '@styles/theme';
 
 import { StyledText } from '@components/Text/StyledText';
 
-import type { TopBarLayoutProps } from './dto';
-export const TopBarLayout = styled.header<TopBarLayoutProps>`
+export const TopBarLayout = styled.header<{ $withBorder: boolean }>`
 	display: flex;
 	position: sticky;
 	top: 0; /* 부모 요소의 상단에 붙도록 설정 */

src/pages/Account/AccountCancel/index.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import theme from '@styles/theme';
 
 import { patchUserWithdrawApi } from '@apis/user';
+import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 import back from '@assets/arrow/left.svg';
 
@@ -23,8 +24,7 @@ import {
 	CheckboxInput,
 	Label,
 	StyledCheckboxText,
-	StyledDiv,
-} from './styles'; // 상대 경로 index 명시
+} from './styles';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
@@ -49,23 +49,20 @@ const AccountCancel: React.FC = () => {
 				return;
 			}
 
-			const storedUserId = Number(localStorage.getItem('my_id'));
+			const currentUserId = getCurrentUserId();
 			const token = localStorage.getItem('new_jwt_token');
 
-			if (!storedUserId || !token) {
+			if (!currentUserId || !token) {
 				setModalContent('사용자 정보를 찾을 수 없습니다.');
 				setIsModalVisible(true);
 				return;
 			}
 
-			// API 요청
-			const response = await patchUserWithdrawApi(storedUserId);
+			const response = await patchUserWithdrawApi(currentUserId);
 
 			if (response.isSuccess) {
 				setModalContent('계정이 성공적으로 삭제되었습니다.');
 				setIsModalVisible(true);
-
-				// 계정 삭제 시 localStorage에서 사용자 정보 제거
 				localStorage.clear();
 
 				setTimeout(() => {
@@ -86,14 +83,13 @@ const AccountCancel: React.FC = () => {
 		<OODDFrame>
 			<CancelContainer>
 				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
-
 				<SubTitle>
-					<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
+					<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.text.primary}>
 						OOTD 탈퇴 전 확인하세요!
 					</StyledText>
 				</SubTitle>
 				<Text as="div">
-					<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
+					<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.text.primary}>
 						{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
 					</StyledText>
 				</Text>
@@ -102,7 +98,7 @@ const AccountCancel: React.FC = () => {
 						<StyledText
 							as="div"
 							$textTheme={{ style: 'body1-medium' }}
-							color={theme.colors.primary}
+							color={theme.colors.text.primary}
 							style={{ whiteSpace: 'nowrap' }}
 						>
 							지금까지 OODD를 이용해주셔서 감사합니다!
@@ -118,12 +114,10 @@ const AccountCancel: React.FC = () => {
 					</Label>
 				</CheckboxWrapper>
 			</CancelContainer>
-			<StyledDiv isChecked={isChecked}>
-				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
-			</StyledDiv>
+			<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
 			{isModalVisible && (
 				<Modal
-					content={modalContent || ''} // null일 경우 빈 문자열로 처리
+					content={modalContent || ''}
 					onClose={handleModalClose}
 					isCloseButtonVisible={true}
 					button={{ content: '확인', onClick: handleModalClose }}