[FE] roomInfoStore에서 인자를 응집성있게 받아 사용한다

frontend/src/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances.tsx

@@ -8,6 +8,7 @@ import { IncludedMaintenancesData } from '@/constants/roomInfo';
 import checklistIncludedMaintenancesStore from '@/store/checklistIncludedMaintenancesStore';
 
 const IncludedMaintenances = () => {
+  useStore(checklistIncludedMaintenancesStore);
   const actions = useStore(checklistIncludedMaintenancesStore, state => state.actions);
 
   return (

frontend/src/store/checklistRoomInfoStore.ts

@@ -1,81 +1,38 @@
-import createFormStore from '@/store/createFormStore';
+import createFormStore, { FormSpec } from '@/store/createFormStore';
 import { RoomInfo } from '@/types/room';
+import { objectMap } from '@/utils/typeFunctions';
 import {
-  inRangeValidator,
   isIntegerValidator,
   isNumericValidator,
   lengthValidator,
   nonNegativeValidator,
   positiveValidator,
-  Validator,
 } from '@/utils/validators';
 
-export const initialRoomInfo = {
-  roomName: '',
-  deposit: '',
-  rent: '',
-  maintenanceFee: '',
-  station: '',
-  address: '',
-  walkingTime: '',
-  size: '',
-  floor: '',
-  floorLevel: '지상',
-  type: '',
-  structure: '',
-  contractTerm: '',
-  realEstate: '',
-  occupancyMonth: '',
-  occupancyPeriod: '초',
-  summary: '',
-  memo: '',
-} as const;
-
-const roomInfoType = {
-  roomName: 'string',
-  address: 'string',
-  station: 'string',
-  deposit: 'number',
-  rent: 'number',
-  maintenanceFee: 'number',
-  walkingTime: 'number',
-  size: 'number',
-  floor: 'number',
-  floorLevel: 'string',
-  type: 'string',
-  structure: 'string',
-  contractTerm: 'number',
-  realEstate: 'string',
-  occupancyMonth: 'number',
-  occupancyPeriod: 'string',
-  summary: 'string',
-  memo: 'string',
-  createdAt: 'string',
-  includedMaintenances: '',
-} as const;
-
-const validatorSet: Record<string, Validator[]> = {
-  roomName: [lengthValidator(20)],
-  address: [],
-  deposit: [isNumericValidator, nonNegativeValidator],
-  rent: [isNumericValidator, nonNegativeValidator],
-  maintenanceFee: [isNumericValidator, nonNegativeValidator],
-  includedMaintenances: [],
-  contractTerm: [isNumericValidator, nonNegativeValidator],
-  station: [],
-  walkingTime: [],
-  type: [],
-  size: [isNumericValidator],
-  floor: [isIntegerValidator, positiveValidator],
-  floorLevel: [],
-  structure: [],
-  realEstate: [],
-  occupancyMonth: [isIntegerValidator, positiveValidator, inRangeValidator(1, 12)],
-  occupancyPeriod: [],
-  summary: [],
-  memo: [],
+const formSpec: FormSpec<RoomInfo> = {
+  roomName: { initialValue: '', type: 'string', validators: [lengthValidator(20)] },
+  address: { initialValue: '', type: 'string', validators: [] },
+  station: { initialValue: '', type: 'string', validators: [] },
+  walkingTime: { initialValue: '', type: 'number', validators: [] },
+  deposit: { initialValue: '', type: 'number', validators: [isNumericValidator, nonNegativeValidator] },
+  rent: { initialValue: '', type: 'number', validators: [isNumericValidator, nonNegativeValidator] },
+  maintenanceFee: { initialValue: '', type: 'number', validators: [isNumericValidator, nonNegativeValidator] },
+  // includedMaintenances: { initialValue: '', type: 'string', validators: [isNumericValidator, nonNegativeValidator] }, //TODO 따로 관리되고있을건데, 아마도 store에 편입하는 게 나을 것.
+  contractTerm: { initialValue: '', type: 'number', validators: [isNumericValidator, nonNegativeValidator] },
+  type: { initialValue: '', type: 'string', validators: [] },
+  size: { initialValue: '', type: 'number', validators: [isNumericValidator] },
+  floor: { initialValue: '', type: 'number', validators: [isIntegerValidator, positiveValidator] },
+  floorLevel: { initialValue: '지상', type: 'string', validators: [] },
+  structure: { initialValue: '', type: 'string', validators: [] },
+  realEstate: { initialValue: '', type: 'string', validators: [] },
+  occupancyMonth: { initialValue: '', type: 'number', validators: [isIntegerValidator, positiveValidator] },
+  occupancyPeriod: { initialValue: '초', type: 'string', validators: [] },
+  summary: { initialValue: '', type: 'string', validators: [] },
+  memo: { initialValue: '', type: 'string', validators: [] },
 };
 
-const checklistRoomInfoStore = createFormStore<RoomInfo>(initialRoomInfo, validatorSet, roomInfoType, 'roomInfoForm');
+export const initialRoomInfo = objectMap(formSpec, ([key, val]) => [key, val.initialValue]);
+
+const checklistRoomInfoStore = createFormStore<RoomInfo>(formSpec, 'roomInfoForm');
 
 export default checklistRoomInfoStore;

frontend/src/store/createFormStore.ts

@@ -25,22 +25,34 @@ interface FormAction<T> {
 
 type FormState<T> = { rawValue: Partial<AllString<T>>; value: Partial<T>; errorMessage: AllString<T> };
 
-const createFormStore = <T extends object>(
-  initialRaw: Partial<AllString<T>>,
-  validatorSet: Record<string, Validator[]>,
-  valueType: AllString<T>,
-  storageName: string,
-) =>
+export interface FormFieldSpec {
+  initialValue: string;
+  type: 'string' | 'number';
+  validators: Validator[];
+}
+
+export type FormSpec<T> = {
+  [k in keyof T as string]: FormFieldSpec;
+};
+
+const getInitialRaw = <T extends object>(formSpec: FormSpec<T>) =>
+  objectMap(formSpec, ([name, { initialValue }]) => [name, initialValue]) as Partial<AllString<T>>;
+const getValueType = <T extends object>(formSpec: FormSpec<T>) =>
+  objectMap(formSpec, ([name, { type }]) => [name, type]) as Partial<AllString<T>>;
+const getValidationSet = <T extends object>(formSpec: FormSpec<T>) =>
+  objectMap(formSpec, ([name, { validators }]) => [name, validators]) as Record<keyof T, Validator[]>;
+
+const createFormStore = <T extends object>(formSpec: FormSpec<T>, storageName: string) =>
   createStore<
     FormState<T> & {
       actions: FormAction<T>;
     }
   >()(
     persist(
       (set, get) => ({
-        rawValue: initialRaw,
-        value: transformAll(initialRaw, valueType),
-        errorMessage: initialErrorMessages(initialRaw),
+        rawValue: getInitialRaw(formSpec),
+        value: transformAll(getInitialRaw(formSpec), getValueType(formSpec)),
+        errorMessage: initialErrorMessages(getInitialRaw(formSpec)),
         actions: {
           onChange: event => get().actions.set(event.target.name as keyof T, event.target.value),
           set: (name, value) => {
@@ -49,15 +61,15 @@ const createFormStore = <T extends object>(
               return;
             }
 
-            get().actions._updateAfterValidation(name, value ?? '', validatorSet[name as string]);
+            get().actions._updateAfterValidation(name, value ?? '', getValidationSet(formSpec)[name]);
           },
           setValueForced: (name, value) => set({ value: { ...get().value, [name]: value } }),
 
           resetAll: () =>
             set({
-              rawValue: initialRaw,
-              value: transformAll(initialRaw, valueType),
-              errorMessage: initialErrorMessages(initialRaw),
+              rawValue: getInitialRaw(formSpec),
+              value: transformAll(getInitialRaw(formSpec), getValueType(formSpec)),
+              errorMessage: initialErrorMessages(getInitialRaw(formSpec)),
             }),
           setAll: set,
           _reset: name => {
@@ -83,7 +95,12 @@ const createFormStore = <T extends object>(
             );
           },
           _transform: (name, value) =>
-            set({ value: { ...get().value, [name]: valueType[name as keyof T] === 'number' ? Number(value) : value } }),
+            set({
+              value: {
+                ...get().value,
+                [name]: getValueType(formSpec)[name as keyof T] === 'number' ? Number(value) : value,
+              },
+            }),
         },
       }),
       {
@@ -98,7 +115,7 @@ const createFormStore = <T extends object>(
     ),
   );
 
-const transformAll = <T>(rawValues: Partial<AllString<T>>, valueType: AllString<T>) =>
+const transformAll = <T>(rawValues: Partial<AllString<T>>, valueType: Partial<AllString<T>>) =>
   objectMap(rawValues, ([key, value]) => [
     key,
     valueType[key as keyof T] === 'number' ? Number(value) : value,

frontend/webpack.config.js

@@ -160,7 +160,7 @@ module.exports = () => {
         },
       },
     };
-    config.plugins.push(new BundleAnalyzerPlugin()); /* 원할때만 켜기 */
+    // config.plugins.push(new BundleAnalyzerPlugin()); /* 원할때만 켜기 */
   } else {
     config.mode = 'development';
   }