feat: 가게 세부 페이지 찜버튼 추가

src/apis/Login.ts

@@ -117,6 +117,7 @@ const signInWithKakao = async (): Promise<SessionType | null> => {
       console.log('카카오 로그인 성공:', response);
 
       return {
+        //TODO: JWT 토큰으로 대체 필요
         accessToken: token.accessToken,
         refreshToken: token.refreshToken,
         accessTokenExpiresAt: new Date(token.accessTokenExpiresAt).getTime(),

src/apis/MarketDetail.ts

@@ -3,6 +3,7 @@ import {MarketType} from '@/types/Market';
 const dummyMarketDetail: MarketType = {
   id: 1,
   name: '반찬가게1',
+  isLike: false,
   pickupStartAt: 1609718400000,
   pickupEndAt: 1727622000000,
   products: [

src/components/common/SubscribeIcon.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+import Icon from 'react-native-vector-icons/AntDesign';
+import {CommonResponseType} from '@/types/CommonResponseType';
+import apiClient from '@/apis/ApiClient';
+
+type SubscribeIconProps = {
+  marketIsLiked: boolean;
+  marketId?: number;
+  handleSubscribe: () => void;
+};
+
+const SubscribeIcon = ({
+  marketIsLiked,
+  marketId,
+  handleSubscribe,
+}: SubscribeIconProps) => {
+  const handleLikePress = async () => {
+    try {
+      let res;
+      if (marketIsLiked) {
+        console.log('DEL');
+        res = await apiClient.del<CommonResponseType | null>(
+          `/market/${marketId}/like`,
+        );
+      } else {
+        console.log('POST');
+        res = await apiClient.post<CommonResponseType | null>(
+          `/market/${marketId}/like`,
+        );
+      }
+      handleSubscribe();
+      return res;
+    } catch (error) {
+      console.error('Error subscribe', error);
+      return null;
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handleLikePress}>
+      <Icon name={marketIsLiked ? 'heart' : 'hearto'} size={24} />
+    </TouchableOpacity>
+  );
+};
+
+export default SubscribeIcon;

src/screens/MarketDetailScreen/MarketDetailPage.tsx

@@ -16,6 +16,7 @@ import {ProductType} from '@/types/ProductType';
 import {useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {RootStackParamList} from '@/types/StackNavigationType';
+import SubscribeIcon from '@/components/common/SubscribeIcon';
 
 type CartItem = {
   productId: number;
@@ -29,6 +30,8 @@ const MarketDetailPage = ({
   pickupEndAt,
   address,
   products,
+  isLike,
+  marketId,
 }: Omit<MarketType, 'id' | 'images'>) => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [cart, setCart] = useState<CartItem[]>([]);
@@ -42,6 +45,7 @@ const MarketDetailPage = ({
     {},
   );
   const [tagWidths, setTagWidths] = useState<{[key: string]: number}>({});
+  const [marketisLiked, setMarketisLiked] = useState<boolean>(isLike);
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const handleCountChange = (productId: number, newCount: number) => {
     handleCart(
@@ -209,6 +213,9 @@ const MarketDetailPage = ({
     scrollToSection(tag);
   };
 
+  const handleSubscribe = () => {
+    setMarketisLiked(prevState => !prevState);
+  };
   const navigatePage = () => {
     if (cart.length === 0) {
       Alert.alert('장바구니가 비어 있습니다.');
@@ -253,6 +260,13 @@ const MarketDetailPage = ({
         )} ~ ${format(pickupEndAt, 'HH시 mm분')}`}</S.MarketSideInfo>
         <S.MarketSideInfo>{address}</S.MarketSideInfo>
       </S.MarketSideInfoWrapper>
+      <View>
+        <SubscribeIcon
+          marketIsLiked={marketisLiked}
+          marketId={marketId}
+          handleSubscribe={handleSubscribe}
+        />
+      </View>
       <S.SideTagBarScrollView
         horizontal
         showsHorizontalScrollIndicator={false}

src/screens/MarketDetailScreen/index.tsx

@@ -41,10 +41,12 @@ const MarketDetailScreen = ({navigation, route}: Props) => {
   return (
     <MarketDetailPage
       name={marketDetail.name}
+      isLike={marketDetail.isLike}
       pickupStartAt={marketDetail.pickupStartAt}
       pickupEndAt={marketDetail.pickupEndAt}
       address={marketDetail.address}
       products={marketDetail.products}
+      marketId={route.params.marketId}
     />
   );
 };

src/types/CommonResponseType.ts

@@ -0,0 +1,4 @@
+export type CommonResponseType = {
+  code: number;
+  message: string;
+};

src/types/Market.ts

@@ -8,4 +8,7 @@ export type MarketType = {
   address: string;
   products: ProductType[];
   images: string[];
+  isLike: boolean;
+  // TODO: 논의 필요
+  marketId?: number;
 };