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] #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,