Fix: 자동 로그인, 커뮤니티 댓글 조회, 이미지 오류 수정 (#106)

* fix: 쿠키 여부에 따른 자동로그인

* refactor: swr fetching custom hook 리팩토링

* refactor: 게시글 내용 최대 허용 글자 수 300 -> 4000자로 변경

* refactor: 이미지 setter 수정

* fix: 불필요 컴포넌트 사용 제거

* fix: 더미 값 설정으로 프로필 이미지 미변경 오류 수정

src/app/_components/common/Form.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import autoResize from '@/utils/autoResize';
-import TextInput from '@/app/_components/common/TextInput';
 import post from '@/app/service/community/api/post';
 import PhotoBooth from '@/app/service/community/_components/PhotoBooth';
 import editPost from '@/app/service/community/api/editPost';
@@ -123,11 +122,11 @@ function Form({ ...props }: FormType) {
                 <F.FormMessage className="text-warning text-xs" />
 
                 <F.FormControl>
-                  <TextInput
+                  <Textarea
                     placeholder="제목"
-                    width="w-full"
                     defaultValue={title}
-                    isFocus
+                    className="resize-none"
+                    maxLength={30}
                     {...field}
                   />
                 </F.FormControl>

src/app/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import CALLBACK_URL from '@/constants/url';
 import Kakao from '@/app/_components/buttons/Kakao';
 import Title from '@/app/_components/common/Title';
 import Content from '@/app/_components/home/Content';
@@ -10,7 +11,6 @@ import AppleSignIn from '@/app/_components/buttons/Apple';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { getCookie } from '@/lib/cookie';
-import CALLBACK_URL from '@/constants/url';
 
 function Page() {
   const router = useRouter();
@@ -30,6 +30,12 @@ function Page() {
     setIsClicked(false);
   };
 
+  useEffect(() => {
+    if (getCookie({ name: 'access_token' })) {
+      router.push(CALLBACK_URL.service);
+    }
+  }, []);
+
   return (
     <div className="flex pt-24 flex-col justify-between h-screen bg-[url('../../assets/images/background.webp')] bg-cover bg-opacity-90">
       <div className="flex flex-col items-center max-w-[30rem] mx-auto gap-7 ">

src/app/schema.ts

@@ -14,7 +14,7 @@ export const FormSchema = z.object({
   content: z
     .string({ required_error: content.min })
     .min(1, { message: content.min })
-    .max(300, { message: content.max }),
+    .max(4000, { message: content.max }),
 });
 
 export type FormSchemaType = z.infer<typeof FormSchema>;

src/app/service/community/_components/PhotoBooth.tsx

@@ -27,16 +27,15 @@ function PhotoBooth({ ...props }: PhotoBoothProps) {
       const newImages = Array.from(files);
 
       // 첨부되는 사진이 5MB 이하일때만 허용
-      if (newImages.every(newImage => newImage.size <= 5 * 1024 * 1024)) {
-        setImages(prevImages => [...prevImages, ...newImages]);
-      } else {
+      if (newImages.every(newImage => newImage.size > 5 * 1024 * 1024)) {
         toast({
           title: '이미지 용량 초과',
           description: '최대 5MB까지의 이미지만 업로드할 수 있습니다.',
           variant: 'warning',
           duration: 2000,
         });
       }
+      setImages(prevImages => [...prevImages, ...newImages]);
     }
   };
 

src/app/service/user/_components/Profile.tsx

@@ -55,6 +55,9 @@ function Profile({ ...props }: ProfileProps) {
 
       clearCache();
 
+      // 더미 값 설정
+      event.target.value = '';
+
       toast({ variant: 'success', description: message, duration: 2000 });
     }
   };

src/app/service/user/_components/UserCommentsModal.tsx

@@ -1,24 +1,24 @@
 import useIntersect from '@/hooks/common/useIntersection';
 import OnePost from '@/app/service/community/_components/OnePost';
 import NotSearched from '@/app/service/community/_components/NotSearched';
-import useUserPostListInfinite from '@/hooks/user/useUserPostListInfinite';
+import usePostListApi from '@/hooks/community/usePostList';
 
 import { UserModalProps } from '@/types/user';
 
 function UserCommentModal({ ...props }: UserModalProps) {
   const { user_profile_image, user_nickname, user_id } = props;
-
   const { data, size, setSize, isValidating } =
-    useUserPostListInfinite('comment');
+    usePostListApi.useGetMyPostList('comment');
 
-  const posts = data?.flatMap(page => page.data.list);
+  const posts = data?.flatMap(page => page.data.data.list);
+  const cursor = data?.flatMap(page => page.data.data.cursor);
   const bottomRef = useIntersect(() => {
     if (!isValidating) setSize(size + 1);
   });
 
   return (
     <section className="opacity-100 top-0 translate-y-0 z-9 bg-white pt-10 px-4 pb-4 absolute overflow-y-auto transition-transform duration-300 w-full h-full z-[2]">
-      {data ? (
+      {cursor && cursor[0] !== -2 ? (
         <>
           <ul>
             {posts?.map(post => (
@@ -31,7 +31,7 @@ function UserCommentModal({ ...props }: UserModalProps) {
           <div ref={bottomRef} />
         </>
       ) : (
-        <NotSearched content="검색어를 입력하여 글을 검색해보세요!" />
+        <NotSearched content="나의 댓글이 존재하지 않습니다." />
       )}
     </section>
   );

src/app/service/user/_components/UserPostsModal.tsx

@@ -1,22 +1,24 @@
 import useIntersect from '@/hooks/common/useIntersection';
 import OnePost from '@/app/service/community/_components/OnePost';
 import NotSearched from '@/app/service/community/_components/NotSearched';
-import useUserPostListInfinite from '@/hooks/user/useUserPostListInfinite';
+import usePostListApi from '@/hooks/community/usePostList';
 
 import { UserModalProps } from '@/types/user';
 
 function UserPostsModal({ ...props }: UserModalProps) {
   const { user_profile_image, user_nickname, user_id } = props;
-  const { data, size, setSize, isValidating } = useUserPostListInfinite('post');
+  const { data, size, setSize, isValidating } =
+    usePostListApi.useGetMyPostList('post');
 
-  const posts = data?.flatMap(page => page.data.list);
+  const posts = data?.flatMap(page => page.data.data.list);
+  const cursor = data?.flatMap(page => page.data.data.cursor);
   const bottomRef = useIntersect(() => {
     if (!isValidating) setSize(size + 1);
   });
 
   return (
     <section className="opacity-100 top-0 translate-y-0 z-9 bg-white pt-10 px-4 pb-4 absolute overflow-y-auto transition-transform duration-300 w-full h-full z-[2]">
-      {data ? (
+      {cursor && cursor[0] !== -2 ? (
         <>
           <ul>
             {posts?.map(post => (
@@ -29,7 +31,7 @@ function UserPostsModal({ ...props }: UserModalProps) {
           <div ref={bottomRef} />
         </>
       ) : (
-        <NotSearched content="검색어를 입력하여 글을 검색해보세요!" />
+        <NotSearched content="나의 게시글이 존재하지 않습니다." />
       )}
     </section>
   );

src/hooks/community/usePostList.ts

@@ -1,10 +1,14 @@
-import { getPostListKey, getSearchPostListKey } from '@/utils/getKeys';
-
 import useSWRInfinite from 'swr/infinite';
+
 import { axiosInstance } from '@/lib/axios/axios-instance';
-import { PostListData } from '@/types/community/post';
 import { AxiosResponse } from 'axios';
 import { TResponse } from '@/types/common/response';
+import {
+  getPostListKey,
+  getSearchPostListKey,
+  getUserPostListKey,
+} from '@/utils/getKeys';
+import type { PostListData, MyPostListData } from '@/types/community/post';
 
 const usePostListApi = {
   useGetPostList: (categoryId: number) =>
@@ -21,6 +25,14 @@ const usePostListApi = {
       axiosInstance.get,
       { revalidateFirstPage: false },
     ),
+
+  useGetMyPostList: (state: 'post' | 'comment') =>
+    useSWRInfinite<AxiosResponse<TResponse<MyPostListData>>>(
+      (pageIndex, previousPageData) =>
+        getUserPostListKey(pageIndex, state, previousPageData),
+      axiosInstance.get,
+      { revalidateFirstPage: false },
+    ),
 };
 
 export default usePostListApi;