🐛 (#495) 모바일에서 AI 댓글 변환 선택 모달 UI 오류 해결

src/app/routes/Router.tsx

@@ -21,6 +21,7 @@ import MemoSection from '@/features/memo/components/MemoSection';
 import FileSection from '@/features/file/components/FileSection';
 import SentryTestPage from '@/pages/SentryTestPage';
 import BoardTestPage from '@/features/board/test/BoardPage.test';
+import ModalTestPage from '@/pages/ModalTestPage';
 
 const TaskDetailPage = lazy(() => import('@/pages/TaskDetailPage'));
 const MemoDetail = lazy(() => import('@/features/memo/components/MemoDetail/MemoDetail'));
@@ -34,6 +35,7 @@ const PUBLIC_ROUTES = [
   { path: ROUTE_PATH.ALARM_SETUP_MOBILE, element: <AlarmSetupMobilePage /> },
   { path: ROUTE_PATH.SENTRY_TEST, element: <SentryTestPage /> },
   { path: ROUTE_PATH.BOARD_TEST, element: <BoardTestPage /> },
+  { path: ROUTE_PATH.MODAL_TEST, element: <ModalTestPage /> },
 ];
 
 const PROTECTED_ROUTES = [

src/app/routes/routePaths.ts

@@ -17,4 +17,5 @@ export const ROUTE_PATH = {
   SETTINGS: '/my-settings',
   SENTRY_TEST: '/sentry-test',
   BOARD_TEST: '/board-test',
+  MODAL_TEST: '/modal-test',
 };

src/features/ai-transform/components/AiTransformSelectModal/AiTransformTextCard.tsx

@@ -25,7 +25,7 @@ const AiTransformTextCard = ({
   return (
     <div
       className={cn(
-        'flex flex-col flex-1 w-full rounded-md p-4 h-40 sm:h-92 bg-gray-50 border border-gray-300 shadow-sm transition-colors duration-300',
+        'flex flex-col flex-none sm:flex-1 w-full rounded-md p-4 h-40 sm:h-92 bg-gray-50 border border-gray-300 shadow-sm transition-colors duration-300',
         isHovered && `border-${color}`,
       )}
       onMouseEnter={() => onHover(type)}

src/pages/ModalTestPage.tsx

@@ -0,0 +1,22 @@
+import { useAiTransformModals } from '@/features/ai-transform/hooks/useAiTransformModals';
+import { useAiTransformStore } from '@/features/ai-transform/store/useAiTransformStore';
+import { Button } from '@/shared/components/shadcn/button';
+
+const ModalTestPage = () => {
+  const { showAiTransformSelectModal } = useAiTransformModals();
+  const setTransformedText = useAiTransformStore((state) => state.setTransformedText);
+  const setOriginalText = useAiTransformStore((state) => state.setOriginalText);
+
+  const testText = Array.from({ length: 200 }, (_, i) => `test${i}`).join(' ');
+
+  setTransformedText(testText);
+  setOriginalText(testText);
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Button onClick={showAiTransformSelectModal}>AI 댓글 변환 선택 모달</Button>
+    </div>
+  );
+};
+
+export default ModalTestPage;