Merge pull request #57 from School-of-Company/fix/form-component-mount

🔀 간단한 변경사항 적용

src/shared/ui/SelectUserType/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { ArrowDown } from '@/shared/assets/icons';
 
 interface Option {
@@ -10,17 +10,25 @@ interface Option {
 
 interface SelectProps {
   options: Option[];
-  defaultValue?: string;
+  value: string;
   onChange?: (value: string) => void;
 }
 
-const SelectUserType = ({ options, defaultValue, onChange }: SelectProps) => {
+const SelectUserType = ({ options, value, onChange }: SelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState<Option | undefined>(
-    options.find((option) => option.value === defaultValue) || options[0],
+    options.find((option) => option.value === value) || options[0],
   );
 
+  useEffect(() => {
+    const newSelectedOption = options.find((option) => option.value === value);
+    if (newSelectedOption) {
+      setSelectedOption(newSelectedOption);
+    }
+  }, [value, options]);
+
   const toggleOpen = () => setIsOpen((prev) => !prev);
+
   const handleOptionClick = (option: Option) => {
     setSelectedOption(option);
     setIsOpen(false);

src/widgets/expo-manage/ui/ExpoManageForm/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import withLoading from '@/shared/hocs/withLoading';
 import { fileActions } from '@/shared/model/footerActions';
 import { Participant, Trainee } from '@/shared/types/expo-manage/type';
@@ -11,18 +11,13 @@ import { useExpoManageQueries } from '../../model/useExpoData';
 
 const ExpoManageForm = ({ id }: { id: string }) => {
   const [selectOption, setSelectOption] = useState<string>('trainee');
-  const [resetKey, setResetKey] = useState(0);
 
   const { expoQueries, isLoading } = useExpoManageQueries(id, selectOption);
 
   const requestPrintCategories = useMemo(() => {
     return category(selectOption);
   }, [selectOption]);
 
-  useEffect(() => {
-    setResetKey((prevKey) => prevKey + 1);
-  }, [selectOption]);
-
   const expoData = expoQueries.data || [];
 
   return withLoading({
@@ -31,11 +26,10 @@ const ExpoManageForm = ({ id }: { id: string }) => {
       <div className="mx-auto w-full max-w-[1200px] space-y-[30px] px-5">
         <SelectUserType
           options={selectOptionCategories}
-          defaultValue="trainee"
+          value={selectOption}
           onChange={(value) => setSelectOption(value)}
         />
         <TableForm<Trainee | Participant>
-          key={resetKey}
           categories={requestPrintCategories}
           data={expoData}
           maxHeight="414px"

src/widgets/program/model/category.ts

@@ -0,0 +1,8 @@
+export const standardCategories = ['번호', '프로그램', '시작시간', '종료시간'];
+export const trainingCategories = [
+  '번호',
+  '프로그램',
+  '시작시간',
+  '종료시간',
+  '상태',
+];

src/widgets/program/ui/ProgramForm/index.tsx

@@ -1,29 +1,24 @@
 'use client';
 
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { ProgramNavigation } from '@/entities/program';
 import withLoading from '@/shared/hocs/withLoading';
 import { routeActions } from '@/shared/model/footerActions';
 import { TableForm } from '@/shared/ui/Table';
+import { standardCategories, trainingCategories } from '../../model/category';
 import { useProgramQueries } from '../../model/useProgramData';
 
 const ProgramForm = ({ id }: { id: string }) => {
   const searchParams = useSearchParams();
   const navigation = searchParams.get('navigation') || 'standard';
-  const [resetKey, setResetKey] = useState(0);
+
   const router = useRouter();
 
   const { programQueries, isLoading } = useProgramQueries(id, navigation);
 
   const requestPrintCategories = useMemo(() => {
-    return navigation === 'training'
-      ? ['번호', '프로그램', '시작시간', '종료시간', '상태']
-      : ['번호', '프로그램', '시작시간', '종료시간'];
-  }, [navigation]);
-
-  useEffect(() => {
-    setResetKey((prevKey) => prevKey + 1);
+    return navigation === 'training' ? trainingCategories : standardCategories;
   }, [navigation]);
 
   const programData = programQueries.data || [];
@@ -34,7 +29,6 @@ const ProgramForm = ({ id }: { id: string }) => {
       <div className="mx-auto w-full max-w-[1200px] space-y-[46px] px-5">
         <ProgramNavigation />
         <TableForm
-          key={resetKey}
           categories={requestPrintCategories}
           data={programData}
           maxHeight="414px"