Merge branch 'feat/#142/store-page-api' of https://github.com/SOPT-al…

…l/35-APPJAM-WEB-CAKEY into feat/#142/store-page-api

src/apis/likes/index.ts

@@ -0,0 +1,4 @@
+import { usePostStoreLikes } from './usePostStoreLikes';
+import { usePostCakeLikes } from './usePostCakeLikes';
+
+export { usePostStoreLikes, usePostCakeLikes };

src/apis/likes/usePostCakeLikes.ts

@@ -0,0 +1,22 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT } from '@constants';
+
+import { MutateResposneType } from '@types';
+
+const postCakeLikes = async (cakeId: number): Promise<MutateResposneType> => {
+  try {
+    const response = await instance.post(END_POINT.POST_CAKE_LIKES(cakeId));
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+export const usePostCakeLikes = () => {
+  return useMutation({
+    mutationFn: (cakeId: number) => postCakeLikes(cakeId),
+  });
+};

src/apis/likes/usePostStoreLikes.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT } from '@constants';
+
+import { MutateResposneType } from '@types';
+
+const postStoreLikes = async (storeId: number): Promise<MutateResposneType> => {
+  try {
+    const response = await instance.post(END_POINT.POST_STORE_LIKES(storeId));
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const usePostStoreLikes = () => {
+  return useMutation({
+    mutationFn: (storeId: number) => postStoreLikes(storeId),
+  });
+};

src/apis/myPage/index.ts

@@ -0,0 +1,3 @@
+import { useFetchUser } from './useFetchUser';
+
+export { useFetchUser };

src/apis/myPage/useFetchUser.ts

@@ -0,0 +1,26 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT, queryKey } from '@constants';
+
+import { ApiResponseType, UserResponse } from '@types';
+
+const fetchUser = async (): Promise<UserResponse> => {
+  try {
+    const response = await instance.get<ApiResponseType<UserResponse>>(
+      END_POINT.FETCH_USER
+    );
+    return response.data.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useFetchUser = () => {
+  return useSuspenseQuery({
+    queryKey: [queryKey.USER],
+    queryFn: fetchUser,
+  });
+};

src/components/common/IconButton/IconButton.css.ts

@@ -1,4 +1,3 @@
-import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { flexGenerator } from '@styles/generator.css';
@@ -24,29 +23,27 @@ export const buttonStyle = recipe({
         gap: 0,
       },
       like20: {
+        width: '2rem',
         gap: '0.6rem',
       },
       like36: {
         width: '3.6rem',
+        gap: 0,
       },
     },
-    onMap: {
-      true: {
-        width: '4rem',
-        height: '4rem',
-        borderRadius: '50%',
-        backgroundColor: vars.colors.white,
-      },
-      false: {},
-    },
   },
 });
 
-export const countStyle = style([
-  vars.fonts.body08_r_12,
-  {
-    display: 'block',
-    height: '1.4rem',
+export const countStyle = recipe({
+  base: {
     color: vars.colors.gray400,
   },
-]);
+  variants: {
+    buttonType: {
+      save24: [vars.fonts.body08_r_12],
+      save28: [vars.fonts.body07_r_14],
+      like20: [vars.fonts.body08_r_12],
+      like36: [],
+    },
+  },
+});

src/components/common/IconButton/IconButton.tsx

@@ -1,5 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 
+import { usePostCakeLikes, usePostStoreLikes } from '@apis/likes';
+
 import {
   IcFillLikeOff36,
   IcFillLikeOn36,
@@ -16,8 +18,7 @@ export interface IconButtonProps
   buttonType: 'save24' | 'save28' | 'like20' | 'like36';
   isActive?: boolean;
   count?: number;
-  itemId?: number; // storeId | cakeId를 받아서 api 요청에 사용합니다
-  onMap?: boolean;
+  itemId?: number;
 }
 
 const buttonIcon = {
@@ -44,21 +45,29 @@ const IconButton = ({
   isActive,
   count,
   itemId,
-  onMap = false,
 }: IconButtonProps) => {
+  const { mutate: postCakeLikes } = usePostCakeLikes();
+  const { mutate: postStoreLikes } = usePostStoreLikes();
+
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    console.log('iconClick', itemId);
+
+    if (itemId !== undefined) {
+      if (buttonType === 'save24' || buttonType === 'save28') {
+        postStoreLikes(itemId);
+      } else {
+        postCakeLikes(itemId);
+      }
+    }
   };
   return (
-    <button
-      className={buttonStyle({ buttonType, onMap })}
-      onClick={handleButtonClick}
-    >
+    <button className={buttonStyle({ buttonType })} onClick={handleButtonClick}>
       {isActive
         ? buttonIcon[buttonType]?.active
         : buttonIcon[buttonType]?.inactive}
-      {count !== undefined && <span className={countStyle}>{count}</span>}
+      {count !== undefined && (
+        <span className={countStyle({ buttonType })}>{count}</span>
+      )}
     </button>
   );
 };

src/components/common/Image/Image.tsx

@@ -15,7 +15,6 @@ export interface ImageProps extends HTMLAttributes<HTMLDivElement> {
   hasIcon?: boolean;
   isActive?: boolean;
   itemId?: number;
-  onIconClick?: () => void;
 }
 
 const Image = ({
@@ -25,26 +24,14 @@ const Image = ({
   hasIcon = false,
   isActive,
   itemId, // storeId | cakeId를 받아서 IconButton으로 넘겨줍니다
-  onIconClick,
 }: ImageProps) => {
   return (
     <div className={divStyle}>
       {numberLabel && <div className={numberLabelStyle}>{numberLabel}</div>}
       <img src={src} className={imageStyle({ variant })} />
       {hasIcon && (
-        <div
-          className={iconButtonStyle}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (onIconClick) onIconClick();
-          }}
-        >
-          <IconButton
-            buttonType="like36"
-            onMap={false}
-            isActive={isActive}
-            itemId={itemId}
-          />
+        <div className={iconButtonStyle}>
+          <IconButton buttonType="like36" isActive={isActive} itemId={itemId} />
         </div>
       )}
     </div>

src/constants/apis/api.ts

@@ -13,5 +13,8 @@ export const END_POINT = {
   FETCH_STORE_DETAIL_INFO: (storeId: number) =>
     `/api/v1/store/${storeId}/information`,
   FETCH_STORE_LINK: (storeId: number) => `/api/v1/store/kakaoLink/${storeId}`,
+  FETCH_USER: '/api/v1/user',
   FETCH_CAKE_RANK: '/api/v1/cake/rank',
+  POST_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
+  POST_STORE_LIKES: (storeId: number) => `/api/v1/store/likes/${storeId}`,
 } as const;

src/constants/apis/queryKey.ts

@@ -9,4 +9,5 @@ export const queryKey = {
   STORE_COORDINATE_LIST: 'storeCoordinateList',
   STORE_STATIONS: 'storeStations',
   CAKE_RANK: 'cakeRank',
+  USER: 'user',
 } as const;

src/pages/home/page/HomePage/HomePage.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
-
 import { useFetchCakeRank } from '@apis/home';
 
 import { DesignCard } from '@components';
 import { CATEGORY, MainKeyVisual } from '@constants';
 import { useEasyNavigate } from '@hooks';
 import { StoreRankingButton } from '@pages/home/components';
 import CategoryCard from '@pages/home/components/CategoryCard/CategoryCard';
+import { isLoggedIn } from '@utils';
 
 import { IcHomeArrow } from '@svgs';
 
@@ -62,12 +61,13 @@ const storeRankingData = [
   },
 ];
 
-const user = { userName: '박채연' };
-
 const HomePage = () => {
-  const [isLogin] = useState(true);
+  const isLogin = isLoggedIn();
   const { goViewPage } = useEasyNavigate();
   const { data: cakeRankData } = useFetchCakeRank();
+  const user = isLogin
+    ? JSON.parse(localStorage.getItem('user') || '{}')
+    : null;
 
   return (
     <div className={homePageLayout}>

src/pages/myPage/page/Mypage/MyPage.tsx

@@ -1,22 +1,19 @@
+import { useFetchUser } from '@apis/myPage';
+
 import { AuthModal, Modal, TextButton } from '@components';
 import { WHIPEE_CONTACT_FORM } from '@constants';
 import { useEasyNavigate, useModal } from '@hooks';
 import { LetsGoButton, ProfileCard } from '@pages/myPage/components';
+import { isLoggedIn } from '@utils';
 
 import {
   letsGoButtonWrapper,
   loginButton,
   profileCardStyle,
 } from './MyPage.css';
 
-const user = {
-  userId: 1,
-  userName: '쥬먐이',
-  userEmail: '[email protected]',
-};
-
 const MyPage = () => {
-  const isLogin = true; //추후 삭제 후 localStorage.getItem로 수정할 예정
+  const isLogin = isLoggedIn();
 
   const { isModalOpen, openModal, closeModal } = useModal();
 
@@ -26,13 +23,15 @@ const MyPage = () => {
     window.open(WHIPEE_CONTACT_FORM, '_blank');
   };
 
+  const { data: userData } = useFetchUser();
+
   return (
     <>
       <section className={profileCardStyle[isLogin ? 'login' : 'logout']}>
         <ProfileCard
           isLogin={isLogin}
-          userName={user.userName}
-          userEmail={user.userEmail}
+          userName={userData.userName}
+          userEmail={userData.userEmail}
         />
       </section>
 

src/pages/store/components/Banner/Banner.tsx

@@ -42,6 +42,7 @@ const Banner = ({ storeData }: BannerProps) => {
         <IconButton
           buttonType={'save28'}
           isActive={storeData.isLiked}
+          itemId={storeData.storeId}
           count={32}
         />
       </div>

src/pages/store/components/StoreDesign/StoreDesign.tsx

@@ -32,7 +32,12 @@ const StoreDesign = ({ storeId }: StoreDesignProps) => {
             key={design.cakeId}
             onClick={() => handleImageClick(design.imageUrl)}
           >
-            <Image src={design.imageUrl} hasIcon isActive={design.isLiked} />
+            <Image
+              src={design.cakeImageUrl}
+              hasIcon
+              isActive={design.isLiked}
+              itemId={design.cakeId}
+            />
           </li>
         ))}
       </ul>

src/types/apis/commonType.ts

@@ -5,3 +5,8 @@ export interface ApiResponseType<T> {
   message: string;
   data: T;
 }
+
+export interface MutateResposneType {
+  code: number;
+  message: string;
+}

src/types/apis/myPage/index.ts

@@ -0,0 +1,4 @@
+export interface UserResponse {
+  userName: string;
+  userEmail: string;
+}