[2주차] 고윤정 미션 제출합니다.

eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from '@eslint/js';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default [
   { ignores: ['dist'] },
@@ -35,4 +35,9 @@ export default [
       ],
     },
   },
-]
+  {
+    rules: {
+      'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    },
+  },
+];

package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "normalize.css": "^8.0.1",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.jsx

@@ -1,5 +1,85 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import 'normalize.css';
+import { useEffect, useState } from 'react';
+import InputBox from './components/InputBox.jsx';
+import ToDoItemList from './components/ToDoItemList.jsx';
+
 function App() {
-  return <div>React Todo</div>;
+  const bodyStyle = css`
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: linear-gradient(
+      to bottom right,
+      rgb(247, 196, 218),
+      rgb(239, 239, 239)
+    );
+  `;
+
+  const containerStyle = css`
+    width: 350px;
+    height: 600px;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 20px;
+    padding: 20px;
+  `;
+
+  const mainTitleStyle = css`
+    @font-face {
+      font-family: 'LINESeedKR-Bd';
+      src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Bd.woff2')
+        format('woff2');
+      font-weight: 700;
+      font-style: normal;
+    }
+    font-family: 'LINESeedKR-Bd';
+    color: rgb(59, 56, 56);
+  `;
+
+  // 초기 상태를 localStorage에서 불러옴
+  const [todoList, setTodoList] = useState(() => {
+    const savedTodoList = localStorage.getItem('todoList');
+    return savedTodoList ? JSON.parse(savedTodoList) : [];
+  });
+
+  // todoList가 업데이트될 때마다 localStorage에 저장
+  useEffect(() => {
+    localStorage.setItem('todoList', JSON.stringify(todoList));
+  }, [todoList]);
+
+  return (
+    <div className="body" css={bodyStyle}>
+      <div className="container" css={containerStyle}>
+        <h2 className="title" css={mainTitleStyle}>
+          To Do List
+        </h2>
+        {/* 할 일 입력 */}
+        <InputBox todoList={todoList} setTodoList={setTodoList} />
+
+        {/* 할 일 목록 */}
+        <ToDoItemList
+          title={`📂 TO DO (${
+            todoList.filter((item) => !item.checked).length
+          })`} // 아직 완료되지 않은목록의 길이
+          todoList={todoList}
+          setTodoList={setTodoList}
+          checkedList={false}
+        />
+
+        {/* 완료된 목록 */}
+        <ToDoItemList
+          title={`🗑️ DONE (${todoList.filter((item) => item.checked).length})`} // 완료된 목록의 길이
+          todoList={todoList}
+          setTodoList={setTodoList}
+          checkedList={true}
+        />
+      </div>
+    </div>
+  );
 }
 
 export default App;

src/components/InputBox.jsx

@@ -0,0 +1,111 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import 'normalize.css';
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+export default function InputBox({ todoList, setTodoList }) {
+  const formStyle = css`
+    display: flex;
+    align-items: center;
+  `;
+
+  const inputStyle = css`
+    width: 300px;
+    height: 35px;
+    outline: none;
+    border-radius: 20px;
+    border: 1.2px solid;
+    border-color: rgb(247, 196, 218);
+    padding-left: 12px;
+    @font-face {
+      font-family: 'LINESeedKR-Rg';
+      src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Rg.woff2')
+        format('woff2');
+      font-weight: 400;
+      font-style: normal;
+    }
+    font-family: 'LINESeedKR-Rg';
+    font-size: 12px;
+    color: #3d3d3d;
+  `;
+
+  const addButtonStyle = css`
+    border: 0;
+    background-color: white;
+    font-size: 20px;
+    color: rgb(59, 56, 56);
+    margin-left: 8px;
+    cursor: pointer;
+    &:hover {
+      color: rgb(247, 196, 218);
+    }
+  `;
+
+  const [text, setText] = useState(''); // input에 입력한 값
+  const inputRef = useRef(null);
+
+  // form 제출 시 새로고침 방지
+  const formClickEvent = (e) => {
+    e.preventDefault();
+  };
+
+  // input 값 가져오기
+  function onChangeInput(e) {
+    setText(e.target.value);
+    // e.target에 있는 <input.../>으로부터 value 값을 가져옴
+  }
+
+  // + 버튼 클릭(form 제출)
+  function onClickButton() {
+    // 공백 입력 방지
+    if (text.trim() === '') return;
+
+    // todoItemList에 값 추가
+    const AddTodoList = todoList.concat({
+      id: todoList.length,
+      text,
+      checked: false,
+    });
+    setTodoList(AddTodoList);
+
+    setText(''); // input 값 초기화
+    inputRef.current.focus(); // 버튼 누른 후에도 input box에 자동 포커싱
+  }
+
+  return (
+    <div>
+      <form onSubmit={formClickEvent} className="form" css={formStyle}>
+        <input
+          type="text"
+          name="todoItem"
+          value={text}
+          ref={inputRef}
+          className="input-box"
+          placeholder="할일을 입력하세요"
+          onChange={onChangeInput} // input 값이 변하면(이벤트 발생) 메소드 실행
+          css={inputStyle}
+          autoFocus
+        />
+        <button
+          className="add-button"
+          onClick={onClickButton}
+          css={addButtonStyle}
+        >
+          +
+        </button>
+      </form>
+    </div>
+  );
+}
+
+// props 값 검증
+InputBox.propTypes = {
+  todoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+    }).isRequired
+  ),
+  setTodoList: PropTypes.func.isRequired,
+};

src/components/ToDoItem.jsx

@@ -0,0 +1,126 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import 'normalize.css';
+import PropTypes from 'prop-types';
+
+export default function ToDoItem({ todoItem, todoList, setTodoList }) {
+  const spanStyle = css`
+    @font-face {
+      font-family: 'LINESeedKR-Rg';
+      src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Rg.woff2')
+        format('woff2');
+      font-weight: 400;
+      font-style: normal;
+    }
+    font-family: 'LINESeedKR-Rg';
+    font-size: 15px;
+    color: rgb(59, 56, 56);
+  `;
+
+  const spanCheckedStyle = css`
+    @font-face {
+      font-family: 'LINESeedKR-Rg';
+      src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Rg.woff2')
+        format('woff2');
+      font-weight: 400;
+      font-style: normal;
+    }
+    font-family: 'LINESeedKR-Rg';
+    font-size: 15px;
+    color: gray;
+    text-decoration: line-through;
+  `;
+
+  const liStyle = css`
+    margin: 3px 0px 3px 0px;
+  `;
+
+  const checkBoxStyle = css`
+    cursor: pointer;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    margin-right: 10px;
+    border: 1px solid;
+    border-radius: 10px;
+    border-color: rgb(59, 56, 56);
+
+    &:checked {
+      border-color: transparent;
+      background-size: 100% 100%;
+      background-color: rgb(247, 196, 218);
+    }
+  `;
+
+  const deleteButtonStyle = css`
+    border: 0;
+    background-color: white;
+    font-size: 14px;
+    color: rgb(59, 56, 56);
+    margin-left: 3px;
+    cursor: pointer;
+    &:hover {
+      color: rgb(247, 196, 218);
+    }
+  `;
+
+  // checkbox를 클릭하면, todoItem의 checked 값이 토글됨
+  function onChangeCheckbox() {
+    const updatedTodoList = todoList.map((item) => ({
+      ...item,
+      checked: item.id === todoItem.id ? !item.checked : item.checked,
+    }));
+
+    setTodoList(updatedTodoList);
+  }
+
+  // 항목 삭제
+  function onDelete(id) {
+    // 주어진 id와 일치하지 않는 항목들만 남김(일치하면 필터링 -> 해당 항목 삭제)
+    const updatedTodoList = todoList.filter((todoItem) => todoItem.id !== id);
+    setTodoList(updatedTodoList);
+  }
+
+  return (
+    <li className="li" css={liStyle}>
+      <input
+        type="checkbox"
+        className="check-box"
+        checked={todoItem.checked}
+        onChange={onChangeCheckbox}
+        css={checkBoxStyle}
+      />
+      <span
+        className="span"
+        // 완료 여부에 따라 스타일 변경
+        css={todoItem.checked ? spanCheckedStyle : spanStyle}
+      >
+        {todoItem.text}
+      </span>
+      <button
+        type="button"
+        className="delete-button"
+        onClick={() => onDelete(todoItem.id)}
+        css={deleteButtonStyle}
+      >
+        ✖️
+      </button>
+    </li>
+  );
+}
+
+ToDoItem.propTypes = {
+  todoItem: PropTypes.shape({
+    id: PropTypes.number,
+    text: PropTypes.string.isRequired,
+    checked: PropTypes.bool.isRequired,
+  }),
+  todoList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+      checked: PropTypes.bool.isRequired,
+    })
+  ),
+  setTodoList: PropTypes.func.isRequired,
+};