Fix: elipsis 및 기타 css, 업데이트 로직

src/App.css

@@ -1,6 +1,8 @@
 .layout {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  min-height: 100vh;
+  overflow: hidden;
   display: flex;
   justify-content: center;
   background: black;

src/App.tsx

@@ -21,36 +21,33 @@ function App() {
     undefined,
   );
   const toast = useToast();
-  const [selectedText, setSelectedText] = useState<string>();
+  const [selectedText, setSelectedText] = useState<string| undefined>(undefined);
   const { open: openEditModal } = useEditModal({
     id: selectedTodoId ?? 0,
     text: selectedText ?? "",
   });
 
+  useEffect(()=>{
+    if(!selectedTodoId  || !selectedText){
+      return;
+    }
+    openEditModal();
+    setSelectedText(undefined);
+  },[openEditModal, selectedText, selectedTodoId])
+
+
   useEffect(() => {
     const handleQuizModal = async () => {
       if (clickCount === 3) {
         setClickCount(0);
         const isCorrect = await openQuizModal();
         if (isCorrect) {
-          setTodoList((prevTodoList) =>
-            prevTodoList.map((todo) => {
-              console.log(todo.id, selectedTodoId);
-              if (todo.id === selectedTodoId) {
-                return { ...todo, done: true };
-              }
-              return todo;
-            }),
-          );
+          setTodoList( todoList.map((item) =>
+            item.id === selectedTodoId ? { ...item, done: true} : item
+          ))
         }
       }
-      if(clickCount > 3) {
-        setClickCount(0);
-        setSelectedTodoId(undefined);
-        setTodoList(todoList.map((todo) => ({ ...todo, done: false })));
-      }
     };
-
     handleQuizModal();
   }, [clickCount, openQuizModal, selectedTodoId, setTodoList, todoList]);
 
@@ -69,6 +66,14 @@ function App() {
             key={index}
             todo={todo}
             onToggle={async (id) => {
+              if (todo.done) {
+                setTodoList(
+                  todoList.map((item) =>
+                    item.id === id ? { ...item, done: false } : item
+                  )
+                );
+                return;
+              }
               if (clickCount < 3) {
                 toast({
                   title: "어?! 어라라... 3번 누르면 될까?",
@@ -77,10 +82,9 @@ function App() {
               setClickCount((prev) => prev + 1);
               setSelectedTodoId(id);
             }}
-            onUpdate={async () => {
-              await setSelectedTodoId(todo.id);
-              await setSelectedText(todo.text);
-              openEditModal();
+            onUpdate={ (id, text) => {
+             setSelectedTodoId(id);
+             setSelectedText(text);
             }}
             onRemove={(id) => {
               setClickCount(0);

src/components/TodoItem.tsx

@@ -4,25 +4,27 @@ interface TodoItemProps {
     todo: TodoItemType
     onToggle: (id: number) => void
     onRemove: (id: number) => void
-    onUpdate: (id: number) => void
+    onUpdate: (id: number, text: string) => void
 }
 
 export const TodoItem = ({ todo, onToggle, onRemove, onUpdate }: TodoItemProps) => {
 
     return (
-        <div
+        <section
             style={{
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                padding: "16px 0",
+                padding: "16px",
                 width: "100%",
             }}
         >
             <div
                 style={{
                     display: "flex",
                     alignItems: "space-between",
+                    width:'100%',
+                    maxWidth:'calc(100% - 130px)',
                 }}
             >
                 <Checkbox
@@ -34,24 +36,28 @@ export const TodoItem = ({ todo, onToggle, onRemove, onUpdate }: TodoItemProps)
                     isChecked={todo.done}
                     onChange={() => onToggle(todo.id)}
                 />
-                <div
+                <span
                     style={{
                         fontSize:'24px',
                         fontWeight: "bold",
                         zIndex:33,
                         marginLeft: "8px",
                         marginRight:"25px",                        
                         textDecoration: todo.done ? "line-through" : "none",
+                        textOverflow:'ellipsis',
+                        whiteSpace:'nowrap',
+                        overflow:'hidden',
                     }}
                 >
                     {todo.text}
-                </div>
+                </span>
             </div>
             <div style={{
                 display: "flex",
                 gap: "10px",
+                width:"max-content"
             }}>
-            <Button onClick={() => onUpdate(todo.id)}>
+            <Button onClick={() => onUpdate(todo.id, todo.text)}>
                 수정
             </Button>
             <Button
@@ -60,6 +66,6 @@ export const TodoItem = ({ todo, onToggle, onRemove, onUpdate }: TodoItemProps)
                 삭제
             </Button>
             </div>
-        </div>
+        </section>
     );
 }