Merge branch 'main' of https://github.com/nodak-v2/Nodak-FE into #182/…

…feat/mutation-handling/hj

package.json

@@ -21,6 +21,7 @@
     "lodash": "^4.17.21",
     "next": "14.2.1",
     "next-pwa": "^5.6.0",
+    "path-to-regexp": "^7.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",

src/apis/core/index.ts

@@ -11,7 +11,7 @@ const HTTP_METHODS = {
   DELETE: 'delete',
 } as const;
 
-const TIME_OUT = 2000;
+const TIME_OUT = 5000;
 
 const axiosInstance = axios.create({
   baseURL: `${process.env.NEXT_PUBLIC_API_URL}`,

src/apis/follow.ts

@@ -65,7 +65,7 @@ const deleteFollow = (userId: string) => {
   });
 };
 
-export const usePostFollowAPI = (userId: string) => {
+export const usePostFollowAPI = (userId: string, myId: string) => {
   const queryClient = useQueryClient();
 
   const { mutateAsync } = useMutation({
@@ -75,15 +75,21 @@ export const usePostFollowAPI = (userId: string) => {
         queryKey: ['profile', userId],
       });
       queryClient.invalidateQueries({
-        queryKey: ['followees', userId],
+        queryKey: ['profile', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followees', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followers', myId],
       });
     },
   });
 
   return mutateAsync;
 };
 
-export const useDeleteFollowAPI = (userId: string) => {
+export const useDeleteFollowAPI = (userId: string, myId: string) => {
   const queryClient = useQueryClient();
 
   const { mutateAsync } = useMutation({
@@ -93,7 +99,13 @@ export const useDeleteFollowAPI = (userId: string) => {
         queryKey: ['profile', userId],
       });
       queryClient.invalidateQueries({
-        queryKey: ['followees', userId],
+        queryKey: ['profile', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followees', myId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['followers', myId],
       });
     },
   });

src/apis/notification.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '@/src/apis/core';
+
+export interface Notification {
+  type: 'POST' | 'FOLLOW';
+  followerId?: number;
+  followerName?: string;
+  writerId?: number;
+  writerName?: string;
+  postId?: number;
+  timestamp: number;
+}
+
+const getNotifications = () => {
+  return api.get<Notification[]>({
+    url: '/notifications',
+  });
+};
+
+const INTERVAL_MS = 5000;
+
+export const useGetNotificationsAPI = () => {
+  const { data } = useQuery({
+    queryKey: ['notifications'],
+    queryFn: getNotifications,
+    refetchInterval: INTERVAL_MS,
+  });
+
+  return data?.body;
+};

src/apis/postDetail.ts

@@ -6,6 +6,7 @@ import {
 
 import Toast from '@/src/components/Toast';
 
+import { ChannelTypeOfKorean } from '../app/(post)/result/[postId]/_components/Posting/PostingButton';
 import { api } from './core';
 
 interface PostDetailBody {
@@ -18,7 +19,7 @@ interface PostDetailBody {
   content: string;
   starCount: number;
   checkStar: boolean;
-  categoryName: string;
+  categoryName: ChannelTypeOfKorean;
 }
 
 const getPostDetail = (postId: string) => {

src/app/(auth)/signin/page.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { BASE_URL } from '@/src/apis/constants';
 import Icon from '@/src/components/Icon';
 import TopBar from '@/src/components/Topbar';
 
@@ -19,7 +20,7 @@ const Signin = () => {
         <span className='font-h3-sm'>{SLOGAN}</span>
       </div>
       <div className='sticky mb-[60px] h-[44px] min-w-full'>
-        <Link href='https://api.nodak.link/oauth2/authorization/kakao'>
+        <Link href={`${BASE_URL}/oauth2/authorization/kakao`}>
           <Image
             src='/picky/kakao.svg'
             alt='kakao'

src/app/(post)/createPost/_components/PostForm/index.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 
 import { PostRequestBody } from '@/src/apis/createPost';
 import VoteForm from '@/src/app/(post)/createPost/_components/VoteForm';
-import { ChannelTypeOfKorean } from '@/src/app/_components/ChipContainer';
+import {
+  ChannelType,
+  ChannelTypeOfKorean,
+  channelToKoreanMap,
+} from '@/src/app/_components/ChipContainer';
 import Button from '@/src/components/Button/Button';
 import FormField from '@/src/components/FormField';
 import Selector from '@/src/components/Selector';
@@ -26,6 +30,11 @@ const channels: Array<ChannelTypeOfKorean> = [
 ];
 
 const PostForm = () => {
+  const searchParams = useSearchParams();
+  const channel = searchParams.get('channel') as ChannelType;
+
+  const koreanChannel = channelToKoreanMap[channel];
+
   const {
     register,
     handleSubmit,
@@ -106,6 +115,7 @@ const PostForm = () => {
               <Selector
                 items={channels}
                 placeholder='채널 선택'
+                defaultValue={koreanChannel}
                 onChange={field.onChange}
                 variant={errors.channel ? 'error' : 'default'}
               />

src/app/(post)/createPost/page.tsx

@@ -4,8 +4,8 @@ import { useRouter } from 'next/navigation';
 
 import { useGetUserStatusAPI } from '@/src/apis/myInfo';
 import Toast from '@/src/components/Toast';
+import TopBar from '@/src/components/Topbar';
 
-import TopBar from '../../../components/Topbar';
 import PostForm from './_components/PostForm';
 
 const CreatePostPage = () => {
@@ -20,7 +20,7 @@ const CreatePostPage = () => {
   return (
     <>
       <TopBar.Container>
-        <TopBar.BackButton href='/' />
+        <TopBar.BackButton />
         <TopBar.Title>투표 만들기</TopBar.Title>
       </TopBar.Container>
       <PostForm />

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentReplyItem.tsx

@@ -12,7 +12,14 @@ interface CommentReplyItemProps {
 }
 
 const CommentReplyItem = ({ comment }: CommentReplyItemProps) => {
-  const { replyId, nickname, content, createdAt, userId: authorId } = comment;
+  const {
+    replyId,
+    nickname,
+    content,
+    createdAt,
+    userId: authorId,
+    profileImageUrl,
+  } = comment;
   const commentIdFromSearchParams = useSearchParams().get('commentId');
 
   const isSelected = Number(commentIdFromSearchParams) === replyId;
@@ -39,6 +46,7 @@ const CommentReplyItem = ({ comment }: CommentReplyItemProps) => {
         createdAt={createdAt}
         isOwnComment={isOwnComment}
         authorId={authorId}
+        profileImageUrl={profileImageUrl}
       >
         <CommentReplyItemMenu replyId={replyId} isOwnComment={isOwnComment} />
       </CommentItem>

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentRootItem.tsx

@@ -15,7 +15,14 @@ const CommentRootItem = ({
   isFirst = false,
   comment,
 }: CommentRootItemProps) => {
-  const { commentId, nickname, content, createdAt, userId: authorId } = comment;
+  const {
+    commentId,
+    nickname,
+    content,
+    createdAt,
+    userId: authorId,
+    profileImageUrl,
+  } = comment;
   const commentIdFromSearchParams = useSearchParams().get('commentId');
 
   const isSelected = Number(commentIdFromSearchParams) === commentId;
@@ -38,6 +45,7 @@ const CommentRootItem = ({
         createdAt={createdAt}
         isOwnComment={isOwnComment}
         authorId={authorId}
+        profileImageUrl={profileImageUrl}
       >
         <CommentRootItemMenu
           commentId={commentId}

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/index.tsx

@@ -13,6 +13,7 @@ interface CommentItemProps {
   createdAt: string;
   isOwnComment: boolean;
   authorId: number;
+  profileImageUrl: string | null;
 }
 
 const CommentItem = ({
@@ -22,17 +23,19 @@ const CommentItem = ({
   isOwnComment,
   children,
   authorId,
+  profileImageUrl,
 }: PropsWithChildren<CommentItemProps>) => {
   return (
     <div className='flex w-full flex-col gap-2'>
       <div className='flex items-center justify-between'>
         <Link href={`/users/${authorId}`}>
-          <div className='flex items-center gap-1'>
+          <div className='flex items-center gap-2'>
             <Image
-              src='/user-square.png'
+              src={profileImageUrl || '/picky/user-square.svg'}
               alt='유저프로필'
               width={24}
               height={24}
+              className='h-[24px] w-[24px] rounded-[4px]'
             />
             <span className='font-title-1-md'>{nickname}</span>
             {isOwnComment && <OwnCommentChip />}

src/app/(post)/result/[postId]/_components/CommentList/index.tsx

@@ -13,13 +13,13 @@ const CommentList = () => {
   const { commentSize } = useGetPostDetailAPI(postId);
 
   return (
-    <div>
-      <div className='font-h3-sm border-t border-gray-accent2 px-4 py-5'>
+    <>
+      <div className='font-h3-sm border-t border-gray-accent2 px-4 py-5 pb-0'>
         댓글 {commentSize}
       </div>
       <div className=' flex flex-col divide-y divide-gray-accent2'>
         {comments.length === 0 && (
-          <span className='font-text-2-md self-center whitespace-pre-line p-4 text-center text-gray-accent3'>
+          <span className='font-text-2-md self-center whitespace-pre-line p-4 pt-5 text-center text-gray-accent3'>
             {INITIAL_TEXT}
           </span>
         )}
@@ -35,7 +35,7 @@ const CommentList = () => {
           </div>
         ))}
       </div>
-    </div>
+    </>
   );
 };