Repository: team-da-sh/dash-client
Pull request #364: [Refactor] 검색 페이지 리펙토링
Author: login: KIMGEONHWI
Labels: name: 🪄 Refactor
description: 코드 리팩토링
name: 건휘
description: Pull it back, that siren
Created: 2025-04-12T16:33:57Z | Merged: 2025-04-22T09:37:53Z

## 📌 Related Issues
<!--관련 이슈 언급 -->
- close #363 


## ✅ 체크 리스트 
- [x] PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
- [x] 빌드가 성공했나요? (pnpm build)
- [x] 컨벤션을 지켰나요?
- [x] 이슈는 등록했나요?
- [x] 리뷰어와 라벨을 지정했나요?


## 📄 Tasks
<!-- 작업한 내용을 작성해주세요 -->
- 타입 네이밍 컨벤션에 맞추어 수정
- props 데이터 4개 이상인 경우 spread 연산자 활용
- `import * as styles from`사용하여 CSS import하도록 통일


## ⭐ PR Point (To Reviewer)
<!-- 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요  -->
변경된 파일이 많다보니, 커밋 메세지로 확인해주시면 더 깔끔하게 확인하실 수 있을거에요.


## 📷 Screenshot
<!-- 작업 결과물에 관련된 사진이나 영상 등을 첨부해주세요 -->


## 🔔 ETC
<!-- 기타 이외 작업 작성 (ex. 참고한 아티클 링크 / 새롭게 알게 된 점 등) -->



Linked issue #363: [Refactor] 검색페이지 리펙토링
## 🛠 Task Description
<!-- 여기에 작업에 대한 설명을 작성 -->
검색페이지 리펙토링 작업

## 📝 TO-DO
- [ ] 검색페이지 리펙토링

## 🔔ETC


Diff:
diff --git a/src/pages/search/Search.tsx b/src/pages/search/Search.tsx
index e00e67722..b2bd9a493 100644
--- a/src/pages/search/Search.tsx
+++ b/src/pages/search/Search.tsx
@@ -5,9 +5,8 @@ import SearchBar from '@/pages/search/components/SearchBar/SearchBar';
 import TabContainer from '@/pages/search/components/TabContainer/TabContainer';
 import { DEFAULT_SORT_TAGS, SORT_LABELS } from '@/pages/search/constants/index';
 import { headerRootCutomStyle } from '@/pages/search/search.css';
-import { formatDateEndTime, formatDateStartTime } from '@/pages/search/utils';
+import { formatDateEndTime, formatDateStartTime } from '@/pages/search/utils/formatDate';
 import { handleSearchChange } from '@/pages/search/utils/searchHandlers';
-import Flex from '@/shared/components/Flex/Flex';
 import Header from '@/shared/components/Header/Header';
 import { genreEngMapping, labelToSortOptionMap, levelEngMapping } from '@/shared/constants';
 import useDebounce from '@/shared/hooks/useDebounce';
@@ -46,7 +45,7 @@ const Search = () => {
   });
 
   return (
-    <Flex>
+    <main>
       <Header.Root className={headerRootCutomStyle} isColor={true}>
         <Header.BackIcon />
         <SearchBar searchValue={searchValue} handleSearchChange={handleSearchChange(setSearchValue)} />
@@ -68,7 +67,7 @@ const Search = () => {
         selectedLabel={selectedLabel}
         setSelectedLabel={setSelectedLabel}
       />
-    </Flex>
+    </main>
   );
 };
 
diff --git a/src/pages/search/apis/axios.ts b/src/pages/search/apis/axios.ts
index 24df96f06..c42e8a26c 100644
--- a/src/pages/search/apis/axios.ts
+++ b/src/pages/search/apis/axios.ts
@@ -1,4 +1,4 @@
-import type { ClassListParams, DancerListParams } from '@/pages/search/types/api';
+import type { ClassListParamsTypes, DancerListParamsTypes } from '@/pages/search/types/api';
 import { instance } from '@/shared/apis/instance';
 
 const SEARCH_URL = {
@@ -6,7 +6,7 @@ const SEARCH_URL = {
   GET_CLASSLIST: '/api/v1/lessons',
 };
 
-export const getDancerList = async ({ keyword }: DancerListParams) => {
+export const getDancerList = async ({ keyword }: DancerListParamsTypes) => {
   const { data } = await instance.get(SEARCH_URL.GET_DANCERLIST, {
     params: {
       keyword,
@@ -16,7 +16,7 @@ export const getDancerList = async ({ keyword }: DancerListParams) => {
   return data;
 };
 
-export const getClassList = async ({ genre, level, startDate, endDate, sortOption, keyword }: ClassListParams) => {
+export const getClassList = async ({ genre, level, startDate, endDate, sortOption, keyword }: ClassListParamsTypes) => {
   const { data } = await instance.get(SEARCH_URL.GET_CLASSLIST, {
     params: {
       genre,
diff --git a/src/pages/search/apis/queries.ts b/src/pages/search/apis/queries.ts
index 8aac12176..04bc828bc 100644
--- a/src/pages/search/apis/queries.ts
+++ b/src/pages/search/apis/queries.ts
@@ -1,10 +1,11 @@
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import type { AxiosError } from 'axios';
 import { getClassList, getDancerList } from '@/pages/search/apis/axios';
-import type { ClassListParams, ClassListResponse, DancerListResponse } from '@/pages/search/types/api';
+import type { ClassListParamsTypes, ClassListResponseTypes, DancerListResponseTypes } from '@/pages/search/types/api';
 
-export const useGetDancerList = (params: { keyword?: string }): UseQueryResult<DancerListResponse, Error> => {
-  return useQuery<DancerListResponse, Error>({
+export const useGetDancerList = (params: { keyword?: string }): UseQueryResult<DancerListResponseTypes, AxiosError> => {
+  return useQuery<DancerListResponseTypes, AxiosError>({
     queryKey: ['dancerList', params],
     queryFn: async () => {
       return await getDancerList(params);
@@ -13,8 +14,8 @@ export const useGetDancerList = (params: { keyword?: string }): UseQueryResult<D
   });
 };
 
-export const useGetClassList = (params: ClassListParams): UseQueryResult<ClassListResponse, Error> => {
-  return useQuery<ClassListResponse, Error>({
+export const useGetClassList = (params: ClassListParamsTypes): UseQueryResult<ClassListResponseTypes, AxiosError> => {
+  return useQuery<ClassListResponseTypes, AxiosError>({
     queryKey: ['classList', params],
     queryFn: async () => {
       return await getClassList(params);
diff --git a/src/pages/search/components/Calendar/Calendar.tsx b/src/pages/search/components/Calendar/Calendar.tsx
index fdbac86a9..680b8a79e 100644
--- a/src/pages/search/components/Calendar/Calendar.tsx
+++ b/src/pages/search/components/Calendar/Calendar.tsx
@@ -4,7 +4,7 @@ import '@/pages/search/components/Calendar/calendar.css';
 type Value = Date | null;
 type Range<T> = [T, T];
 
-interface CalendarCustomProps {
+interface CalendarCustomPropTypes {
   startDate: string;
   endDate?: string;
   setStartDate: (date: string) => void;
@@ -12,7 +12,7 @@ interface CalendarCustomProps {
   isSearch: boolean;
 }
 
-const CalendarCustom = ({ startDate, endDate, setStartDate, setEndDate, isSearch }: CalendarCustomProps) => {
+const CalendarCustom = ({ startDate, endDate, setStartDate, setEndDate, isSearch }: CalendarCustomPropTypes) => {
   const dateChangeHandler = (value: Value | Range<Value>) => {
     // 시작과 끝 날짜 모두 선택한 경우
     if (Array.isArray(value)) {
diff --git a/src/pages/search/components/SearchBar/SearchBar.tsx b/src/pages/search/components/SearchBar/SearchBar.tsx
index d51fe447e..d8277efe2 100644
--- a/src/pages/search/components/SearchBar/SearchBar.tsx
+++ b/src/pages/search/components/SearchBar/SearchBar.tsx
@@ -1,20 +1,20 @@
 import { forwardRef } from 'react';
-import { containerStyle, inputStyle } from '@/pages/search/components/SearchBar/searchBar.css';
+import * as styles from '@/pages/search/components/SearchBar/searchBar.css';
 import IcSearchGray from '@/shared/assets/svg/IcSearchGray';
 import IcXCircleGray from '@/shared/assets/svg/IcXCircleGray';
 
-interface SearchBarProps {
+interface SearchBarPropTypes {
   searchValue: string;
   handleSearchChange: (value: string) => void;
 }
 
-const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(({ searchValue, handleSearchChange }, ref) => {
+const SearchBar = forwardRef<HTMLInputElement, SearchBarPropTypes>(({ searchValue, handleSearchChange }, ref) => {
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     handleSearchChange(event.target.value);
   };
 
   return (
-    <div className={containerStyle}>
+    <div className={styles.containerStyle}>
       <IcSearchGray width={24} />
       <input
         type="text"
@@ -22,7 +22,7 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(({ searchValue, h
         value={searchValue}
         placeholder="장르나 댄서 네임을 검색해 보세요"
         onChange={handleInputChange}
-        className={inputStyle}
+        className={styles.inputStyle}
       />
       <IcXCircleGray width={24} onClick={() => handleSearchChange('')} />
     </div>
diff --git a/src/pages/search/components/SearchIntro/SearchIntro.tsx b/src/pages/search/components/SearchIntro/SearchIntro.tsx
index 534ac6805..b7dd04e89 100644
--- a/src/pages/search/components/SearchIntro/SearchIntro.tsx
+++ b/src/pages/search/components/SearchIntro/SearchIntro.tsx
@@ -1,26 +1,26 @@
 import IcSpeaker3D from '@/shared/assets/svg/IcSpeaker3D';
-import Flex from '@/shared/components/Flex/Flex';
 import Head from '@/shared/components/Head/Head';
 import Text from '@/shared/components/Text/Text';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 const SearchIntro = () => {
   return (
-    <Flex align="center" gap="0.8rem">
+    <div className={sprinkles({ display: 'flex', alignItems: 'center', gap: 8 })}>
       <IcSpeaker3D width={52} />
-      <Flex direction="column" gap="0.4rem">
+      <div className={sprinkles({ display: 'flex', flexDirection: 'column', gap: 4 })}>
         <Text tag="b7" color="gray7">
           어떤 클래스를 들어야 할지 모르겠다면?
         </Text>
-        <Flex>
+        <div className={sprinkles({ display: 'flex' })}>
           <Head tag="h6" color="main4">
             장르 or 댄서네임
           </Head>
           <Head tag="h6" color="black">
             을 검색해 보세요!
           </Head>
-        </Flex>
-      </Flex>
-    </Flex>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/search/components/TabContainer/DancerList/DancerList.tsx b/src/pages/search/components/TabContainer/DancerList/DancerList.tsx
index e4792aca9..721ade64f 100644
--- a/src/pages/search/components/TabContainer/DancerList/DancerList.tsx
+++ b/src/pages/search/components/TabContainer/DancerList/DancerList.tsx
@@ -1,52 +1,54 @@
 import { useNavigate } from 'react-router-dom';
-import { dancerImageStyle } from '@/pages/search/components/TabContainer/DancerList/dancerList.css';
-import type { Dancer } from '@/pages/search/types/dancer';
+import * as styles from '@/pages/search/components/TabContainer/DancerList/dancerList.css';
+import type { DancerTypes } from '@/pages/search/types/dancer';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
-import Flex from '@/shared/components/Flex/Flex';
 import Head from '@/shared/components/Head/Head';
 import Tag from '@/shared/components/Tag/Tag';
 import { genreMapping } from '@/shared/constants/index';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 import { vars } from '@/shared/styles/theme.css';
 
-interface DancerListProps {
-  dancers: Dancer[];
+interface DancerListPropTypes {
+  dancers: DancerTypes[];
 }
 
-const DancerList = ({ dancers }: DancerListProps) => {
+const DancerList = ({ dancers }: DancerListPropTypes) => {
   const navigate = useNavigate();
 
   const handleDancerClick = (id: number) => {
     navigate(ROUTES_CONFIG.dancer.path(`${id}`));
   };
   return (
-    <Flex tag="ul" width="100%" direction="column">
+    <ul className={sprinkles({ display: 'flex', width: '100%', flexDirection: 'column' })}>
       {dancers.map((dancer) => (
-        <Flex
-          align="center"
-          paddingTop="1.6rem"
-          paddingBottom="1.6rem"
-          gap="2rem"
-          tag="li"
-          borderBottom={`1px solid ${vars.colors.gray01}`}
-          width="100%"
+        <li
+          className={sprinkles({
+            display: 'flex',
+            alignItems: 'center',
+            paddingTop: 16,
+            paddingBottom: 16,
+            gap: 20,
+            width: '100%',
+          })}
+          style={{ borderBottom: `1px solid ${vars.colors.gray01}` }}
           key={dancer.id}
           onClick={() => handleDancerClick(dancer.id)}>
-          <img src={dancer.profileImage} alt={dancer.nickname} className={dancerImageStyle} />
-          <Flex direction="column" gap="0.8rem">
+          <img src={dancer.profileImage} alt={dancer.nickname} className={styles.dancerImageStyle} />
+          <div className={sprinkles({ display: 'flex', flexDirection: 'column', gap: 8 })}>
             <Head level="h6" tag="h6">
               {dancer.nickname}
             </Head>
-            <Flex gap="0.5rem">
+            <div className={sprinkles({ display: 'flex', gap: 5 })}>
               {dancer.genres.map((genre, index) => (
                 <Tag key={index} type="search" size="large">
                   {genreMapping[genre] || genre}
                 </Tag>
               ))}
-            </Flex>
-          </Flex>
-        </Flex>
+            </div>
+          </div>
+        </li>
       ))}
-    </Flex>
+    </ul>
   );
 };
 
diff --git a/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx b/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx
index 0846d2ee5..c2080be21 100644
--- a/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx
+++ b/src/pages/search/components/TabContainer/EmptyView/EmptyView.tsx
@@ -1,16 +1,31 @@
 import { EmptyGif } from '@/shared/assets/gif';
-import Flex from '@/shared/components/Flex/Flex';
 import Head from '@/shared/components/Head/Head';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 const EmptyView = () => {
   return (
-    <Flex width="100%" justify="center" direction="column" align="center" gap="2.4rem" marginTop="6rem">
+    <div
+      className={sprinkles({
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 24,
+        marginTop: 60,
+      })}>
       <img src={EmptyGif} width={300} />
-      <Flex direction="column" justify="center" align="center">
+      <div
+        className={sprinkles({
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}>
         <Head tag="h5">검색 결과가 없어요.</Head>
         <Head tag="h5">다른단어로 검색해 보시겠어요?</Head>
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/search/components/TabContainer/TabContainer.tsx b/src/pages/search/components/TabContainer/TabContainer.tsx
index 4ad786dda..10f821ff4 100644
--- a/src/pages/search/components/TabContainer/TabContainer.tsx
+++ b/src/pages/search/components/TabContainer/TabContainer.tsx
@@ -5,13 +5,13 @@ import DancerList from '@/pages/search/components/TabContainer/DancerList/Dancer
 import EmptyView from '@/pages/search/components/TabContainer/EmptyView/EmptyView';
 import Dropdown from '@/pages/search/components/TabContainer/TagSection/Dropdown';
 import TagSection from '@/pages/search/components/TabContainer/TagSection/TagSection';
-import { divCustomStyle } from '@/pages/search/components/TabContainer/tabContainer.css';
-import type { ClassListResponse, DancerListResponse } from '@/pages/search/types/api';
+import * as styles from '@/pages/search/components/TabContainer/tabContainer.css';
+import type { ClassListResponseTypes, DancerListResponseTypes } from '@/pages/search/types/api';
 import IcArrowUnderGray from '@/shared/assets/svg/IcArrowUnderGray';
 import IcXMain04 from '@/shared/assets/svg/IcXMain04';
-import Flex from '@/shared/components/Flex/Flex';
 import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab';
 import Text from '@/shared/components/Text/Text';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 interface TagItem {
   label: string;
@@ -33,7 +33,7 @@ interface ClassTypes {
   remainingDays: number;
 }
 
-interface TabContainerProps {
+interface TabContainerPropTypes {
   defaultSortTags: DefaultSortTagTypes[];
   genre: string | null;
   level: string | null;
@@ -43,8 +43,8 @@ interface TabContainerProps {
   setLevel: (level: string | null) => void;
   setStartDate: (date: string) => void;
   setEndDate: (date: string) => void;
-  classList: ClassListResponse | undefined;
-  dancerList: DancerListResponse | undefined;
+  classList: ClassListResponseTypes | undefined;
+  dancerList: DancerListResponseTypes | undefined;
   error: Error | null;
   selectedLabel: '최신 등록순' | '찜이 많은순' | '마감 임박순';
   setSelectedLabel: (label: '최신 등록순' | '찜이 많은순' | '마감 임박순') => void;
@@ -65,7 +65,7 @@ const TabContainer = ({
   classList,
   selectedLabel,
   setSelectedLabel,
-}: TabContainerProps) => {
+}: TabContainerPropTypes) => {
   const [selectedTab, setSelectedTab] = useState(0);
 
   const handleTagReset = (type: string) => {
@@ -117,10 +117,25 @@ const TabContainer = ({
   const tagType: 'search' | 'sort' = activeTags.length > 0 ? 'search' : 'sort';
 
   return (
-    <Flex direction="column" paddingTop="8.4rem" width="100%" paddingLeft="2rem" paddingRight="2rem">
-      <Flex align="center" width="100%" justify="spaceBetween" position="relative">
+    <section
+      className={sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        paddingTop: 84,
+        paddingLeft: 20,
+        paddingRight: 20,
+      })}>
+      <div
+        className={sprinkles({
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%',
+          justifyContent: 'space-between',
+          position: 'relative',
+        })}>
         <TabRoot>
-          <Flex justify="spaceBetween">
+          <div className={sprinkles({ display: 'flex', justifyContent: 'space-between' })}>
             <TabList>
               <TabButton isSelected={selectedTab === 0} onClick={() => setSelectedTab(0)} colorScheme="primary">
                 클래스
@@ -131,12 +146,12 @@ const TabContainer = ({
             </TabList>
             <Dropdown.Root>
               <Dropdown.Trigger>
-                <Flex align="center">
+                <div className={sprinkles({ display: 'flex', alignItems: 'center' })}>
                   <Text tag="b7" color="gray7">
                     {selectedLabel}
                   </Text>
                   <IcArrowUnderGray width={14} />
-                </Flex>
+                </div>
               </Dropdown.Trigger>
               <Dropdown.Content>
                 <Dropdown.Item label="최신 등록순" onClick={() => setSelectedLabel('최신 등록순')} />
@@ -144,7 +159,7 @@ const TabContainer = ({
                 <Dropdown.Item label="마감 임박순" onClick={() => setSelectedLabel('마감 임박순')} />
               </Dropdown.Content>
             </Dropdown.Root>
-          </Flex>
+          </div>
 
           <TabPanel isSelected={selectedTab === 0}>
             <TagSection
@@ -161,24 +176,9 @@ const TabContainer = ({
               setStartDate={setStartDate}
               setEndDate={setEndDate}
             />
-            <div className={divCustomStyle}>
+            <div className={styles.divCustomStyle}>
               {classList && classList.lessons && classList.lessons.length > 0 ? (
-                classList.lessons.map((data: ClassTypes) => (
-                  <ClassItem
-                    key={data.id}
-                    id={data.id}
-                    imageUrl={data.imageUrl}
-                    level={data.level}
-                    genre={data.genre}
-                    name={data.name}
-                    teacherName={data.teacherName}
-                    teacherProfileImage={data.teacherProfileImage}
-                    startDate={data.startDate}
-                    endDate={data.endDate}
-                    remainingDays={data.remainingDays}
-                    useNewStyles={true}
-                  />
-                ))
+                classList.lessons.map((data: ClassTypes) => <ClassItem key={data.id} {...data} useNewStyles={true} />)
               ) : (
                 <EmptyView />
               )}
@@ -193,8 +193,8 @@ const TabContainer = ({
             )}
           </TabPanel>
         </TabRoot>
-      </Flex>
-    </Flex>
+      </div>
+    </section>
   );
 };
 
diff --git a/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx b/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx
index ede7d919c..edbd4712d 100644
--- a/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx
+++ b/src/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet.tsx
@@ -1,25 +1,15 @@
 import { useState } from 'react';
 import CalendarCustom from '@/pages/search/components/Calendar/Calendar';
-import {
-  bottomSheetContainerStyle,
-  bottomSheetHidden,
-  bottomSheetStyle,
-  bottomSheetVisible,
-  genreButtonContainerStyle,
-  overlayHidden,
-  overlayStyle,
-  overlayVisible,
-  tabListCustomStyle,
-} from '@/pages/search/components/TabContainer/TagSection/BottomSheet/bottomSheet.css';
+import GenreButton from '@/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton';
+import * as styles from '@/pages/search/components/TabContainer/TagSection/BottomSheet/bottomSheet.css';
 import BoxButton from '@/shared/components/BoxButton/BoxButton';
-import Flex from '@/shared/components/Flex/Flex';
 import LevelButton from '@/shared/components/LevelButton/LevelButton';
 import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab';
 import { LEVEL } from '@/shared/constants';
 import { GENRE_CATEGORY } from '@/shared/constants/index';
-import GenreButton from './GenreButton/GenreButton';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 
-interface BottomSheetProps {
+interface BottomSheetPropTypes {
   onClose: () => void;
   initialTabIndex: number;
   level: string | null;
@@ -43,7 +33,7 @@ const BottomSheet = ({
   endDate,
   setStartDate,
   setEndDate,
-}: BottomSheetProps) => {
+}: BottomSheetPropTypes) => {
   const [selectedTab, setSelectedTab] = useState(initialTabIndex);
   const [selectedGenre, setSelectedGenre] = useState<string | null>(genre);
   const [selectedLevelTitle, setSelectedLevelTitle] = useState<string | null>(level);
@@ -90,12 +80,16 @@ const BottomSheet = ({
   };
 
   return (
-    <div className={bottomSheetContainerStyle}>
-      <div className={`${overlayStyle} ${isClosing ? overlayHidden : overlayVisible}`} onClick={handleClose} />
-      <Flex direction="column" className={`${bottomSheetStyle} ${isClosing ? bottomSheetHidden : bottomSheetVisible}`}>
+    <div className={styles.bottomSheetContainerStyle}>
+      <div
+        className={`${styles.overlayStyle} ${isClosing ? styles.overlayHidden : styles.overlayVisible}`}
+        onClick={handleClose}
+      />
+      <div
+        className={`${styles.bottomSheetStyle} ${isClosing ? styles.bottomSheetHidden : styles.bottomSheetVisible} ${sprinkles({ display: 'flex', flexDirection: 'column' })}`}>
         <TabRoot>
-          <Flex paddingBottom="1rem" paddingLeft="2rem">
-            <TabList className={tabListCustomStyle}>
+          <div className={sprinkles({ display: 'flex', paddingBottom: 10, paddingLeft: 20 })}>
+            <TabList className={styles.tabListCustomStyle}>
               <TabButton isSelected={selectedTab === 0} onClick={() => setSelectedTab(0)} colorScheme="secondary">
                 장르
               </TabButton>
@@ -106,9 +100,9 @@ const BottomSheet = ({
                 기간
               </TabButton>
             </TabList>
-          </Flex>
+          </div>
           <TabPanel isSelected={selectedTab === 0}>
-            <div className={genreButtonContainerStyle}>
+            <div className={styles.genreButtonContainerStyle}>
               {GENRE_CATEGORY.flat().map((category, index) => (
                 <GenreButton
                   key={index}
@@ -120,13 +114,16 @@ const BottomSheet = ({
             </div>
           </TabPanel>
           <TabPanel isSelected={selectedTab === 1}>
-            <Flex
-              direction="column"
-              gap="0.8rem"
-              paddingBottom="4.6rem"
-              paddingTop="0.8rem"
-              paddingLeft="2rem"
-              paddingRight="2rem">
+            <div
+              className={sprinkles({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8,
+                paddingBottom: 46,
+                paddingTop: 8,
+                paddingLeft: 20,
+                paddingRight: 20,
+              })}>
               {LEVEL.map((level) => (
                 <LevelButton
                   key={level.title}
@@ -135,7 +132,7 @@ const BottomSheet = ({
                   onClick={() => handleLevelSelect(level.title)}
                 />
               ))}
-            </Flex>
+            </div>
           </TabPanel>
           <TabPanel isSelected={selectedTab === 2}>
             <CalendarCustom
@@ -147,7 +144,7 @@ const BottomSheet = ({
             />
           </TabPanel>
         </TabRoot>
-        <Flex width="100%" gap="0.8rem" paddingLeft="2rem" paddingRight="2rem">
+        <div className={sprinkles({ display: 'flex', width: '100%', gap: 8, paddingLeft: 20, paddingRight: 20 })}>
           <BoxButton variant="secondary" onClick={handleReset}>
             초기화
           </BoxButton>
@@ -156,8 +153,8 @@ const BottomSheet = ({
             onClick={handleApplyClick}>
             적용하기
           </BoxButton>
-        </Flex>
-      </Flex>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton.tsx b/src/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton.tsx
index a149c517a..3916a7f44 100644
--- a/src/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton.tsx
+++ b/src/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/GenreButton.tsx
@@ -1,12 +1,12 @@
 import * as styles from '@/pages/search/components/TabContainer/TagSection/BottomSheet/GenreButton/genreButton.css';
 
-interface GenreButtonProps {
+interface GenreButtonPropTypes {
   category: string;
   isSelected: boolean;
   onClick: () => void;
 }
 
-const GenreButton = ({ category, isSelected, onClick }: GenreButtonProps) => (
+const GenreButton = ({ category, isSelected, onClick }: GenreButtonPropTypes) => (
   <button
     onClick={onClick}
     className={styles.genreButtonStyle({
diff --git a/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx b/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx
index 7ebbf25fe..4b0949b4d 100644
--- a/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx
+++ b/src/pages/search/components/TabContainer/TagSection/Dropdown/index.tsx
@@ -3,13 +3,13 @@ import { createContext, useContext, useState } from 'react';
 import useOutsideClick from '@/shared/hooks/useOutsideClick';
 import * as styles from './index.css';
 
-interface DropdownContextProps {
+interface DropdownContextPropTypes {
   open: boolean;
   handleToggleOpen: () => void;
   handleToggleClose: () => void;
 }
 
-const DropdownContext = createContext<DropdownContextProps | null>(null);
+const DropdownContext = createContext<DropdownContextPropTypes | null>(null);
 
 const useDropdownContext = () => {
   const context = useContext(DropdownContext);
@@ -19,10 +19,10 @@ const useDropdownContext = () => {
   return context;
 };
 
-interface DropdownRootProps {
+interface DropdownRootPropTypes {
   children: ReactNode;
 }
-const DropdownRoot = ({ children }: DropdownRootProps) => {
+const DropdownRoot = ({ children }: DropdownRootPropTypes) => {
   const [open, setOpen] = useState(false);
 
   const handleToggleOpen = () => setOpen((prev) => !prev);
@@ -30,7 +30,7 @@ const DropdownRoot = ({ children }: DropdownRootProps) => {
 
   const ref = useOutsideClick(handleClose);
 
-  const contextValue: DropdownContextProps = {
+  const contextValue: DropdownContextPropTypes = {
     open,
     handleToggleOpen,
     handleToggleClose: handleClose,
@@ -45,10 +45,10 @@ const DropdownRoot = ({ children }: DropdownRootProps) => {
   );
 };
 
-interface DropdownTriggerProps {
+interface DropdownTriggerPropTypes {
   children: ReactNode;
 }
-const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
+const DropdownTrigger = ({ children }: DropdownTriggerPropTypes) => {
   const { handleToggleOpen } = useDropdownContext();
 
   return (
@@ -58,11 +58,11 @@ const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
   );
 };
 
-interface DropdownContentProps {
+interface DropdownContentPropTypes {
   children: ReactNode;
 }
 
-const DropdownContent = ({ children }: DropdownContentProps) => {
+const DropdownContent = ({ children }: DropdownContentPropTypes) => {
   const { open, handleToggleClose } = useDropdownContext();
 
   return (
@@ -72,15 +72,14 @@ const DropdownContent = ({ children }: DropdownContentProps) => {
   );
 };
 
-interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface DropdownItemPropTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-const DropdownItem = ({ label, onClick, ...props }: DropdownItemProps) => {
+const DropdownItem = ({ label, onClick, ...props }: DropdownItemPropTypes) => {
   const { handleToggleClose } = useDropdownContext();
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (onClick) onClick(event);
     handleToggleClose();
   };
diff --git a/src/pages/search/components/TabContainer/TagSection/TagSection.tsx b/src/pages/search/components/TabContainer/TagSection/TagSection.tsx
index 99a9152df..b4c2debba 100644
--- a/src/pages/search/components/TabContainer/TagSection/TagSection.tsx
+++ b/src/pages/search/components/TabContainer/TagSection/TagSection.tsx
@@ -1,19 +1,19 @@
 import { useState } from 'react';
 import BottomSheet from '@/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet';
-import { tagCustomStyle } from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
+import * as styles from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
 import IcFilterGray from '@/shared/assets/svg/IcFilterGray';
-import Flex from '@/shared/components/Flex/Flex';
 import Tag from '@/shared/components/Tag/Tag';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 
-interface TagItem {
+interface TagItemTypes {
   label: string;
   icon?: JSX.Element;
   type?: string;
 }
 
-interface TagSectionProps {
-  displayTags: TagItem[];
-  activeTags: TagItem[];
+interface TagSectionPropTypes {
+  displayTags: TagItemTypes[];
+  activeTags: TagItemTypes[];
   tagSize: 'search' | 'sort';
   tagType: 'search' | 'sort';
   genre: string | null;
@@ -39,7 +39,7 @@ const TagSection = ({
   endDate,
   setStartDate,
   setEndDate,
-}: TagSectionProps) => {
+}: TagSectionPropTypes) => {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
   const [selectedTagIndex, setSelectedTagIndex] = useState(0);
 
@@ -66,11 +66,18 @@ const TagSection = ({
 
   return (
     <>
-      <Flex justify="spaceBetween" paddingTop="1.2rem" paddingBottom="1.6rem" width="100%">
-        <Flex gap="0.6rem">
+      <div
+        className={sprinkles({
+          display: 'flex',
+          justifyContent: 'space-between',
+          paddingTop: 12,
+          paddingBottom: 16,
+          width: '100%',
+        })}>
+        <div className={sprinkles({ display: 'flex', gap: 6 })}>
           {displayTags.map((tag, index) => (
             <Tag
-              className={tagCustomStyle}
+              className={styles.tagCustomStyle}
               key={index}
               size={tagSize}
               type={tagType}
@@ -79,9 +86,9 @@ const TagSection = ({
               {tag.icon && tag.icon}
             </Tag>
           ))}
-        </Flex>
+        </div>
         {!activeTags.length && <IcFilterGray width={28} onClick={() => handleTagClick(0)} />}
-      </Flex>
+      </div>
       {isBottomSheetOpen && (
         <BottomSheet
           onClose={handleBottomSheetClose}
diff --git a/src/pages/search/types/api.ts b/src/pages/search/types/api.ts
index 27b222b6c..e38ae0de9 100644
--- a/src/pages/search/types/api.ts
+++ b/src/pages/search/types/api.ts
@@ -1,10 +1,10 @@
-import type { Dancer } from '@/pages/search/types/dancer';
+import type { DancerTypes } from '@/pages/search/types/dancer';
 
-export interface DancerListParams {
+export interface DancerListParamsTypes {
   keyword?: string;
 }
 
-export interface ClassListParams {
+export interface ClassListParamsTypes {
   genre?: string;
   level?: string;
   startDate?: string;
@@ -13,11 +13,11 @@ export interface ClassListParams {
   keyword?: string;
 }
 
-export interface DancerListResponse {
-  teachers: Dancer[];
+export interface DancerListResponseTypes {
+  teachers: DancerTypes[];
 }
 
-export interface Class {
+export interface ClassTypes {
   id: number;
   genre: string;
   level: string;
@@ -31,6 +31,6 @@ export interface Class {
   remainingDays: number;
 }
 
-export interface ClassListResponse {
-  lessons: Class[];
+export interface ClassListResponseTypes {
+  lessons: ClassTypes[];
 }
diff --git a/src/pages/search/types/dancer.ts b/src/pages/search/types/dancer.ts
index 378030cf0..a92c04977 100644
--- a/src/pages/search/types/dancer.ts
+++ b/src/pages/search/types/dancer.ts
@@ -1,4 +1,4 @@
-export interface Dancer {
+export interface DancerTypes {
   id: number;
   nickname: string;
   profileImage: string;
diff --git a/src/pages/search/utils/index.ts b/src/pages/search/utils/formatDate.ts
similarity index 100%
rename from src/pages/search/utils/index.ts
rename to src/pages/search/utils/formatDate.ts


Reviews:
user: login: rtttr1
body: 수고하셨습니다!
지금 prop이 4개 이상인 경우에는 prop값들을 객체로 감싸서 객체를 전달해 주는 형태로 바꾸신거 같아요. 저는 개인적으로 map을 돌려서 데이터를 넘겨주는 경우를 제외하고는 prop이 많아도 컴포넌트 내부에서 prop을 정의해주는게 더 가독성이 좋다고 생각이 들었어요! 

map함수 내부에서 스프레드 연산자를 사용하면 좋다고 생각한 이유는 map 함수 내부에서는 이미 prop으로 넘겨줄 데이터들이 객체화가 되어 있어요. 따라서 바로 스프레드 연산자를 사용하면 간편하게 prop을 넘겨줄 수 있는거죠! 

하지만 map의 경우가 아닌경우, 지금처럼 객체로 한번 감싸서 넘겨주게 되면 해당 prop의 값을 확인하거나 변경할때 위아래로 마우스 스크롤을 움직여야 해요. 실행순서와 코드의 순서가 최대한 일치해야 읽기 좋은 코드라는 말에 크게 동감한 저는 이런 경우 DX가 안 좋아질 우려가 있다는 생각이 들었어요! 

따라서 prop이 4개 이상인 경우의 형태를 통일시키는것 보다는, 이미 객체화가 되어있는 경우를 제외하고는 prop을 컴포넌트 내부에서 정의해주는게 더 가독성이 좋을것 같다는 생각이 들었는데 이에대한 건휘님의 의견이 궁금합니다!
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-14T10:05:33Z
user: login: constantly-dev
body: 컨벤션 바꿀 것도 많았을텐데 수고하셨습니다 👍 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-14T10:47:08Z
user: login: KIMGEONHWI
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-14T16:00:33Z
user: login: hansoojeongsj
body: 오와.. 수정해줘야 할 부분이 엄청 많았네요! 고생하셨습니다 👍👍 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-14T17:56:45Z
user: login: KIMGEONHWI
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-21T05:40:19Z
user: login: KIMGEONHWI
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-21T05:42:08Z
user: login: KIMGEONHWI
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-21T05:45:13Z
user: login: rtttr1
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-21T13:35:11Z

Review comments:
diff_hunk: @@ -45,30 +44,32 @@ const Search = () => {
     sortOption,
   });
 
+  const tabContainerPropTypes = {
+    defaultSortTags: DEFAULT_SORT_TAGS,
+    genre,
+    level,
+    startDate,
+    endDate,
+    setGenre,
+    setLevel,
+    setStartDate,
+    setEndDate,
+    dancerList,
+    classList,
+    error,
+    selectedLabel,
+    setSelectedLabel,
+  };
+
   return (
-    <Flex>
+    <main>
       <Header.Root className={headerRootCutomStyle} isColor={true}>
         <Header.BackIcon />
         <SearchBar searchValue={searchValue} handleSearchChange={handleSearchChange(setSearchValue)} />
       </Header.Root>
 
-      <TabContainer
-        defaultSortTags={DEFAULT_SORT_TAGS}
-        genre={genre}
-        level={level}
-        startDate={startDate}
-        endDate={endDate}
-        setGenre={setGenre}
-        setLevel={setLevel}
-        setStartDate={setStartDate}
-        setEndDate={setEndDate}
-        dancerList={dancerList}
-        classList={classList}
-        error={error}
-        selectedLabel={selectedLabel}
-        setSelectedLabel={setSelectedLabel}
-      />
-    </Flex>
+      <TabContainer {...tabContainerPropTypes} />
+    </main>
path: src/pages/search/Search.tsx
user: login: constantly-dev
body: props에 전달해줄 내용이 많아서 스프레드 연산자를 사용하셨군요!! 👍 
그런데 혹시 data를 넘겨주는 것 같은데 네이밍이 Types를 사용하신 이유가 있을까요?
created_at: 2025-04-14T09:02:11Z
author_association: MEMBER
diff_hunk: @@ -45,30 +44,32 @@ const Search = () => {
     sortOption,
   });
 
+  const tabContainerPropTypes = {
+    defaultSortTags: DEFAULT_SORT_TAGS,
+    genre,
+    level,
+    startDate,
+    endDate,
+    setGenre,
+    setLevel,
+    setStartDate,
+    setEndDate,
+    dancerList,
+    classList,
+    error,
+    selectedLabel,
+    setSelectedLabel,
+  };
path: src/pages/search/Search.tsx
user: login: rtttr1
body: 이렇게 prop을 분리해서 넘겨주는건 prop이 4개 이상인 경우의 케이스의 형태를 통일시키기 위함인가요?
created_at: 2025-04-14T09:58:03Z
author_association: COLLABORATOR
diff_hunk: @@ -13,8 +13,8 @@ export const useGetDancerList = (params: { keyword?: string }): UseQueryResult<D
   });
 };
 
-export const useGetClassList = (params: ClassListParams): UseQueryResult<ClassListResponse, Error> => {
-  return useQuery<ClassListResponse, Error>({
+export const useGetClassList = (params: ClassListParamsTypes): UseQueryResult<ClassListResponseTypes, Error> => {
+  return useQuery<ClassListResponseTypes, Error>({
path: src/pages/search/apis/queries.ts
user: login: constantly-dev
body: `useQueryResult` 활용 너무 좋네요! 제 코드에서 안 쓴 곳도 있어서 저도 얼른 추가해야겠습니다! 
다만 범용성을 위해 `Error`를 사용해도 되지만 `Axios`를 사용한다면 조금 더 에러의 범위를 줄여 `AxiosError` 타입을 사용하는 것도 좋은 방법이 될 수 있지 않을까 생각합니다!
created_at: 2025-04-14T10:41:54Z
author_association: MEMBER
diff_hunk: @@ -1,52 +1,54 @@
 import { useNavigate } from 'react-router-dom';
-import { dancerImageStyle } from '@/pages/search/components/TabContainer/DancerList/dancerList.css';
-import type { Dancer } from '@/pages/search/types/dancer';
+import * as styles from '@/pages/search/components/TabContainer/DancerList/dancerList.css';
+import type { DancerTypes } from '@/pages/search/types/dancer';
 import { ROUTES_CONFIG } from '@/routes/routesConfig';
-import Flex from '@/shared/components/Flex/Flex';
 import Head from '@/shared/components/Head/Head';
 import Tag from '@/shared/components/Tag/Tag';
 import { genreMapping } from '@/shared/constants/index';
+import { sprinkles } from '@/shared/styles/sprinkles.css';
 import { vars } from '@/shared/styles/theme.css';
 
-interface DancerListProps {
-  dancers: Dancer[];
+interface DancerListPropTypes {
+  dancers: DancerTypes[];
 }
 
-const DancerList = ({ dancers }: DancerListProps) => {
+const DancerList = ({ dancers }: DancerListPropTypes) => {
   const navigate = useNavigate();
 
   const handleDancerClick = (id: number) => {
     navigate(ROUTES_CONFIG.dancer.path(`${id}`));
   };
   return (
-    <Flex tag="ul" width="100%" direction="column">
+    <ul className={sprinkles({ display: 'flex', width: '100%', flexDirection: 'column' })}>
       {dancers.map((dancer) => (
-        <Flex
-          align="center"
-          paddingTop="1.6rem"
-          paddingBottom="1.6rem"
-          gap="2rem"
-          tag="li"
-          borderBottom={`1px solid ${vars.colors.gray01}`}
-          width="100%"
+        <li
+          className={sprinkles({
+            display: 'flex',
+            alignItems: 'center',
+            paddingTop: 16,
+            paddingBottom: 16,
+            gap: 20,
+            width: '100%',
+          })}
+          style={{ borderBottom: `1px solid ${vars.colors.gray01}` }}
path: src/pages/search/components/TabContainer/DancerList/DancerList.tsx
user: login: constantly-dev
body: 👍 
created_at: 2025-04-14T10:43:54Z
author_association: MEMBER
diff_hunk: @@ -1,19 +1,19 @@
 import { useState } from 'react';
 import BottomSheet from '@/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet';
-import { tagCustomStyle } from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
+import * as styles from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
path: src/pages/search/components/TabContainer/TagSection/TagSection.tsx
user: login: constantly-dev
body: 단순 궁금증인데 기존에 각각 style을 `import`하는 방법에서 `styles`로 한번에 가져오도록 변경하신 이유가 궁금합니다! 
created_at: 2025-04-14T10:46:22Z
author_association: MEMBER
diff_hunk: @@ -45,30 +44,32 @@ const Search = () => {
     sortOption,
   });
 
+  const tabContainerPropTypes = {
+    defaultSortTags: DEFAULT_SORT_TAGS,
+    genre,
+    level,
+    startDate,
+    endDate,
+    setGenre,
+    setLevel,
+    setStartDate,
+    setEndDate,
+    dancerList,
+    classList,
+    error,
+    selectedLabel,
+    setSelectedLabel,
+  };
path: src/pages/search/Search.tsx
user: login: KIMGEONHWI
body: > 이렇게 prop을 분리해서 넘겨주는건 prop이 4개 이상인 경우의 케이스의 형태를 통일시키기 위함인가요?

그런 의도였는데 수정하였습니다!
created_at: 2025-04-14T16:00:33Z
author_association: COLLABORATOR
diff_hunk: @@ -1,19 +1,19 @@
 import { useState } from 'react';
 import BottomSheet from '@/pages/search/components/TabContainer/TagSection/BottomSheet/BottomSheet';
-import { tagCustomStyle } from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
+import * as styles from '@/pages/search/components/TabContainer/TagSection/tagSection.css';
path: src/pages/search/components/TabContainer/TagSection/TagSection.tsx
user: login: KIMGEONHWI
body: > 단순 궁금증인데 기존에 각각 style을 `import`하는 방법에서 `styles`로 한번에 가져오도록 변경하신 이유가 궁금합니다!

여러 스타일을 사용할 때 각각 개별적으로 import하지 않고 한 줄로 모두 import하여서 불필요한 코드 줄을 줄일 수 있어서 한번에 가져오도록 통일 하였습니다!
created_at: 2025-04-21T05:40:19Z
author_association: COLLABORATOR
diff_hunk: @@ -13,8 +13,8 @@ export const useGetDancerList = (params: { keyword?: string }): UseQueryResult<D
   });
 };
 
-export const useGetClassList = (params: ClassListParams): UseQueryResult<ClassListResponse, Error> => {
-  return useQuery<ClassListResponse, Error>({
+export const useGetClassList = (params: ClassListParamsTypes): UseQueryResult<ClassListResponseTypes, Error> => {
+  return useQuery<ClassListResponseTypes, Error>({
path: src/pages/search/apis/queries.ts
user: login: KIMGEONHWI
body: > `useQueryResult` 활용 너무 좋네요! 제 코드에서 안 쓴 곳도 있어서 저도 얼른 추가해야겠습니다! 다만 범용성을 위해 `Error`를 사용해도 되지만 `Axios`를 사용한다면 조금 더 에러의 범위를 줄여 `AxiosError` 타입을 사용하는 것도 좋은 방법이 될 수 있지 않을까 생각합니다!

동의합니다!! 반영 하겠습니다.
created_at: 2025-04-21T05:42:08Z
author_association: COLLABORATOR
diff_hunk: @@ -45,30 +44,32 @@ const Search = () => {
     sortOption,
   });
 
+  const tabContainerPropTypes = {
+    defaultSortTags: DEFAULT_SORT_TAGS,
+    genre,
+    level,
+    startDate,
+    endDate,
+    setGenre,
+    setLevel,
+    setStartDate,
+    setEndDate,
+    dancerList,
+    classList,
+    error,
+    selectedLabel,
+    setSelectedLabel,
+  };
+
   return (
-    <Flex>
+    <main>
       <Header.Root className={headerRootCutomStyle} isColor={true}>
         <Header.BackIcon />
         <SearchBar searchValue={searchValue} handleSearchChange={handleSearchChange(setSearchValue)} />
       </Header.Root>
 
-      <TabContainer
-        defaultSortTags={DEFAULT_SORT_TAGS}
-        genre={genre}
-        level={level}
-        startDate={startDate}
-        endDate={endDate}
-        setGenre={setGenre}
-        setLevel={setLevel}
-        setStartDate={setStartDate}
-        setEndDate={setEndDate}
-        dancerList={dancerList}
-        classList={classList}
-        error={error}
-        selectedLabel={selectedLabel}
-        setSelectedLabel={setSelectedLabel}
-      />
-    </Flex>
+      <TabContainer {...tabContainerPropTypes} />
+    </main>
path: src/pages/search/Search.tsx
user: login: KIMGEONHWI
body: Types를 붙인건 실수였고, prop을 분리해서 넘겨주려고 하였는데 규홍님 의견에 따라 map을 활용해서 데이터를 넘겨주는 경우를 제외하고는 컴포넌트 내부에서 prop을 정의하는 방식으로 수정하였습니다!
created_at: 2025-04-21T05:45:13Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-12T16:34:21Z
body: ✅ 빌드 성공적으로 완료되었지롱롱 🛠️
author_association: NONE
user: login: KIMGEONHWI
created_at: 2025-04-14T15:59:45Z
body: > 수고하셨습니다! 지금 prop이 4개 이상인 경우에는 prop값들을 객체로 감싸서 객체를 전달해 주는 형태로 바꾸신거 같아요. 저는 개인적으로 map을 돌려서 데이터를 넘겨주는 경우를 제외하고는 prop이 많아도 컴포넌트 내부에서 prop을 정의해주는게 더 가독성이 좋다고 생각이 들었어요!
> 
> map함수 내부에서 스프레드 연산자를 사용하면 좋다고 생각한 이유는 map 함수 내부에서는 이미 prop으로 넘겨줄 데이터들이 객체화가 되어 있어요. 따라서 바로 스프레드 연산자를 사용하면 간편하게 prop을 넘겨줄 수 있는거죠!
> 
> 하지만 map의 경우가 아닌경우, 지금처럼 객체로 한번 감싸서 넘겨주게 되면 해당 prop의 값을 확인하거나 변경할때 위아래로 마우스 스크롤을 움직여야 해요. 실행순서와 코드의 순서가 최대한 일치해야 읽기 좋은 코드라는 말에 크게 동감한 저는 이런 경우 DX가 안 좋아질 우려가 있다는 생각이 들었어요!
> 
> 따라서 prop이 4개 이상인 경우의 형태를 통일시키는것 보다는, 이미 객체화가 되어있는 경우를 제외하고는 prop을 컴포넌트 내부에서 정의해주는게 더 가독성이 좋을것 같다는 생각이 들었는데 이에대한 건휘님의 의견이 궁금합니다!

해당의견에 전적으로 동의합니다! 통일성을 위해서 prop이 4개 이상인 경우에 spread연산자를 활용하였는데, map 내부와 같이 이미 객체화된 데이터를 제외하고는 직접 props을 전달하는 방식이 props 이름을 변경하거나 새로운 props를 추가할 때도 더 명확하고 실수가 적을 것으로 판단됩니다!! 제가 놓쳤던 부분이었네요. 피드백 감사합니다! 반영하겠습니다.
author_association: COLLABORATOR
user: login: github-actions[bot]
created_at: 2025-04-14T16:00:40Z
body: ✅ 빌드가 성공적으로 완료되었습니다 🛠️
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-14T16:01:30Z
body: ✅ Storybook 배포 완료! 🔗 https://67e4fd1fd2c7078dceec04a4-mihvhvtara.chromatic.com/
<!-- thollander/actions-comment-pull-request "364-storybook" -->
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-21T05:38:24Z
body: ✅ 빌드가 성공적으로 완료되었습니다 🛠️
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-21T05:43:41Z
body: ✅ 빌드가 성공적으로 완료되었습니다 🛠️
author_association: NONE