[2주차] 심여은 미션 제출합니다.

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.jsx

@@ -1,5 +1,130 @@
+import { useEffect, useState } from 'react';
+import { Global, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import InputForm from './components/InputForm.jsx';
+import TodoList from './components/TodoList.jsx';
+import Header from './components/Header.jsx';
+import bgImage from './grid.jpg';
+
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+      @font-face {
+        font-family: 'RixXladywatermelonR';
+        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-4@1.0/RixXladywatermelonR.woff2')
+          format('woff2');
+        font-weight: normal;
+        font-style: normal;
+      }
+
+      html {
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      body {
+        font-family: 'RixXladywatermelonR', sans-serif;
+        max-width: 500px;
+        padding: 10px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        scrollbar-width: thin;
+        margin: 0;
+      }
+
+      button {
+        font-family: 'RixXladywatermelonR';
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-wrap: wrap-reverse;
+      }
+    `}
+  />
+);
+
+const ContainerStyle = styled.div`
+  position: relative;
+  display: flex;
+  width: 450px;
+  height: 680px;
+  flex-direction: column;
+  background-color: #fef79fbd;
+  overflow: hidden;
+  ::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(${bgImage});
+    background-size: cover;
+    background-blend-mode: darken;
+    opacity: 0.5;
+    z-index: -1;
+  }
+`;
+
 function App() {
-  return <div>React Todo</div>;
+  const userName = '옹헤';
+  //localStorage에서 todoList 불러오기
+  const [todoList, setTodoList] = useState(() => {
+    const prevTodoList = localStorage.getItem('todoList');
+    return prevTodoList ? JSON.parse(prevTodoList) : [];
+  });
+
+  //todoList가 변경될 때마다 localStorage에 저장
+  useEffect(() => {
+    localStorage.setItem('todoList', JSON.stringify(todoList));
+  }, [todoList]);
+
+  //사용자에게 받은 입력으로 todo 추가하기
+  function handleAddTodo(todoInput) {
+    const newTodo = {
+      createTime: Date.now(),
+      content: todoInput,
+      isCompleted: false,
+    };
+    setTodoList([...todoList, newTodo]);
+  }
+
+  function handleComplete(todo) {
+    const newTodoList = todoList.map((item) => {
+      if (item.createTime === todo.createTime) {
+        return { ...item, isCompleted: !item.isCompleted };
+      }
+      return item;
+    });
+    setTodoList(newTodoList);
+  }
+
+  function handleDelete(todo) {
+    const newTodoList = todoList.filter((item) => {
+      return item.createTime !== todo.createTime;
+    });
+    setTodoList(newTodoList);
+  }
+
+  return (
+    <>
+      <GlobalStyles />
+      <ContainerStyle>
+        <Header name={userName} /> {/* Header 컴포넌트 */}
+        <InputForm handleAddTodo={handleAddTodo} /> {/* InputForm 컴포넌트 */}
+        <TodoList
+          todoList={todoList}
+          handleComplete={handleComplete}
+          handleDelete={handleDelete}
+        /> {/* TodoList 컴포넌트 */}
+      </ContainerStyle>
+    </>
+  );
 }
 
 export default App;

src/components/Header.jsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+const HeaderStyle = styled.header`
+  font-size: 40px;
+  font-weight: bold;
+  padding: 20px;
+  background-color: #2b3681;
+  color: white;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
+`;
+
+export default function Header({ name }) {
+  return <HeaderStyle>{name}'s React Todo</HeaderStyle>;
+}

src/components/InputForm.jsx

@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+const InputFormStyle = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+`;
+
+const InputLabelStyle = styled.label`
+  align-items: center;
+  padding: 2px 7px;
+  font-size: 20px;
+`;
+
+const InputStyle = styled.input`
+  border-color: black;
+  border-width: 0 0 2px;
+  background-color: transparent;
+  width: 180px;
+  margin: 0;
+  font-family: RixXladywatermelonR;
+  padding-bottom: 5px;
+  color: rgb(50, 50, 50);
+  :focus {
+    outline: none;
+    box-shadow: none;
+  }
+`;
+
+const InputBtnStyle = styled.button`
+  border: transparent;
+  border-radius: 4px;
+  background-color: transparent;
+  padding: 2px 7px;
+  font-size: 25px;
+  font-weight: 500;
+  :hover {
+    color: green;
+    background-color: transparent;
+  }
+`;
+
+export default function InputForm({ handleAddTodo }) {
+  const [todoInput, setTodoInput] = useState('');
+
+  const handleInputChange = (e) => {
+    setTodoInput(e.target.value);
+  };
+
+  const handleInputSubmit = (e) => {
+    e.preventDefault();
+    //입력값이 없으면 alert 띄우기
+    if (todoInput === '') {
+      alert('한 글자 이상 입력해주세요.');
+      return;
+    }
+    handleAddTodo(todoInput);
+    setTodoInput(''); // input 초기화
+  };
+
+  return (
+    <>
+      <InputFormStyle onSubmit={handleInputSubmit}>
+        <InputLabelStyle htmlFor="todo-input">할 일 : </InputLabelStyle>
+        <InputStyle
+          id="todo-input"
+          placeholder="할 일을 입력하세요"
+          value={todoInput}
+          onChange={handleInputChange}
+        />
+        <InputBtnStyle id="input-btn" type="submit">
+          +
+        </InputBtnStyle>
+      </InputFormStyle>
+    </>
+  );
+}

src/components/TodoItem.jsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+
+const ListLiStyle = styled.li`
+  display: flex;
+  align-items: center;
+  padding: 8px 30px;
+  gap: 8px;
+`;
+
+const DoBtnStyle = styled.button`
+  width: 25px;
+  height: 25px;
+  border-radius: 8px;
+  background-color: transparent;
+  font-size: 25px;
+  border-color: #393939;
+`;
+
+const DoneBtnStyle = styled.button`
+  width: 25px;
+  height: 25px;
+  border-radius: 8px;
+  border: transparent;
+  background-color: green;
+  font-size: 20px;
+  font-weight: 500;
+  color: white;
+`;
+
+const DeleteBtnStyle = styled.button`
+  border: transparent;
+  background-color: transparent;
+  font-size: 20px;
+  font-weight: 500;
+`;
+
+const DoneSpanStyle = styled.span`
+  text-decoration: line-through;
+  color: #b3b3b3;
+`;
+
+export default function TodoItem({ todo, handleComplete, handleDelete }) {
+  return (
+    <ListLiStyle>
+      {todo.isCompleted ? (
+        <DoneBtnStyle onClick={() => handleComplete(todo)}>v</DoneBtnStyle>
+      ) : (
+        <DoBtnStyle onClick={() => handleComplete(todo)}></DoBtnStyle>
+      )}
+      {todo.isCompleted ? (
+        <DoneSpanStyle>{todo.content}</DoneSpanStyle>
+      ) : (
+        <span>{todo.content}</span>
+      )}
+      <DeleteBtnStyle onClick={() => handleDelete(todo)}>x</DeleteBtnStyle>
+    </ListLiStyle>
+  );
+}

src/components/TodoList.jsx

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+import TodoItem from './TodoItem';
+
+const SectionStyle = styled.section`
+  margin-top: 20px;
+`;
+
+const SectionTitleStyle = styled.h4`
+  font-size: 20px;
+  text-align: left;
+  padding: 10px 20px;
+  margin: 0;
+`;
+
+const ListUlStyle = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 168px;
+  overflow-y: scroll;
+`;
+
+export default function TodoList({ todoList, handleComplete, handleDelete }) {
+  // todoList에서 완료되지 않은 todoList와 완료된 todoList를 분리
+  const doList = todoList.filter((todo) => !todo.isCompleted);
+  const doneList = todoList.filter((todo) => todo.isCompleted);
+
+  return (
+    <>
+      <SectionStyle>
+        <SectionTitleStyle>📋 Todo ({doList.length})</SectionTitleStyle>
+        <ListUlStyle>
+          {doList.map((todo) => 
+            <TodoItem
+              key={todo.createTime}
+              todo={todo}
+              handleComplete={handleComplete}
+              handleDelete={handleDelete}
+            />
+          )}
+        </ListUlStyle>
+      </SectionStyle>
+      <SectionStyle>
+        <SectionTitleStyle>👍🏻 Done ({doneList.length})</SectionTitleStyle>
+        <ListUlStyle>
+          {doneList.map((todo) => 
+            <TodoItem
+              key={todo.createTime}
+              todo={todo}
+              handleComplete={handleComplete}
+              handleDelete={handleDelete}
+            />
+          )}
+        </ListUlStyle>
+      </SectionStyle>
+    </>
+  );
+}