diff --git a/apis/_api/auth.ts b/apis/_api/auth.ts
index e7dc21b6..cb6221c1 100644
--- a/apis/_api/auth.ts
+++ b/apis/_api/auth.ts
@@ -4,7 +4,7 @@ import {
   NEXT_PUBLIC_KAKAO_URI,
 } from '@/constants/develop.constants';
 import { postRegistUserInfoPayload } from './type';
-import { QueryParams } from '@/pages/sign-in/[...callback]';
+import { QueryParams } from '@/utils/types/setting.types';
 import axios from 'axios';
 
 export const login = async (payload: QueryParams) => {
diff --git a/apis/_service/auth.service.ts b/apis/_service/auth.service.ts
index 0781d569..7f1e56c2 100644
--- a/apis/_service/auth.service.ts
+++ b/apis/_service/auth.service.ts
@@ -1,6 +1,6 @@
 import { authApi } from '@/apis/_api';
 import { postRegistUserInfoPayload } from '../_api/type';
-import { QueryParams } from '@/pages/sign-in/[...callback]';
+import { QueryParams } from '@/utils/types/setting.types';
 
 export const login = async (payload: QueryParams) => {
   const data = await authApi.login(payload);
diff --git a/apis/domain/SignIn/SignInApi.tsx b/apis/domain/SignIn/SignInApi.tsx
index 327bfeaf..84b6a6d2 100644
--- a/apis/domain/SignIn/SignInApi.tsx
+++ b/apis/domain/SignIn/SignInApi.tsx
@@ -5,7 +5,7 @@ import {
   NEXT_PUBLIC_NAVER_URI,
 } from '@/constants/develop.constants';
 import { useRouter } from 'next/router';
-import { QueryParams } from '@/pages/sign-in/[...callback]';
+import { QueryParams } from '@/utils/types/setting.types';
 import { useState } from 'react';
 import { kakaoLogin } from '@/apis/_api/auth';
 
diff --git a/components/AgreeBlock/index.tsx b/components/AgreeBlock/index.tsx
index 3ddee3d2..99b8f7e3 100644
--- a/components/AgreeBlock/index.tsx
+++ b/components/AgreeBlock/index.tsx
@@ -9,8 +9,8 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 interface AgreeBlockProps {
   title: string;
   buttonClick?: () => void;
-  checked: boolean;
-  setChecked: Dispatch<SetStateAction<boolean>>;
+  checked: Boolean;
+  setChecked: Dispatch<SetStateAction<Boolean>>;
   lastItem?: Boolean;
 }
 
diff --git a/components/BrandList/Brand/index.tsx b/components/BrandList/Brand/index.tsx
index 1ee85b56..f17373ea 100644
--- a/components/BrandList/Brand/index.tsx
+++ b/components/BrandList/Brand/index.tsx
@@ -10,12 +10,6 @@ interface BrandProps {
   state?: Boolean;
 }
 
-export interface BrandType {
-  id: number;
-  name: string;
-  state?: Boolean;
-}
-
 export default function Brand({
   keyword,
   name,
diff --git a/components/BrandList/index.tsx b/components/BrandList/index.tsx
index 527d18f8..bd408fc5 100644
--- a/components/BrandList/index.tsx
+++ b/components/BrandList/index.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
-import Brand, { BrandType } from './Brand';
+import Brand from './Brand';
+import { BrandType } from '@/utils/types/OOTD.types';
 import S from './style';
 import useEffectAfterMount from '@/hooks/useEffectAfterMount';
 
diff --git a/components/Card/CardLayout/index.tsx b/components/Card/CardLayout/index.tsx
index 45fcbd64..9e54d85f 100644
--- a/components/Card/CardLayout/index.tsx
+++ b/components/Card/CardLayout/index.tsx
@@ -1,5 +1,5 @@
 import { Layout, CardBody } from './style';
-import { CardProps } from '../type';
+import { CardProps } from '@/utils/types/card.type';
 import ImageWithCaption from '@/components/UI/ImageWithCaption';
 
 export default function Card(props: CardProps) {
diff --git a/components/Card/MainFavoriteCard/index.tsx b/components/Card/MainFavoriteCard/index.tsx
index aacbe46e..88dac42c 100644
--- a/components/Card/MainFavoriteCard/index.tsx
+++ b/components/Card/MainFavoriteCard/index.tsx
@@ -5,16 +5,7 @@ import LikeToggle from '@/components/Toggle/LikeToggle';
 import { useState } from 'react';
 import Link from 'next/link';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
-
-export interface MainFavoriteCardProps {
-  ootdId: number;
-  ootdImageUrl: string;
-  ootdImageCount: number;
-  writerId: number;
-  writerProfileImage?: string;
-  writerName: string;
-  onClick?: () => void;
-}
+import { MainFavoriteCardProps } from '@/utils/types/OOTD.types';
 
 export default function MainFavoriteCard({
   ootdId,
diff --git a/components/Card/MainTopUserCard/index.tsx b/components/Card/MainTopUserCard/index.tsx
index 3ce5f2ca..25b4f18a 100644
--- a/components/Card/MainTopUserCard/index.tsx
+++ b/components/Card/MainTopUserCard/index.tsx
@@ -1,5 +1,5 @@
 import { Body4, Title2 } from '@/components/UI';
-import { CardComponentProps } from '../type';
+import { CardComponentProps } from '@/utils/types/card.type';
 import Card from '../CardLayout';
 import { Layout } from './style';
 
diff --git a/components/Carousel/index.tsx b/components/Carousel/index.tsx
index 1c883e43..9916f058 100644
--- a/components/Carousel/index.tsx
+++ b/components/Carousel/index.tsx
@@ -5,11 +5,11 @@ import Slider from 'react-slick';
 interface CarouselProps {
   children: React.ReactNode;
   slidesToShow: number;
-  infinite: Boolean;
+  infinite: boolean;
   ParentRef?: React.MutableRefObject<Slider | null>;
   afterChange?: (currentIndex: number) => void;
   beforeChange?: (currentIndex: number, nextIndex: number) => void;
-  swipe?: boolean;
+  swipe?: Boolean;
   dots?: boolean;
   initialSlide?: number;
 }
diff --git a/components/ClothCategory/index.tsx b/components/ClothCategory/index.tsx
index 28c346df..bd988395 100644
--- a/components/ClothCategory/index.tsx
+++ b/components/ClothCategory/index.tsx
@@ -1,7 +1,7 @@
 import S from './style';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { Body3 } from '@/components/UI';
-import { CategoryListType } from '../Domain/AddCloth/ClothCategoryModal';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 
 interface ClothCategoryModalProps {
diff --git a/components/ClothInformation/TagInformation/index.tsx b/components/ClothInformation/TagInformation/index.tsx
index 2016661f..95fada6c 100644
--- a/components/ClothInformation/TagInformation/index.tsx
+++ b/components/ClothInformation/TagInformation/index.tsx
@@ -1,7 +1,7 @@
 import { Body4, Title2 } from '@/components/UI';
 import S from './style';
 import Image from 'next/image';
-import { ClothInformationProps } from '../type';
+import { ClothInformationProps } from '@/utils/types/cloth.types';
 import { AiFillCloseCircle } from 'react-icons/ai';
 
 export default function TagInformation({
diff --git a/components/ClothInformation/index.tsx b/components/ClothInformation/index.tsx
index f3b3a9cc..b1152f14 100644
--- a/components/ClothInformation/index.tsx
+++ b/components/ClothInformation/index.tsx
@@ -1,4 +1,4 @@
-import { ClothInformationProps } from './type';
+import { ClothInformationProps } from '@/utils/types/cloth.types';
 import S from './style';
 import { Body4, Title2 } from '../UI';
 import ImageWithCaption from '../UI/ImageWithCaption';
diff --git a/components/ClothInformation/type.ts b/components/ClothInformation/type.ts
deleted file mode 100644
index bc36b404..00000000
--- a/components/ClothInformation/type.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface ClothInformationProps {
-  clothId: number;
-  clothImage: string;
-  clothSize?: string;
-  name?: string;
-  brand?: string;
-  size?: string;
-  category?: string;
-  icon?: string;
-  state?: 'dark' | 'light';
-  type?: 'view';
-  caption?: string;
-  className?: string;
-  onClick?: () => void;
-  onTouchEnd?: () => void;
-}
diff --git a/components/ColorList/index.tsx b/components/ColorList/index.tsx
index 29982e70..6f8f45e2 100644
--- a/components/ColorList/index.tsx
+++ b/components/ColorList/index.tsx
@@ -2,13 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useLayoutEffect } from 'react';
 import S from './style';
 import ColorSpan from './ColorSpan';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
-
-export type ColorListType = {
-  id: number;
-  name: string;
-  colorCode: string;
-  state: Boolean;
-}[];
+import { ColorListType } from '@/utils/types/OOTD.types';
 
 interface ColorListProps {
   colorList: ColorListType;
diff --git a/components/Comment/index.tsx b/components/Comment/index.tsx
index c69b6959..6d1ff2de 100644
--- a/components/Comment/index.tsx
+++ b/components/Comment/index.tsx
@@ -4,28 +4,7 @@ import S from './style';
 import Avatar from '@/public/images/Avatar.svg';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
 import NextImage from '../NextImage';
-
-export interface CommentProps {
-  id: number;
-  userId: number;
-  userImage: string;
-  userName: string;
-  content: string;
-  timeStamp: string;
-  type?: 'child';
-  view?: 'preview';
-  onClickReplyButton?: () => void;
-  taggedUserName?: string;
-  myComment?: Boolean;
-  parentId?: number;
-  reRender: number;
-  depth?: number;
-  setReRender: Dispatch<SetStateAction<number>>;
-  setDeclaration: Dispatch<SetStateAction<Boolean>>;
-  setReportUserName: Dispatch<SetStateAction<string>>;
-  setReportID: Dispatch<SetStateAction<number>>;
-  setBlockID: Dispatch<SetStateAction<number>>;
-}
+import { CommentProps } from '@/utils/types/OOTD.types';
 
 function Comment({
   id,
diff --git a/components/DeclarationModal/index.tsx b/components/DeclarationModal/index.tsx
index c3652de6..356d837e 100644
--- a/components/DeclarationModal/index.tsx
+++ b/components/DeclarationModal/index.tsx
@@ -6,7 +6,7 @@ import { Button3, Caption1, Title1 } from '../UI';
 import WithdrawBlock from '../Setting/WithdrawBlock';
 import ReportApi from '@/apis/domain/Report/ReportApi';
 
-export type withdrawBlockType = {
+type withdrawBlockType = {
   id: number;
   message: string;
 }[];
@@ -30,7 +30,7 @@ export default function DeclarationModal({
   setReceivedDeclaration,
   setReportStatus,
 }: DeclarationModalProps) {
-  const [checks, setChecks] = useState<Array<boolean>>([
+  const [checks, setChecks] = useState<Array<Boolean>>([
     false,
     false,
     false,
@@ -40,7 +40,7 @@ export default function DeclarationModal({
     false,
     false,
   ]);
-  const [possible, setPossible] = useState<boolean>(false);
+  const [possible, setPossible] = useState<Boolean>(false);
 
   useEffect(() => {
     setPossible(checks.some((check) => check));
@@ -63,7 +63,7 @@ export default function DeclarationModal({
 
   const onClickDeclarationButton = async () => {
     const trueIndices: number[] = checks.reduce(
-      (acc: number[], currentValue: boolean, currentIndex: number) => {
+      (acc: number[], currentValue: Boolean, currentIndex: number) => {
         if (currentValue === true) {
           acc.push(currentIndex);
         }
diff --git a/components/Domain/AddCloth/BrandModal/index.tsx b/components/Domain/AddCloth/BrandModal/index.tsx
index d1d9bb39..b38c33a2 100644
--- a/components/Domain/AddCloth/BrandModal/index.tsx
+++ b/components/Domain/AddCloth/BrandModal/index.tsx
@@ -3,7 +3,6 @@ import S from './style';
 import { Body4, Button3, Title1 } from '@/components/UI';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import BrandList from '@/components/BrandList';
-import { BrandType } from '@/components/BrandList/Brand';
 import SearchBar from '@/components/SearchBar';
 import { AiOutlineClose } from 'react-icons/ai';
 import NextButton from '@/components/NextButton';
@@ -11,6 +10,7 @@ import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import CheckBoxTrue from '@/public/images/CheckBoxTrue.svg';
 import CheckBoxFalse from '@/public/images/CheckBoxFalse.svg';
 import Image from 'next/image';
+import { BrandType } from '@/utils/types/OOTD.types';
 
 interface BrandModalProps {
   brandModalIsOpen: Boolean;
diff --git a/components/Domain/AddCloth/ClothCategoryModal/index.tsx b/components/Domain/AddCloth/ClothCategoryModal/index.tsx
index c73b7b27..1906f4fb 100644
--- a/components/Domain/AddCloth/ClothCategoryModal/index.tsx
+++ b/components/Domain/AddCloth/ClothCategoryModal/index.tsx
@@ -5,6 +5,7 @@ import { Title1 } from '@/components/UI';
 import NextButton from '@/components/NextButton';
 import ClothCategory from '@/components/ClothCategory';
 import { AiOutlineClose } from 'react-icons/ai';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 
 interface ClothCategoryModalProps {
   isOpen: Boolean;
@@ -13,19 +14,6 @@ interface ClothCategoryModalProps {
   categoryInitial?: CategoryListType[] | null;
 }
 
-export type CategoryType = {
-  id: number;
-  name: string;
-  state?: Boolean;
-};
-
-export type CategoryListType = {
-  id: number;
-  name: string;
-  state?: Boolean;
-  detailCategories?: CategoryType[];
-};
-
 export default function ClothCategoryModal({
   isOpen,
   setIsOpen,
diff --git a/components/Domain/AddCloth/ClothSizeModal/index.tsx b/components/Domain/AddCloth/ClothSizeModal/index.tsx
index 3ece3293..64ed414c 100644
--- a/components/Domain/AddCloth/ClothSizeModal/index.tsx
+++ b/components/Domain/AddCloth/ClothSizeModal/index.tsx
@@ -5,6 +5,7 @@ import { Body2, Title1 } from '@/components/UI';
 import NextButton from '@/components/NextButton';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import { AiOutlineClose } from 'react-icons/ai';
+import { SizeItem } from '@/utils/types/OOTD.types';
 
 interface ClothSizeProps {
   isOpen: Boolean;
@@ -14,11 +15,6 @@ interface ClothSizeProps {
   clothSizeInitial: SizeItem | null;
 }
 
-export type SizeItem = {
-  id: number;
-  name: string;
-};
-
 export type SizeListType = SizeItem[][];
 
 export default function ClothSizeModal({
diff --git a/components/Domain/AddCloth/ColorModal/index.tsx b/components/Domain/AddCloth/ColorModal/index.tsx
index f985b209..79f6b889 100644
--- a/components/Domain/AddCloth/ColorModal/index.tsx
+++ b/components/Domain/AddCloth/ColorModal/index.tsx
@@ -5,8 +5,9 @@ import NextButton from '@/components/NextButton';
 import { AiOutlineClose } from 'react-icons/ai';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import React from 'react';
-import ColorList, { ColorListType } from '@/components/ColorList';
+import ColorList from '@/components/ColorList';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
+import { ColorListType } from '@/utils/types/OOTD.types';
 interface ColorModalProps {
   isOpen: Boolean;
   setIsOpen: Dispatch<SetStateAction<Boolean>>;
diff --git a/components/Domain/AddCloth/WhereToBuyModal/index.tsx b/components/Domain/AddCloth/WhereToBuyModal/index.tsx
index b90c7c7d..3f796b19 100644
--- a/components/Domain/AddCloth/WhereToBuyModal/index.tsx
+++ b/components/Domain/AddCloth/WhereToBuyModal/index.tsx
@@ -4,7 +4,7 @@ import Input from '@/components/Input';
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import Modal from '@/components/Modal';
 import NextButton from '@/components/NextButton';
-import { ClothWhereBuy } from '@/pages/add-cloth';
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
 import { AiOutlineClose } from 'react-icons/ai';
 
 interface WhereToBuyModal {
diff --git a/components/Domain/AddOOTD/StyleModal/index.tsx b/components/Domain/AddOOTD/StyleModal/index.tsx
index a59b27b2..1844628a 100644
--- a/components/Domain/AddOOTD/StyleModal/index.tsx
+++ b/components/Domain/AddOOTD/StyleModal/index.tsx
@@ -3,7 +3,7 @@ import S from './style';
 import { AiOutlineClose } from 'react-icons/ai';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import Input from '@/components/Input';
-import { Style } from '@/pages/add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import NextButton from '@/components/NextButton';
 import Modal from '@/components/Modal';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
diff --git a/components/Domain/AddOOTD/TagModal/NewRegister/index.tsx b/components/Domain/AddOOTD/TagModal/NewRegister/index.tsx
index e5dc5099..de16cb6f 100644
--- a/components/Domain/AddOOTD/TagModal/NewRegister/index.tsx
+++ b/components/Domain/AddOOTD/TagModal/NewRegister/index.tsx
@@ -1,7 +1,7 @@
 import { Body3, Button3, Headline2 } from '@/components/UI';
 import S from './style';
 import { useRouter } from 'next/router';
-import { ImageWithTag } from '..';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import { useSetRecoilState } from 'recoil';
 import { storedImageKey } from '@/utils/recoil/atom';
 
diff --git a/components/Domain/AddOOTD/TagModal/index.tsx b/components/Domain/AddOOTD/TagModal/index.tsx
index 57dcd3cb..30bc0afd 100644
--- a/components/Domain/AddOOTD/TagModal/index.tsx
+++ b/components/Domain/AddOOTD/TagModal/index.tsx
@@ -10,30 +10,14 @@ import useInfiniteScroll from '@/hooks/useInfiniteScroll';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { storedImageKey, userId } from '@/utils/recoil/atom';
-import { UserClothDataType } from '../../OOTD/UserCloth';
+import { UserClothDataType } from '@/utils/types/cloth.types';
 import Spinner from '@/components/Spinner';
 import useEffectAfterMount from '@/hooks/useEffectAfterMount';
 import Toast from '@/components/Toast';
 import { useRouter } from 'next/router';
 import Alert from '@/components/Alert';
 import Background from '@/components/Background';
-
-export type ImageWithTag = {
-  ootdId: number;
-  ootdImage: string;
-  ootdImageClothesList?: {
-    clothesId: number;
-    clothesImage: string;
-    coordinate: { xrate: string; yrate: string };
-    deviceSize: { deviceWidth: number; deviceHeight: number };
-    caption: string;
-    size?: string;
-    state?: string;
-    name?: string;
-    brand?: string;
-    category?: string;
-  }[];
-}[];
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 
 interface AddTagProps {
   setAddTag: Dispatch<SetStateAction<Boolean>>;
diff --git a/components/Domain/Alarm/index.tsx b/components/Domain/Alarm/index.tsx
index e90eff9c..a79ea1d3 100644
--- a/components/Domain/Alarm/index.tsx
+++ b/components/Domain/Alarm/index.tsx
@@ -5,20 +5,7 @@ import Avatar from '@/public/images/Avatar.svg';
 import { useRouter } from 'next/router';
 import { AlarmApi } from '@/apis/domain/Alarm/AlarmApi';
 import React from 'react';
-
-export interface AlarmType {
-  id: number;
-  profileImage: string | null;
-  timeType: string;
-  timeStamp: string;
-  message: string;
-  userName: string;
-  content?: string;
-  contentImage?: string;
-  goUrl: string;
-  userId: number;
-  className: string;
-}
+import { AlarmType } from '@/utils/types/setting.types';
 
 export default function Alarms({
   id,
diff --git a/components/Domain/Main/Explore/index.tsx b/components/Domain/Main/Explore/index.tsx
index b551298c..26e11d69 100644
--- a/components/Domain/Main/Explore/index.tsx
+++ b/components/Domain/Main/Explore/index.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/router';
 import useInfiniteScroll from '@/hooks/useInfiniteScroll';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
-import { OOTDListType } from '../../Search/SearchResult/ClosetCloth';
+import { OOTDListType } from '@/utils/types/OOTD.types';
 import useEffectAfterMount from '@/hooks/useEffectAfterMount';
 import SubHead from '../../Search/SearchResult/SubHead';
 import ImageList from '@/components/ImageList';
diff --git a/components/Domain/Main/LikeOOTD/index.tsx b/components/Domain/Main/LikeOOTD/index.tsx
index ec0a316e..d0ee627d 100644
--- a/components/Domain/Main/LikeOOTD/index.tsx
+++ b/components/Domain/Main/LikeOOTD/index.tsx
@@ -3,7 +3,7 @@ import S from './style';
 import { MainFavoriteCard } from '@/components/Card';
 import Carousel from '@/components/Carousel';
 import { useEffect, useState } from 'react';
-import { MainFavoriteCardProps } from '@/components/Card/MainFavoriteCard';
+import { MainFavoriteCardProps } from '@/utils/types/OOTD.types';
 import { useRouter } from 'next/router';
 import { MainApi } from '@/apis/domain/Main/MainApi';
 
diff --git a/components/Domain/MyPage/Closet/ClosetCloth/index.tsx b/components/Domain/MyPage/Closet/ClosetCloth/index.tsx
index becfefb0..46ef447d 100644
--- a/components/Domain/MyPage/Closet/ClosetCloth/index.tsx
+++ b/components/Domain/MyPage/Closet/ClosetCloth/index.tsx
@@ -5,18 +5,18 @@ import ImageList from '@/components/ImageList';
 import { useRouter } from 'next/router';
 import { AiOutlineDown } from 'react-icons/ai';
 import FilterModal from '../FilterModal';
-import { ColorListType } from '@/components/ColorList';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
-import { BrandType } from '@/components/BrandList/Brand';
+import { CategoryListType } from '@/utils/types/OOTD.types';
+import { BrandType } from '@/utils/types/OOTD.types';
 import useInfiniteScroll from '@/hooks/useInfiniteScroll';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import Spinner from '@/components/Spinner';
 import { useRecoilValue } from 'recoil';
 import { userId } from '@/utils/recoil/atom';
-import { ClothDataType } from '@/pages/cloth/[...ClothNumber]';
+import { ClothDataType } from '@/utils/types/cloth.types';
 import Background from '@/components/Background';
 import useRememberScroll from '@/hooks/useRememberScroll';
 import useEffectAfterMount from '@/hooks/useEffectAfterMount';
+import { ColorListType, FilterData } from '@/utils/types/OOTD.types';
 
 interface ClosetClothProps {
   showingId: number;
@@ -27,17 +27,6 @@ export type myPageClothType = {
   clothImage: string;
 };
 
-export interface FilterData {
-  category: CategoryListType[] | null;
-  color: ColorListType | null;
-  brand: BrandType[] | null;
-  isOpen: Boolean | null;
-  gender?: {
-    man: Boolean;
-    woman: Boolean;
-  };
-}
-
 export default function ClosetCloth({ showingId }: ClosetClothProps) {
   const router = useRouter();
   const localUserId = useRecoilValue(userId);
@@ -50,7 +39,7 @@ export default function ClosetCloth({ showingId }: ClosetClothProps) {
     brand: null,
     isOpen: null,
   });
-  const [searchResult, setSearchResult] = useState([]);
+  const [searchResult, setSearchResult] = useState<myPageClothType[]>([]);
   const [filterModalInitialIndex, setFilterModalInitialIndex] =
     useState<number>(1);
 
diff --git a/components/Domain/MyPage/Closet/FilterModal/index.tsx b/components/Domain/MyPage/Closet/FilterModal/index.tsx
index cfdd56cb..559dd37a 100644
--- a/components/Domain/MyPage/Closet/FilterModal/index.tsx
+++ b/components/Domain/MyPage/Closet/FilterModal/index.tsx
@@ -3,20 +3,18 @@ import S from './style';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import TabView from '@/components/TabView';
 import ClothCategory from '@/components/ClothCategory';
-import ColorList, { ColorListType } from '@/components/ColorList';
+import ColorList from '@/components/ColorList';
 import { Body4, Button3 } from '@/components/UI';
 import { AiOutlineClose } from 'react-icons/ai';
 import Button from '@/components/Button';
-import { BrandType } from '@/components/BrandList/Brand';
+import { BrandType } from '@/utils/types/OOTD.types';
 import BrandList from '@/components/BrandList';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 import { MyPageApi } from '@/apis/domain/MyPage/MyPageApi';
 import { useRouter } from 'next/router';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
-import {
-  GenderTypes,
-  SearchFilterData,
-} from '@/components/Domain/Search/SearchResult/ClosetCloth';
+import { GenderTypes, SearchFilterData } from '@/utils/types/OOTD.types';
+import { ColorListType } from '@/utils/types/OOTD.types';
 
 interface FilterModalProps {
   isOpen: Boolean;
diff --git a/components/Domain/MyPage/Profile/index.tsx b/components/Domain/MyPage/Profile/index.tsx
index 71e44773..13751480 100644
--- a/components/Domain/MyPage/Profile/index.tsx
+++ b/components/Domain/MyPage/Profile/index.tsx
@@ -3,21 +3,7 @@ import S from './style';
 import Button from '@/components/Button';
 import { Body3, Body4, Button3 } from '@/components/UI';
 import { useRouter } from 'next/router';
-
-export interface UserProfileDataType {
-  userId: number;
-  userName: string;
-  profileImage: string;
-  followerCount: number;
-  followingCount: number;
-  height: number;
-  weight: number;
-  description: string;
-  isMyProfile: Boolean;
-  isFollow: Boolean;
-  ootdCount: number;
-  clothesCount: number;
-}
+import { UserProfileDataType } from '@/utils/types/user.types';
 
 interface profileProps {
   data: UserProfileDataType;
diff --git a/components/Domain/OOTD/UserCloth/index.tsx b/components/Domain/OOTD/UserCloth/index.tsx
index 5521cbbb..183dcb29 100644
--- a/components/Domain/OOTD/UserCloth/index.tsx
+++ b/components/Domain/OOTD/UserCloth/index.tsx
@@ -6,16 +6,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import useInfiniteScroll from '@/hooks/useInfiniteScroll';
-
-export interface UserClothDataType {
-  id: number;
-  isTagged: number;
-  imageUrl: string;
-  clothesName: string;
-  brandName: string;
-  categoryName: string;
-  sizeName: string;
-}
+import { UserClothDataType } from '@/utils/types/cloth.types';
 
 interface UserClothProps {
   userName: string;
diff --git a/components/Domain/OOTD/UserOtherOOTD/index.tsx b/components/Domain/OOTD/UserOtherOOTD/index.tsx
index 20c7e8d5..5f7fa50a 100644
--- a/components/Domain/OOTD/UserOtherOOTD/index.tsx
+++ b/components/Domain/OOTD/UserOtherOOTD/index.tsx
@@ -6,17 +6,13 @@ import { useEffect } from 'react';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
 import Carousel from '@/components/Carousel';
 import NextImage from '@/components/NextImage';
+import { OOTDListType } from '@/utils/types/OOTD.types';
 
 interface UserOOTDProps {
   userId?: number;
   userName?: string;
 }
 
-interface OOTDListType {
-  id: number;
-  image: string;
-}
-
 export default function UserOtherOOTD({ userId, userName }: UserOOTDProps) {
   const router = useRouter();
   const { otherOOTD } = OOTDApi();
@@ -50,7 +46,7 @@ export default function UserOtherOOTD({ userId, userName }: UserOOTDProps) {
                 <NextImage
                   onClick={() => router.push(`/ootd/${item.id}`)}
                   key={item.id}
-                  src={item.image}
+                  src={item.imageUrl}
                   alt="이 유저의 다른 ootd"
                   fill={false}
                   width={167}
diff --git a/components/Domain/Search/Recents/index.tsx b/components/Domain/Search/Recents/index.tsx
index 996fbbda..ca7a5122 100644
--- a/components/Domain/Search/Recents/index.tsx
+++ b/components/Domain/Search/Recents/index.tsx
@@ -1,7 +1,7 @@
 import { Title1, Caption1, Button3 } from '@/components/UI';
 import S from './style';
 import { AiOutlineClose } from 'react-icons/ai';
-import { keywordsInterface } from '@/pages/search';
+import { keywordsInterface } from '@/utils/types/OOTD.types';
 import { Dispatch, SetStateAction } from 'react';
 
 interface recentsProps {
diff --git a/components/Domain/Search/SearchResult/ClosetCloth/index.tsx b/components/Domain/Search/SearchResult/ClosetCloth/index.tsx
index 2a8f678a..51aaf37c 100644
--- a/components/Domain/Search/SearchResult/ClosetCloth/index.tsx
+++ b/components/Domain/Search/SearchResult/ClosetCloth/index.tsx
@@ -7,11 +7,16 @@ import { AiOutlineDown } from 'react-icons/ai';
 import SubHead from '../SubHead';
 import Spinner from '@/components/Spinner';
 import FilterModal from '@/components/Domain/MyPage/Closet/FilterModal';
-import { FilterData } from '@/components/Domain/MyPage/Closet/ClosetCloth';
+import { FilterData } from '@/utils/types/OOTD.types';
 import Portal from '@/components/Portal';
 import EmptyFilteredResult from '../EmptyFilteredResult';
 import Background from '@/components/Background';
 import useRememberScroll from '@/hooks/useRememberScroll';
+import {
+  OOTDListType,
+  GenderTypes,
+  SearchFilterData,
+} from '@/utils/types/OOTD.types';
 
 interface ClosetClothProps {
   OOTDTotal: number;
@@ -26,21 +31,6 @@ interface ClosetClothProps {
   setSortStandard: Dispatch<SetStateAction<string>>;
 }
 
-export type OOTDListType = {
-  id: number;
-  imageUrl: string;
-  imageCount: number;
-};
-
-export type GenderTypes = {
-  man: Boolean;
-  woman: Boolean;
-};
-
-export interface SearchFilterData extends FilterData {
-  gender?: GenderTypes;
-}
-
 export default function ClosetCloth({
   OOTDTotal,
   OOTDList,
diff --git a/components/Domain/Search/SearchResult/Profile/index.tsx b/components/Domain/Search/SearchResult/Profile/index.tsx
index bdc5b668..d17e9750 100644
--- a/components/Domain/Search/SearchResult/Profile/index.tsx
+++ b/components/Domain/Search/SearchResult/Profile/index.tsx
@@ -14,13 +14,7 @@ import Button from '@/components/Button';
 import Avatar from '@/public/images/Avatar.svg';
 import NextImage from '@/components/NextImage';
 import PublicApi from '@/apis/domain/Public/PublicApi';
-
-export type ProfileListType = {
-  id: number;
-  name: string;
-  profileImage: string;
-  isFollow: Boolean;
-};
+import { ProfileListType } from '@/utils/types/user.types';
 
 interface ProfileProps {
   profileList: ProfileListType[];
diff --git a/components/Domain/Search/SearchResult/index.tsx b/components/Domain/Search/SearchResult/index.tsx
index c53801e7..c0cf8a9c 100644
--- a/components/Domain/Search/SearchResult/index.tsx
+++ b/components/Domain/Search/SearchResult/index.tsx
@@ -1,6 +1,6 @@
 import S from './style';
-import ClosetCloth, { OOTDListType } from './ClosetCloth';
-import Profile, { ProfileListType } from './Profile';
+import ClosetCloth from './ClosetCloth';
+import Profile from './Profile';
 import EmptySearch from '@/components/EmptySearch';
 import { UserApi } from '@/apis/domain/User/UserApi';
 import { useRouter } from 'next/router';
@@ -9,8 +9,10 @@ import { useEffect, useState } from 'react';
 import useEffectAfterMount from '@/hooks/useEffectAfterMount';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
 import TabView from '@/components/TabView';
-import { FilterData } from '../../MyPage/Closet/ClosetCloth';
+import { FilterData } from '@/utils/types/OOTD.types';
 import useRememberScroll from '@/hooks/useRememberScroll';
+import { OOTDListType } from '@/utils/types/OOTD.types';
+import { ProfileListType } from '@/utils/types/user.types';
 
 interface searchResultProps {
   keywordsValue: string;
diff --git a/components/Domain/Setting/LikeInfo/index.tsx b/components/Domain/Setting/LikeInfo/index.tsx
index 61453b2a..b264268d 100644
--- a/components/Domain/Setting/LikeInfo/index.tsx
+++ b/components/Domain/Setting/LikeInfo/index.tsx
@@ -1,6 +1,6 @@
 import Input from '@/components/Input';
 import S from './style';
-import { Style } from '@/pages/add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
 import { UserApi } from '@/apis/domain/User/UserApi';
diff --git a/components/Domain/SignUp/StyleInput/index.tsx b/components/Domain/SignUp/StyleInput/index.tsx
index eb346df3..da3dacde 100644
--- a/components/Domain/SignUp/StyleInput/index.tsx
+++ b/components/Domain/SignUp/StyleInput/index.tsx
@@ -1,6 +1,6 @@
 import Input from '@/components/Input';
 import S from './style';
-import { Style } from '@/pages/add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
 
diff --git a/components/FollowBlock/index.tsx b/components/FollowBlock/index.tsx
index 3a99a0a6..d48010c5 100644
--- a/components/FollowBlock/index.tsx
+++ b/components/FollowBlock/index.tsx
@@ -5,7 +5,7 @@ import Button from '../Button';
 
 interface FollowBlockProps {
   data: {
-    profileId: Number;
+    profileId: number;
     name: string;
     profileImage: string;
     followCheck?: Boolean;
diff --git a/components/Gallery/index.tsx b/components/Gallery/index.tsx
index fa29fdeb..85fc0a54 100644
--- a/components/Gallery/index.tsx
+++ b/components/Gallery/index.tsx
@@ -5,7 +5,7 @@ import {
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import Carousel from '../Carousel';
 import { useRouter } from 'next/router';
-import { ImageWithTag } from '../Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import S from './style';
 import NextButton from '../NextButton';
 import { Body3, Body4, Caption1 } from '../UI';
diff --git a/components/Portal/index.tsx b/components/Portal/index.tsx
index 74475817..19c7bc05 100644
--- a/components/Portal/index.tsx
+++ b/components/Portal/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 const Portal = ({ children }: { children: ReactElement }) => {
-  const [mounted, setMounted] = useState<boolean>(false);
+  const [mounted, setMounted] = useState<Boolean>(false);
 
   useEffect(() => {
     setMounted(true);
diff --git a/components/Posting/index.tsx b/components/Posting/index.tsx
index c19878cb..4b6a99bb 100644
--- a/components/Posting/index.tsx
+++ b/components/Posting/index.tsx
@@ -32,7 +32,7 @@ import Avatar from '@/public/images/Avatar.svg';
 import Toast from '../Toast';
 import FixModal from '../Domain/OOTD/FixModal';
 import LikeToggle from '../Toggle/LikeToggle';
-import { OOTDType } from '@/pages/ootd/[...OOTDNumber]';
+import { OOTDType } from '@/utils/types/OOTD.types';
 import Image from '../NextImage';
 import NextImage from '../NextImage';
 import Background from '../Background';
@@ -59,8 +59,8 @@ export default function Posting({
   const [followState, setFollowState] = useState<Boolean>(false);
   const [heartState, setHeartState] = useState<Boolean>(false);
   const [bookMarkState, setBookMarkState] = useState<Boolean>(false);
-  const [componentWidth, setComponentWidth] = useState(0); //컴포넌트 길이
-  const [componentHeight, setComponentHeight] = useState(0); //컴포넌트 높이
+  const [componentWidth, setComponentWidth] = useState<number>(0); //컴포넌트 길이
+  const [componentHeight, setComponentHeight] = useState<number>(0); //컴포넌트 높이
   const [clothTagOpen, setClothTagOpen] = useState<Boolean>(true);
   const [reportModalIsOpen, setReportModalIsOpen] = useState<Boolean>(false);
   const [declaration, setDeclaration] = useState<Boolean>(false); // 신고 Modal
diff --git a/components/PostingComment/PostingCommentWrite/index.tsx b/components/PostingComment/PostingCommentWrite/index.tsx
index 59a7e534..4c7e29b2 100644
--- a/components/PostingComment/PostingCommentWrite/index.tsx
+++ b/components/PostingComment/PostingCommentWrite/index.tsx
@@ -7,7 +7,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { CommentStateType } from '@/pages/ootd/[...OOTDNumber]';
+import { CommentStateType } from '@/utils/types/OOTD.types';
 import { AiFillCloseCircle } from 'react-icons/ai';
 import Avatar from '@/public/images/Avatar.svg';
 import NextImage from '@/components/NextImage';
diff --git a/components/PostingComment/index.tsx b/components/PostingComment/index.tsx
index 2d03b39f..0ca60203 100644
--- a/components/PostingComment/index.tsx
+++ b/components/PostingComment/index.tsx
@@ -7,9 +7,9 @@ import React, {
   useState,
 } from 'react';
 import S from './style';
-import Comment, { CommentProps } from '../Comment';
+import Comment from '../Comment';
 import { Body4, Caption1, Title1 } from '../UI';
-import { CommentStateType } from '@/pages/ootd/[...OOTDNumber]';
+import { CommentStateType, CommentProps } from '@/utils/types/OOTD.types';
 import { useRecoilValue } from 'recoil';
 import { userId } from '@/utils/recoil/atom';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
@@ -67,7 +67,7 @@ function PostingComment({
     if (commentType === 'all') setCommentType('preview');
   };
   const [data, setData] = useState<PostingCommentData[]>([]);
-  const [totalCount, setTotalCount] = useState<Number>(0);
+  const [totalCount, setTotalCount] = useState<number>(0);
 
   const { getOOTDComment } = OOTDApi();
 
diff --git a/components/Profile/MyProfile/index.tsx b/components/Profile/MyProfile/index.tsx
index 647e6116..34a1d711 100644
--- a/components/Profile/MyProfile/index.tsx
+++ b/components/Profile/MyProfile/index.tsx
@@ -2,7 +2,7 @@ import ProfileLayout from '../ProfileLayout';
 import S from './style';
 import Title1 from '@/components/UI/TypoGraphy/Title1';
 import Body from '@/components/UI/TypoGraphy/Body4';
-import { ProfileType } from '../type';
+import { ProfileType } from '@/utils/types/user.types';
 
 export default function MyProfile({
   isUser,
diff --git a/components/Profile/OtherProfile/index.tsx b/components/Profile/OtherProfile/index.tsx
index f19e7007..fbdfd0df 100644
--- a/components/Profile/OtherProfile/index.tsx
+++ b/components/Profile/OtherProfile/index.tsx
@@ -1,6 +1,6 @@
 import ProfileLayout from '../ProfileLayout';
 import S from './style';
-import { ProfileType } from '../type';
+import { ProfileType } from '@/utils/types/user.types';
 import { Body2, Body4 } from '@/components/UI';
 import { useRouter } from 'next/router';
 
diff --git a/components/Profile/type.tsx b/components/Profile/type.tsx
deleted file mode 100644
index 78e53cb2..00000000
--- a/components/Profile/type.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-interface ProfileType {
-  isUser: Boolean;
-  userImage: string;
-  userName: string;
-  follow?: number;
-  myCloth?: number;
-  className?: string;
-  showingId?: number;
-}
-
-export type { ProfileType };
diff --git a/components/Setting/AnnouncementBlock/index.tsx b/components/Setting/AnnouncementBlock/index.tsx
index 5eedbe81..923d4bed 100644
--- a/components/Setting/AnnouncementBlock/index.tsx
+++ b/components/Setting/AnnouncementBlock/index.tsx
@@ -1,4 +1,4 @@
-import { AnnoucementDataType } from '@/pages/announcement';
+import { AnnoucementDataType } from '@/utils/types/setting.types';
 import S from './style';
 import { Body3, Caption1 } from '@/components/UI';
 import { useState } from 'react';
diff --git a/components/Setting/WithdrawBlock/index.tsx b/components/Setting/WithdrawBlock/index.tsx
index b73b2d2d..103c4c2d 100644
--- a/components/Setting/WithdrawBlock/index.tsx
+++ b/components/Setting/WithdrawBlock/index.tsx
@@ -11,8 +11,8 @@ interface WithdrawBlockProps {
   content?: React.ReactNode;
   content2?: React.ReactNode;
   buttonClick?: () => void;
-  checked: boolean;
-  setChecked: Dispatch<SetStateAction<boolean>>;
+  checked: Boolean;
+  setChecked: Dispatch<SetStateAction<Boolean>>;
   lastItem?: Boolean;
 }
 
diff --git a/components/TabView/TabBar/index.tsx b/components/TabView/TabBar/index.tsx
index b7385ec5..4da7359f 100644
--- a/components/TabView/TabBar/index.tsx
+++ b/components/TabView/TabBar/index.tsx
@@ -23,7 +23,7 @@ export default function TabBar({
   //props로 전달받은 tab의 개수만큼 유동적으로 초깃값 관리
   const firstState = new Array(tab.length - 1).fill(false);
 
-  const [state, setState] = useState([true, ...firstState]);
+  const [state, setState] = useState<Array<Boolean>>([true, ...firstState]);
 
   //처음엔 onChangeState가 일어나지 않게 하기 위한 상태
   const [onChangeFirstState, setOnChangeFirstState] = useState<number>(0);
diff --git a/components/UI/ImageWithCaption/index.tsx b/components/UI/ImageWithCaption/index.tsx
index 2e20d10c..df2095aa 100644
--- a/components/UI/ImageWithCaption/index.tsx
+++ b/components/UI/ImageWithCaption/index.tsx
@@ -1,4 +1,4 @@
-import { ImageProps } from '@/components/Card/type';
+import { ImageProps } from '@/utils/types/card.type';
 import { ImageCaption, ImageFigure } from './style';
 import { Caption2 } from '../TypoGraphy';
 import NextImage from '@/components/NextImage';
diff --git a/hooks/useDropDown.tsx b/hooks/useDropDown.tsx
index fc3db910..1aa9a1f4 100644
--- a/hooks/useDropDown.tsx
+++ b/hooks/useDropDown.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 const useDropdown = (initialValue: string) => {
-  const [value, setValue] = useState(initialValue);
-  const [state, setState] = useState(false);
+  const [value, setValue] = useState<string>(initialValue);
+  const [state, setState] = useState<Boolean>(false);
 
   const onClickOption = (option: string) => {
     setValue(option);
diff --git a/hooks/useInfiniteScroll.tsx b/hooks/useInfiniteScroll.tsx
index 95cb7c1a..a90dea6a 100644
--- a/hooks/useInfiniteScroll.tsx
+++ b/hooks/useInfiniteScroll.tsx
@@ -18,7 +18,7 @@ export default function useInfiniteScroll({
   key,
 }: InfiniteScrollProps) {
   const [page, setPage] = useState<number>(initialPage ? initialPage : 0);
-  const [data, setData] = useState(initialData);
+  const [data, setData] = useState<any>(initialData);
   const [hasNextPage, setHasNextPage] = useState<Boolean>(false);
   const [isLoading, setIsLoading] = useState<Boolean>(false);
   const [total, setTotal] = useState<number>(0); // total 필드 추가
diff --git a/pages/Alarm/index.tsx b/pages/Alarm/index.tsx
index d104cff0..82ee2569 100644
--- a/pages/Alarm/index.tsx
+++ b/pages/Alarm/index.tsx
@@ -1,6 +1,6 @@
 import { AlarmApi } from '@/apis/domain/Alarm/AlarmApi';
 import AppBar from '@/components/Appbar';
-import Alarms, { AlarmType } from '@/components/Domain/Alarm';
+import Alarms from '@/components/Domain/Alarm';
 import AlarmLayout from '@/components/Domain/Alarm/AlarmLayout';
 import NoAlarm from '@/components/Domain/Alarm/NoAlarm';
 import { Title1 } from '@/components/UI';
@@ -9,6 +9,7 @@ import S from '@/pageStyle/alarm/style';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
+import { AlarmType } from '@/utils/types/setting.types';
 
 interface FetchedAlarmType {
   timeType: string;
diff --git a/pages/add-cloth/AdditionalInfo/index.tsx b/pages/add-cloth/AdditionalInfo/index.tsx
index db2cf191..0b0d789a 100644
--- a/pages/add-cloth/AdditionalInfo/index.tsx
+++ b/pages/add-cloth/AdditionalInfo/index.tsx
@@ -2,9 +2,9 @@ import { Body2, Body3, Headline1, Title1 } from '@/components/UI';
 import Input from '@/components/Input';
 import { Dispatch, SetStateAction } from 'react';
 import NextButton from '@/components/NextButton';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
-import { BrandType } from '@/components/BrandList/Brand';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import { CategoryListType } from '@/utils/types/OOTD.types';
+import { BrandType } from '@/utils/types/OOTD.types';
 import S from '@/pageStyle/add-cloth/AdditionalInfo/style';
 import NextImage from '@/components/NextImage';
 
diff --git a/pages/add-cloth/BasicInfoFirst/index.tsx b/pages/add-cloth/BasicInfoFirst/index.tsx
index f9881343..a411c1d2 100644
--- a/pages/add-cloth/BasicInfoFirst/index.tsx
+++ b/pages/add-cloth/BasicInfoFirst/index.tsx
@@ -3,13 +3,12 @@ import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import Input from '@/components/Input';
 import { Body2, Body3, Title1 } from '@/components/UI';
 import NextButton from '@/components/NextButton';
-import { ClothWhereBuy } from '..';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import ClothCategoryModal, {
-  CategoryListType,
-} from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import ClothCategoryModal from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 import WhereToBuyModal from '@/components/Domain/AddCloth/WhereToBuyModal';
-import { BrandType } from '@/components/BrandList/Brand';
+import { BrandType } from '@/utils/types/OOTD.types';
 import BrandModal from '@/components/Domain/AddCloth/BrandModal';
 import NextImage from '@/components/NextImage';
 import ArrowLeft from '@/public/images/ArrowLeft.svg';
diff --git a/pages/add-cloth/BasicInfoSecond/index.tsx b/pages/add-cloth/BasicInfoSecond/index.tsx
index 290fb79f..fdb3c466 100644
--- a/pages/add-cloth/BasicInfoSecond/index.tsx
+++ b/pages/add-cloth/BasicInfoSecond/index.tsx
@@ -4,17 +4,16 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import Input from '@/components/Input';
 import NextButton from '@/components/NextButton';
 import PlusButton from '@/components/PlusButton';
-import { ColorListType } from '@/components/ColorList';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { ColorListType } from '@/utils/types/OOTD.types';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 import ColorSpan from '@/components/ColorList/ColorSpan';
 import ColorModal from '@/components/Domain/AddCloth/ColorModal';
-import ClothSizeModal, {
-  SizeItem,
-} from '@/components/Domain/AddCloth/ClothSizeModal';
+import ClothSizeModal from '@/components/Domain/AddCloth/ClothSizeModal';
+import { SizeItem } from '@/utils/types/OOTD.types';
 import AddClothAlert from '@/components/Domain/AddCloth/AddClothAlert';
-import { BrandType } from '@/components/BrandList/Brand';
-import { ClothWhereBuy } from '..';
+import { BrandType } from '@/utils/types/OOTD.types';
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
 import { useRouter } from 'next/router';
 import { useRecoilValue } from 'recoil';
diff --git a/pages/add-cloth/ClothName/index.tsx b/pages/add-cloth/ClothName/index.tsx
index 0f53bda6..d894f43e 100644
--- a/pages/add-cloth/ClothName/index.tsx
+++ b/pages/add-cloth/ClothName/index.tsx
@@ -2,7 +2,7 @@ import { Headline2 } from '@/components/UI';
 import S from '@/pageStyle/add-cloth/ClothName/style';
 import Input from '@/components/Input';
 import { Dispatch, SetStateAction } from 'react';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import NextButton from '@/components/NextButton';
 import NextImage from '@/components/NextImage';
 import Portal from '@/components/Portal';
diff --git a/pages/add-cloth/index.tsx b/pages/add-cloth/index.tsx
index d7f257fe..68361c49 100644
--- a/pages/add-cloth/index.tsx
+++ b/pages/add-cloth/index.tsx
@@ -9,22 +9,18 @@ import { ComponentWithLayout } from '../sign-up';
 import { AppLayoutProps } from '@/AppLayout';
 import BasicInfoSecond from './BasicInfoSecond';
 import AdditionalInfo from './AdditionalInfo';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
-import { ColorListType } from '@/components/ColorList';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import { CategoryListType } from '@/utils/types/OOTD.types';
+import { ColorListType } from '@/utils/types/OOTD.types';
 import { useRouter } from 'next/router';
 import ClothName from './ClothName';
-import { SizeItem } from '@/components/Domain/AddCloth/ClothSizeModal';
+import { SizeItem } from '@/utils/types/OOTD.types';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
-import { BrandType } from '@/components/BrandList/Brand';
+import { BrandType } from '@/utils/types/OOTD.types';
 import { useRecoilValue } from 'recoil';
 import { userId } from '@/utils/recoil/atom';
 import useRememberScroll from '@/hooks/useRememberScroll';
-
-export interface ClothWhereBuy {
-  letter: string;
-  type: 'Link' | 'Write';
-}
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
 
 const AddCloth: ComponentWithLayout = () => {
   const steps = ['편집', '제품명', '기본정보1', '기본정보2', '추가정보'];
@@ -42,8 +38,8 @@ const AddCloth: ComponentWithLayout = () => {
   const [clothColor, setClothColor] = useState<ColorListType | null>(null);
   const [clothSize, setClothSize] = useState<SizeItem | null>(null);
   const [open, setOpen] = useState<Boolean>(true);
-  const [clothBuyDate, setClothBuyDate] = useState('');
-  const [clothMemo, setClothMemo] = useState('');
+  const [clothBuyDate, setClothBuyDate] = useState<string>('');
+  const [clothMemo, setClothMemo] = useState<string>('');
 
   const router = useRouter();
   const myId = useRecoilValue(userId);
diff --git a/pages/add-ootd/ClothTag/index.tsx b/pages/add-ootd/ClothTag/index.tsx
index c2341993..cfe080a1 100644
--- a/pages/add-ootd/ClothTag/index.tsx
+++ b/pages/add-ootd/ClothTag/index.tsx
@@ -12,9 +12,10 @@ import {
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import TagInformation from '@/components/ClothInformation/TagInformation';
 import Carousel from '@/components/Carousel';
-import AddTag, { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import AddTag from '@/components/Domain/AddOOTD/TagModal';
 import NextImage from '@/components/NextImage';
 import Background from '@/components/Background';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 
 interface ClothTagProps {
   setImageAndTag: Dispatch<SetStateAction<ImageWithTag | undefined>>;
@@ -30,12 +31,12 @@ export default function ClothTag({
   const dragRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
 
-  const [componentWidth, setComponentWidth] = useState(0); //컴포넌트 길이
-  const [componentHeight, setComponentHeight] = useState(0); //컴포넌트 높이
+  const [componentWidth, setComponentWidth] = useState<number>(0); //컴포넌트 길이
+  const [componentHeight, setComponentHeight] = useState<number>(0); //컴포넌트 높이
   const [addTag, setAddTag] = useState<Boolean>(false); //옷 추가 모달 (열기/닫기)
   const [slideIndex, setSlideIndex] = useState<number>(0); //OOTD 슬라이드 인덱스
   const [nextButtonState, setNextButtonState] = useState<Boolean>(false); //다음 버튼 상태
-  const [isDragging, setIsDragging] = useState(false);
+  const [isDragging, setIsDragging] = useState<Boolean>(false);
 
   //컴포넌트 크기 계산
   useEffect(() => {
diff --git a/pages/add-ootd/WriteOOTD/index.tsx b/pages/add-ootd/WriteOOTD/index.tsx
index 57dd9ae0..898e36d7 100644
--- a/pages/add-ootd/WriteOOTD/index.tsx
+++ b/pages/add-ootd/WriteOOTD/index.tsx
@@ -3,9 +3,9 @@ import S from '@/pageStyle/add-ootd/WriteOOTD/style';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { Body4, Button3, Title1 } from '@/components/UI';
 import { AiOutlinePlus } from 'react-icons/ai';
-import { Style } from '..';
+import { Style } from '@/utils/types/OOTD.types';
 import { AiOutlineClose } from 'react-icons/ai';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import StyleModal from '@/components/Domain/AddOOTD/StyleModal';
 import NextButton from '@/components/NextButton';
 import { OOTDApi } from '@/apis/domain/OOTD/OOTDApi';
diff --git a/pages/add-ootd/index.tsx b/pages/add-ootd/index.tsx
index 8e0d93a2..404fe331 100644
--- a/pages/add-ootd/index.tsx
+++ b/pages/add-ootd/index.tsx
@@ -9,19 +9,14 @@ import AppBar from '@/components/Appbar';
 import { AiOutlineArrowLeft, AiOutlineClose } from 'react-icons/ai';
 import { Title1 } from '@/components/UI';
 import { useRouter } from 'next/router';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-
-export interface Style {
-  id: number;
-  name: string;
-  state?: Boolean;
-}
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import { Style } from '@/utils/types/OOTD.types';
 
 const AddOOTD: ComponentWithLayout = () => {
   const steps = ['편집', '태그', '게시하기'];
   const [Funnel, currentStep, handleStep] = useFunnel(steps);
   const [imageAndTag, setImageAndTag] = useState<ImageWithTag | undefined>(); //이미지 + 태그
-  const [string, setString] = useState(''); //게시글
+  const [string, setString] = useState<string>(''); //게시글
   const [selectedStyle, setSelectedStyle] = useState<Style[]>([]);
   const [open, setOpen] = useState<Boolean>(true); //공개여부
   const [complete, setComplete] = useState<Boolean>(false); //게시 완료 여부
diff --git a/pages/agree/index.tsx b/pages/agree/index.tsx
index 7e9b1aef..6b64f3db 100644
--- a/pages/agree/index.tsx
+++ b/pages/agree/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from 'react';
 import { AppLayoutProps } from '@/AppLayout';
-import { Style } from '../add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import S from '@/pageStyle/agree/style';
 import AppBar from '@/components/Appbar';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
@@ -19,10 +19,10 @@ interface ComponentWithLayout extends FC {
 const Agree: ComponentWithLayout = () => {
   const router = useRouter();
 
-  const [check1, setCheck1] = useState<boolean>(false);
-  const [check2, setCheck2] = useState<boolean>(false);
+  const [check1, setCheck1] = useState<Boolean>(false);
+  const [check2, setCheck2] = useState<Boolean>(false);
 
-  const [possible, setPossible] = useState<boolean>(false);
+  const [possible, setPossible] = useState<Boolean>(false);
   const [alertOpen, setAlertOpen] = useState<Boolean>(false);
 
   useEffect(() => {
diff --git a/pages/announcement/index.tsx b/pages/announcement/index.tsx
index 55439b4b..82b6141d 100644
--- a/pages/announcement/index.tsx
+++ b/pages/announcement/index.tsx
@@ -5,13 +5,7 @@ import theme from '@/styles/theme';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
-
-export interface AnnoucementDataType {
-  date: string;
-  headline: string;
-  newState: Boolean;
-  body: string;
-}
+import { AnnoucementDataType } from '@/utils/types/setting.types';
 
 export default function Announcement() {
   const router = useRouter();
diff --git a/pages/blocked-account/index.tsx b/pages/blocked-account/index.tsx
index b05a2979..f70014dd 100644
--- a/pages/blocked-account/index.tsx
+++ b/pages/blocked-account/index.tsx
@@ -18,7 +18,7 @@ import Avatar from '@/public/images/Avatar.svg';
 import BlockUserAlert from '@/components/Domain/BlockUser/BlockUserAlert';
 import PublicApi from '@/apis/domain/Public/PublicApi';
 
-export interface UserBlockListDataType {
+interface UserBlockListDataType {
   id: number;
   userId: number;
   userName: string;
diff --git a/pages/bookmark/index.tsx b/pages/bookmark/index.tsx
index db162e03..f941396c 100644
--- a/pages/bookmark/index.tsx
+++ b/pages/bookmark/index.tsx
@@ -15,15 +15,15 @@ import useEffectAfterMount from '@/hooks/useEffectAfterMount';
 import Background from '@/components/Background';
 import useRememberScroll from '@/hooks/useRememberScroll';
 
-export type OOTDdataType = {
+type OOTDBookmarkDataType = {
   ootdId: number;
   ootdBookmarkId: number;
   ootdImage: string;
   ootdImageCount: number;
 };
 
-export type BookmarkListType = {
-  content: OOTDdataType[];
+type BookmarkListType = {
+  content: OOTDBookmarkDataType[];
   page: number;
   size: number;
   isLast: Boolean;
@@ -92,7 +92,7 @@ export default function Bookmark() {
   };
 
   const { getUserBookmarkList, deleteBookmarkList } = BookmarkApi();
-  const [bookmarkList, setBookmarkList] = useState<OOTDdataType[]>([]);
+  const [bookmarkList, setBookmarkList] = useState<OOTDBookmarkDataType[]>([]);
 
   const fetchDataFunction = async (bookmarkPage: number, size: number) => {
     if (!router.isReady) return;
diff --git a/pages/cloth/[...ClothNumber].tsx b/pages/cloth/[...ClothNumber].tsx
index 93503b85..29e8a47c 100644
--- a/pages/cloth/[...ClothNumber].tsx
+++ b/pages/cloth/[...ClothNumber].tsx
@@ -24,29 +24,12 @@ import ReceivedDeclarationModal from '@/components/ReceivedDeclarationModal';
 import NextImage from '@/components/NextImage';
 import Background from '@/components/Background';
 import useRememberScroll from '@/hooks/useRememberScroll';
-
-export interface ClothDataType {
-  id: number;
-  name: string;
-  userName: string;
-  brand: { id: number; name: string };
-  category: { id: number; categoryName: string; parentCategoryName: string };
-  size: { id: number; name: string; lineNo: string };
-  colors: { id: number; name: string; colorCode: string }[];
-  isPrivate: Boolean;
-  memo: string;
-  purchaseStore: string;
-  purchaseStoreType: string;
-  purchaseDate: string;
-  imageUrl: string;
-  createdAt: string;
-  userId: number;
-}
+import { ClothDataType } from '@/utils/types/cloth.types';
 
 const Cloth = () => {
   const router = useRouter();
   const [data, setData] = useState<ClothDataType | null>(null);
-  const [reRender, setReRender] = useState(0);
+  const [reRender, setReRender] = useState<number>(0);
   const { getClothDetail, deleteCloth, patchClothIsPrivate } = ClothApi();
 
   const [reportModalIsOpen, setReportModalIsOpen] = useState<Boolean>(false);
diff --git a/pages/edit-cloth/AdditionalInfo/index.tsx b/pages/edit-cloth/AdditionalInfo/index.tsx
index 3def04f6..bbcd4ae1 100644
--- a/pages/edit-cloth/AdditionalInfo/index.tsx
+++ b/pages/edit-cloth/AdditionalInfo/index.tsx
@@ -1,4 +1,4 @@
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import S from '@/pageStyle/edit-cloth/AdditionalInfo/style';
 import Input from '@/components/Input';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
diff --git a/pages/edit-cloth/BasicInfo/index.tsx b/pages/edit-cloth/BasicInfo/index.tsx
index e19a3e1d..6937f104 100644
--- a/pages/edit-cloth/BasicInfo/index.tsx
+++ b/pages/edit-cloth/BasicInfo/index.tsx
@@ -2,18 +2,16 @@ import S from '@/pageStyle/edit-cloth/BasicInfo/style';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import Input from '@/components/Input';
 import { Body3, Title1 } from '@/components/UI';
-import { ClothWhereBuy } from '../[...ClothNumber]';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import ClothCategoryModal, {
-  CategoryListType,
-} from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import ClothCategoryModal from '@/components/Domain/AddCloth/ClothCategoryModal';
+import { CategoryListType } from '@/utils/types/OOTD.types';
 import WhereToBuyModal from '@/components/Domain/AddCloth/WhereToBuyModal';
-import { BrandType } from '@/components/BrandList/Brand';
+import { BrandType } from '@/utils/types/OOTD.types';
 import BrandModal from '@/components/Domain/AddCloth/BrandModal';
-import { ColorListType } from '@/components/ColorList';
-import ClothSizeModal, {
-  SizeItem,
-} from '@/components/Domain/AddCloth/ClothSizeModal';
+import { ColorListType } from '@/utils/types/OOTD.types';
+import ClothSizeModal from '@/components/Domain/AddCloth/ClothSizeModal';
+import { SizeItem } from '@/utils/types/OOTD.types';
 import ColorSpan from '@/components/ColorList/ColorSpan';
 import PlusButton from '@/components/PlusButton';
 import ColorModal from '@/components/Domain/AddCloth/ColorModal';
diff --git a/pages/edit-cloth/[...ClothNumber].tsx b/pages/edit-cloth/[...ClothNumber].tsx
index e4aee89a..d6312ded 100644
--- a/pages/edit-cloth/[...ClothNumber].tsx
+++ b/pages/edit-cloth/[...ClothNumber].tsx
@@ -6,18 +6,14 @@ import AdditionalInfo from './AdditionalInfo';
 import { ComponentWithLayout } from '../sign-up';
 import { AppLayoutProps } from '@/AppLayout';
 import { useRouter } from 'next/router';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
-import { CategoryListType } from '@/components/Domain/AddCloth/ClothCategoryModal';
-import { ColorListType } from '@/components/ColorList';
-import { BrandType } from '@/components/BrandList/Brand';
-import { SizeItem } from '@/components/Domain/AddCloth/ClothSizeModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
+import { CategoryListType } from '@/utils/types/OOTD.types';
+import { ColorListType } from '@/utils/types/OOTD.types';
+import { BrandType } from '@/utils/types/OOTD.types';
+import { SizeItem } from '@/utils/types/OOTD.types';
 import BasicInfo from './BasicInfo';
 import ClothApi from '@/apis/domain/Cloth/ClothApi';
-
-export interface ClothWhereBuy {
-  letter: string;
-  type: 'Link' | 'Write';
-}
+import { ClothWhereBuy } from '@/utils/types/OOTD.types';
 
 const EditCloth: ComponentWithLayout = () => {
   const router = useRouter();
@@ -37,9 +33,9 @@ const EditCloth: ComponentWithLayout = () => {
   const [clothColor, setClothColor] = useState<ColorListType | null>(null);
   const [clothSize, setClothSize] = useState<SizeItem | null>(null);
   const [clothOpen, setClothOpen] = useState<Boolean>(true);
-  const [clothBuyDate, setClothBuyDate] = useState('');
-  const [clothMemo, setClothMemo] = useState('');
-  const [sizeRerender, setSizeRerender] = useState(0);
+  const [clothBuyDate, setClothBuyDate] = useState<string>('');
+  const [clothMemo, setClothMemo] = useState<string>('');
+  const [sizeRerender, setSizeRerender] = useState<number>(0);
 
   const { getClothDetail, putCloth } = ClothApi();
 
diff --git a/pages/edit-mypage/index.tsx b/pages/edit-mypage/index.tsx
index 8ecb987b..33e92e9e 100644
--- a/pages/edit-mypage/index.tsx
+++ b/pages/edit-mypage/index.tsx
@@ -4,7 +4,7 @@ import { AiOutlineArrowLeft, AiOutlineSetting } from 'react-icons/ai';
 import { useRouter } from 'next/router';
 import Edit from '@/components/Domain/MyPage/Edit';
 import React, { FC, useEffect, useState } from 'react';
-import { Style } from '../add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { AppLayoutProps } from '@/AppLayout';
 import Background from '@/components/Background';
 
diff --git a/pages/edit-ootd/[...OOTDNumber].tsx b/pages/edit-ootd/[...OOTDNumber].tsx
index 6a83a8f8..d5699001 100644
--- a/pages/edit-ootd/[...OOTDNumber].tsx
+++ b/pages/edit-ootd/[...OOTDNumber].tsx
@@ -1,6 +1,6 @@
 import AppBar from '@/components/Appbar';
 import StyleModal from '@/components/Domain/AddOOTD/StyleModal';
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import Input from '@/components/Input';
 import NextButton from '@/components/NextButton';
 import { Body3, Body4, Button3, Title1 } from '@/components/UI';
@@ -11,7 +11,7 @@ import {
   AiOutlineClose,
   AiOutlinePlus,
 } from 'react-icons/ai';
-import { Style } from '../add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { AppLayoutProps } from '@/AppLayout';
 import { ComponentWithLayout } from '../sign-up';
 import { useRouter } from 'next/router';
diff --git a/pages/like-info/index.tsx b/pages/like-info/index.tsx
index 17dd7d5e..399378b4 100644
--- a/pages/like-info/index.tsx
+++ b/pages/like-info/index.tsx
@@ -6,7 +6,7 @@ import { Button3, Title1 } from '@/components/UI';
 import { useEffect, useState } from 'react';
 import GenderInput from '@/components/Domain/SignUp/GenderInput';
 import LikeInfoStyleInput from '@/components/Domain/Setting/LikeInfo';
-import { Style } from '../add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { UserApi } from '@/apis/domain/User/UserApi';
 import { ComponentWithLayout } from '../sign-up';
 import { AppLayoutProps } from '@/AppLayout';
diff --git a/pages/mypage/[...UserId].tsx b/pages/mypage/[...UserId].tsx
index a339e545..ff1daa73 100644
--- a/pages/mypage/[...UserId].tsx
+++ b/pages/mypage/[...UserId].tsx
@@ -11,7 +11,7 @@ import Closet from '@/components/Domain/MyPage/Closet';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import Toast from '@/components/Toast';
 import { UserApi } from '@/apis/domain/User/UserApi';
-import { UserProfileDataType } from '@/components/Domain/MyPage/Profile';
+import { UserProfileDataType } from '@/utils/types/user.types';
 import OtherModal from '@/components/Domain/MyPage/OtherModal';
 import Background from '@/components/Background';
 import PublicApi from '@/apis/domain/Public/PublicApi';
diff --git a/pages/ootd/[...OOTDNumber].tsx b/pages/ootd/[...OOTDNumber].tsx
index 1e257e32..2f86e778 100644
--- a/pages/ootd/[...OOTDNumber].tsx
+++ b/pages/ootd/[...OOTDNumber].tsx
@@ -16,80 +16,15 @@ import Toast from '@/components/Toast';
 import AppBar from '@/components/Appbar';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 import Background from '@/components/Background';
-
-export interface CommentStateType {
-  ootdId: number;
-  parentDepth: number;
-  content: string;
-  taggedUserName?: string;
-  commentParentId?: number;
-}
-
-export interface OOTDType {
-  id: number;
-  contents: string; //본문
-  viewCount: number; //조회수
-  reportCount: number; //신고 횟수
-  likeCount: number; //좋아요 개수
-  userName: string; //유저명
-  userImage: string; //유저 프로필 이미지
-  userId: number;
-  createAt: string; //작성일
-  isBookmark: Boolean;
-  isLike: Boolean;
-  isPrivate: Boolean;
-  isFollowing: Boolean;
-  ootdImages: {
-    ootdImage: string; //ootd 이미지
-    ootdImageClothesList?: {
-      clothesId: number;
-      clothesImage: string;
-      brand: { id: number; name: string }; //옷 브랜드
-      category: {
-        id: number;
-        smallCategory: string;
-        bigCategory: string;
-      };
-      size: string;
-      clothesName: string; //옷 별칭
-      coordinate: {
-        xrate: string;
-        yrate: string;
-      };
-      deviceSize: {
-        deviceWidth: number;
-        deviceHeight: number;
-      };
-    }[];
-  }[];
-  styles: {
-    styleId: number;
-    name: string;
-  }[];
-  comment?: {
-    id: number;
-    userName: string;
-    userImage: string;
-    content: string;
-    timeStamp: string;
-    childComment?: {
-      id: number;
-      userName: string;
-      userImage: string;
-      content: string;
-      createAt: string;
-      taggedUserName: string;
-    }[];
-  }[];
-}
+import { CommentStateType, OOTDType } from '@/utils/types/OOTD.types';
 
 const OOTD: ComponentWithLayout = () => {
   const { getOOTDDetail, postOOTDComment } = OOTDApi();
 
   const router = useRouter();
 
-  const [reRender, setReRender] = useState(0);
-  const [getPostReRender, setGetPostReRender] = useState(0);
+  const [reRender, setReRender] = useState<number>(0);
+  const [getPostReRender, setGetPostReRender] = useState<number>(0);
 
   const onClickBackButton = () => {
     if (router.query.OOTDNumber![1] === 'explore') {
diff --git a/pages/search/index.tsx b/pages/search/index.tsx
index 4abcea7f..6e5404c7 100644
--- a/pages/search/index.tsx
+++ b/pages/search/index.tsx
@@ -5,11 +5,7 @@ import SearchResult from '@/components/Domain/Search/SearchResult';
 import Recents from '@/components/Domain/Search/Recents';
 import { useRouter } from 'next/router';
 import Toast from '@/components/Toast';
-
-export interface keywordsInterface {
-  id: number;
-  text: string;
-}
+import { keywordsInterface } from '@/utils/types/OOTD.types';
 
 export default function Search() {
   const [keywords, setKeywords] = useState<keywordsInterface[]>([]);
diff --git a/pages/settings/index.tsx b/pages/settings/index.tsx
index c84ad52c..f08c3f9e 100644
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@@ -18,7 +18,7 @@ export default function Setting() {
 
   const [queryState, setQueryState] = useState<Boolean>(false);
   const [URLState, setURLState] = useState<any>(false);
-  const [platform, setPlatform] = useState('');
+  const [platform, setPlatform] = useState<string>('');
 
   const { getSocilLoginProvider } = UserApi();
 
diff --git a/pages/sign-in/[...callback].tsx b/pages/sign-in/[...callback].tsx
index c07c3859..da0a4297 100644
--- a/pages/sign-in/[...callback].tsx
+++ b/pages/sign-in/[...callback].tsx
@@ -3,12 +3,7 @@ import { useEffect } from 'react';
 import { SignInApi } from '@/apis/domain/SignIn/SignInApi';
 import { RegisterApi } from '@/apis/domain/Register/RegisterApi';
 import Spinner from '@/components/Spinner';
-
-export interface QueryParams {
-  code?: string;
-  state?: string;
-  callback?: string[];
-}
+import { QueryParams } from '@/utils/types/setting.types';
 
 export default function SignUpCallbackPage() {
   const router = useRouter();
diff --git a/pages/sign-up/StyleInfo/index.tsx b/pages/sign-up/StyleInfo/index.tsx
index bd48f847..d83b2715 100644
--- a/pages/sign-up/StyleInfo/index.tsx
+++ b/pages/sign-up/StyleInfo/index.tsx
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import S from '@/pageStyle/sign-up/StyleInfo/style';
 import GenderInput from '@/components/Domain/SignUp/GenderInput';
 import StyleInput from '@/components/Domain/SignUp/StyleInput';
-import { Style } from '@/pages/add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 
 interface StyleInfoProps {
   gender: Boolean;
diff --git a/pages/sign-up/index.tsx b/pages/sign-up/index.tsx
index c475884d..93b8c71a 100644
--- a/pages/sign-up/index.tsx
+++ b/pages/sign-up/index.tsx
@@ -10,7 +10,7 @@ import AppBar from '@/components/Appbar';
 import { AppLayoutProps } from '@/AppLayout';
 import { AiOutlineArrowLeft, AiOutlineClose } from 'react-icons/ai';
 import { useRouter } from 'next/router';
-import { Style } from '../add-ootd';
+import { Style } from '@/utils/types/OOTD.types';
 import { RegisterApi } from '@/apis/domain/Register/RegisterApi';
 
 interface ComponentWithLayout extends FC {
@@ -20,10 +20,10 @@ interface ComponentWithLayout extends FC {
 const SignUp: ComponentWithLayout = () => {
   const steps = ['기본정보', '체형정보', '취향정보'];
   const [Funnel, currentStep, handleStep] = useFunnel(steps);
-  const [id, setId] = useState('');
-  const [age, setAge] = useState('');
-  const [height, setHeight] = useState('');
-  const [weight, setWeight] = useState('');
+  const [id, setId] = useState<string>('');
+  const [age, setAge] = useState<string>('');
+  const [height, setHeight] = useState<string>('');
+  const [weight, setWeight] = useState<string>('');
   const [open, setOpen] = useState<Boolean>(true);
   const [gender, setGender] = useState<Boolean>(true);
   const [canUseId, setCanUseId] = useState<Boolean>(false);
diff --git a/pages/with-draw/index.tsx b/pages/with-draw/index.tsx
index bba9d69c..26de23dd 100644
--- a/pages/with-draw/index.tsx
+++ b/pages/with-draw/index.tsx
@@ -17,12 +17,12 @@ export default function Withdraw() {
 
   const router = useRouter();
 
-  const [check1, setCheck1] = useState<boolean>(false);
-  const [check2, setCheck2] = useState<boolean>(false);
-  const [check3, setCheck3] = useState<boolean>(false);
-  const [check4, setCheck4] = useState<boolean>(false);
+  const [check1, setCheck1] = useState<Boolean>(false);
+  const [check2, setCheck2] = useState<Boolean>(false);
+  const [check3, setCheck3] = useState<Boolean>(false);
+  const [check4, setCheck4] = useState<Boolean>(false);
 
-  const [possible, setPossible] = useState<boolean>(false);
+  const [possible, setPossible] = useState<Boolean>(false);
   const [alertOpen, setAlertOpen] = useState<Boolean>(false);
 
   useEffect(() => {
diff --git a/utils/reactNativeMessage.ts b/utils/reactNativeMessage.ts
index d5ddc8fd..5e770e6d 100644
--- a/utils/reactNativeMessage.ts
+++ b/utils/reactNativeMessage.ts
@@ -1,4 +1,4 @@
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '@/utils/types/OOTD.types';
 import { Dispatch, SetStateAction } from 'react';
 import { WebViewMessageEvent } from 'react-native-webview';
 interface Message {
diff --git a/utils/recoil/atom.tsx b/utils/recoil/atom.tsx
index 9a61ab7c..64f6099c 100644
--- a/utils/recoil/atom.tsx
+++ b/utils/recoil/atom.tsx
@@ -1,4 +1,5 @@
-import { ImageWithTag } from '@/components/Domain/AddOOTD/TagModal';
+import { ImageWithTag } from '../types/OOTD.types';
+
 import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist';
 
diff --git a/utils/types/OOTD.types.ts b/utils/types/OOTD.types.ts
new file mode 100644
index 00000000..5efc1a5e
--- /dev/null
+++ b/utils/types/OOTD.types.ts
@@ -0,0 +1,185 @@
+import React, { Dispatch, SetStateAction } from 'react';
+
+export interface BrandType {
+  id: number;
+  name: string;
+  state?: Boolean;
+}
+
+export type ColorListType = {
+  id: number;
+  name: string;
+  colorCode: string;
+  state: Boolean;
+}[];
+
+export interface ClothWhereBuy {
+  letter: string;
+  type: 'Link' | 'Write';
+}
+
+export interface CommentStateType {
+  ootdId: number;
+  parentDepth: number;
+  content: string;
+  taggedUserName?: string;
+  commentParentId?: number;
+}
+
+export interface CommentProps {
+  id: number;
+  userId: number;
+  userImage: string;
+  userName: string;
+  content: string;
+  timeStamp: string;
+  type?: 'child';
+  view?: 'preview';
+  onClickReplyButton?: () => void;
+  taggedUserName?: string;
+  myComment?: Boolean;
+  parentId?: number;
+  reRender: number;
+  depth?: number;
+  setReRender: Dispatch<SetStateAction<number>>;
+  setDeclaration: Dispatch<SetStateAction<Boolean>>;
+  setReportUserName: Dispatch<SetStateAction<string>>;
+  setReportID: Dispatch<SetStateAction<number>>;
+  setBlockID: Dispatch<SetStateAction<number>>;
+}
+
+export interface OOTDType {
+  id: number;
+  contents: string; //본문
+  viewCount: number; //조회수
+  reportCount: number; //신고 횟수
+  likeCount: number; //좋아요 개수
+  userName: string; //유저명
+  userImage: string; //유저 프로필 이미지
+  userId: number;
+  createAt: string; //작성일
+  isBookmark: Boolean;
+  isLike: Boolean;
+  isPrivate: Boolean;
+  isFollowing: Boolean;
+  ootdImages: {
+    ootdImage: string; //ootd 이미지
+    ootdImageClothesList?: {
+      clothesId: number;
+      clothesImage: string;
+      brand: { id: number; name: string }; //옷 브랜드
+      category: {
+        id: number;
+        smallCategory: string;
+        bigCategory: string;
+      };
+      size: string;
+      clothesName: string; //옷 별칭
+      coordinate: {
+        xrate: string;
+        yrate: string;
+      };
+      deviceSize: {
+        deviceWidth: number;
+        deviceHeight: number;
+      };
+    }[];
+  }[];
+  styles: {
+    styleId: number;
+    name: string;
+  }[];
+  comment?: {
+    id: number;
+    userName: string;
+    userImage: string;
+    content: string;
+    timeStamp: string;
+    childComment?: {
+      id: number;
+      userName: string;
+      userImage: string;
+      content: string;
+      createAt: string;
+      taggedUserName: string;
+    }[];
+  }[];
+}
+
+export interface OOTDListType {
+  id: number;
+  imageUrl: string;
+  imageCount?: number;
+}
+
+export interface GenderTypes {
+  man: Boolean;
+  woman: Boolean;
+}
+
+export type ImageWithTag = {
+  ootdId: number;
+  ootdImage: string;
+  ootdImageClothesList?: {
+    clothesId: number;
+    clothesImage: string;
+    coordinate: { xrate: string; yrate: string };
+    deviceSize: { deviceWidth: number; deviceHeight: number };
+    caption: string;
+    size?: string;
+    state?: string;
+    name?: string;
+    brand?: string;
+    category?: string;
+  }[];
+}[];
+
+type CategoryType = {
+  id: number;
+  name: string;
+  state?: boolean;
+  detailCategories?: CategoryType[];
+};
+
+export type CategoryListType = CategoryType;
+
+export interface SizeItem {
+  id: number;
+  name: string;
+}
+
+export interface FilterData {
+  category: CategoryListType[] | null;
+  color: ColorListType | null;
+  brand: BrandType[] | null;
+  isOpen: Boolean | null;
+  gender?: {
+    man: Boolean;
+    woman: Boolean;
+  };
+}
+
+export interface keywordsInterface {
+  id: number;
+  text: string;
+}
+
+export interface Style {
+  id: number;
+  name: string;
+  state?: Boolean;
+}
+
+export interface SearchFilterData extends FilterData {
+  gender?: GenderTypes;
+}
+
+export interface MainFavoriteCardProps {
+  ootdId: number;
+  ootdImageUrl: string;
+  ootdImageCount: number;
+  writerId: number;
+  writerProfileImage?: string;
+  writerName: string;
+  onClick?: () => void;
+}
diff --git a/components/Card/type.ts b/utils/types/card.type.ts
similarity index 100%
rename from components/Card/type.ts
rename to utils/types/card.type.ts
diff --git a/utils/types/cloth.types.ts b/utils/types/cloth.types.ts
new file mode 100644
index 00000000..46a77aff
--- /dev/null
+++ b/utils/types/cloth.types.ts
@@ -0,0 +1,44 @@
+export interface ClothInformationProps {
+  clothId: number;
+  clothImage: string;
+  clothSize?: string;
+  name?: string;
+  brand?: string;
+  size?: string;
+  category?: string;
+  icon?: string;
+  state?: 'dark' | 'light';
+  type?: 'view';
+  caption?: string;
+  className?: string;
+  onClick?: () => void;
+  onTouchEnd?: () => void;
+}
+
+export interface ClothDataType {
+  id: number;
+  name: string;
+  userName: string;
+  brand: { id: number; name: string };
+  category: { id: number; categoryName: string; parentCategoryName: string };
+  size: { id: number; name: string; lineNo: string };
+  colors: { id: number; name: string; colorCode: string }[];
+  isPrivate: Boolean;
+  memo: string;
+  purchaseStore: string;
+  purchaseStoreType: string;
+  purchaseDate: string;
+  imageUrl: string;
+  createdAt: string;
+  userId: number;
+}
+
+export interface UserClothDataType {
+  id: number;
+  isTagged: number;
+  imageUrl: string;
+  clothesName: string;
+  brandName: string;
+  categoryName: string;
+  sizeName: string;
+}
diff --git a/utils/types/index.ts b/utils/types/index.ts
new file mode 100644
index 00000000..725b6279
--- /dev/null
+++ b/utils/types/index.ts
@@ -0,0 +1,5 @@
+export * as OOTDTypes from './OOTD.types';
+export * as userTypes from './user.types';
+export * as ClothTypes from './cloth.types';
+export * as settingTypes from './setting.types';
+export * as cardTypes from './card.type';
diff --git a/utils/types/setting.types.ts b/utils/types/setting.types.ts
new file mode 100644
index 00000000..7bfdf6cb
--- /dev/null
+++ b/utils/types/setting.types.ts
@@ -0,0 +1,26 @@
+export interface AnnoucementDataType {
+  date: string;
+  headline: string;
+  newState: Boolean;
+  body: string;
+}
+
+export interface QueryParams {
+  code?: string;
+  state?: string;
+  callback?: string[];
+}
+
+export interface AlarmType {
+  id: number;
+  profileImage: string | null;
+  timeType: string;
+  timeStamp: string;
+  message: string;
+  userName: string;
+  content?: string;
+  contentImage?: string;
+  goUrl: string;
+  userId: number;
+  className: string;
+}
diff --git a/utils/types/user.types.ts b/utils/types/user.types.ts
new file mode 100644
index 00000000..08b5bf2e
--- /dev/null
+++ b/utils/types/user.types.ts
@@ -0,0 +1,31 @@
+export interface UserProfileDataType {
+  userId: number;
+  userName: string;
+  profileImage: string;
+  followerCount: number;
+  followingCount: number;
+  height: number;
+  weight: number;
+  description: string;
+  isMyProfile: Boolean;
+  isFollow: Boolean;
+  ootdCount: number;
+  clothesCount: number;
+}
+
+export interface ProfileType {
+  isUser: Boolean;
+  userImage: string;
+  userName: string;
+  follow?: number;
+  myCloth?: number;
+  className?: string;
+  showingId?: number;
+}
+
+export interface ProfileListType {
+  id: number;
+  name: string;
+  profileImage: string;
+  isFollow: Boolean;
+}