지난한 리팩토링 기록 (4/17+)

export function ScheduleEdit() {
  return (
    <ScheduleEditData>
      {({ states, setStates, fn }) => (
      <div className={BASE}>
            <Spacing size="2" />
            <Form ...
            {/* 시작 날짜 및 시간 */}
            <Input
                  id="title"
                  type="text"
                  name="title"
                  value={states.scheduleName}
                  onChange={e => setStates.setScheduleName(e.target.value)}
                  placeholder={CREATE.PLACEHOLDERS.TITLE}
                />
            ...
            
            {/* 매우 장황한 폼 컴포넌트 */}
            
            ... />
     </ScheduleEditData>
  );
}

export function ScheduleEditData(props: { children: (args: ScheduleEditDataProps) => ReactNode }) {
  const [startYear, setStartYear] = useState<number | undefined>();
  const [startMonth, setStartMonth] = useState<number | undefined>();
  
  ...
  {/* 정말 많은 상태와 함수들 */}
  ...
  
  //states는 상태, setStates는 setter, fn은 비동기 함수나 다른 모든 함수들을 묶어서 저장함
  return props.children({ states, setStates, fn });
}

export interface ScheduleCreateRequest {
  scheduleContent: string;
  isTimeSelected: boolean;
  isDateSelected: boolean;
  isAllday: boolean;
  isAuthorizedAll: boolean;
  scheduleStartAt: string;
  scheduleEndAt: string;
  participants: Array<UserReadResponse>;
  alarmTime: string;
  scheduleName: string;
  scheduleMemo: string;
}

export function ScheduleEditForm({ scheduleDetail }: ScheduleEditFormProps) {

  const [values, refValues, submit, setUseFormValues, setUseFormData] = useScheduleEditStore(
    useShallow(state => [state.values, state.refValues, state.submit, state.setUseFormValues, state.setUseFormData])
  );
  useForm<ScheduleEditFormData>({
    initialValues: scheduleDetail || initFormValues,
    onSubmit: scheduleSubmit,
    validator: scheduleFormValidator,
    refInputNames: refInputNames,
    setExternalStoreValues: setUseFormValues,
    setExternalStoreData: setUseFormData,
  }); //외부 상태관리 라이브러리를 사용할 때는 상태관리 라이브러리의 값을 사용하고, 이 훅의 리턴값을 사용하지 않습니다

  return (
    <>
      <Form
        formName="scheduleEdit"
        onSubmit={() => {
          submit({ ...values, ...refValues });
        }}
      >
        <Flex flexDirection="column" justifyContents="start" alignItems="start">
          <H2>{CREATE.ADD_SCHEDULE}</H2>
          <Spacing dir="v" size="3" />
          <IsAuthorizedAll />
				    ...
          <Category />
          <ScheduleMemo />
          <Spacing dir="v" size="3" />
          <Btn type="submit" variant="key">
            {CREATE.ADD_SCHEDULE}
          </Btn>
        </Flex>
      </Form>
      <Spacing dir="v" size="5" />
    </>
  );
}

export const ScheduleEditContext = createUseFormContext<ScheduleEditFormData>();

export function ScheduleEditForm({ scheduleDetail }: ScheduleEditFormProps) {
  const scheduleSubmit = async() => {...}

  const data = useForm<ScheduleEditFormData>({
    initialValues: scheduleDetail || initFormValues,
    onSubmit: scheduleSubmit,
    refInputNames: refInputNames,
  });

  return (
    <>
      <ScheduleEditContext.Provider value={data}>
        <Form
          formName="scheduleEdit"
          onSubmit={data.submit}
        >
          <Flex flexDirection="column" justifyContents="start" alignItems="start">
            <H2>{CREATE.ADD_SCHEDULE}</H2>
            <Spacing dir="v" size="3" />
            <IsAuthorizedAll />
            <Spacing dir="v" size="2" />
            <ScheduleName />
						{...}
            <Category />
            <ScheduleMemo />
            <Spacing dir="v" size="3" />
            <Btn type="submit" variant="key">
              {CREATE.ADD_SCHEDULE}
            </Btn>
          </Flex>
        </Form>
        <Spacing dir="v" size="5" />
      </ScheduleEditContext.Provider>
    </>
  );
}

export function ScheduleName() {
  const [values, handleChange] = useScheduleEditStore(useShallow(state => [state.values, state.handleChange]));

  return (
    <Label htmlFor="scheduleName">
      <Input id="scheduleName" type="text" name="scheduleName" value={values.scheduleName} onChange={handleChange} placeholder={CREATE.PLACEHOLDERS.TITLE} />
    </Label>
  );
}

export const MODE_CONTEXT = createContext<
  [
    number | 'ADD_GROUP' | 'SEARCH' | 'NOT_EDITING',
    Dispatch<SetStateAction<number | 'ADD_GROUP' | 'SEARCH' | 'NOT_EDITING'>>,
  ]
>(['NOT_EDITING', () => {}]); 

export function FriendFrame({ children }: FriendsProps) {
  const [MODE, SET_MODE] = useState<
    number | 'ADD_GROUP' | 'SEARCH' | 'NOT_EDITING'
  >('NOT_EDITING');
  
  return (
    <MODE_CONTEXT.Provider value={[MODE, SET_MODE]}>
      <div className={FRAME}>
        <Flex flexDirection="column" justifyContents="start" alignItems="start">
          <Flex width="fill" justifyContents="spaceBetween">
            <H3>친구</H3>
            <Flex justifyContents="start">
            
              {MODE === 'ADD_GROUP' ? (
                <BtnRound ...
                ...
     >
   )
 }

export type ROUTES = 'READ' | 'SEARCH' | 'UPDATE' | 'CREATE';

export interface Page {
  PATH: ROUTES;
  updating: number | null;
  setUpdating: (to: number | null) => void;
  PushToFriend: (to: ROUTES) => void;
}
export const pageSlice: StateCreator<Page, [], [], Page> = set => ({
  PATH: 'READ',
  updating: null,
  setUpdating: to => set(state => ({ updating: to })),
  PushToFriend: to => set(state => ({ PATH: to })),
});

export interface User {
  userSeq: number;
  userName: string;
  userId: string;
  imageUrl: string;
}

export interface Group {
  groupSeq: number;
  groupName: string;
  groupMember: Array<User>;
}

export type FriendReadResponse = Array<Group>;

export interface GroupCreateRequest {
  groupName: string;
  userSeqs: Array<number>;
}
export interface GroupUpdateRequest {
  groupName: string;
  userSeqs: Array<number>;
}

export function FriendFrameLayout() {
  return (
    <div className={FRAME}>
      <FriendFrameHeader />
      <FriendFrameBody>
        <FriendRouter />
      </FriendFrameBody>
    </div>
  );
}

export function FriendRouter() {
  const [PATH, PushToFriend] = useFriendRouter(state => [state.PATH, state.PushToFriend]);

  switch (PATH) {
    case 'ADD':
      return <FriendGroupCreate />;
    case 'READ':
      return <FriendGroupRead />;
    case 'SEARCH':
      return <FriendGroupSearch />;
    case 'UPDATE':
      return <FriendGroupUpdate />;
    default:
      PushToFriend('READ');
      return <FriendGroupRead />;
  }
}

//이전 리팩토링 코드
export function FriendGroupUpdate() {
  const [pushToFriend, updatingGroupSeq, setUpdatingGroupSeq] = useFriendRouter(...);
  //페이지 이동 함수

 const [values, setGroup, submit, handleChange, addUser, deleteUser, setFormData] = useGroupRequestFormStore(
    useShallow(state => [...])
  ); //상태 관리 라이브러리 zustand에 연동된 useForm의 값들

  const { data, mutate } = useFriend();
  //친구 리스트 data, 친구 리스트를 재검증하는 함수 mutate (SWR hook)
  const { ALL_FRIENDS, UPDATING_GROUP } = data?.reduce(...)
	//API 설계상 groupName === null인 그룹이 "전체 친구 목록"입니다.

    useForm<GroupRequestForm>({
    initialValues: values,
    onSubmit: () => updateGroup(updatingGroupSeq, values),
  }); //이 시점에서 zustand에 useForm의 초기값이 들어갑니다.
  	
  useEffect(() => {
    UPDATING_GROUP && setGroup(UPDATING_GROUP);
  }, [UPDATING_GROUP]);
  //현재 편집중인 그룹 정보를 정상적으로 받아왔다면 존재한다면, 폼의 초기값을 세팅합니다.
	//SWR이 가져온 서버 상태를 편집 가능한 클라이언트 상태의 초기값으로 설정하는 부분입니다.

  return (
    <>
      <Form
        formName="FriendGroupCreate"
        onSubmit={async e => {
          e.preventDefault();
          submit(values);
          await mutate();
          pushToFriend('READ');
        }}
      >
      ...
      
     </>
  )
}

export function FriendGroupUpdate() {
  const [pushToFriend, updatingGroupSeq, setUpdatingGroupSeq] = useFriendRouter(state => [
    state.PushToFriend,
    state.updatingGroupSeq,
    state.setUpdatingGroupSeq,
  ]);

	//Zustand Store
  const { groupName, groupMembers, setGroupName, addUser, deleteUser } = useGroupRequestFormStore(useShallow(state => state));

	//SWR HOOK, 사실상 최초 1회만 데이터를 불러오도록 설정
  const { UPDATING_GROUP, ALL_FRIENDS, isLoading, mutate } = useFriend(updatingGroupSeq);

	//useForm
  const { values, setValues, submit, handleChange } = useForm<GroupRequestForm>({
    initialValues: {
      groupName: '',
      groupMembers: [],
    },
    onSubmit: () => updateGroup(updatingGroupSeq, { groupName, groupMembers }),
  });
  
  //SWR 데이터를 useForm 초기값으로 설정
  useEffect(() => {
    if (UPDATING_GROUP) {
      setValues({ groupMembers: UPDATING_GROUP.groupMember, groupName: UPDATING_GROUP.groupName });
    }
  }, [UPDATING_GROUP]);

  if (isLoading || !UPDATING_GROUP) return <FriendLoading />;
  else
    return (
      <>
        {
          <Form
            formName="FriendGroupEdit"
            onSubmit={async e => {
              e.preventDefault();
              //폼 데이터를 Zustand 스토어로 옮겨 가공하고 전송한 후, 데이터 재검증
              setGroupName(values.groupName);
              addUser(values.groupMembers);
              submit({});
              await mutate();
              setUpdatingGroupSeq(null);
              pushToFriend('READ');
            }}
          >
            <GroupHeader>
						{...}
            </GroupHeader>
            <Spacing size="0.5" />
	          {...}
          </Form>
        }
      </>
    );
}