From 112ab977e3eb556661573a090457cf31ed72c104 Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Sun, 22 Sep 2024 20:05:17 +0900
Subject: [PATCH 1/4] #115 feat : add click event to Service main page and
 declare types

---
 src/components/Home/Market/Service.tsx | 119 ++++++++++++++++++-------
 1 file changed, 86 insertions(+), 33 deletions(-)

diff --git a/src/components/Home/Market/Service.tsx b/src/components/Home/Market/Service.tsx
index c24597e..2bf19ad 100644
--- a/src/components/Home/Market/Service.tsx
+++ b/src/components/Home/Market/Service.tsx
@@ -1,7 +1,22 @@
 import React, { useState } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet, Dimensions } from 'react-native';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Dimensions,
+} from 'react-native';
 import styled from 'styled-components/native';
-import { Body16M, Subtitle16M, Title20B, Filter11R, Subtitle18B, Body14R } from '../../../styles/GlobalText';
+import {
+  Body16M,
+  Subtitle16M,
+  Title20B,
+  Filter11R,
+  Subtitle18B,
+  Body14R,
+} from '../../../styles/GlobalText';
 import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
 import Arrow from '../../../assets/common/Arrow.svg';
 import { getStatusBarHeight } from 'react-native-safearea-height';
@@ -11,12 +26,13 @@ import DetailModal from '../Market/GoodsDetailOptionsModal';
 import ServiceImage1 from '../../../assets/common/ServiceImage1.svg';
 import ServiceImage2 from '../../../assets/common/ServiceImage2.svg';
 import ServiceImage3 from '../../../assets/common/ServiceImage3.svg';
-
+import { useNavigation } from '@react-navigation/native'; // FIXME: 나중에 함수 props로 받아오도록 수정
+import { StackNavigationProp } from '@react-navigation/stack';
 
 const statusBarHeight = getStatusBarHeight(true);
 const { width } = Dimensions.get('window');
 
-const ServiceMarket = ({ navigation }) => {
+const ServiceMarket = (/*{ navigation }*/) => {
   const [form, setForm] = useState({
     mail: '',
     domain: '',
@@ -25,9 +41,9 @@ const ServiceMarket = ({ navigation }) => {
   });
 
   const [modalOpen, setModalOpen] = useState(false);
-  const [selectedStyles, setSelectedStyles] = useState([]);
+  const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState('추천순');
+  const [selectedOption, setSelectedOption] = useState<string>('추천순');
 
   const isStyleSelected = selectedStyles.length > 0;
 
@@ -35,55 +51,90 @@ const ServiceMarket = ({ navigation }) => {
     setDropdownOpen(!dropdownOpen);
   };
 
-  const selectOption = (option) => {
+  const selectOption = ({ option }: { option: string }) => {
     setSelectedOption(option);
     setDropdownOpen(false);
   };
 
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <Title20B style={{ marginTop: 15, marginHorizontal: 15 }}>지금 주목해야 할 업사이클링 서비스</Title20B>
-      <Filter11R style={{ marginBottom: 15, marginHorizontal: 15 }}>안 입는 옷을 장마 기간에 필요한 물품으로</Filter11R>
+      <Title20B style={{ marginTop: 15, marginHorizontal: 15 }}>
+        지금 주목해야 할 업사이클링 서비스
+      </Title20B>
+      <Filter11R style={{ marginBottom: 15, marginHorizontal: 15 }}>
+        안 입는 옷을 장마 기간에 필요한 물품으로
+      </Filter11R>
 
       <View style={{ marginTop: 10 }} />
       <DetailModal
         open={modalOpen}
         setOpen={setModalOpen}
         value={form.region}
-        setValue={(text) => setForm((prev) => ({ ...prev, region: text }))}
+        setValue={text => setForm(prev => ({ ...prev, region: text }))}
         selectedStyles={selectedStyles}
         setSelectedStyles={setSelectedStyles}
       />
 
-
-
       <View style={{ backgroundColor: LIGHTGRAY }}>
-        <ServiceCard name="하느리퐁퐁" price="20,000원 ~ " tag="빈티지" image={ServiceImage1} 
-        title = "청바지 에코백 만들어 드립니다" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
-        <ServiceCard name="똥구르리리" price="20,000원 ~ " tag="미니멀" image={ServiceImage2}
-        title = "커스텀 짐색" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
-        <ServiceCard name="훌라훌라맨" price="20,000원 ~ " tag="빈티지" image={ServiceImage3}
-        title = "청바지 에코백 만들어 드립니다" text = "안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"/>
+        <ServiceCard
+          name="하느리퐁퐁"
+          price="20,000원 ~ "
+          tag="빈티지"
+          image={ServiceImage1}
+          title="청바지 에코백 만들어 드립니다"
+          text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
+        />
+        <ServiceCard
+          name="똥구르리리"
+          price="20,000원 ~ "
+          tag="미니멀"
+          image={ServiceImage2}
+          title="커스텀 짐색"
+          text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
+        />
+        <ServiceCard
+          name="훌라훌라맨"
+          price="20,000원 ~ "
+          tag="빈티지"
+          image={ServiceImage3}
+          title="청바지 에코백 만들어 드립니다"
+          text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
+        />
       </View>
     </ScrollView>
   );
 };
 
-const ServiceCard = ({ name, price, tag, image: ImageComponent, title, text}) => {
+const ServiceCard = ({
+  name,
+  price,
+  tag,
+  image: ImageComponent,
+  title,
+  text,
+}) => {
   const [like, setLike] = useState(false);
+  const navigation = useNavigation(); // FIXME: 나중에 함수 props로 받아오도록 수정
 
   return (
-    <View style={styles.cardContainer}>
-    <ImageComponent />
-    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
-      <Subtitle18B>{title}</Subtitle18B>
-      <HeartButton like={like} onPress={() => setLike(!like)} />
-    </View>
-    <Body14R>
-      {text}
-    </Body14R>
-  </View>
-  
+    <TouchableOpacity
+      style={styles.cardContainer}
+      onPress={() => {
+        // 각 리폼러 프로필 페이지로 이동하는 event 걸기
+      }}>
+      <ImageComponent />
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: 10,
+        }}>
+        <Subtitle18B>{title}</Subtitle18B>
+        <HeartButton like={like} onPress={() => setLike(!like)} />
+      </View>
+      <Body14R>{text}</Body14R>
+    </TouchableOpacity>
   );
 };
 
@@ -115,11 +166,13 @@ const CategoryButton = styled.TouchableOpacity`
   border-radius: 12px;
   border-width: 1px;
   border-color: #612fef;
-  background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
+  background-color: ${({ props }: { props: any }) =>
+    props.pressed ? '#612FEF' : '#FFFFFF'};
 `;
 
 const CategoryButtonText = styled.Text`
-  color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
+  color: ${({ props }: { props: any }) =>
+    props.pressed ? '#FFFFFF' : '#222222'};
 `;
 
 const CategoryBox = styled.View`
@@ -188,7 +241,7 @@ const styles = StyleSheet.create({
     borderColor: LIGHTGRAY,
     flex: 1,
     borderRadius: 10,
-    marginHorizontal: 0, 
+    marginHorizontal: 0,
   },
   avatar: {
     width: 50,

From 9887258bbf4ad39d006e2053cdbd0764f59d950e Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Sun, 22 Sep 2024 20:20:48 +0900
Subject: [PATCH 2/4] #115 feat : add ReformerProfilePage

---
 .../Auth/Reformer/ReformerProfilePage.tsx     |  5 ++
 src/pages/Home.tsx                            | 52 ++++++++++++++-----
 2 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Auth/Reformer/ReformerProfilePage.tsx

diff --git a/src/components/Auth/Reformer/ReformerProfilePage.tsx b/src/components/Auth/Reformer/ReformerProfilePage.tsx
new file mode 100644
index 0000000..450ed8a
--- /dev/null
+++ b/src/components/Auth/Reformer/ReformerProfilePage.tsx
@@ -0,0 +1,5 @@
+const ReformerProfilePage: React.FC = () => {
+  return <></>;
+};
+
+export default ReformerProfilePage;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9179833..2782095 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,19 @@
-import React, { Fragment, useEffect, useState, useRef, forwardRef } from 'react';
+import React, {
+  Fragment,
+  useEffect,
+  useState,
+  useRef,
+  forwardRef,
+} from 'react';
 
-import { SafeAreaView, Text, View, StyleSheet, Alert, FlatList } from 'react-native';
+import {
+  SafeAreaView,
+  Text,
+  View,
+  StyleSheet,
+  Alert,
+  FlatList,
+} from 'react-native';
 import styled from 'styled-components/native';
 import { Filter14M } from '../styles/GlobalText';
 import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
@@ -44,10 +57,13 @@ import ReviewPage from '../components/Home/Market/ReviewPage';
 import ScrollTopButton from '../common/ScrollTopButton';
 import Footer from '../common/Footer';
 import { BLACK, White } from '../styles/GlobalColor';
-import InfoPage from '../components/Home/Market/InfoPage'; import OrderPage from './OrderPage';
+import InfoPage from '../components/Home/Market/InfoPage';
+import OrderPage from './OrderPage';
 import ReformerMarket from '../components/Home/Market/ReformerMarket';
 import Service from '../components/Home/Market/Service';
 import { PhotoType } from '../hooks/useImagePicker';
+import ReformerProfilePage from '../components/Auth/Reformer/ReformerProfilePage';
+
 export type HomeStackParams = {
   Home: undefined;
   Market: undefined;
@@ -59,11 +75,11 @@ export type HomeStackParams = {
   QuotationForm: undefined;
   QuotationPage: undefined;
   SentQuotation: undefined;
-  ServiceRegistrationPage: { inputText?: string, detailphoto?: PhotoType[] };
+  ServiceRegistrationPage: { inputText?: string; detailphoto?: PhotoType[] };
   GoodsRegistrationPage: undefined;
   TempStorage: undefined;
   TempStorageEdit: undefined;
-  WriteDetailPage: { inputText: string, detailphoto?: PhotoType[] };
+  WriteDetailPage: { inputText: string; detailphoto?: PhotoType[] };
   AddPortfolio: undefined;
   InputInfo: undefined;
   QuotationConfirm: undefined;
@@ -71,7 +87,7 @@ export type HomeStackParams = {
   SentRejection: undefined;
   WriteReviewPage: undefined;
   ReformerMarket: undefined;
-
+  ReformerProfilePage: undefined;
   TestComponents: undefined;
 };
 
@@ -126,6 +142,10 @@ const HomeScreen = ({
       <HomeStack.Screen name="Rejection" component={Rejection} />
       <HomeStack.Screen name="SentRejection" component={SentRejection} />
       <HomeStack.Screen name="WriteReviewPage" component={WriteReviewPage} />
+      <HomeStack.Screen
+        name="ReformerProfilePage"
+        component={ReformerProfilePage}
+      />
       <HomeStack.Screen name="TestComponents" component={ComponentsTest} />
       <HomeStack.Screen name="ReformerMarket" component={ReformerMarket} />
     </HomeStack.Navigator>
@@ -135,7 +155,9 @@ const HomeScreen = ({
 const HomeMainScreen = ({
   navigation,
 }: StackScreenProps<HomeStackParams, 'Home'>) => {
-  const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>('Goods');
+  const [selectedTab, setSelectedTab] = useState<'Goods' | 'Market' | 'temp'>(
+    'Goods',
+  );
   const ServicePageRef = useRef<ScrollView>(null);
   const handlePopupButtonPress = () => {
     Alert.alert(
@@ -162,7 +184,7 @@ const HomeMainScreen = ({
   const handleTabChange = (tab: 'Goods' | 'Market' | 'temp') => {
     setSelectedTab(tab);
   };
-  const items = [...new Array(6).keys()]
+  const items = [...new Array(6).keys()];
   const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
     return arr.reduce((result, item, index) => {
       if (index % pairSize === 0) {
@@ -178,19 +200,17 @@ const HomeMainScreen = ({
     <Fragment>
       <SafeAreaView style={{ flex: 0, backgroundColor: PURPLE }} />
       <SafeAreaView style={{ flex: 1 }}>
-        <CustomHeader onSearch={() => { }} onTabChange={handleTabChange} />
+        <CustomHeader onSearch={() => {}} onTabChange={handleTabChange} />
         <BottomSheetModalProvider>
           <View>
             <HomeTabView
-              onSearch={() => { }}
+              onSearch={() => {}}
               selectedTab={selectedTab}
               onTabChange={handleTabChange}
             />
           </View>
 
-          {selectedTab === 'Goods' && (
-            <Service navigation={navigation} />
-          )}
+          {selectedTab === 'Goods' && <Service navigation={navigation} />}
           {selectedTab === 'Market' && (
             <ReformerMarket navigation={navigation} />
           )}
@@ -232,6 +252,10 @@ const HomeMainScreen = ({
               <Button onPress={() => navigation.navigate('WriteReviewPage')}>
                 <Text>후기 작성 페이지</Text>
               </Button>
+              <Button
+                onPress={() => navigation.navigate('ReformerProfilePage')}>
+                <Text>리폼러 프로필 페이지</Text>
+              </Button>
               <Button onPress={() => navigation.navigate('TestComponents')}>
                 <Text>공통 컴포넌트 테스트</Text>
               </Button>
@@ -264,6 +288,6 @@ const LabelButton = styled.TouchableOpacity`
   display: flex;
   flex-direction: row;
   padding: 16px;
-`
+`;
 
 export default HomeScreen;

From dc1e14679fded4f622abf7d815571e8c5a088e05 Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Sun, 22 Sep 2024 20:42:39 +0900
Subject: [PATCH 3/4] fix minor bugs in FileBox

---
 src/common/FileBox.tsx                       | 6 +++---
 src/components/Auth/Reformer/CareerModal.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/FileBox.tsx b/src/common/FileBox.tsx
index 61e1316..481a30f 100644
--- a/src/common/FileBox.tsx
+++ b/src/common/FileBox.tsx
@@ -16,7 +16,7 @@ import { Files } from '../types/UserTypes';
 
 export interface FileBoxProps {
   data: Files;
-  setData: (r: Files) => void;
+  setData?: (r: Files) => void;
   max: number;
 }
 
@@ -37,7 +37,7 @@ const SelectView = styled.View`
 const FileBox = ({ data, setData, max }: FileBoxProps) => {
   const handleFileDelete = (index: number) => {
     const newData = data.filter((v, i) => i !== index);
-    setData(newData);
+    setData?.(newData);
   };
 
   return (
@@ -46,7 +46,7 @@ const FileBox = ({ data, setData, max }: FileBoxProps) => {
         <FilePicker
           callback={r => {
             console.log(r);
-            setData([{ name: r.name ? r.name : 'noname', uri: r.uri }]);
+            setData?.([{ name: r.name ? r.name : 'noname', uri: r.uri }]);
           }}
           disabled={data.length >= max}
           style={styles.BoxView}>
diff --git a/src/components/Auth/Reformer/CareerModal.tsx b/src/components/Auth/Reformer/CareerModal.tsx
index c05ec6d..ee45cb2 100644
--- a/src/components/Auth/Reformer/CareerModal.tsx
+++ b/src/components/Auth/Reformer/CareerModal.tsx
@@ -147,7 +147,7 @@ export default function CareerModal({
           setValue={v => {
             handleContentChange(v, 'status');
           }}
-          placeholder='예시) 재학, 휴학, 졸업, 수료'
+          placeholder="예시) 재학, 휴학, 졸업, 수료"
         />
       </View>
     );
@@ -169,7 +169,7 @@ export default function CareerModal({
           setValue={v => {
             handleContentChange(v, 'team');
           }}
-          placeholder='예시) 소품디자인팀 인턴'
+          placeholder="예시) 소품디자인팀 인턴"
         />
         <InputView
           title="근무기간"
@@ -177,7 +177,7 @@ export default function CareerModal({
           setValue={v => {
             handleContentChange(v, 'period');
           }}
-          placeholder='예시) 6개월, 3년'
+          placeholder="예시) 6개월, 3년"
         />
       </View>
     );
@@ -220,7 +220,7 @@ export default function CareerModal({
           setValue={v => {
             handleContentChange(v, 'content');
           }}
-          placeholder='예시) 최우수상'
+          placeholder="예시) 최우수상"
         />
       </View>
     );

From 9ce21097428aa884e6e5e94948e158a48ccbb82d Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Sun, 22 Sep 2024 20:58:57 +0900
Subject: [PATCH 4/4] #116 fix : fix minor bugs by specifying types, etc

---
 src/components/Home/HomeMain.tsx              | 85 ++++++++++---------
 .../Home/Market/GoodsDetailOptionsModal.tsx   | 39 ++++-----
 src/components/Home/Market/ReformerMarket.tsx | 63 +++++++++-----
 src/components/Home/Market/Service.tsx        | 13 +--
 4 files changed, 106 insertions(+), 94 deletions(-)

diff --git a/src/components/Home/HomeMain.tsx b/src/components/Home/HomeMain.tsx
index 75fab39..2e3df8a 100644
--- a/src/components/Home/HomeMain.tsx
+++ b/src/components/Home/HomeMain.tsx
@@ -1,25 +1,9 @@
-import { useCallback, useMemo, useRef, useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Filter14M } from '../../styles/GlobalText';
-import {
-  Text,
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Dimensions,
-  ScrollView,
-  SafeAreaView,
-} from 'react-native';
-import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
-import CustomHeader from '../../common/CustomHeader';
-import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
-import { StackScreenProps } from '@react-navigation/stack';
-import { HomeStackParams } from '../../pages/Home';
-import TabViewSpot from '../../assets/common/TabViewSpot.svg';
+import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import CategoryDownButton from '../../assets/common/CategoryDownButton.svg';
 import styled from 'styled-components/native';
-import { PURPLE } from '../../styles/GlobalColor';
 import DetailModal from './Market/GoodsDetailOptionsModal';
-import CategoryDropDown from './Market/SortingOptionModal';
 import DropDown from '../../assets/common/DropDown.svg';
 
 const HomeTabViewBox = styled.View`
@@ -61,11 +45,15 @@ const CategoryButton = styled.TouchableOpacity<{ pressed: boolean }>`
   border-radius: 12px;
   border-width: 1px;
   border-color: #612fef;
-  background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
+  background-color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#612FEF' : '#FFFFFF')};
 `;
 
 const CategoryButtonText = styled.Text<{ pressed: boolean }>`
-  color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
+  color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#FFFFFF' : '#222222')};
 `;
 
 interface SignupProps {
@@ -73,7 +61,7 @@ interface SignupProps {
   domain: string;
   password: string;
   region: string;
-}// 의미 없음
+} // 의미 없음
 
 interface HomeTabViewProps {
   onSearch: () => void;
@@ -127,29 +115,42 @@ const HomeTabView = ({
     <>
       <CategoryBox>
         <View>
-          <CategoryButton pressed={isStyleSelected} onPress={() => setModalOpen(true)}>
+          <CategoryButton
+            pressed={isStyleSelected}
+            onPress={() => setModalOpen(true)}>
             <CategoryButtonText pressed={isStyleSelected}>
               스타일
             </CategoryButtonText>
             <CategoryDownButton />
           </CategoryButton>
         </View>
-        <View style={{ flex: 1 }}>
-        </View>
+        <View style={{ flex: 1 }}></View>
         <View style={styles.dropdownContainer}>
-          <TouchableOpacity onPress={toggleDropdown} style={styles.dropdownButton}>
+          <TouchableOpacity
+            onPress={toggleDropdown}
+            style={styles.dropdownButton}>
             <Text style={styles.dropdownButtonText}>{selectedOption}</Text>
-            <DropDown/>
+            <DropDown />
           </TouchableOpacity>
           {dropdownOpen && (
             <View style={styles.dropdownMenu}>
-              {['추천순', '인기순', '가격순', '최신순', '판매순'].map(option => (
-                <TouchableOpacity key={option} onPress={() => selectOption(option)} style={styles.dropdownOption}>
-                  <Text style={selectedOption === option ? styles.dropdownSelectedOptionText : styles.dropdownOptionText}>
-                    {option}
-                  </Text>
-                </TouchableOpacity>
-              ))}
+              {['추천순', '인기순', '가격순', '최신순', '판매순'].map(
+                option => (
+                  <TouchableOpacity
+                    key={option}
+                    onPress={() => selectOption(option)}
+                    style={styles.dropdownOption}>
+                    <Text
+                      style={
+                        selectedOption === option
+                          ? styles.dropdownSelectedOptionText
+                          : styles.dropdownOptionText
+                      }>
+                      {option}
+                    </Text>
+                  </TouchableOpacity>
+                ),
+              )}
             </View>
           )}
         </View>
@@ -196,8 +197,8 @@ const styles = StyleSheet.create({
   },
   dropdownButtonText: {
     fontSize: 14,
-    fontStyle: "normal",
-    fontWeight: "400",
+    fontStyle: 'normal',
+    fontWeight: '400',
     lineHeight: 24,
     marginRight: 5,
     color: '#000',
@@ -213,24 +214,24 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     zIndex: 1000,
     width: 100,
-    elevation: 5, 
+    elevation: 5,
   },
   dropdownOption: {
     padding: 10,
   },
   dropdownSelectedOptionText: {
-    fontFamily: "Pretendard Variable",
+    fontFamily: 'Pretendard Variable',
     fontSize: 14,
-    fontStyle: "normal",
-    fontWeight: "400",
+    fontStyle: 'normal',
+    fontWeight: '400',
     lineHeight: 24,
     color: '#000',
   },
   dropdownOptionText: {
-    fontFamily: "Pretendard Variable",
+    fontFamily: 'Pretendard Variable',
     fontSize: 14,
-    fontStyle: "normal",
-    fontWeight: "600",
+    fontStyle: 'normal',
+    fontWeight: '600',
     lineHeight: 16,
   },
 });
diff --git a/src/components/Home/Market/GoodsDetailOptionsModal.tsx b/src/components/Home/Market/GoodsDetailOptionsModal.tsx
index 482c14f..7710c84 100644
--- a/src/components/Home/Market/GoodsDetailOptionsModal.tsx
+++ b/src/components/Home/Market/GoodsDetailOptionsModal.tsx
@@ -7,15 +7,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+import { View, StyleSheet, Dimensions } from 'react-native';
 import styled from 'styled-components/native';
-import {
-  BottomSheetModal,
-  BottomSheetBackdrop,
-} from '@gorhom/bottom-sheet';
-import { Body16M, Subtitle16B, Filter11B, Filter14B } from '../../../styles/GlobalText';
-import Select from '../../../assets/common/Select.svg';
-import Unselect from '../../../assets/common/Unselect.svg';
+import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { Subtitle16B, Filter11B } from '../../../styles/GlobalText';
 import Dot from '../../../assets/common/Dot.svg';
 import { PURPLE } from '../../../styles/GlobalColor';
 
@@ -39,12 +34,16 @@ const StyleButton = styled.TouchableOpacity<{ pressed: boolean }>`
   align-items: center;
   gap: 10px;
   border-radius: 12px;
-  border: 1px solid #612FEF;
-  background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
+  border: 1px solid #612fef;
+  background-color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#612FEF' : '#FFFFFF')};
 `;
 
 const StyleButtonText = styled.Text<{ pressed: boolean }>`
-  color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
+  color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#FFFFFF' : '#222222')};
 `;
 
 interface ModalProps {
@@ -62,7 +61,7 @@ export default function DetailModal({
   value,
   setValue,
   selectedStyles,
-  setSelectedStyles
+  setSelectedStyles,
 }: ModalProps) {
   // ref
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -122,8 +121,8 @@ export default function DetailModal({
   };
 
   const toggleStyleSelection = (style: string) => {
-    setSelectedStyles((prev) =>
-      prev.includes(style) ? prev.filter((s) => s !== style) : [...prev, style]
+    setSelectedStyles(prev =>
+      prev.includes(style) ? prev.filter(s => s !== style) : [...prev, style],
     );
   };
 
@@ -138,8 +137,7 @@ export default function DetailModal({
       snapPoints={snapPoints}
       backdropComponent={renderBackdrop}
       onChange={handleSheetChanges}
-      containerStyle={styles.modalContainer}
-    >
+      containerStyle={styles.modalContainer}>
       <View style={styles.selectItem}>
         <Subtitle16B>스타일</Subtitle16B>
         <View style={styles.rightSection}>
@@ -148,12 +146,11 @@ export default function DetailModal({
         </View>
       </View>
       <StyleBox>
-        {styleOptions.map((style) => (
+        {styleOptions.map(style => (
           <StyleButton
             key={style}
             pressed={selectedStyles.includes(style)}
-            onPress={() => toggleStyleSelection(style)}
-          >
+            onPress={() => toggleStyleSelection(style)}>
             <StyleButtonText pressed={selectedStyles.includes(style)}>
               {style}
             </StyleButtonText>
@@ -232,7 +229,7 @@ const styles = StyleSheet.create({
   modalContainer: {
     zIndex: 1001,
     flex: 1,
-    justifyContent: 'flex-end', 
-    margin: 0, 
+    justifyContent: 'flex-end',
+    margin: 0,
   },
 });
diff --git a/src/components/Home/Market/ReformerMarket.tsx b/src/components/Home/Market/ReformerMarket.tsx
index 8cab5a3..951ff54 100644
--- a/src/components/Home/Market/ReformerMarket.tsx
+++ b/src/components/Home/Market/ReformerMarket.tsx
@@ -1,18 +1,24 @@
 import React, { useState } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet, Dimensions } from 'react-native';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Dimensions,
+} from 'react-native';
 import styled from 'styled-components/native';
 import { Body16M, Subtitle16M } from '../../../styles/GlobalText';
 import { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
-import Arrow from '../../../assets/common/Arrow.svg';
 import { getStatusBarHeight } from 'react-native-safearea-height';
 import HeartButton from '../../../common/HeartButton';
-import CategoryDownButton from '../../../assets/common/CategoryDownButton.svg';
 import DetailModal from '../Market/GoodsDetailOptionsModal';
 
 const statusBarHeight = getStatusBarHeight(true);
 const { width } = Dimensions.get('window');
 
-const ReformerMarket = ({ navigation }) => {
+const ReformerMarket = (/*{ navigation }*/) => {
   const [form, setForm] = useState({
     mail: '',
     domain: '',
@@ -20,10 +26,10 @@ const ReformerMarket = ({ navigation }) => {
     region: '',
   });
 
-  const [modalOpen, setModalOpen] = useState(false);
-  const [selectedStyles, setSelectedStyles] = useState([]);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState('추천순');
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const [selectedOption, setSelectedOption] = useState<string>('추천순');
 
   const isStyleSelected = selectedStyles.length > 0;
 
@@ -31,14 +37,14 @@ const ReformerMarket = ({ navigation }) => {
     setDropdownOpen(!dropdownOpen);
   };
 
-  const selectOption = (option) => {
+  const selectOption = ({ option }: { option: string }) => {
     setSelectedOption(option);
     setDropdownOpen(false);
   };
 
   return (
     <ScrollView>
-      <Subtitle16M style={{ marginTop: 15 }}>   내가 좋아한 리폼러</Subtitle16M>
+      <Subtitle16M style={{ marginTop: 15 }}> 내가 좋아한 리폼러</Subtitle16M>
 
       <FilterSection>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -52,15 +58,11 @@ const ReformerMarket = ({ navigation }) => {
 
       <View style={{ marginTop: 10 }} />
 
-
-
-
-
       <DetailModal
         open={modalOpen}
         setOpen={setModalOpen}
         value={form.region}
-        setValue={(text) => setForm((prev) => ({ ...prev, region: text }))}
+        setValue={text => setForm(prev => ({ ...prev, region: text }))}
         selectedStyles={selectedStyles}
         setSelectedStyles={setSelectedStyles}
       />
@@ -77,13 +79,24 @@ const ReformerMarket = ({ navigation }) => {
   );
 };
 
-const ReformerCard = ({ name, rating, tag }) => {
-  const [like, setLike] = useState(false);
+const ReformerCard = ({
+  name,
+  rating,
+  tag,
+}: {
+  name: string;
+  rating: string;
+  tag: string;
+}) => {
+  const [like, setLike] = useState<boolean>(false);
 
   return (
     <View style={styles.cardContainer}>
       <View style={styles.reformerInfo}>
-        <Image style={styles.avatar} source={{ uri: 'https://via.placeholder.com/50' }} />
+        <Image
+          style={styles.avatar}
+          source={{ uri: 'https://via.placeholder.com/50' }}
+        />
         <View>
           <Subtitle16M>{name}</Subtitle16M>
           <Body16M>{rating}</Body16M>
@@ -98,7 +111,11 @@ const ReformerCard = ({ name, rating, tag }) => {
       </View>
       <View style={styles.portfolio}>
         {[...Array(4)].map((_, idx) => (
-          <Image key={idx} style={styles.portfolioImage} source={{ uri: 'https://via.placeholder.com/70' }} />
+          <Image
+            key={idx}
+            style={styles.portfolioImage}
+            source={{ uri: 'https://via.placeholder.com/70' }}
+          />
         ))}
       </View>
     </View>
@@ -129,11 +146,15 @@ const CategoryButton = styled.TouchableOpacity`
   border-radius: 12px;
   border-width: 1px;
   border-color: #612fef;
-  background-color: ${(props) => (props.pressed ? '#612FEF' : '#FFFFFF')};
+  background-color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#612FEF' : '#FFFFFF')};
 `;
 
 const CategoryButtonText = styled.Text`
-  color: ${(props) => (props.pressed ? '#FFFFFF' : '#222222')};
+  color: ${(
+    { props }: { props: any }, // TODO: 나중에 props의 type specify 필요
+  ) => (props.pressed ? '#FFFFFF' : '#222222')};
 `;
 
 const CategoryBox = styled.View`
diff --git a/src/components/Home/Market/Service.tsx b/src/components/Home/Market/Service.tsx
index 2bf19ad..9d8cd0e 100644
--- a/src/components/Home/Market/Service.tsx
+++ b/src/components/Home/Market/Service.tsx
@@ -1,33 +1,26 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   View,
-  Text,
   ScrollView,
   TouchableOpacity,
-  Image,
   StyleSheet,
   Dimensions,
 } from 'react-native';
 import styled from 'styled-components/native';
 import {
-  Body16M,
-  Subtitle16M,
   Title20B,
   Filter11R,
   Subtitle18B,
   Body14R,
 } from '../../../styles/GlobalText';
 import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
-import Arrow from '../../../assets/common/Arrow.svg';
 import { getStatusBarHeight } from 'react-native-safearea-height';
 import HeartButton from '../../../common/HeartButton';
-import CategoryDownButton from '../../../assets/common/CategoryDownButton.svg';
 import DetailModal from '../Market/GoodsDetailOptionsModal';
 import ServiceImage1 from '../../../assets/common/ServiceImage1.svg';
 import ServiceImage2 from '../../../assets/common/ServiceImage2.svg';
 import ServiceImage3 from '../../../assets/common/ServiceImage3.svg';
 import { useNavigation } from '@react-navigation/native'; // FIXME: 나중에 함수 props로 받아오도록 수정
-import { StackNavigationProp } from '@react-navigation/stack';
 
 const statusBarHeight = getStatusBarHeight(true);
 const { width } = Dimensions.get('window');
@@ -40,9 +33,9 @@ const ServiceMarket = (/*{ navigation }*/) => {
     region: '',
   });
 
-  const [modalOpen, setModalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [selectedStyles, setSelectedStyles] = useState<string[]>([]);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   const [selectedOption, setSelectedOption] = useState<string>('추천순');
 
   const isStyleSelected = selectedStyles.length > 0;