[REFACTOR] 지원폼 제출 관심사 분리 적용

src/pages/user/Apply/api/apply.ts

@@ -35,7 +35,11 @@ export const postApplicationForm = async (
 
 export const applicationFormDto = (formData: FormInputs, questionArray: string[]) => {
   const interviewDateAnswer: PostInterviewSchedule[] = formData.selectedInterviewSchedule;
-  const newFormDataAnswers: object[] = [...formData.answers, { interviewDateAnswer }];
+  let formDataAnswers = formData.answers;
+
+  if (interviewDateAnswer.length > 0) {
+    formDataAnswers = [...formData.answers, { interviewDateAnswer }];
+  }
 
   return {
     email: formData.email,
@@ -44,7 +48,7 @@ export const applicationFormDto = (formData: FormInputs, questionArray: string[]
     phoneNumber: formData.phoneNumber,
     department: formData.department,
     answers: [
-      ...newFormDataAnswers.map((answer, index) => {
+      ...formDataAnswers.map((answer, index) => {
         return {
           questionNum: index,
           question: questionArray[index],

src/pages/user/Apply/components/ApplicationForm/InterviewScheduleSelector.tsx

@@ -1,5 +1,4 @@
 import { useDragSelection } from '@/pages/user/Apply/hook/useDragSelection';
-import { useUpdateFormValue } from '@/pages/user/Apply/hook/useUpdateFormData';
 import { getTimeSlotsArray } from '@/pages/user/Apply/utils/time';
 import { Text } from '@/shared/components/Text';
 import { TimeSpan, Wrapper, DateText } from './index.styled';
@@ -8,10 +7,7 @@ import type { InterviewSchedule } from '@/pages/user/Apply/type/apply';
 export const InterviewScheduleSelector = ({ availableTime, date }: InterviewSchedule) => {
   const timeSlotsArray: [string, string][] = getTimeSlotsArray(availableTime);
 
-  const { updateScheduleData } = useUpdateFormValue();
-
-  const { handleMouseDown, handleMouseMove, handleMouseUp, selectedTime } = useDragSelection(
-    updateScheduleData,
+  const { handleMouseDown, handleMouseMove, handleMouseUp, states } = useDragSelection(
     date,
     timeSlotsArray,
   );
@@ -24,12 +20,12 @@ export const InterviewScheduleSelector = ({ availableTime, date }: InterviewSche
           <TimeSpan
             key={idx}
             data-index={idx}
-            selected={selectedTime[idx]}
+            selected={states.isSelectedStates[idx]}
             onMouseDown={handleMouseDown}
             onMouseEnter={handleMouseMove}
             onMouseUp={handleMouseUp}
           >
-            <Text>{e[0] + '~' + e[1]}</Text>
+            <Text size='xs'>{`${e[0]}~${e[1]}`}</Text>
           </TimeSpan>
         );
       })}

src/pages/user/Apply/components/ApplicationForm/index.styled.ts

@@ -96,9 +96,15 @@ export const TimeSpan = styled.span<TimeSpanProps>(({ theme, selected }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  border: '1px solid ',
+  color: selected ? 'white' : theme.colors.gray800,
+  border: `1px solid ${theme.colors.gray300}`,
+  borderRadius: '6px',
   width: '100px',
   height: '30px',
+  transition: 'background-color 0.15s, color 0.15s',
+  '&:hover': {
+    backgroundColor: selected ? theme.colors.primary300 : theme.colors.gray200,
+  },
 }));
 
 export const Wrapper = styled.div({
@@ -111,5 +117,5 @@ export const DateText = styled.span(({ theme }) => ({
   width: '100px',
   padding: '10px 0 20px 0',
   fontWeight: theme.font.weight.bold,
-  fontSize: theme.font.size.base,
+  fontSize: theme.font.size.sm,
 }));

src/pages/user/Apply/constant/initialDragState.ts

@@ -0,0 +1,14 @@
+import type { DragState } from '../type/apply';
+
+export const generateInitialDragState = (statesLength: number): DragState => {
+  return {
+    startIndex: -1,
+    lastHoveredIndex: -1,
+    currentSelectedIndex: -1,
+    isSelectionMode: false,
+    isSelectedStates: new Array(statesLength).fill(false),
+    isMouseDown: false,
+    isDragging: false,
+    previousIndexDiffSign: null,
+  };
+};

src/pages/user/Apply/domain/drag.ts

@@ -0,0 +1,33 @@
+import type { DragState } from '../type/apply';
+
+export type UpdatedDragState = {
+  newStartIndex: number;
+  newIsSelectionMode: boolean;
+  newPreviousIndexDiffSign: number | null;
+};
+
+export const updateDragState = (
+  state: DragState,
+  currentIdx: number,
+  idxDiffSign: number,
+): UpdatedDragState => {
+  let newStartIndex = state.startIndex;
+  let newIsSelectionMode = state.isSelectionMode;
+  let newPreviousIndexDiffSign = state.previousIndexDiffSign;
+  if (state.previousIndexDiffSign === null || idxDiffSign !== state.previousIndexDiffSign) {
+    newIsSelectionMode =
+      state.previousIndexDiffSign === null ? state.isSelectionMode : !state.isSelectionMode;
+
+    if (idxDiffSign < 0) {
+      newStartIndex = currentIdx + 1;
+    } else if (idxDiffSign > 0) {
+      newStartIndex = currentIdx - 1;
+    } else {
+      newStartIndex = currentIdx;
+    }
+
+    newPreviousIndexDiffSign = idxDiffSign;
+  }
+
+  return { newStartIndex, newIsSelectionMode, newPreviousIndexDiffSign };
+};

src/pages/user/Apply/domain/schedule.ts

@@ -0,0 +1,26 @@
+import type { PostInterviewSchedule } from '../type/apply';
+
+export const updateSchedule = (
+  currentInterviewSchedule: PostInterviewSchedule[],
+  date: string,
+  selectedTime: string[],
+): PostInterviewSchedule[] => {
+  const sameDateIndex: number = currentInterviewSchedule.findIndex(
+    (schedule: PostInterviewSchedule) => schedule.date === date,
+  );
+
+  const selectedInterviewSchedule: PostInterviewSchedule = {
+    date: date,
+    selectedTimes: selectedTime ?? [],
+  };
+  let updatedSchedule: PostInterviewSchedule[];
+
+  if (sameDateIndex !== -1) {
+    updatedSchedule = [...currentInterviewSchedule];
+    updatedSchedule[sameDateIndex] = selectedInterviewSchedule;
+  } else {
+    updatedSchedule = [...currentInterviewSchedule, selectedInterviewSchedule];
+  }
+
+  return updatedSchedule;
+};

src/pages/user/Apply/hook/useApplicationForm.ts

@@ -2,17 +2,17 @@ import { useEffect, useState } from 'react';
 import { fetchApplicationForm } from '@/pages/user/Apply/api/apply.ts';
 import type { ApplicationForm } from '../type/apply';
 
-export const useApplicationForm = (Id: number) => {
+export const useApplicationForm = (clubId: number) => {
   const [clubApplicationForm, setClubApplicationForm] = useState<ApplicationForm | null>(null);
 
   useEffect(() => {
-    if (!Id) return;
+    if (!clubId) return;
     const setFormStateAfterFetch = async () => {
-      const applicationForm = await fetchApplicationForm(Id);
+      const applicationForm = await fetchApplicationForm(clubId);
       setClubApplicationForm(applicationForm);
     };
     setFormStateAfterFetch();
-  }, [Id]);
+  }, [clubId]);
 
   return clubApplicationForm;
 };

src/pages/user/Apply/hook/useDragSelection.ts

@@ -1,95 +1,118 @@
-import { useRef, useState } from 'react';
-import { getSign, type Sign } from '../utils/math';
-import { convertSelectionToTimeInterval, mergeContinuousTimeInterval } from '../utils/time';
+import { useReducer } from 'react';
+import { useInterviewScheduleUpdater } from './useFormDataUpdate';
 
-export function useDragSelection(
-  updateScheduleData: (data: string, mergedInterviewTime: string[]) => void,
-  date: string,
-  timeIntervalArray: [string, string][],
-) {
-  const [prevDiffSign, setPrevDiffSign] = useState<Sign>(0);
-  const startIndex = useRef<string | undefined>('');
-  const lastHoveredIndex = useRef<string | null>(null);
-  const mode = useRef<boolean>(false);
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
-  const selectedIndex = useRef<string | undefined>('');
-  const [selectedTime, setSelectedTime] = useState<boolean[]>(() =>
-    new Array(timeIntervalArray.length).fill(false),
-  );
-
-  function handleIndexChange(newIndex: number) {
-    const diff = newIndex - Number(lastHoveredIndex.current);
-    const currentSign = getSign(diff);
+import { generateInitialDragState } from '../constant/initialDragState';
+import { updateDragState } from '../domain/drag';
+import { updateSelectedState } from '../utils/drag';
+import { getIndexDiffSign } from '../utils/math';
+import type { DragAction, DragState } from '../type/apply';
 
-    if (prevDiffSign !== 0 && currentSign !== 0 && currentSign !== prevDiffSign) {
-      mode.current = !mode.current;
+function getSelectedIndex(e: React.MouseEvent<HTMLSpanElement>) {
+  return Number(e.currentTarget.dataset.index);
+}
 
-      if (currentSign < 0) {
-        startIndex.current = String(newIndex + 1);
-      } else if (currentSign > 0) {
-        startIndex.current = String(newIndex - 1);
-      }
+function dragReducer(state: DragState, action: DragAction) {
+  switch (action.type) {
+    case 'mouseDown': {
+      const newSelectedStates: boolean[] = [...state.isSelectedStates];
+      newSelectedStates[action.index] = action.isSelectionMode;
+
+      return {
+        ...state,
+        startIndex: action.index,
+        currentSelectedIndex: action.index,
+        lastHoveredIndex: action.index,
+        isSelectionMode: action.isSelectionMode,
+        isSelectedStates: newSelectedStates,
+        isMouseDown: true,
+        previousIndexDiffSign: null,
+      };
+    }
+    case 'mouseMove': {
+      const currentIndex = action.index;
+      const indexDiffSign = action.indexDiffSign;
+
+      const { newStartIndex, newIsSelectionMode, newPreviousIndexDiffSign } = updateDragState(
+        state,
+        currentIndex,
+        indexDiffSign,
+      );
+
+      const newSelectedStates = updateSelectedState(
+        state.isSelectedStates,
+        newStartIndex,
+        currentIndex,
+        newIsSelectionMode,
+      );
+
+      return {
+        ...state,
+        isDragging: true,
+        currentSelectedIndex: currentIndex,
+        lastHoveredIndex: currentIndex,
+        isSelectedStates: newSelectedStates,
+        isSelectionMode: newIsSelectionMode,
+        startIndex: newStartIndex,
+        previousIndexDiffSign: newPreviousIndexDiffSign,
+      };
+    }
+    case 'mouseUp': {
+      return {
+        ...state,
+        isMouseDown: false,
+        isDragging: false,
+      };
     }
-    setPrevDiffSign(currentSign);
+    default:
+      return state;
   }
+}
 
-  const handleMouseDown = (e: React.MouseEvent<HTMLSpanElement>) => {
-    e.preventDefault();
-    setIsMouseDown(true);
-
-    startIndex.current = e.currentTarget.dataset.index;
-    if (startIndex.current) mode.current = !selectedTime[Number(startIndex.current)];
+export function useDragSelection(date: string, timeIntervalArray: [string, string][]) {
+  const { updateInterviewSchedule } = useInterviewScheduleUpdater(date, timeIntervalArray);
 
-    const newValue = [...selectedTime];
-    newValue[Number(startIndex.current)] = mode.current;
+  const [states, dispatch] = useReducer(
+    dragReducer,
+    generateInitialDragState(timeIntervalArray.length),
+  );
 
-    setSelectedTime(newValue);
-    lastHoveredIndex.current = String(startIndex.current);
+  const handleMouseDown = (e: React.MouseEvent<HTMLSpanElement>) => {
+    e.preventDefault();
+    dispatch({
+      type: 'mouseDown',
+      index: getSelectedIndex(e),
+      isSelectionMode: !states.isSelectedStates[getSelectedIndex(e)],
+    });
   };
 
   const handleMouseMove = (e: React.MouseEvent<HTMLSpanElement>) => {
-    if (!isMouseDown) return;
-    setIsDragging(true);
-
-    selectedIndex.current = e.currentTarget.dataset.index;
-    if (!e.currentTarget.dataset.index || selectedIndex.current === lastHoveredIndex.current)
+    if (
+      !e.currentTarget.dataset.index ||
+      getSelectedIndex(e) === states.lastHoveredIndex ||
+      !states.isMouseDown
+    )
       return;
 
-    handleIndexChange(Number(selectedIndex.current));
-
-    setSelectedTime((prev) => {
-      const newSelected = [...prev];
-      const start = Math.min(Number(startIndex.current), Number(selectedIndex.current));
-      const end = Math.max(Number(startIndex.current), Number(selectedIndex.current));
-
-      for (let i = start; i <= end; i++) {
-        newSelected[i] = mode.current;
-      }
-      return newSelected;
+    dispatch({
+      type: 'mouseMove',
+      index: getSelectedIndex(e),
+      indexDiffSign: getIndexDiffSign(getSelectedIndex(e), states.lastHoveredIndex),
     });
-    lastHoveredIndex.current = selectedIndex.current!;
   };
 
   const handleMouseUp = () => {
-    if (!isDragging) return;
-    setIsMouseDown(false);
-    setIsDragging(false);
-
-    const selectedInterviewTime: Set<string> = convertSelectionToTimeInterval(
-      selectedTime,
-      timeIntervalArray,
-    );
-    const mergedInterviewTime: string[] = mergeContinuousTimeInterval(selectedInterviewTime);
-    updateScheduleData(date, mergedInterviewTime);
+    if (!states.isMouseDown) return;
+    dispatch({
+      type: 'mouseUp',
+    });
 
-    handleIndexChange(Number(selectedIndex.current));
+    updateInterviewSchedule(states.isSelectedStates);
   };
 
   return {
     handleMouseDown,
     handleMouseMove,
     handleMouseUp,
-    selectedTime,
+    states,
   };
 }

src/pages/user/Apply/hook/useFormDataUpdate.ts

@@ -0,0 +1,19 @@
+import { useFormContext } from 'react-hook-form';
+import { updateSchedule } from '../domain/schedule';
+import { convertSelectionToTimeInterval, mergeContinuousTimeInterval } from '../utils/time';
+import type { FormInputs, PostInterviewSchedule } from '../type/apply';
+
+export function useInterviewScheduleUpdater(date: string, timeSlotsArray: [string, string][]) {
+  const { setValue, getValues } = useFormContext<FormInputs>();
+
+  const updateInterviewSchedule = (isSelectedStates: boolean[]) => {
+    const selectedTimes = convertSelectionToTimeInterval(isSelectedStates, timeSlotsArray);
+    const mergedTimes = mergeContinuousTimeInterval(selectedTimes);
+    const currentSchedules: PostInterviewSchedule[] = getValues('selectedInterviewSchedule') || [];
+
+    const updatedSchedules = updateSchedule(currentSchedules, date, mergedTimes);
+    setValue('selectedInterviewSchedule', updatedSchedules);
+  };
+
+  return { updateInterviewSchedule };
+}