Merge pull request #185 from SOPT-all/develop

[DEPLOY] dev to main

src/apis/auth/index.ts

@@ -11,12 +11,16 @@ export const useGetKakaoLogin = () => {
       const userId = response.data.userId;
       const accessToken = response.headers['authorization'].replace('Bearer ', '');
       const refreshToken = response.headers['refreshtoken'];
+      const userNickname = response.data.nickname;
 
-      if (userId) {
-        localStorage.setItem('userId', userId);
-        localStorage.setItem('Authorization', accessToken);
-        localStorage.setItem('refreshToken', refreshToken);
+      localStorage.setItem('userId', userId);
+      localStorage.setItem('Authorization', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+      localStorage.removeItem('searchKeyword');
 
+      if (!userNickname) {
+        navigate('/onboarding');
+      } else {
         navigate('/');
       }
     },
@@ -32,7 +36,7 @@ export const usePostLogout = () => {
   return useMutation({
     mutationFn: () => postLogout(),
     onSuccess: () => {
-      localStorage.removeItem('Authorization');
+      localStorage.clear();
       navigate('/');
     },
 

src/apis/instance.ts

@@ -51,7 +51,7 @@ privateInstance.interceptors.response.use(
       response: { status },
     } = error;
 
-    if (status === 401) {
+    if (status === 500) {
       try {
         const response = await postRefreshToken();
 
@@ -67,8 +67,7 @@ privateInstance.interceptors.response.use(
           return axios(originRequest);
         }
       } catch (error) {
-        localStorage.removeItem('Authorization');
-        localStorage.removeItem('refreshToken');
+        localStorage.clear();
 
         console.error(error);
         alert(MESSAGES.EXPIRED);

src/apis/search/index.ts

@@ -38,6 +38,7 @@ export const useGetSearchHistory = (userId: number | null) => {
   const { data, isLoading, isError } = useQuery<SearchHistoryResponse>({
     queryKey: [userId],
     queryFn: () => getSearchHistory(userId),
+    enabled: userId !== null && userId !== 0,
   });
 
   return { data, isLoading, isError };

src/apis/templeDetail/index.ts

@@ -5,7 +5,7 @@ import { TempleDetail } from './type';
 
 const useGetTempleDetails = (templestayId: string, userId: string) => {
   const { data, isLoading, isError } = useQuery<TempleDetail>({
-    queryKey: ['detailPage', userId],
+    queryKey: ['detailPage', templestayId],
     queryFn: () => getTempleDetails(templestayId, userId),
   });
 

src/apis/user/axios.ts

@@ -14,3 +14,10 @@ export const fetchUserNickname = async (userId: number): Promise<UserNicknameRes
 export const registerUser = async (data: OnboardingUserRequest): Promise<void> => {
   await privateInstance.post('/user/register', data);
 };
+
+export const getMyPage = async (userId: string) => {
+  const res = await privateInstance.get('/user/mypage', {
+    params: { userId },
+  });
+  return res.data;
+};

src/apis/user/index.ts

@@ -1,12 +1,28 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { registerUser } from './axios';
-import { OnboardingUserRequest } from './type';
+import { fetchUserNickname, getMyPage, registerUser } from './axios';
+import { MyPageType, OnboardingUserRequest } from './type';
 
-const useRegisterUser = () => {
+export const useRegisterUser = () => {
   return useMutation<void, Error, OnboardingUserRequest>({
     mutationFn: (data) => registerUser(data),
   });
 };
 
-export default useRegisterUser;
+export const useGetMyPage = (userId: string) => {
+  const { data, isLoading, isError } = useQuery<MyPageType>({
+    queryKey: ['myPage', userId],
+    queryFn: () => getMyPage(userId),
+  });
+
+  return { data, isLoading, isError };
+};
+
+export const useGetNickname = (userId: number) => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: [userId],
+    queryFn: () => fetchUserNickname(userId),
+  });
+
+  return { data, isLoading, isError };
+};

src/apis/user/type.ts

@@ -9,3 +9,13 @@ export interface OnboardingUserRequest {
   religion: string | null;
   hasExperience: string | null;
 }
+
+export interface MyPageType {
+  userId: number;
+  nickname: string;
+  email: string;
+  ageRange?: string;
+  gender?: string;
+  religion?: string;
+  hasExperience?: boolean;
+}

src/apis/wish/index.ts

@@ -5,7 +5,7 @@ import { WishlistRequest, WishlistResponse, SuccessResponse } from './type';
 
 export const useWishlistQuery = (page: number, userId: number) => {
   return useQuery<WishlistResponse>({
-    queryKey: ['wishlist', page],
+    queryKey: ['wishlist', userId, page],
     queryFn: () => fetchWishlist({ page, userId }),
     staleTime: 0,
   });

src/components/card/lookCard/LookCard.tsx

@@ -4,18 +4,18 @@ import useFilter from '@hooks/useFilter';
 import * as styles from './lookCard.css';
 
 interface LookCardProps {
-  name: string;
+  name?: string;
 }
 
-const LookCard = ({ name }: LookCardProps) => {
+const LookCard = ({ name = '일로가' }: LookCardProps) => {
   const { handleSearch } = useFilter();
 
   return (
     <section className={styles.cardWrapper}>
       <dotlottie-player
         key="look"
         className={styles.lottieStyle}
-        src="src/assets/lotties/home.lottie"
+        src="/lotties/home.lottie"
         autoplay
         loop
       />

src/components/card/templeStayCard/TempleStayCard.tsx

@@ -1,7 +1,6 @@
 import InfoSection from '@components/card/templeStayCard/InfoSection';
 import FlowerIcon from '@components/common/icon/flowerIcon/FlowerIcon';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as styles from './templeStayCard.css';
 
@@ -16,6 +15,7 @@ interface TempleStayCardProps {
   liked: boolean;
   layout: 'vertical' | 'horizontal';
   onToggleWishlist: (templestayId: number, liked: boolean) => void;
+  onClick?: () => void;
 }
 
 const TempleStayCard = ({
@@ -29,24 +29,21 @@ const TempleStayCard = ({
   liked,
   layout,
   onToggleWishlist,
+  onClick,
 }: TempleStayCardProps) => {
   const [isWished, setIsWished] = useState(liked);
-  const navigate = useNavigate();
   const isHorizontal = layout === 'horizontal';
 
   const onClickWishBtn = (e: React.MouseEvent) => {
     e.stopPropagation();
     setIsWished((prev) => !prev);
     onToggleWishlist(templestayId, isWished);
   };
-  const handleCardClick = () => {
-    navigate('/');
-  };
 
   return (
     <article
       className={isHorizontal ? styles.horizontalContainer : styles.verticalContainer}
-      onClick={handleCardClick}
+      onClick={onClick}
       role="presentation">
       <section className={isHorizontal ? styles.horizontalImgSection : styles.verticalImgSection}>
         <img

src/components/card/templeStayCard/searchCardList/SearchCardList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import TempleStayCard from '../TempleStayCard';
 import container from './searchCardList.css';
@@ -19,6 +20,12 @@ interface SearchCardListProps {
 }
 
 const SearchCardList = ({ data, layout = 'horizontal', onToggleWishlist }: SearchCardListProps) => {
+  const navigate = useNavigate();
+
+  const handleCardClick = (templestayId: number) => {
+    navigate(`/detail/${templestayId}`);
+  };
+
   return (
     <section className={container}>
       {data.map((temple) => (
@@ -34,6 +41,7 @@ const SearchCardList = ({ data, layout = 'horizontal', onToggleWishlist }: Searc
           liked={temple.liked}
           layout={layout}
           onToggleWishlist={onToggleWishlist}
+          onClick={() => handleCardClick(temple.templestayId)}
         />
       ))}
     </section>

src/components/card/templeStayCard/wishCardList/WishCardList.tsx

@@ -1,6 +1,6 @@
+import TempleStayCard from '@components/card/templeStayCard/TempleStayCard';
 import React from 'react';
 
-import TempleStayCard from '../TempleStayCard';
 import container from './wishCardList.css';
 
 interface WishCardListProps {

src/components/carousel/popularCarousel/PopularCarousel.tsx

@@ -3,13 +3,16 @@ import { useAddWishlist, useRemoveWishlist } from '@apis/wish';
 import PopularCard from '@components/card/popularCard/PopularCard';
 import CarouselIndex from '@components/carousel/popularCarousel/CarouselIndex';
 import useCarousel from '@hooks/useCarousel';
+import { useQueryClient } from '@tanstack/react-query';
 import registDragEvent from '@utils/registDragEvent';
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import * as styles from './popularCarousel.css';
 
 const PopularCarousel = () => {
   const userId = Number(localStorage.getItem('userId'));
+  const queryClient = useQueryClient();
 
   const addWishlistMutation = useAddWishlist();
   const removeWishlistMutation = useRemoveWishlist();
@@ -22,6 +25,8 @@ const PopularCarousel = () => {
       moveDistance: 355,
     });
 
+  const navigate = useNavigate();
+
   if (isLoading) {
     return <p>Loading...</p>;
   }
@@ -31,11 +36,17 @@ const PopularCarousel = () => {
   }
 
   const handleLikeToggle = (templestayId: number, liked: boolean) => {
-    if (liked) {
-      removeWishlistMutation.mutate({ userId, templestayId });
-    } else {
-      addWishlistMutation.mutate({ userId, templestayId });
-    }
+    const mutation = liked ? removeWishlistMutation : addWishlistMutation;
+
+    mutation.mutate(
+      { userId, templestayId },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: ['ranking', userId] });
+          queryClient.refetchQueries({ queryKey: ['ranking', userId] });
+        },
+      },
+    );
   };
 
   return (
@@ -58,9 +69,7 @@ const PopularCarousel = () => {
                 templeImg={rankings.imgUrl}
                 isLiked={rankings.liked}
                 tag={rankings.tag}
-                onClick={() => {
-                  alert(`${rankings.templeName} 클릭됨!`);
-                }}
+                onClick={() => navigate(`/detail/${rankings.templestayId}`)}
                 onLikeToggle={(liked: boolean) => handleLikeToggle(rankings.templestayId, liked)}
               />
             ))}

src/components/common/button/buttonBar/ButtonBar.tsx

@@ -2,37 +2,34 @@ import buttonBarContainer from '@components/common/button/buttonBar/buttonBar.cs
 import FlowerBtn from '@components/common/button/flowerBtn/FlowerBtn';
 import PageBottomBtn from '@components/common/button/pageBottomBtn/PageBottomBtn';
 import TextBtn from '@components/common/button/textBtn/TextBtn';
-import { useState } from 'react';
 
 interface ButtonBarProps {
   type: 'reset' | 'wish';
   label: string;
   largeBtnClick: () => void;
   handleResetFilter?: () => void;
+  liked?: boolean;
+  onToggleWishlist?: () => void;
 }
 
 const ButtonBar = ({
   type,
   label,
   largeBtnClick,
   handleResetFilter = () => {},
+  liked,
+  onToggleWishlist,
 }: ButtonBarProps) => {
-  const [isActive, setIsActive] = useState(false);
-
-  const onClickLeftBtn = () => {
-    setIsActive((prev) => !prev);
-  };
-
   const renderLeftButton = () =>
     type === 'wish' ? (
-      <FlowerBtn label="찜하기" isActive={isActive} isLeftIcn onClick={onClickLeftBtn} />
+      <FlowerBtn label="찜하기" isActive={liked} isLeftIcn onClick={onToggleWishlist} />
     ) : (
       <TextBtn
         text="초기화"
         onClick={handleResetFilter}
         leftIcon="IcnReset"
         size="medium"
-        clicked={isActive}
+        clicked={liked}
       />
     );
 

src/components/common/button/flowerBtn/FlowerBtn.tsx

@@ -6,8 +6,8 @@ interface FlowerBtnProps {
   isRightIcn?: boolean;
   isLeftIcn?: boolean;
   label: string;
-  isActive: boolean;
-  onClick: () => void;
+  isActive?: boolean;
+  onClick?: () => void;
 }
 
 const FlowerBtn = ({

src/components/common/empty/filterEmpty/FilterEmpty.tsx

@@ -9,7 +9,7 @@ const FilterEmpty = () => {
         <p className={styles.textStyle}>{'해당되는 템플스테이를\n찾지 못했어요'}</p>
         <dotlottie-player
           key="filter"
-          src="src/assets/lotties/moktak_sad.lottie"
+          src="/lotties/moktak_sad.lottie"
           autoplay
           loop
           style={{ width: '15rem', height: '10.3rem' }}