[2주차] 김윤일 미션 제출합니다.

package.json

@@ -10,10 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "emotion-normalize": "^11.0.1",
+    "normalize.css": "^8.0.1",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0",
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -24,5 +31,6 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "vite": "^5.4.1"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/App.jsx

@@ -1,5 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import TodoTemplete from './components/TodoTemplete';
+
+const appStyle = css`
+  background: radial-gradient(#e3fafc, #99e9f2);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 function App() {
-  return <div>React Todo</div>;
+  return (
+    <div css={appStyle}>
+      <TodoTemplete />
+    </div>
+  );
 }
 
 export default App;

src/components/TodoInput.jsx

@@ -0,0 +1,139 @@
+/** @jsxImportSource @emotion/react */
+import React, { Component } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { BsFillExclamationTriangleFill } from 'react-icons/bs';
+
+// 할 일 입력 form
+const inputContainer = css`
+  padding: 0 20px;
+`;
+// 할 일 입력 버튼
+const todoInputButton = css`
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 10px;
+`;
+// 할 일 입력 창
+const inputBox = css`
+  width: 80%;
+  padding: 10px;
+  border: 1px solid lightgray;
+  border-radius: 15px;
+`;
+// Todo List 앱 제목
+const appTitle = css`
+  padding: 20px 20px 0;
+  font-style: italic;
+`;
+// hr 태그 스타일
+const line = css`
+  margin-bottom: 10px;
+  color: lightgray;
+  border-style: dashed;
+  border-width: 2px 0 0 0;
+`;
+// 할 일 입력 기능
+const TodoInput = ({ todoList, setTodoList }) => {
+  const [text, setText] = useState('');
+  const inputRef = useRef(null); // 버튼 클릭 후 input 값 초기화 후 focusing
+  const [popup, setPopup] = useState(false); // 공백 입력 방지 팝업
+  // input 값 가져오기
+  const onChangeInput = (e) => {
+    setText(e.target.value);
+  };
+
+  const onClickAddButton = (e) => {
+    e.preventDefault();
+
+    if (text.length === 0) {
+      setPopup(true);
+      return; // 공백일 경우 이후 코드를 실행하지 않음
+    }
+    // TodoItemList에 값 추가
+    const nextTodoList = todoList.concat({
+      id: todoList.length,
+      text,
+      checked: false, // 완료 유무 flag
+      deleted: false, // 삭제 flag
+    });
+    setTodoList(nextTodoList);
+
+    setText(''); // input 값 초기화
+
+    // inputRef.current가 null이 아닌지 확인한 후 focus 호출
+    if (inputRef.current) {
+      inputRef.current.focus(); // input 창에 focusing
+    }
+  };
+
+  useEffect(() => {
+    // todoList가 변했을 때만 실행
+    console.log(todoList);
+  }, [todoList]);
+
+  return (
+    <div className="todo-input">
+      <div className="app-title" css={appTitle}>
+        <h1>오느리 할 일 ! </h1>
+        <hr css={line} />
+      </div>
+      <form css={inputContainer}>
+        {/* 할 일 입력창 */}
+        <input
+          type="text"
+          name="todoItem"
+          value={text}
+          ref={inputRef}
+          onChange={onChangeInput}
+          placeholder="할 일을 입력해주세요."
+          css={inputBox}
+        />
+        {/* 할 일 입력 버튼 */}
+        <button type="submit" onClick={onClickAddButton} css={todoInputButton}>
+          +
+        </button>
+      </form>
+
+      {popup ? <Popup popup={popup} setPopup={setPopup} /> : null}
+    </div>
+  );
+};
+
+// 팝업창 디자인
+function Popup(props) {
+  return (
+    <div
+      className="error-message"
+      onClick={() => {
+        props.setPopup(!props.popup);
+      }}
+    >
+      <p
+        css={css`
+          color: gray;
+          font-size: 13px;
+          padding: 0px;
+          margin: 10px 25px 0;
+        `}
+      >
+        <BsFillExclamationTriangleFill /> 공백은 입력할 수 없어요 ㅠㅠ
+      </p>
+    </div>
+  );
+}
+
+// props 값 검증
+TodoInput.propTypes = {
+  todoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    }).isRequired
+  ),
+  setTodoList: PropTypes.func.isRequired,
+};
+
+export default TodoInput;

src/components/TodoItem.jsx

@@ -0,0 +1,102 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const todoItemContent = css`
+  font-size: 16px;
+  margin: 10px;
+`;
+const doneTodoItemContent = css`
+  font-size: 16px;
+  margin: 10px;
+  color: lightgray;
+  text-decoration: line-through;
+`;
+const todoItemDeleteButton = css`
+  border: none;
+  background: transparent;
+`;
+const todoItemLi = css`
+  list-style-type: none;
+`;
+
+const TodoItem = ({ todoItem, todoList, setTodoList }) => {
+  const onChangeCheckbox = () => {
+    const nextTodoList = todoList.map((item) => ({
+      ...item,
+
+      // id 값이 같은 항목의 checked 값을 Toggle 함
+      checked: item.id === todoItem.id ? !item.checked : item.checked,
+    }));
+    setTodoList(nextTodoList);
+  };
+
+  const onClickDeleteButton = () => {
+    if (window.confirm('할 일을 삭제하시겠습니까?')) {
+      const nextTodoList = todoList.map((item) => ({
+        ...item,
+        deleted: item.id === todoItem.id ? true : item.deleted,
+      }));
+      setTodoList(nextTodoList);
+    }
+  };
+  return (
+    <>
+      <li className="todo-item-li" css={todoItemLi}>
+        {/* 완료 표시를 위한 체크박스 */}
+        <input
+          className="todo-item-checkbox"
+          type="checkbox"
+          checked={todoItem.checked}
+          onChange={onChangeCheckbox}
+        />
+
+        {/* todo item 내용 */}
+        {!todoItem.checked ? ( // 완료한 일인 경우에는 밑줄 스타일 적용
+          <span className="todo-item-content" css={todoItemContent}>
+            {todoItem.text}
+          </span>
+        ) : (
+          <span className="done-todo-item-content" css={doneTodoItemContent}>
+            {todoItem.text}
+          </span>
+        )}
+
+        {/* 수정 버튼
+        {!todoItem.checked ? ( // 완료한 일인 경우에는 null을 반환하여 수정버튼이 보이지 않도록 함
+          <button type="button" className="todo-item-edit-button">
+            수정
+          </button>
+        ) : null} */}
+
+        {/* 삭제 버튼 */}
+        <button
+          type="button"
+          className="todo-item-delete-button"
+          onClick={onClickDeleteButton}
+          css={todoItemDeleteButton}
+        >
+          🗑️
+        </button>
+      </li>
+      <br />
+    </>
+  );
+};
+
+TodoItem.propTypes = {
+  todoItem: PropTypes.shape({
+    id: PropTypes.number,
+    text: PropTypes.string.isRequired,
+  }),
+  todoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    })
+  ),
+  setTodoList: PropTypes.func.isRequired,
+};
+
+export default TodoItem;

src/components/TodoItemList.jsx

@@ -0,0 +1,74 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { css } from '@emotion/react';
+import TodoItem from './TodoItem';
+import PropTypes from 'prop-types';
+
+const todoItemWrapper = css`
+  display: inline-block;
+  height: 40%;
+  padding: 0 20px 0;
+`;
+const todoItemList = css`
+  margin-top: 40px;
+  padding-left: 20px;
+  height: 60%;
+  overflow: auto;
+`;
+const todoItemTitle = css`
+  margin: 10px;
+`;
+const line = css`
+  margin-bottom: 10px;
+  color: lightgray;
+  border-style: dashed;
+  border-width: 2px 0 0 0;
+`;
+
+const TodoItemList = ({ title, todoList, setTodoList, checkedList }) => {
+  return (
+    <section className="todo-item-list" css={todoItemWrapper}>
+      <div>
+        <hr css={line} />
+        <span className="todo-item-title" css={todoItemTitle}>
+          {title}
+        </span>
+        <hr css={line} />
+      </div>
+      <ul css={todoItemList}>
+        {todoList && // todoList가 있을 때만 출력
+          todoList.map((todoItem) => {
+            // map을 이용하여 TodoItem을 출력
+            // checkedList 값에 따라 '할 일 목록' 또는 '완료한 목록'을 출력
+            if (checkedList != todoItem.checked) return null;
+
+            // 삭제한 항목인 경우, 출력하지 않음 (deleted가 true)
+            if (todoItem.deleted) return null;
+
+            return (
+              <TodoItem
+                key={todoItem.id}
+                todoItem={todoItem}
+                todoList={todoList}
+                setTodoList={setTodoList}
+              />
+            );
+          })}
+      </ul>
+    </section>
+  );
+};
+
+TodoItemList.propTypes = {
+  title: PropTypes.string.isRequired,
+  todoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    })
+  ),
+  setTodoList: PropTypes.func.isRequired,
+  checkedList: PropTypes.bool.isRequired,
+};
+
+export default TodoItemList;