#17 react-todo-app : apply tailwindcss

react/todo-app/src/App.css

@@ -1,12 +0,0 @@
-.container {
-  margin: auto;
-  max-width: 600px;
-}
-
-.todoBlock {
-  padding: 30px;
-  margin-top: 50px;
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: -9px 17px 13px rgb(0 0 0 / 16%);
-}

react/todo-app/src/App.js

@@ -21,9 +21,9 @@ export default function App() {
   };
 
   return (
-    <div className="container">
-      <div className="todoBlock">
-        <div className="title">
+    <div className="flex items-center justify-center w-screen h-screen bg-blue-100">
+      <div className="w-full p-6 m-4 bg-white rounded shadow lg:w-3/4 lg:max-w-lg">
+        <div className="flex justify-between mb-3">
           <h1>할 일 목록</h1>
         </div>
 

react/todo-app/src/components/Form.js

@@ -7,20 +7,19 @@ export default function Form({ value, setValue, handleSubmit }) {
 
   return (
     <div>
-      <form style={{ display: "flex" }} onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="flex pt-2">
         <input
+          className="w-full px-3 py-2 mr-4 text-gray-500 border rounded shadow"
           type={"text"}
           name={"value"}
-          style={{ flex: "10", padding: "5px" }}
           placeholder={"해야 할 일을 입력하세요."}
           value={value}
           onChange={handleChange}
         />
         <input
+          className="p-2 text-blue-400 border-2 border-blue-400 rounded hover:text-white hover:bg-blue-200"
           type={"submit"}
           value={"입력"}
-          className={"btn"}
-          style={{ flex: "1" }}
         />
       </form>
     </div>

react/todo-app/src/components/List.js

@@ -1,23 +1,6 @@
 import React from "react";
 
 export default function List({ todoData, setTodoData }) {
-  const btnStyle = {
-    color: "#fff",
-    border: "none",
-    padding: "5px 9px",
-    borderRadius: "50%",
-    cursor: "pointer",
-    float: "right",
-  };
-
-  const getStyle = (completed) => {
-    return {
-      padding: "10px",
-      borderBottom: "1px #ccc dotted",
-      textDecoration: completed ? "line-through" : "none",
-    };
-  };
-
   const handleClick = (id) => {
     let newTodoData = todoData.filter((data) => data.id !== id);
     setTodoData(newTodoData);
@@ -37,16 +20,27 @@ export default function List({ todoData, setTodoData }) {
   return (
     <div>
       {todoData.map((data) => (
-        <div style={getStyle(data.completed)} key={data.id}>
-          <input
-            type={"checkbox"}
-            defaultChecked={false}
-            onChange={() => handleCompleteChange(data.id)}
-          />
-          {data.title}
-          <button style={btnStyle} onClick={() => handleClick(data.id)}>
-            x
-          </button>
+        <div key={data.id}>
+          <div className="flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-gray-100 border rounded">
+            <div className="items-center">
+              <input
+                type={"checkbox"}
+                defaultChecked={false}
+                onChange={() => handleCompleteChange(data.id)}
+              />{" "}
+              <span className={data.completed ? "line-through" : undefined}>
+                {data.title}
+              </span>
+            </div>
+            <div className="items-center">
+              <button
+                className="px-4 py-2 float-right"
+                onClick={() => handleClick(data.id)}
+              >
+                x
+              </button>
+            </div>
+          </div>
         </div>
       ))}
     </div>

react/todo-app/src/index.css

@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-body {
-  background-color: aliceblue;
-}