[chore]포매팅

Author: mtm-git1018

src/app/layout.tsx

@@ -8,7 +8,6 @@ import KaKaoScript from './api/kakao/KaKaoScript';
 import IdleHandler from '@/domains/login/components/IdleHandler';
 import Provider from '@/shared/api/Provider';
 
-
 export const metadata: Metadata = {
   title: { default: 'SSOUL', template: 'SSOUL | %s' },
   metadataBase: new URL('http://www.ssoul.life'),

src/app/mypage/layout.tsx

@@ -5,14 +5,13 @@ import { Suspense } from 'react';
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
-
-      <Suspense fallback={<SkeletonLayout />}>
-        <div className="max-w-1024 page-layout py-12">
-          <MyProfile />
-          <MyNav />
-          <div className="mt-5">{children}</div>
-        </div>
-      </Suspense>
+    <Suspense fallback={<SkeletonLayout />}>
+      <div className="max-w-1024 page-layout py-12">
+        <MyProfile />
+        <MyNav />
+        <div className="mt-5">{children}</div>
+      </div>
+    </Suspense>
   );
 }
 export default Layout;

src/domains/mypage/api/fetchProfile.ts

@@ -4,17 +4,16 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Profile } from '../types/type';
 
 function useFetchProfile() {
-
-  const queryClient = useQueryClient()
+  const queryClient = useQueryClient();
 
   const fetchProfile = async () => {
     const res = await fetch(`${getApi}/me/profile`, {
       method: 'GET',
       credentials: 'include',
     });
     const json = await res.json();
- 
-    return json.data
+
+    return json.data;
   };
 
   const patchNickName = useMutation({
@@ -23,25 +22,25 @@ function useFetchProfile() {
         method: 'PATCH',
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({nickname})
-      })
-      if (!res.ok) throw new Error('닉네임 수정 실패')
-      const json = await res.json()
-      return json.data
+        body: JSON.stringify({ nickname }),
+      });
+      if (!res.ok) throw new Error('닉네임 수정 실패');
+      const json = await res.json();
+      return json.data;
     },
 
     onMutate: async (nickname) => {
       // 같은 키로 요청중인 fetch 중단
-      await queryClient.cancelQueries({ queryKey: ['myProfile'] })
+      await queryClient.cancelQueries({ queryKey: ['myProfile'] });
       // 캐시에 저장된 데이터를 즉시  가져오는 역할 실패시 prev로 롤백
-      const prev = queryClient.getQueryData(['myProfile'])
+      const prev = queryClient.getQueryData(['myProfile']);
       // 캐시 내용을 수정
-      queryClient.setQueryData(['myProfile'], (old:Profile) => ({ ...old, nickname }))
-      return {prev}
-    }
-  })
-  const profile = useQuery({queryKey:['myProfile'], queryFn:fetchProfile})
+      queryClient.setQueryData(['myProfile'], (old: Profile) => ({ ...old, nickname }));
+      return { prev };
+    },
+  });
+  const profile = useQuery({ queryKey: ['myProfile'], queryFn: fetchProfile });
 
-return{fetchProfile , profile, patchNickName}
+  return { fetchProfile, profile, patchNickName };
 }
 export default useFetchProfile;

src/domains/mypage/components/EditNickName.tsx

@@ -28,26 +28,26 @@ function EditNickName({
 }: Props) {
   const [defaultNickname, setDefaultNickname] = useState(nickname);
   const { toastSuccess, toastError } = useToast();
-  const { patchNickName } = useFetchProfile()
-  
+  const { patchNickName } = useFetchProfile();
+
   useEffect(() => {
     setEditNickName(nickname);
     setDefaultNickname(nickname);
   }, [nickname, setEditNickName]);
 
   const handlesave = async () => {
-      if (editNickName.length <= 1 || editNickName.length >= 8) {
-        toastError('닉네임은 2글자 이상 8글자 이내로 입력해야합니다');
-        return;
-      }
+    if (editNickName.length <= 1 || editNickName.length >= 8) {
+      toastError('닉네임은 2글자 이상 8글자 이내로 입력해야합니다');
+      return;
+    }
 
-      await setNickName(editNickName);
-      // CRUD중 CUD를 관리하는 메서드
-      await patchNickName.mutateAsync(editNickName)
+    await setNickName(editNickName);
+    // CRUD중 CUD를 관리하는 메서드
+    await patchNickName.mutateAsync(editNickName);
 
-      await setIsOpen(false);
-      toastSuccess('닉네임이 저장되었습니다.');
-  }
+    await setIsOpen(false);
+    toastSuccess('닉네임이 저장되었습니다.');
+  };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEditNickName(e.target.value);

src/domains/mypage/main/MyProfile.tsx

@@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 
 function MyProfile() {
   const { fetchProfile } = useFetchProfile();
-  const {data} = useQuery({ queryKey: ['myProfile'], queryFn: fetchProfile });
+  const { data } = useQuery({ queryKey: ['myProfile'], queryFn: fetchProfile });
 
   if (!data) return;
   const {
@@ -19,7 +19,7 @@ function MyProfile() {
     myCommentCount,
     myKeepCount,
     abvDegree,
-  } = data
+  } = data;
 
   return (
     <section className="h-auto  p-6 bg-white rounded-2xl">

src/domains/mypage/main/MySetting.tsx

@@ -7,10 +7,9 @@ import { useEffect, useState } from 'react';
 import useFetchProfile from '../api/fetchProfile';
 import { useQuery } from '@tanstack/react-query';
 
-
 function MySetting() {
   const { fetchProfile } = useFetchProfile();
-  const { data:profile } = useQuery({ queryKey: ['myProfile'], queryFn: fetchProfile });
+  const { data: profile } = useQuery({ queryKey: ['myProfile'], queryFn: fetchProfile });
   const [isOpen, setIsOpen] = useState(false);
   const [isQuit, setIsQuit] = useState(false);
   const [nickname, setNickName] = useState(profile?.nickname);

src/domains/mypage/types/type.d.ts

@@ -4,9 +4,9 @@ export interface Profile {
   abvLevel: number;
   email: string | null;
   id: number;
-  myCommentCount: number
-  myKeepCount: number
+  myCommentCount: number;
+  myKeepCount: number;
   myLikedPostCount: number;
   myPostCount: number;
   nickname: string;
-}
+}

src/shared/api/Provider.tsx

@@ -1,13 +1,8 @@
-
 'use client';
 import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   const [client] = useState(() => new QueryClient());
-  return (
-    <QueryClientProvider client={client}>
-      {children}
-    </QueryClientProvider>
-  );
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
 }