�feat: 가게 세부 페이지 찜버튼 추가 (#68)

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

* style: 타입 파일 폴더 이동

* fix: api 코드 분리

* fix: tsc error

* fix: tsc error number to string

* fix: 찜 api 통합 대응

* fix: 미사용 더미 삭제

* fix: CommonResponseType.ts 삭제

Author: l-lyun

ios/ClientApp.xcworkspace/xcshareddata/swiftpm/Package.resolved

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

src/apis/Login.ts

@@ -1,6 +1,5 @@
 import {MarketType} from '@/types/Market';
 import apiClient from './ApiClient';
-
 export const getMarketList = async (
   cursorId: number = 0,
   size: number = 10,
@@ -38,3 +37,16 @@ export const getMarket = async (
     return null;
   }
 };
+
+export const updateMarketLike = async (marketId: number): Promise<boolean> => {
+  try {
+    const res = await apiClient.post(`/markets/${marketId}/likes`);
+    if (res) {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Error in updateMarketLike:', error);
+    return false;
+  }
+};

src/apis/Market.ts

@@ -12,8 +12,9 @@ export const getSubscribeList = async (
     const res = await apiClient.get<{
       markets: SubscribeType[];
       hasNext: boolean;
-    } | null>(`/market/like?cursorId=${cursorId}&size=${size}`);
-    console.log(res?.markets);
+    } | null>(`/members/markets/likes`, {
+      params: {cursorId, size},
+    });
     return res;
   } catch (error) {
     console.error('Error Subscribed market list:', error);

src/apis/Subscribe.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+import Icon from 'react-native-vector-icons/AntDesign';
+import {updateMarketLike} from '@/apis';
+
+type SubscribeIconProps = {
+  marketIsLiked: boolean;
+  marketId?: number;
+  handleSubscribe: () => void;
+};
+
+const SubscribeIcon = ({
+  marketIsLiked,
+  marketId,
+  handleSubscribe,
+}: SubscribeIconProps) => {
+  const handleLikePress = async () => {
+    if (marketId !== undefined) {
+      const response = await updateMarketLike(marketId);
+      if (response) {
+        handleSubscribe();
+      }
+    }
+  };
+  return (
+    <TouchableOpacity onPress={handleLikePress}>
+      <Icon name={marketIsLiked ? 'heart' : 'hearto'} size={24} />
+    </TouchableOpacity>
+  );
+};
+
+export default SubscribeIcon;

src/components/common/SubscribeIcon.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';
 import {BottomButton} from '@/components/common';
 type CartItem = {
   productId: number;
@@ -28,7 +29,9 @@ const MarketDetailPage = ({
   pickupEndAt,
   address,
   products,
-}: Omit<MarketType, 'id' | 'images'>) => {
+  hasLike,
+  id,
+}: Omit<MarketType, 'images'>) => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [cart, setCart] = useState<CartItem[]>([]);
   const [selectedTag, setSelectedTag] = useState<string>('추천메뉴');
@@ -41,6 +44,7 @@ const MarketDetailPage = ({
     {},
   );
   const [tagWidths, setTagWidths] = useState<{[key: string]: number}>({});
+  const [marketIsLiked, setMarketIsLiked] = useState<boolean>(hasLike);
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const handleCountChange = (productId: number, newCount: number) => {
     handleCart(
@@ -202,6 +206,9 @@ const MarketDetailPage = ({
     scrollToSection(tag);
   };
 
+  const handleSubscribe = () => {
+    setMarketIsLiked(prevState => !prevState);
+  };
   const navigatePage = () => {
     if (cart.length === 0) {
       Alert.alert('장바구니가 비어 있습니다.');
@@ -245,6 +252,13 @@ const MarketDetailPage = ({
         )} ~ ${format(pickupEndAt, 'HH시 mm분')}`}</S.MarketSideInfo>
         <S.MarketSideInfo>{address}</S.MarketSideInfo>
       </S.MarketSideInfoWrapper>
+      <View>
+        <SubscribeIcon
+          marketIsLiked={marketIsLiked}
+          marketId={id}
+          handleSubscribe={handleSubscribe}
+        />
+      </View>
       <S.SideTagBarScrollView
         horizontal
         showsHorizontalScrollIndicator={false}

src/screens/MarketDetailScreen/MarketDetailPage.tsx

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

src/screens/MarketDetailScreen/index.tsx

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