Merge pull request #102 from Team-Senifit/fix/selection-persist-hydration

[운동 탭] 이전 선택 상태 유지 안정화

Author: tmin002

src/app/(with-container)/(exercise)/exercise/customized/page.tsx

@@ -36,6 +36,7 @@ const Page = () => {
     setSelectedProgram,
     selectedRoutineRecord,
     setSelectedRoutineRecord,
+    hasHydrated,
     customizedForm,
     setCustomizedForm,
   } = useProgramStore();
@@ -65,6 +66,7 @@ const Page = () => {
   }, [customizedForm, reset]);
 
   const onSubmit = async (data: ICustomizedRoutineField) => {
+    if (!hasHydrated) return;
     // 체크 페이지에서 돌아왔을 때 옵션 UI 복원을 위해 저장
     setCustomizedForm(data);
     const {
@@ -89,6 +91,7 @@ const Page = () => {
     router.push("/exercise/members");
   };
 
+  if (!hasHydrated) return null;
   return (
     <>
       <Stack spacing={[2, 3]}>

src/app/(with-container)/(exercise)/exercise/members/page.tsx

@@ -33,6 +33,7 @@ const Page = () => {
 
   const {
     type,
+    hasHydrated,
     selectedMembers: storedSelectedMembers,
     setSelectedMembers,
     setSelectedRoutineRecord,
@@ -80,6 +81,9 @@ const Page = () => {
 
   const selectedMembers = watch("members");
 
+  // rehydrate 전엔 이전 선택이 비어 보일 수 있어, 실수로 '다음'을 눌러 선택이 초기화되는 문제를 방지
+  if (!hasHydrated) return null;
+
   const onSubmit = (data: { members: number[] }) => {
     if (!data.members?.length) {
       setSelectedMembers([]);

src/app/(with-container)/(exercise)/exercise/thematic/page.tsx

@@ -35,6 +35,7 @@ const Page = () => {
 
   const {
     setSelectedRoutineRecord,
+    hasHydrated,
     thematicWorkoutKind,
     setThematicWorkoutKind,
   } = useProgramStore();
@@ -56,6 +57,7 @@ const Page = () => {
   }, [thematicWorkoutKind, reset]);
 
   const onSubmit = (data: IThematicRoutineField) => {
+    if (!hasHydrated) return;
     const workoutKind = data.workout_kind;
     setThematicWorkoutKind(workoutKind);
 
@@ -85,6 +87,8 @@ const Page = () => {
 
     router.push(`/exercise/thematic/${workoutKind}`);
   };
+
+  if (!hasHydrated) return null;
   return (
     <>
       <Stack

src/app/panel/SenifitThemeProvider.tsx

@@ -100,25 +100,24 @@ declare module "@mui/material/styles" {
     };
   }
 
-  interface PaletteOptions
-    extends Pick<
-      MuiPaletteOptions,
-      | "common"
-      | "primary"
-      | "secondary"
-      | "error"
-      | "warning"
-      | "info"
-      | "success"
-      | "mode"
-      | "contrastThreshold"
-      | "tonalOffset"
-      | "divider"
-      | "background"
-      | "text"
-      | "action"
-      | "grey"
-    > {
+  interface PaletteOptions extends Pick<
+    MuiPaletteOptions,
+    | "common"
+    | "primary"
+    | "secondary"
+    | "error"
+    | "warning"
+    | "info"
+    | "success"
+    | "mode"
+    | "contrastThreshold"
+    | "tonalOffset"
+    | "divider"
+    | "background"
+    | "text"
+    | "action"
+    | "grey"
+  > {
     static?: {
       white?: string;
       black?: string;

src/components/CTAButton.tsx

@@ -1,5 +1,6 @@
 import { Button, ButtonProps, Typography } from "@mui/material";
 import React from "react";
+import Link from "next/link";
 
 // 이 컴포넌트에 종속되는 타입이므로 이 파일에 정의
 export interface ICTAButtonProps extends ButtonProps {
@@ -8,18 +9,25 @@ export interface ICTAButtonProps extends ButtonProps {
 }
 
 const CTAButton = (props: ICTAButtonProps) => {
+  const { href, text, ...rest } = props;
   return (
     <Button
       variant={"text"}
-      {...props}
+      {...rest}
+      {...(href
+        ? {
+            component: Link,
+            href,
+          }
+        : {})}
       sx={{
         py: 2,
         px: 8,
         borderRadius: "0.75rem",
         ...props.sx,
       }}
     >
-      <Typography variant={"Heading1"}>{props.text}</Typography>
+      <Typography variant={"Heading1"}>{text}</Typography>
     </Button>
   );
 };

src/components/SenifitToggleButtonGroupField.tsx

@@ -14,7 +14,9 @@ export interface ISenifitToggleButtonGroupFieldProps<
   T extends string | number | boolean,
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends Omit<ISenifitToggleButtonGroupProps<T>, "value" | "onChange">,
+>
+  extends
+    Omit<ISenifitToggleButtonGroupProps<T>, "value" | "onChange">,
     Pick<
       UseControllerProps<TFieldValues, TName>,
       "name" | "control" | "rules"

src/components/VideoPlayer.tsx

@@ -22,8 +22,10 @@ export interface IVideoHandle {
   getEl: () => HTMLVideoElement | null;
 }
 
-export interface IVideoPlayerProps
-  extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "onTimeUpdate"> {
+export interface IVideoPlayerProps extends Omit<
+  React.VideoHTMLAttributes<HTMLVideoElement>,
+  "onTimeUpdate"
+> {
   src: string;
   length: number;
   poster?: string;

src/states/useProgramStore.ts

@@ -6,6 +6,7 @@ import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 
 interface IProgramStore {
+  hasHydrated: boolean;
   selectedProgram: IRoutineDetail | null;
   selectedMembers: IMember[];
   type: "customized" | "popular" | ["thematic", WorkoutKind] | null;
@@ -29,18 +30,21 @@ interface IProgramStore {
   ) => void;
   setThematicWorkoutKind: (kind: WorkoutKind | null) => void;
   setCustomizedForm: (form: Partial<ICustomizedRoutineField> | null) => void;
+  setHasHydrated: (v: boolean) => void;
   clearStore: () => void;
 }
 
 const useProgramStore = create<IProgramStore>()(
   persist(
     (set) => ({
+      hasHydrated: false,
       selectedProgram: null,
       selectedMembers: [],
       type: null,
       selectedRoutineRecord: null,
       thematicWorkoutKind: null,
       customizedForm: null,
+      setHasHydrated: (v) => set({ hasHydrated: v }),
       setSelectedRoutineRecord: (record) =>
         set({ selectedRoutineRecord: record }),
       setSelectedProgram: (program) => set({ selectedProgram: program }),
@@ -50,6 +54,7 @@ const useProgramStore = create<IProgramStore>()(
       setCustomizedForm: (form) => set({ customizedForm: form }),
       clearStore: () =>
         set({
+          hasHydrated: true, // clear 시에도 UI 입력 차단은 하지 않음
           selectedProgram: null,
           selectedMembers: [],
           type: null,
@@ -61,6 +66,9 @@ const useProgramStore = create<IProgramStore>()(
     {
       name: "program-store",
       storage: createJSONStorage(() => localStorage),
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true);
+      },
     },
   ),
 );

src/types/ISelect.ts

@@ -18,11 +18,10 @@ export interface ISelectOption<T extends TOptionValue> {
 }
 
 /** 공용 Select 베이스 props */
-export interface IBaseSelectProps<T extends TOptionValue>
-  extends Omit<
-    SelectProps<T>,
-    "multiple" | "value" | "onChange" | "renderValue" | "native"
-  > {
+export interface IBaseSelectProps<T extends TOptionValue> extends Omit<
+  SelectProps<T>,
+  "multiple" | "value" | "onChange" | "renderValue" | "native"
+> {
   options: ISelectOption<T>[];
   placeholder?: ReactNode;
   /** 메뉴 Paper / List 개별 커스텀 */
@@ -31,16 +30,18 @@ export interface IBaseSelectProps<T extends TOptionValue>
 }
 
 /** 단일 선택 */
-export interface ISingleSelectProps<T extends TOptionValue>
-  extends IBaseSelectProps<T> {
+export interface ISingleSelectProps<
+  T extends TOptionValue,
+> extends IBaseSelectProps<T> {
   multiple?: false;
   value: T | "";
   onChange: (v: T) => void;
 }
 
 /** 다중 선택 */
-export interface IMultiSelectProps<T extends TOptionValue>
-  extends IBaseSelectProps<T> {
+export interface IMultiSelectProps<
+  T extends TOptionValue,
+> extends IBaseSelectProps<T> {
   multiple: true;
   value: T[];
   onChange: (v: T[]) => void;

src/types/IToggleButton.ts

@@ -12,8 +12,10 @@ export interface IResponsiveMaxItems {
 }
 
 /** 개별 토글 버튼 공용 props */
-export interface ISenifitToggleButtonProps
-  extends Omit<MuiButtonProps, "onChange"> {
+export interface ISenifitToggleButtonProps extends Omit<
+  MuiButtonProps,
+  "onChange"
+> {
   /** 버튼 높이 프리셋 */
   sizeVariant?: SizeVariant;
   /** 그룹 내에서 각 버튼을 가변 폭(flex:1)으로 확장할지 여부 */
@@ -68,8 +70,9 @@ export interface IBaseProps<T extends string | number | boolean> {
 }
 
 /** 단일 선택(Exclusive) 모드용 props */
-export interface IExclusiveProps<T extends string | number | boolean>
-  extends IBaseProps<T> {
+export interface IExclusiveProps<
+  T extends string | number | boolean,
+> extends IBaseProps<T> {
   /** true 또는 생략 시 단일 선택 모드 */
   exclusive?: true;
   /** 현재 선택 값 */
@@ -79,8 +82,9 @@ export interface IExclusiveProps<T extends string | number | boolean>
 }
 
 /** 다중 선택(Multi) 모드용 props */
-export interface IMultiProps<T extends string | number | boolean>
-  extends IBaseProps<T> {
+export interface IMultiProps<
+  T extends string | number | boolean,
+> extends IBaseProps<T> {
   /** false일 때만 다중 선택 모드로 동작 */
   exclusive: false;
   /** 현재 선택 값 배열 */