feat: check if state is valid before edit

wanted-fork-fork · Dec 19, 2024 · ab54d61 · ab54d61
1 parent e852a6d
commit ab54d61
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/src/features/EditInfo/ProfileEditBody.tsx b/src/features/EditInfo/ProfileEditBody.tsx
@@ -1,17 +1,22 @@
 import styles from 'src/processes/shortcut/Shortcut.module.css';
 import { Button } from 'src/shared/ui/Button/Button';
 import { StepMeta } from 'src/shared/types/FormStepMeta';
-import { MyProfile } from 'src/entities/profile/model/myProfileStore';
-import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore';
+import { MyProfile, useMyProfileStore } from 'src/entities/profile/model/myProfileStore';
+import { IdealPartner, useIdealPartnerStore } from 'src/entities/ideal_partner/model/idealPartnerStore';
 import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName';
 
-type Props = {
-  stepMeta: StepMeta<MyProfile> | StepMeta<IdealPartner>;
+type Props<T extends 'PROFILE' | 'IDEAL_PARTNER'> = {
+  type: T;
+  stepMeta: StepMeta<T extends 'PROFILE' ? MyProfile : IdealPartner>;
   onCompleteEdit: () => void;
 };
 
-export const ProfileEditBody = ({ stepMeta, onCompleteEdit }: Props) => {
+export const ProfileEditBody = ({ type, stepMeta, onCompleteEdit }: Props<'PROFILE' | 'IDEAL_PARTNER'>) => {
   const name = useProfileFirstName();
+  const profileState = useMyProfileStore((state) => state);
+  const idealState = useIdealPartnerStore((state) => state);
+
+  const canGoNext = stepMeta.canGoNext(type === 'PROFILE' ? profileState : idealState);
 
   return (
     <>
@@ -23,7 +28,7 @@ export const ProfileEditBody = ({ stepMeta, onCompleteEdit }: Props) => {
       </div>
       <div className={styles.FormMain}>{stepMeta.form({})}</div>
       <div className={styles.FormFooter}>
-        <Button variant={'filled'} widthType={'fill'} color={'primary'} onClick={onCompleteEdit}>
+        <Button variant={'filled'} widthType={'fill'} color={'primary'} onClick={onCompleteEdit} disabled={!canGoNext}>
           변경사항 저장
         </Button>
       </div>

diff --git a/src/features/EditInfo/ProfileEditBottomSheet.tsx b/src/features/EditInfo/ProfileEditBottomSheet.tsx
@@ -5,17 +5,18 @@ import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore
 import { ProfileEditBody } from 'src/features/EditInfo/ProfileEditBody';
 
 type Props = {
-  stepMeta: StepMeta<MyProfile> | StepMeta<IdealPartner> | null;
+  type: 'PROFILE' | 'IDEAL_PARTNER';
+  stepMeta: StepMeta<MyProfile | IdealPartner> | null;
   onClose: () => void;
   onCompleteEdit: () => void;
 };
 
-export const ProfileEditBottomSheet = ({ stepMeta, onClose, onCompleteEdit }: Props) => {
+export const ProfileEditBottomSheet = ({ type, stepMeta, onClose, onCompleteEdit }: Props) => {
   return (
     <BottomSheet isOpen={Boolean(stepMeta)} onClose={onClose}>
       <BottomSheet.Header onPrev={onClose} onClose={onClose} />
       <BottomSheet.Content>
-        {stepMeta && <ProfileEditBody stepMeta={stepMeta} onCompleteEdit={onCompleteEdit} />}
+        {stepMeta && <ProfileEditBody type={type} stepMeta={stepMeta} onCompleteEdit={onCompleteEdit} />}
       </BottomSheet.Content>
     </BottomSheet>
   );

diff --git a/src/features/EditInfo/ProfileEditContext.tsx b/src/features/EditInfo/ProfileEditContext.tsx
@@ -1,6 +1,10 @@
 import { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
 import { getStepFromFormMeta, MetaKey } from 'src/features/EditInfo/lib/getStepFromFormMeta';
 import { ProfileEditBottomSheet } from 'src/features/EditInfo/ProfileEditBottomSheet';
+import { MyProfileStepMeta } from 'src/pages/form/my_profile/MyProfileStepMeta';
+import { StepMeta } from 'src/shared/types/FormStepMeta';
+import { MyProfile } from 'src/entities/profile/model/myProfileStore';
+import { IdealPartner } from 'src/entities/ideal_partner/model/idealPartnerStore';
 
 export type EditProfileFunction = (key: MetaKey) => void;
 
@@ -19,7 +23,9 @@ export const ProfileEditProvider = ({
   onCompleteEdit,
 }: PropsWithChildren<{ onCompleteEdit: (close: () => void) => void }>) => {
   const [selectedKey, setSelectedKey] = useState<MetaKey | null>(null);
-  const selectedStep = getStepFromFormMeta(selectedKey);
+
+  const type = selectedKey ?? '' in MyProfileStepMeta ? 'PROFILE' : 'IDEAL_PARTNER';
+  const selectedStep = getStepFromFormMeta(selectedKey) as StepMeta<MyProfile | IdealPartner>;
 
   const handleClickEdit = useCallback<EditProfileFunction>((key) => {
     setSelectedKey(key);
@@ -42,7 +48,12 @@ export const ProfileEditProvider = ({
   return (
     <ProfileEditContext.Provider value={value}>
       {children}
-      <ProfileEditBottomSheet stepMeta={selectedStep} onClose={handleClose} onCompleteEdit={handleCompleteEdit} />
+      <ProfileEditBottomSheet
+        type={type}
+        stepMeta={selectedStep}
+        onClose={handleClose}
+        onCompleteEdit={handleCompleteEdit}
+      />
     </ProfileEditContext.Provider>
   );
 };

diff --git a/src/processes/shortcut/Shortcut.tsx b/src/processes/shortcut/Shortcut.tsx
@@ -50,7 +50,9 @@ export const Shortcut = ({ right, bottom }: { right: `${number}px`; bottom: `${n
 
   const selectedStep =
     selectedKey &&
-    (selectedKey.section === 'PROFILE' ? MyProfileStepMeta[selectedKey.key] : IdealPartnerStepMeta[selectedKey.key]);
+    ((selectedKey.section === 'PROFILE'
+      ? MyProfileStepMeta[selectedKey.key]
+      : IdealPartnerStepMeta[selectedKey.key]) as StepMeta<MyProfile | IdealPartner>);
 
   const onSelectProfile = (key: keyof typeof MyProfileStepMeta) => {
     setSelectedKey({ section: 'PROFILE', key });
@@ -108,7 +110,7 @@ export const Shortcut = ({ right, bottom }: { right: `${number}px`; bottom: `${n
           )}
           {selectedKey !== null && selectedStep && (
             <div className={styles.FormWrapper}>
-              <ProfileEditBody stepMeta={selectedStep} onCompleteEdit={onCompleteEdit} />
+              <ProfileEditBody type={selectedKey.section} stepMeta={selectedStep} onCompleteEdit={onCompleteEdit} />
             </div>
           )}
         </BottomSheet.Content>