feat: Type 세분화 및 적용

app/api/comments/[slug]/route.ts

@@ -13,8 +13,6 @@ async function GET(req: NextRequest, route: { params: { slug: string } }) {
       },
     });
 
-    console.log(res);
-
     return NextResponse.json({ message: 'Comment Get Success', success: true, data: res });
   } catch (error: any) {
     return NextResponse.json({ error: error.message }, { status: 400 });
@@ -26,10 +24,6 @@ async function POST(req: NextRequest, route: { params: { slug: string } }) {
     const body = await req.json();
     const slug = route.params.slug;
     const token = req.cookies.get('token')?.value || '';
-    console.log(body);
-
-    console.log(slug);
-    console.log(token);
 
     const res = await http.post(`/articles/${slug}/comments`, body, {
       headers: {
@@ -38,8 +32,6 @@ async function POST(req: NextRequest, route: { params: { slug: string } }) {
       },
     });
 
-    console.log(res);
-
     return NextResponse.json({ message: 'Comment Create Success', success: true, data: res });
   } catch (error: any) {
     return NextResponse.json({ error: error.message }, { status: 400 });
@@ -55,19 +47,12 @@ async function DELETE(req: NextRequest, route: { params: { slug: string } }) {
 
     const token = req.cookies.get('token')?.value || '';
 
-    console.log(slug);
-    console.log(token);
-    console.log('삭제 전');
-
     const res = await http.delete(`/articles/${slug}/comments/${id}`, {
       headers: {
         'Content-Type': 'application/json; charset=utf-8',
         Authorization: `Token ${token}`,
       },
     });
-    console.log('삭제 후');
-
-    console.log(res);
 
     return NextResponse.json({ message: 'Comment Delete Success', success: true, data: res });
   } catch (error: any) {

app/api/user/route.ts

@@ -2,9 +2,9 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getUserAPI, updateUserAPI } from '@/services/users';
 
 export async function GET(req: NextRequest) {
-  const { value } = req.cookies.get('token');
+  const token = req.cookies.get('token')?.value || '';
 
-  const { user } = await getUserAPI(value);
+  const { user } = await getUserAPI(token);
 
   return NextResponse.json({
     message: 'Login successfull',
@@ -14,10 +14,8 @@ export async function GET(req: NextRequest) {
 }
 
 export async function PUT(req: NextRequest) {
-  const { value } = req.cookies.get('token');
+  const token = req.cookies.get('token')?.value || '';
   const user = await req.json();
-  console.log('Route');
-  console.log(user);
 
-  return updateUserAPI(user, value);
+  return updateUserAPI(user, token);
 }

app/loading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const HomeLoading = () => {
   return <div>HomeLoading...</div>;
 };

components/account/SignInForm.tsx

@@ -4,7 +4,8 @@ import useUserStore from '@/stores/useUserStore';
 import { form } from '@/styles/account.css';
 import { fillGreenButton, input } from '@/styles/common.css';
 import { buttonBox } from '@/styles/layout.css';
-import { LoginUser, UserAction } from '@/types';
+import { LoginUser, UserResponse } from '@/types/api/users';
+import { UserAction } from '@/types/store/userStore';
 import { useRouter } from 'next/navigation';
 import { ChangeEvent, FormEvent, useState } from 'react';
 
@@ -17,13 +18,13 @@ const SignInForm = () => {
     password: '',
   });
 
-  const loginSuccess = (res: any) => {
+  const loginSuccess = (res: UserResponse) => {
     saveUserInfo({ ...res.user });
     router.push('/');
   };
 
-  const loginError = (err: any) => {
-    console.log(err.message);
+  const loginError = (err: Error) => {
+    console.error(err.message);
     alert('이메일 또는 비밀번호가 잘못되었습니다.');
   };
 

components/account/SignUpForm.tsx

@@ -5,7 +5,9 @@ import useUserStore from '@/stores/useUserStore';
 import { form } from '@/styles/account.css';
 import { fillGreenButton, input } from '@/styles/common.css';
 import { buttonBox } from '@/styles/layout.css';
-import { NewUser, UserAction } from '@/types';
+import { NewUser } from '@/types/api/users';
+import { UserAction } from '@/types/store/userStore';
+
 import { useRouter } from 'next/navigation';
 import { ChangeEvent, FormEvent, useState } from 'react';
 
@@ -19,10 +21,6 @@ const SignUpForm = () => {
   });
 
   const signupSuccess = (res: any) => {
-    console.log('Client');
-
-    console.log(res);
-
     saveUserInfo({
       ...res.user,
     });

components/article/ArticleDeleteButton.tsx

@@ -5,8 +5,7 @@ import { useRouter } from 'next/navigation';
 const ArticleDeleteButton = ({ slug }: { slug: string }) => {
   const router = useRouter();
   const handleButtonClick = async () => {
-    const res = await fetch(`/api/articles/${slug}`, { method: 'DELETE' }).then(res => res.json());
-    console.log(res);
+    await fetch(`/api/articles/${slug}`, { method: 'DELETE' }).then(res => res.json());
     router.push('/');
   };
   return (

components/article/ArticleList.tsx

@@ -5,6 +5,7 @@ import React, { useRef } from 'react';
 import { flexCenter } from '@/styles/common.css';
 import useCurrentTab from '@/stores/useCurrentTab';
 import useArticles from '@/hooks/useArticles';
+import { Article } from '@/types/api/articles';
 type Props = {
   username?: string;
 };
@@ -21,7 +22,7 @@ const ArticleList = ({ username }: Props) => {
         <div>
           {articlesData?.pages.map((group, i) => (
             <div key={i}>
-              {group?.articles?.map(article => <ArticlePreview key={article.slug} article={article} />)}
+              {group?.articles?.map((article: Article) => <ArticlePreview key={article.slug} article={article} />)}
             </div>
           ))}
         </div>

components/article/ArticlePreview.tsx

@@ -20,14 +20,12 @@ const ArticlePreview = ({
 
   const queryClient = useQueryClient();
 
-  const onSuccess = (res: any) => {
-    console.log(res);
+  const onSuccess = () => {
     queryClient.invalidateQueries({ queryKey: ['articles', tab] });
   };
 
-  const onError = (err: any) => {
+  const onError = () => {
     // 권한이 없을 경우 login 페이지로 이동
-    console.log(err);
     router.push('/login');
   };
 

components/article/ArticleTab.tsx

@@ -2,7 +2,7 @@
 import useCurrentTab from '@/stores/useCurrentTab';
 import useUserStore from '@/stores/useUserStore';
 import { articleTab, articleTabItem, articleTabItemActivate, articleTabItemDisable } from '@/styles/article.css';
-import { User } from '@/types';
+import { User } from '@/types/api/users';
 import { usePathname } from 'next/navigation';
 import { useEffect } from 'react';
 

components/comments/CommentBox.tsx

@@ -5,8 +5,9 @@ import React from 'react';
 import CommentForm from './CommentForm';
 import CommentCard from './CommentCard';
 import { flexCenter, flexRow, textCenter } from '@/styles/common.css';
-import { User } from '@/types';
 import { useQuery } from '@tanstack/react-query';
+import { User } from '@/types/api/users';
+import { Comment } from '@/types/api/comment';
 
 const CommentBox = ({ slug }: { slug: string }) => {
   const { email } = useUserStore() as User;
@@ -16,15 +17,13 @@ const CommentBox = ({ slug }: { slug: string }) => {
     select: res => res.data.comments,
   });
 
-  console.log(comments);
-
   return (
     <div>
       {email ? (
         <div className={`${flexRow} ${flexCenter}`}>
           <CommentForm slug={slug} />
           <div className={flexRow}>
-            {comments.map(comment => (
+            {comments.map((comment: Comment) => (
               <CommentCard key={comment.id} comment={comment} slug={slug} />
             ))}
           </div>

components/comments/CommentCard.tsx

@@ -4,7 +4,9 @@ import { TrashIcon } from '@/composables/icons';
 import useUserStore from '@/stores/useUserStore';
 import { commentContent, commentFormFooter, commnetCard } from '@/styles/comments.css';
 import { circle, flexCenter } from '@/styles/common.css';
-import { Comment, User } from '@/types';
+import { Comment } from '@/types/api/comment';
+import { User } from '@/types/api/users';
+
 import { formatDate } from '@/utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
@@ -37,7 +39,7 @@ const CommentCard = ({ comment, slug }: Props) => {
             height={20}
             alt="iamge"
           />
-            {comment.author.username} {formatDate(comment.createAt)}
+            {comment.author.username} {formatDate(comment.createdAt)}
         </div>
         {comment.author.username === username && <TrashIcon onClick={() => handleTrashClick(slug)} />}
       </div>

components/comments/CommentForm.tsx

@@ -24,7 +24,6 @@ const CommentForm = ({ slug }: { slug: string }) => {
   });
   const handleSubmit = (e: any) => {
     e.preventDefault();
-    console.log(comment);
 
     mutate(e.target.comment.value);
     setComment('');
@@ -36,6 +35,7 @@ const CommentForm = ({ slug }: { slug: string }) => {
         name="comment"
         className={commentTextarea}
         placeholder="Write a comment..."
+        value={comment}
         onChange={e => setComment(e.target.value)}
       ></textarea>
       <div className={commentFormFooter}>

components/editor/EditForm.tsx

@@ -6,8 +6,9 @@ import { editorButton, editorForm } from '@/styles/editor.css';
 import TagInput from './TagInput';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { NewArticle } from '@/types';
+
 import { useRouter } from 'next/navigation';
+import { NewArticle } from '@/types/api/articles';
 
 const EditForm = ({ slug }: { slug?: string }) => {
   const queryClient = useQueryClient();
@@ -39,15 +40,11 @@ const EditForm = ({ slug }: { slug?: string }) => {
         );
       }
     },
-    onSuccess: data => {
-      console.log('등록 성공');
-
-      console.log(data);
+    onSuccess: () => {
       queryClient.invalidateQueries(['articles', 'global']);
       router.push('/');
     },
     onError: (error: any) => {
-      console.log('에러 발생');
       console.error(error);
     },
   });

components/editor/TagInput.tsx

@@ -21,8 +21,6 @@ const TagInput = ({ appendTag }: Props) => {
   };
 
   const handleTagClick = (tag: string) => {
-    console.log('쿨릭');
-
     setTags((prevTags: string[]) => prevTags.filter(prevTag => prevTag !== tag));
   };
 

components/layouts/Banner.tsx

@@ -2,7 +2,8 @@
 import useUserStore from '@/stores/useUserStore';
 import { backgroundBlack, backgroundGreen, container } from '@/styles/common.css';
 import { banner } from '@/styles/home.css';
-import { User } from '@/types';
+import { User } from '@/types/api/users';
+
 import { ReactNode } from 'react';
 type Props = {
   children: ReactNode;
@@ -11,7 +12,9 @@ type Props = {
 const Banner = ({ children, background }: Props) => {
   const { email } = useUserStore() as User;
   return email && background === 'green' ? (
-    <div></div>
+    <div>
+      <div></div>
+    </div>
   ) : (
     <div className={`${banner} ${background === 'green' ? backgroundGreen : backgroundBlack}`}>
       <div className={container}>{children}</div>

components/layouts/NavBar.tsx

@@ -6,7 +6,7 @@ import { userImageSm } from '@/styles/profile.css';
 import Image from 'next/image';
 import { EditIcon, SettingIcon } from '@/composables/icons';
 import useUserStore from '@/stores/useUserStore';
-import { User } from '@/types';
+import { User } from '@/types/api/users';
 
 const NAVS = [
   {

components/profile/ProfileBox.tsx

@@ -1,10 +1,10 @@
 import { SettingIcon } from '@/composables/icons';
 import useUserStore from '@/stores/useUserStore';
 import { settingButton, userBlock, userImage, userInfo, userName } from '@/styles/profile.css';
-import { User } from '@/types';
 import Image from 'next/image';
 import Link from 'next/link';
 import FollowButton from '../user/FollowButton';
+import { User } from '@/types/api/users';
 type Props = {
   image: string;
   username: string;

components/settings/LogoutButton.tsx

@@ -3,18 +3,19 @@ import useAuth from '@/hooks/useAuth';
 import useUserStore from '@/stores/useUserStore';
 import { flex } from '@/styles/common.css';
 import { logoutButton } from '@/styles/settings.css';
-import { UserAction } from '@/types';
+import { UserAction } from '@/types/store/userStore';
+
 import { useRouter } from 'next/navigation';
 
 const LogoutButton = () => {
   const router = useRouter();
   const { logout } = useUserStore() as UserAction;
-  const signoutSuccess = (res: any) => {
+  const signoutSuccess = () => {
     logout();
     router.push('/login');
   };
 
-  const signoutError = (err: any) => {
+  const signoutError = (err: Error) => {
     console.error(err.message);
   };
 

components/settings/SettingForm.tsx

@@ -24,9 +24,7 @@ const SettingForm = () => {
   const { mutate, isLoading } = useMutation({
     mutationFn: (formData: any) =>
       fetch('/api/auth/user', { method: 'PUT', body: JSON.stringify(formData) }).then(res => res.json()),
-    onSuccess: data => {
-      console.log(data);
-      console.log('성공');
+    onSuccess: () => {
       updateUser({
         ...formData,
       });

components/user/FollowButton.tsx

@@ -13,13 +13,11 @@ const FollowButton = ({ author: { username, following }, slug }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
 
-  const onSuccess = (res: any) => {
-    console.log(res);
+  const onSuccess = () => {
     queryClient.invalidateQueries(['article', slug]);
   };
 
-  const onError = (err: any) => {
-    console.error(err);
+  const onError = () => {
     router.push('/login');
   };