[Refactor]: 전체 목표 뷰 리팩토링

eslint.config.js

@@ -40,7 +40,7 @@ export default tseslint.config(
       ...reactHooks.configs.recommended.rules,
       ...jsxA11y.configs.recommended.rules,
       'react/react-in-jsx-scope': 'off',
-      'no-console': 'warn',
+      'no-console': 'off',
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': 'warn',
       curly: 'error',
@@ -52,7 +52,7 @@ export default tseslint.config(
         },
       ],
       'react/self-closing-comp': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-explicit-any': 'off',
       'react/jsx-pascal-case': 'error',
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'prettier/prettier': [

src/api/axiosInstance.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import { HTTP_STATUS } from '@/api/constant/httpStatus';
 
 const axiosInstance = axios.create({
@@ -28,11 +29,11 @@ axiosInstance.interceptors.response.use(
       const { status } = error.response;
 
       if (status === HTTP_STATUS.UNAUTHORIZED) {
-        console.warn('인증 실패');
+        // 인증 실패 처리
       }
 
       if (status === HTTP_STATUS.INTERNAL_SERVER_ERROR) {
-        console.error('서버 오류가 발생');
+        // 서버 오류 처리
       }
     }
     return Promise.reject(error);

src/api/constant/queryKey.ts

@@ -1,5 +1,5 @@
 export const QUERY_KEY = {
-  OVERALL_TODO: ['overallTodo'],
+  ENTIRE_TODO: ['entireTodo'],
   MANDALART_CORE_GOALS: (mandalartId: number) => ['mandalartCoreGoals', mandalartId],
   MANDALART_SUB_GOALS: (mandalartId: number, coreGoalId?: number, cycle?: string) =>
     ['mandalartSubGoals', mandalartId, coreGoalId, cycle].filter(Boolean),
@@ -22,6 +22,6 @@ export const QUERY_KEY = {
   PERSONA: 'persona',
   UPDATE_SUB_GOAL: (id: number) => ['updateSubGoal', id],
   DELETE_SUB_GOAL: (id: number) => ['deleteSubGoal', id],
-  OVERALL_GOAL: ['overallGoal'],
+  ENTIRE_GOAL: ['entireGoal'],
   USER_INFO: ['userInfo'],
 } as const;

src/api/domain/edit/hook.ts

@@ -43,7 +43,7 @@ export const useUpdateSubGoal = (mandalartId: number) => {
 
   return useMutation({
     mutationFn: (data: UpdateSubGoalRequest) => updateSubGoal(mandalartId, data),
-    onSuccess: (_) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [...QUERY_KEY.MANDAL_ALL, mandalartId],
         exact: true,

src/api/domain/entireTodo/hook.ts

@@ -0,0 +1,18 @@
+import { useMutation, type UseMutationOptions } from '@tanstack/react-query';
+
+import {
+  postEntireTodo,
+  type CreateEntireTodoRequest,
+  type CreateEntireTodoResponse,
+} from '@/api/domain/entireTodo';
+import { QUERY_KEY } from '@/api/constant/queryKey';
+
+export const useCreateEntireTodo = (
+  options?: UseMutationOptions<CreateEntireTodoResponse, unknown, CreateEntireTodoRequest>,
+) => {
+  return useMutation<CreateEntireTodoResponse, unknown, CreateEntireTodoRequest>({
+    mutationKey: [...QUERY_KEY.ENTIRE_TODO, 'create'],
+    mutationFn: postEntireTodo,
+    ...options,
+  });
+};

src/api/domain/entireTodo/index.ts

@@ -1,17 +1,20 @@
 import axiosInstance from '@/api/axiosInstance';
 import { END_POINT } from '@/api/constant/endPoint';
-import type { BaseResponse } from '@/type/api';
-import type {
-  CreateOverallTodoRequest,
-  CreateOverallTodoResponse,
-} from '@/api/domain/entireTodo/type/entireTodo';
 
-export const postOverallTodo = async (
-  body: CreateOverallTodoRequest,
-): Promise<BaseResponse<CreateOverallTodoResponse>> => {
-  const res = await axiosInstance.post<BaseResponse<CreateOverallTodoResponse>>(
-    END_POINT.MANDALART,
-    body,
-  );
-  return res.data;
+export interface CreateEntireTodoRequest {
+  title: string;
+}
+
+export interface CreateEntireTodoResponse {
+  id: number;
+  title: string;
+}
+
+export const postEntireTodo = async (
+  body: CreateEntireTodoRequest,
+): Promise<CreateEntireTodoResponse> => {
+  const res = await axiosInstance.post<{
+    data: CreateEntireTodoResponse;
+  }>(END_POINT.MANDALART, body);
+  return res.data.data;
 };

src/api/domain/lowerTodo/hook/useOverallGoal.ts

@@ -6,7 +6,7 @@ import { QUERY_KEY } from '@/api/constant/queryKey';
 
 export const useOverallGoal = (mandalartId: number) => {
   return useQuery({
-    queryKey: [QUERY_KEY.OVERALL_GOAL, mandalartId],
+    queryKey: [QUERY_KEY.ENTIRE_GOAL, mandalartId],
     queryFn: () => getOverallGoal(mandalartId),
     enabled: !!mandalartId,
   });

src/api/domain/myTodo/hook/useMyMandal.ts

@@ -17,7 +17,7 @@ type MandalCoreGoalsResponse = BaseResponse<{
 
 export const useGetMandalAll = (mandalartId: number) => {
   return useQuery({
-    queryKey: [QUERY_KEY.OVERALL_TODO, mandalartId],
+    queryKey: [QUERY_KEY.ENTIRE_GOAL, mandalartId],
     queryFn: () => getMandalAll(mandalartId),
   });
 };

src/api/domain/upperTodo/hook.ts

@@ -14,7 +14,7 @@ import { QUERY_KEY } from '@/api/constant/queryKey';
 
 export const useGetMandalAll = (mandalartId: number) => {
   return useQuery({
-    queryKey: [QUERY_KEY.OVERALL_TODO, mandalartId],
+    queryKey: [QUERY_KEY.ENTIRE_GOAL, mandalartId],
     queryFn: () => getMandalAll(mandalartId),
   });
 };

src/common/component/CycleDropDown/CycleDropDown.tsx

@@ -23,7 +23,7 @@ type CycleDropDownProps = {
 const CycleDropDown = ({ initialType = 'DAILY', onChange }: CycleDropDownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedType, setSelectedType] = useState<DisplayCycleType>(
-    (Object.entries(CYCLE_MAPPING).find(([_, v]) => v === initialType)?.[0] as DisplayCycleType) ||
+    (Object.entries(CYCLE_MAPPING).find(([, v]) => v === initialType)?.[0] as DisplayCycleType) ||
       '매일',
   );
 

src/common/component/GoButton/GoButton.tsx

@@ -3,14 +3,27 @@ import { goButtonContainer, goIcon } from '@/common/component/GoButton/GoButton.
 
 type GoButtonProps = {
   isActive: boolean;
+  disabled?: boolean;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  type?: 'button' | 'submit' | 'reset';
 };
 
-const GoButton = ({ isActive = true, onClick }: GoButtonProps) => {
-  const state = isActive ? 'active' : 'disabled';
+const GoButton = ({
+  isActive = true,
+  disabled = false,
+  onClick,
+  type = 'button',
+}: GoButtonProps) => {
+  const state = isActive && !disabled ? 'active' : 'disabled';
+  const isDisabled = disabled || !isActive;
 
   return (
-    <button className={goButtonContainer({ state })} onClick={onClick}>
+    <button
+      className={goButtonContainer({ state })}
+      onClick={onClick}
+      disabled={isDisabled}
+      type={type}
+    >
       <IcBigNext className={goIcon({ state })} />
     </button>
   );

src/common/component/Loading/Loading.tsx

@@ -4,7 +4,7 @@ import loadingAnimation from '@/assets/lottie/loading.json';
 import * as styles from '@/common/component/Loading/Loading.css';
 
 type LoadingProps = {
-  type: 'goal' | 'todo' | 'history';
+  type: 'goal' | 'todo' | 'history' | 'entireTodo';
 };
 
 const Loading = ({ type }: LoadingProps) => {
@@ -20,6 +20,9 @@ const Loading = ({ type }: LoadingProps) => {
     case 'history':
       message = '내가 한 일을 불러오고 있어요';
       break;
+    case 'entireTodo':
+      message = '목표를 작성중입니다';
+      break;
   }
 
   return (

src/common/component/UserModal/UserModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { IcDivider } from '@/assets/svg';
 import * as styles from '@/common/component/UserModal/UserModal.css';
@@ -14,11 +14,14 @@ const UserModal = ({ onClose }: UserModalProps) => {
   const { data: user, isLoading, isError } = useGetUser();
   const { mutate: logoutMutate } = usePostLogout();
 
-  const handleClickOutside = (e: MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-      onClose();
-    }
-  };
+  const handleClickOutside = useCallback(
+    (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
 
   const handleLogout = () => {
     logoutMutate(undefined, {
@@ -39,7 +42,7 @@ const UserModal = ({ onClose }: UserModalProps) => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [handleClickOutside]);
 
   if (isLoading || isError || !user) {
     return null;

src/common/hook/useTypingEffect.ts

@@ -1,38 +1,37 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const useTypingEffect = (fullText: string, duration: number) => {
   const [displayedText, setDisplayedText] = useState('');
+  const rafIdRef = useRef<number | null>(null);
 
   useEffect(() => {
     let startTime: number | null = null;
     const charArray = Array.from(fullText);
     const totalChars = charArray.length;
-    let isMounted = true;
 
     const step = (timestamp: number) => {
-      if (!isMounted) {
-        return;
-      }
       if (startTime === null) {
         startTime = timestamp;
       }
 
       const elapsed = timestamp - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const charsToShow = Math.floor(progress * totalChars);
+      const progress = duration <= 0 ? 1 : Math.min(elapsed / duration, 1);
+      const charsToShow = Math.round(progress * totalChars);
 
       setDisplayedText(charArray.slice(0, charsToShow).join(''));
 
       if (progress < 1) {
-        requestAnimationFrame(step);
+        rafIdRef.current = requestAnimationFrame(step);
       }
     };
 
-    const rafId = requestAnimationFrame(step);
+    rafIdRef.current = requestAnimationFrame(step);
 
     return () => {
-      isMounted = false;
-      cancelAnimationFrame(rafId);
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
     };
   }, [fullText, duration]);
 

src/page/home/hook/useFadeInOnView.ts

@@ -24,11 +24,12 @@ export const useFadeInOnView = <T extends HTMLElement>({
     }
 
     return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current);
+      if (current) {
+        observer.unobserve(current);
       }
+      observer.disconnect();
     };
-  }, []);
+  }, [rootMargin, threshold]);
 
   return { ref, visible };
 };

src/page/intro/Intro.tsx

@@ -1,4 +1,5 @@
 import { useLocation, useNavigate } from 'react-router-dom';
+
 import * as styles from '@/page/intro/Intro.css';
 
 const MESSAGE = {

src/page/signup/SignUp.tsx

@@ -51,9 +51,7 @@ const SignUp = () => {
       onSuccess: () => {
         navigate(PATH.INTRO);
       },
-      onError: (err) => {
-        console.error('회원가입 실패:', err);
-      },
+      onError: () => {},
     });
   };
 

src/page/todo/entireTodo/Todo.css.ts

@@ -1,33 +1,26 @@
 import { style } from '@vanilla-extract/css';
 
-import { colors } from '@/style/token';
-import { fonts } from '@/style/token/typography.css';
+import { colors, fonts, layout } from '@/style/token';
 
 export const todoContainer = style({
+  ...layout.columnCenter,
   height: '100vh',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
   backgroundColor: colors.bg_black01,
   position: 'relative',
-  overflow: 'hidden',
 });
 
 export const todoTitle = style({
-  color: colors.white01,
   ...fonts.display01,
+  color: colors.white01,
   textAlign: 'center',
+  whiteSpace: 'pre-line',
   marginBottom: '5.6rem',
   position: 'relative',
-  zIndex: 1,
   height: '15.2rem',
 });
 
 export const todoInputContainer = style({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
+  ...layout.rowCenter,
   gap: '2rem',
   position: 'relative',
 });