feat(bottle): profile edit

Nexters · Sep 21, 2024 · 0c6b5a5 · 0c6b5a5
1 parent 2f464ae
commit 0c6b5a5
Show file tree

Hide file tree

Showing 23 changed files with 120 additions and 168 deletions.
diff --git a/apps/bottle/src/app/my/page.tsx b/apps/bottle/src/app/my/page.tsx
@@ -1,6 +1,6 @@
 import { getServerSideTokens } from '@/features/server/serverSideTokens';
 import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary';
-import { currentUserProfileQueryOptions } from '@/store/query/useMyInformation';
+import { currentUserProfileQueryOptions } from '@/store/query/useCurrentUserProfileQuery';
 import { Suspense } from 'react';
 import { MyInformation } from './MyInformation';
 

diff --git a/apps/bottle/src/app/profile/edit/(items)/alcohol/page.tsx b/apps/bottle/src/app/profile/edit/(items)/alcohol/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Alcohol } from '@/components/profile/alcohol';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function AlcoholEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Alcohol
-      initialValue={profileSelect.alcohol}
+      initialValue={profile.alcohol}
       onNext={alcohol => {
-        if (alcohol === profileSelect.alcohol) {
-          router.back();
+        if (alcohol === profile.alcohol) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, alcohol });
+        edit({ ...profile, kakaoId, alcohol });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/height/page.tsx b/apps/bottle/src/app/profile/edit/(items)/height/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Height } from '@/components/profile/height';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function HeightEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Height
-      initialValue={profileSelect.height}
+      initialValue={profile.height}
       onNext={height => {
-        if (height === profileSelect.height) {
-          router.back();
+        if (height === profile.height) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, height });
+        edit({ ...profile, kakaoId, height });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/interests/page.tsx b/apps/bottle/src/app/profile/edit/(items)/interests/page.tsx
@@ -1,11 +1,9 @@
 'use client';
 
 import { Interests } from '@/components/profile/interests';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 import { Profile } from '@/models/profile';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
 import { isSameArray } from '@/utils';
-import { useRouter } from 'next/navigation';
 
 function isSameInterests(interest1: Profile['interest'], interest2: Profile['interest']) {
   return (
@@ -17,22 +15,17 @@ function isSameInterests(interest1: Profile['interest'], interest2: Profile['int
 }
 
 export default function InterestsEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Interests
-      initialValue={profileSelect.interest}
+      initialValue={profile.interest}
       onNext={interest => {
-        if (isSameInterests(profileSelect.interest, interest)) {
-          router.back();
+        if (isSameInterests(profile.interest, interest)) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, interest, kakaoId });
+        edit({ ...profile, interest, kakaoId });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/job/page.tsx b/apps/bottle/src/app/profile/edit/(items)/job/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Job } from '@/components/profile/job';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function JobEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Job
-      initialValue={profileSelect.job}
+      initialValue={profile.job}
       onNext={job => {
-        if (job === profileSelect.job) {
-          router.back();
+        if (job === profile.job) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, job });
+        edit({ ...profile, kakaoId, job });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx b/apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx
@@ -1,26 +1,20 @@
 'use client';
 
 import { KakaoId } from '@/components/profile/kakao-id';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function KakaoIdEditPage() {
-  const router = useRouter();
-  const {
-    data: { kakaoId: initialKakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId: initialKakaoId } = useProfileEditPage();
 
   return (
     <KakaoId
       initialValue={initialKakaoId}
       onNext={kakaoId => {
         if (kakaoId === initialKakaoId) {
-          router.back();
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId });
+        edit({ ...profile, kakaoId });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/keywords/page.tsx b/apps/bottle/src/app/profile/edit/(items)/keywords/page.tsx
@@ -1,28 +1,21 @@
 'use client';
 
 import { Keywords } from '@/components/profile/keywords';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 import { isSameArray } from '@/utils';
-import { useRouter } from 'next/navigation';
 
 export default function KeywordsEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Keywords
-      initialValue={profileSelect.keyword}
+      initialValue={profile.keyword}
       onNext={keyword => {
-        if (isSameArray(keyword, profileSelect.keyword)) {
-          router.back();
+        if (isSameArray(keyword, profile.keyword)) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, keyword });
+        edit({ ...profile, kakaoId, keyword });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/layout.tsx b/apps/bottle/src/app/profile/edit/(items)/layout.tsx
@@ -1,16 +1,23 @@
 import { ProfileLayout } from '@/components/profile/layout';
-import { ReactNode } from 'react';
+import { getServerSideTokens } from '@/features/server/serverSideTokens';
+import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary';
+import { currentUserProfileQueryOptions } from '@/store/query/useCurrentUserProfileQuery';
+import { ReactNode, Suspense } from 'react';
 import { HeaderArea } from './HeaderArea';
 
 interface Props {
   children: ReactNode;
 }
 
 export default function ItemEditLayout({ children }: Props) {
+  const prefetchOptions = currentUserProfileQueryOptions(getServerSideTokens());
+
   return (
     <ProfileLayout>
       <HeaderArea />
-      {children}
+      <Suspense>
+        <ServerFetchBoundary fetchOptions={prefetchOptions}>{children}</ServerFetchBoundary>
+      </Suspense>
     </ProfileLayout>
   );
 }
diff --git a/apps/bottle/src/app/profile/edit/(items)/mbti/page.tsx b/apps/bottle/src/app/profile/edit/(items)/mbti/page.tsx
@@ -1,26 +1,19 @@
 'use client';
 
 import { MBTI } from '@/components/profile/MBTI';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function MBTIEditPage() {
-  const router = useRouter();
-  const {
-    data: { profileSelect, kakaoId },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
-
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
   return (
     <MBTI
-      initialValue={profileSelect?.mbti}
+      initialValue={profile?.mbti}
       onNext={mbti => {
-        if (profileSelect.mbti === mbti) {
-          router.back();
+        if (profile.mbti === mbti) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, mbti });
+        edit({ ...profile, kakaoId, mbti });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/region/page.tsx b/apps/bottle/src/app/profile/edit/(items)/region/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Region } from '@/components/profile/region';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function RegionEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Region
-      initialValue={profileSelect.region}
+      initialValue={profile.region}
       onNext={region => {
-        if (region.city === profileSelect.region.city && region.state === profileSelect.region.state) {
-          router.back();
+        if (region.city === profile.region.city && region.state === profile.region.state) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, region });
+        edit({ ...profile, kakaoId, region });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/religion/page.tsx b/apps/bottle/src/app/profile/edit/(items)/religion/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Religion } from '@/components/profile/religion';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function ReligionEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Religion
-      initialValue={profileSelect.religion}
+      initialValue={profile.religion}
       onNext={religion => {
-        if (religion === profileSelect.religion) {
-          router.back();
+        if (religion === profile.religion) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, religion });
+        edit({ ...profile, kakaoId, religion });
       }}
     />
   );

diff --git a/apps/bottle/src/app/profile/edit/(items)/smoking/page.tsx b/apps/bottle/src/app/profile/edit/(items)/smoking/page.tsx
@@ -1,27 +1,20 @@
 'use client';
 
 import { Smoking } from '@/components/profile/smoking';
-import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { useCurrentUserProfileQuery } from '@/store/query/useCurrentUserProfileQuery';
-import { useRouter } from 'next/navigation';
+import { useProfileEditPage } from '@/hooks/useProfileEditPage';
 
 export default function SmokingEditPage() {
-  const router = useRouter();
-
-  const {
-    data: { kakaoId, profileSelect },
-  } = useCurrentUserProfileQuery();
-  const { mutate } = useProfileMutation({ type: 'edit' });
+  const { goBack, profile, edit, kakaoId } = useProfileEditPage();
 
   return (
     <Smoking
-      initialValue={profileSelect.smoking}
+      initialValue={profile.smoking}
       onNext={smoking => {
-        if (smoking === profileSelect.smoking) {
-          router.back();
+        if (smoking === profile.smoking) {
+          goBack();
           return;
         }
-        mutate({ ...profileSelect, kakaoId, smoking });
+        edit({ ...profile, kakaoId, smoking });
       }}
     />
   );