fix: 만다라트 텍스트필드 30자 제한 및 만다라트 23자 말줄임표 처리

Author: shinjigu

src/common/component/TextField/mandalart/MandalartTextField.tsx

@@ -2,15 +2,16 @@ import { useState } from 'react';
 
 import IcTextdelete from '@/assets/svg/IcTextdelete';
 
-import { type MandalartVariant, BIG_GOAL_MAX_LENGTH, DEFAULT_PLACEHOLDER } from './constants';
+import { type MandalartVariant, MANDALART_TEXT_MAX_LENGTH, DEFAULT_PLACEHOLDER } from './constants';
 import * as s from './MandalartTextField.css';
 
 import BaseTextField from '../BaseTextField';
 
 type FieldState = 'default' | 'clicked' | 'typing' | 'filled' | 'hover';
 
-const pickMaxLength = (variant: MandalartVariant, maxLength?: number) =>
-  variant === 'bigGoal' ? (maxLength ?? BIG_GOAL_MAX_LENGTH) : (maxLength ?? undefined);
+const pickMaxLength = (maxLength?: number) => {
+  return maxLength ?? MANDALART_TEXT_MAX_LENGTH;
+};
 
 const pickPlaceholder = (variant: MandalartVariant, placeholder?: string) =>
   placeholder ?? DEFAULT_PLACEHOLDER[variant];
@@ -51,7 +52,7 @@ const MandalartTextField = ({
 }: MandalartTextFieldProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
-  const effectiveMaxLength = pickMaxLength(variant, maxLength);
+  const effectiveMaxLength = pickMaxLength(maxLength);
   const effectivePlaceholder = pickPlaceholder(variant, placeholder);
 
   const wrapperVariants =

src/common/component/TextField/mandalart/constants.ts

@@ -6,4 +6,4 @@ export const DEFAULT_PLACEHOLDER = {
   todo: '할 일을 입력해주세요',
 } as const;
 
-export const BIG_GOAL_MAX_LENGTH = 30;
+export const MANDALART_TEXT_MAX_LENGTH = 30;

src/common/util/format.ts

@@ -20,3 +20,10 @@ export function getTomorrow(date: Date): Date {
   tomorrow.setDate(tomorrow.getDate() + 1);
   return tomorrow;
 }
+
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.slice(0, maxLength) + '…';
+}

src/page/todo/lowerTodo/LowerTodo.tsx

@@ -6,6 +6,7 @@ import { LowerTodoHeader, MandalCompleteButton, TodoFields } from './component';
 import { useLowerTodoState, useLowerTodoAI } from './hook';
 import { toMainSubGoals } from './utils/goal';
 import { DEFAULT_TEXT, ALERT } from '@/common/constants/todo';
+import { truncateText } from '@/common/util/format';
 
 import GradientBackground from '@/common/component/Background/GradientBackground';
 import { PATH } from '@/route';
@@ -88,8 +89,11 @@ const LowerTodo = () => {
         <div className={styles.lowerTodoBox}>
           <Mandalart
             type="TODO_MAIN"
-            mainGoal={mainGoal}
-            subGoals={toMainSubGoals(coreGoalsData?.coreGoals || [])}
+            mainGoal={truncateText(mainGoal, 23)}
+            subGoals={toMainSubGoals(coreGoalsData?.coreGoals || []).map((goal) => ({
+              ...goal,
+              title: truncateText(goal.title, 23),
+            }))}
             onGoalClick={handleSubGoalClick}
             selectedGoalIndex={selectedGoalIndex}
           />

src/page/todo/lowerTodo/component/TodoFields.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_PLACEHOLDER } from '@/common/component/TextField/mandalart/cons
 import { MandalartTextField } from '@/common/component/TextField/mandalart';
 import CycleDropDown from '@/common/component/CycleDropDown/CycleDropDown';
 import { Square } from '@/common/component/Mandalart/Square/Square';
+import { truncateText } from '@/common/util/format';
 
 interface TodoItem {
   title: string;
@@ -51,7 +52,7 @@ const TodoFields = ({ values, onChange, onEnter, selectedCoreGoalTitle }: TodoFi
               return (
                 <Square.Main
                   key={index}
-                  content={selectedCoreGoalTitle || '상위목표'}
+                  content={truncateText(selectedCoreGoalTitle || '상위목표', 23)}
                   type="TODO_SUB"
                 />
               );
@@ -60,7 +61,7 @@ const TodoFields = ({ values, onChange, onEnter, selectedCoreGoalTitle }: TodoFi
             return (
               <Square.Sub
                 key={index}
-                content={values[valueIndex]?.title || ''}
+                content={truncateText(values[valueIndex]?.title || '', 23)}
                 type="TODO_SUB"
                 isCompleted={!!values[valueIndex]?.title}
                 onClick={() => {}}
@@ -85,7 +86,6 @@ const TodoFields = ({ values, onChange, onEnter, selectedCoreGoalTitle }: TodoFi
               onChange={(val) => handleTitleChange(index, val)}
               onCommit={getHandleFieldCommit(index)}
               placeholder={`${ORDER_LABELS[index]} ${DEFAULT_PLACEHOLDER.todo}`}
-              maxLength={30}
             />
           </div>
         ))}