Merge branch 'develop' into feat/#154/likesCoordinate

src/apis/likes/index.ts

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

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/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 { 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,22 @@ const IconButton = ({
   isActive,
   count,
   itemId,
-  onMap = false,
 }: IconButtonProps) => {
+  const { mutate } = usePostStoreLikes();
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    console.log('iconClick', itemId);
+    if (itemId !== undefined) {
+      mutate(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/constants/apis/api.ts

@@ -9,4 +9,5 @@ export const END_POINT = {
   KAKAO_LOGIN: '/api/v1/user/login',
   FETCH_USER: '/api/v1/user',
   FETCH_CAKE_RANK: '/api/v1/cake/rank',
+  POST_STORE_LIKES: (storeId: number) => `/api/v1/store/likes/${storeId}`,
 } as const;

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/types/apis/commonType.ts

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