UMC-Master · minzee09 · Feb 20, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/umc-master/index.html b/umc-master/index.html
@@ -11,6 +11,7 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/umc-master/package.json b/umc-master/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@tanstack/react-query": "^5.65.0",
-    "@tanstack/react-query-devtools": "^5.65.0",
+    "@tanstack/react-query": "^5.66.3",
+    "@tanstack/react-query-devtools": "^5.66.3",
     "@types/node": "^22.10.5",
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.9",

diff --git a/umc-master/src/App.tsx b/umc-master/src/App.tsx
@@ -2,13 +2,18 @@ import { ThemeProvider } from 'styled-components';
 import GlobalStyle from '@styles/globalStyle.ts';
 import theme from '@styles/theme.ts';
 import Router from './router/routes.tsx';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <Router />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <Router />
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 

diff --git a/umc-master/src/apis/authApi.ts b/umc-master/src/apis/authApi.ts
@@ -0,0 +1,38 @@
+// import axiosInstance from '@apis/axios-instance';
+
+// interface UserSignup {
+//   email: string;
+//   password: string;
+//   nickname: string;
+//   hashtags: string[];
+// }
+
+// export const postSignup = async ({ email, password, nickname, hashtags } : UserSignup) => {
+//   const { data } = await axiosInstance.post(`/signup`, {
+//     email,
+//     password,
+//     nickname,
+//     hashtags,
+//   });
+//   return data;
+// };
+
+import axios from 'axios';
+
+export const postSignup = async () => {
+  try {
+    const response = await axios.post('https://api.hmaster.shop/api/v1/signup', {
+      email: 'ekos555@naver.com',
+      password: 'asfa1234!@',
+      nickname: 'rael',
+      hashtags: ['봄', '패션', '청소', '요리', '재활용', '주택']
+    }, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    console.log('회원가입 성공:', response.data);
+  } catch (error) {
+    console.error('회원가입 오류:', error);
+  }
+};
diff --git a/umc-master/src/apis/axios-instance.ts b/umc-master/src/apis/axios-instance.ts
@@ -70,7 +70,9 @@ axiosInstance.interceptors.response.use(
         useTokenStore.getState().clearTokens();
 
         // 로그인 페이지로 리다이렉트
-        window.location.href = RoutePaths.LOGIN;
+        if (window.location.pathname !== RoutePaths.LOGIN) {
+          window.location.href = RoutePaths.LOGIN;
+        }
 
         return Promise.reject(refreshError);
       }

diff --git a/umc-master/src/apis/commentApi.ts b/umc-master/src/apis/commentApi.ts
@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axiosInstance from './axios-instance';
+
+export const getComments = async (tipId: number) => {
+  try {
+    const { data } = await axiosInstance.get('/comments');
+    return data.result.filter((comment: any) => comment.tips_id === tipId);
+  } catch (error: any) {
+    console.error('댓글 불러오기 실패:', error);
+    throw new Error('댓글을 불러오는 데 실패했습니다.');
+  }
+};
+
+export const addComment = async (tipId: string, comment: string) => {
+  try {
+    const { data } = await axiosInstance.post(`/tips/${tipId}/comments`, {
+      comment,
+    });
+    return data;
+  } catch (error: any) {
+    console.error('댓글 추가 실패:', error);
+    throw new Error('댓글 추가에 실패했습니다.');
+  }
+};
+
+export const editComment = async (tipId: string, commentId: string, newComment: string) => {
+  try {
+    const { data } = await axiosInstance.put(`/tips/${tipId}/comments/${commentId}`, {
+      comment: newComment,
+    });
+    return data;
+  } catch (error: any) {
+    console.error('댓글 수정 실패:', error);
+    throw new Error('댓글 수정에 실패했습니다.');
+  }
+};
+
+export const deleteComment = async (tipId: string, commentId: string) => {
+  try {
+    const { data } = await axiosInstance.delete(`/tips/${tipId}/comments/${commentId}`);
+    return data;
+  } catch (error: any) {
+    console.error('댓글 삭제 실패:', error);
+    throw new Error('댓글 삭제에 실패했습니다.');
+  }
+};
diff --git a/umc-master/src/apis/queries/useCommentMutations.ts b/umc-master/src/apis/queries/useCommentMutations.ts
@@ -0,0 +1,59 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getComments, addComment, editComment, deleteComment } from '@apis/commentApi';
+import { useUserStore } from '@store/userStore';
+export interface Comment {
+  comment_id: number;
+  user: {
+    user_id: number;
+    nickname: string;
+    profileImageUrl?: string | null;
+  };
+  comment: string;
+  created_at: string;
+}
+
+export const useAddComment = (tipId: number) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (comment: string) => addComment(tipId.toString(), comment),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', tipId] });
+    },
+  });
+};
+
+export const useDeleteComment = (tipId: number) => {
+  const queryClient = useQueryClient();
+  const { user } = useUserStore();
+  return useMutation({
+    mutationFn: async (commentId: number) => {
+      const comments: Comment[] = await getComments(tipId);
+      const comment = comments.find((c) => c.comment_id === commentId);
+      if (comment?.user.user_id !== user?.user_id) {
+        throw new Error('본인의 댓글만 삭제할 수 있습니다.');
+      }
+      return deleteComment(tipId.toString(), commentId.toString());
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', tipId] });
+    },
+  });
+};
+
+export const useUpdateComment = (tipId: number) => {
+  const queryClient = useQueryClient();
+  const { user } = useUserStore();
+  return useMutation({
+    mutationFn: async ({ commentId, newComment }: { commentId: number; newComment: string }) => {
+      const comments: Comment[] = await getComments(tipId);
+      const comment = comments.find((c) => c.comment_id === commentId);
+      if (comment?.user.user_id !== user?.user_id) {
+        throw new Error('본인의 댓글만 수정할 수 있습니다.');
+      }
+      return editComment(tipId.toString(), commentId.toString(), newComment);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', tipId] });
+    },
+  });
+};
diff --git a/umc-master/src/apis/queries/useCommentQueries.ts b/umc-master/src/apis/queries/useCommentQueries.ts
@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getComments } from '@apis/commentApi';
+
+export const useComments = (tipId: number) => {
+  return useQuery({
+    queryKey: ['comments', tipId],
+    queryFn: () => getComments(tipId),
+  });
+};
diff --git a/umc-master/src/apis/queries/useSaveTipQueries.ts b/umc-master/src/apis/queries/useSaveTipQueries.ts
@@ -0,0 +1,13 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { getSavedTips } from "@apis/tipApi";
+
+export const useSaveTipList = () => {
+  return useInfiniteQuery({
+    queryKey: ["savedTips"],
+    queryFn: () => getSavedTips(),
+    initialPageParam: 1, 
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.hasMore ? allPages.length + 1 : undefined;
+    },
+  });
+};
diff --git a/umc-master/src/apis/queries/useTipDetailMutations.ts b/umc-master/src/apis/queries/useTipDetailMutations.ts
@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toggleLike, toggleBookmark } from '@apis/tipApi';
+
+export const useToggleLike = (tipId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => toggleLike(tipId),
+    onSuccess: (data) => {
+      console.log(data.message);
+      queryClient.invalidateQueries({ queryKey: ['tipDetail', tipId] });
+    },
+    onError: (error) => {
+      console.error('좋아요 토글 오류:', error);
+    },
+  });
+};
+
+export const useToggleBookmark = (tipId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => toggleBookmark(tipId),
+    onSuccess: (data) => {
+      console.log(data.message);
+      queryClient.invalidateQueries({ queryKey: ['tipDetail', tipId] });
+    },
+    onError: (error) => {
+      console.error('북마크 토글 오류:', error);
+    },
+  });
+};
diff --git a/umc-master/src/apis/queries/useTipDetailQuery.ts b/umc-master/src/apis/queries/useTipDetailQuery.ts
@@ -0,0 +1,10 @@
+import { getTipDetail } from '@apis/tipApi';
+import { useQuery } from '@tanstack/react-query';
+
+export const useTipDetail = (tipId: number) => {
+  return useQuery({
+    queryKey: ['tipDetail', tipId],
+    queryFn: () => getTipDetail(tipId),
+    enabled: !!tipId, // tipId가 있을 때만 실행
+  });
+};
diff --git a/umc-master/src/apis/tipApi.ts b/umc-master/src/apis/tipApi.ts
@@ -14,6 +14,10 @@ export interface NewPost {
   imageUrls: File[];
 }
 
+export interface GetSavedParams {
+  page: number;
+}
+
 export const getTips = async ({ pageParam, sorted }: GetTipsParams) => {
   const { data } = await axiosInstance.get(`/tips/sorted?page=${pageParam}&limit=5&sort=${sorted}`);
   return data;
@@ -50,4 +54,28 @@ export const createPost = async (newPost: NewPost): Promise<void> => {
   }
 };
 
-// 다른 Tips 관련 API들...
+export const getSavedTips = async () => {
+  try {
+    const { data } = await axiosInstance.get(`/users/saved-tips`);
+    console.log('저장된 꿀팁 API 응답:', data.result);
+    return data.result;
+  } catch (error: any) {
+    console.error('저장된 꿀팁 API 에러 발생:', error.response?.status, error.response?.data);
+    throw new Error(`저장된 꿀팁 API 요청 실패: ${error.response?.status}`);
+  }
+};
+
+export const getTipDetail = async (tipId: number) => {
+  const { data } = await axiosInstance.get(`/tips/${tipId}`);
+  return data.result;
+};
+
+export const toggleLike = async (tipId: number) => {
+  const response = await axiosInstance.post(`/tips/${tipId}/like`);
+  return response.data;
+};
+
+export const toggleBookmark = async (tipId: number) => {
+  const response = await axiosInstance.post(`/tips/${tipId}/bookmark`);
+  return response.data;
+};
diff --git a/umc-master/src/assets/gray-character.png b/umc-master/src/assets/gray-character.png
diff --git a/umc-master/src/components/Card/Card.tsx b/umc-master/src/components/Card/Card.tsx
@@ -40,8 +40,7 @@ const CardImageWrapper = styled.div`
 `;
 
 const CardImage = styled.img`
-  min-width: 240px;
-  width: 100%;
+  width: 240px;
   height: 200px;
   object-fit: cover;
 `;
diff --git a/umc-master/src/components/NavigationBar/NavigationBar.tsx b/umc-master/src/components/NavigationBar/NavigationBar.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import LogoImage from '@assets/logo.png';
@@ -8,6 +8,9 @@ import Typography from '@components/common/typography';
 import AlarmIcon from '@assets/icons/alarm.svg?react';
 import AlarmModal from '@components/Modal/alarm';
 import ProfileModal from '@components/Modal/profile';
+import { useUserStore } from '@store/userStore';
+import { getUsers } from '@apis/profileApi';
+import gray_character from '@assets/gray-character.png';
 
 interface NavigationBarProps {
   login: boolean;
@@ -16,6 +19,12 @@ interface NavigationBarProps {
 const NavigationBar: React.FC<NavigationBarProps> = ({ login }) => {
   const [isAlarmModalOpen, setIsAlarmModalOpen] = useState(false);
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const { user, fetchUser } = useUserStore();
+
+  useEffect(() => {
+    fetchUser(); // 컴포넌트 마운트 시 사용자 정보 가져오기
+  }, []);
+  getUsers();
 
   const toggleAlarmModal = () => setIsAlarmModalOpen((prev) => !prev);
   const toggleProfileModal = () => setIsProfileModalOpen((prev) => !prev);
@@ -45,7 +54,11 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ login }) => {
         {login ? (
           <UserSection>
             <AlarmIcon onClick={toggleAlarmModal} />
-            <ProfileImg onClick={toggleProfileModal} />
+            <ProfileImg 
+              src={user?.profile_image_url || gray_character} 
+              alt="Profile Image" 
+              onClick={toggleProfileModal} 
+            />
           </UserSection>
         ) : (
           <LoginBtn to={RoutePaths.LOGIN}>
@@ -113,7 +126,7 @@ const UserSection = styled.div`
   cursor: pointer;
 `;
 
-const ProfileImg = styled.div`
+const ProfileImg = styled.img`
   width: 40px;
   height: 40px;
   background: #e0e0e0; /** TODO: 프로필 이미지 추가 */

diff --git a/umc-master/src/pages/auth/Login_components/InputForm.tsx b/umc-master/src/pages/auth/Login_components/InputForm.tsx
@@ -195,6 +195,7 @@ const StyledCheckbox = styled.input`
 
 const StyledTypography = styled(Typography)`
   color: ${({ theme }) => theme.colors.text.gray};
+  cursor: pointer;
 `;
 
 const Options = styled.div`