CEOS-Developers · billy0904 · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024 · Sep 18, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,8 +7,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
+    "react-calendar": "^5.0.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,27 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import Calendar from './components/Calendar';
+import TodoListComponent from './components/TodoListComponent';
+import '../src/style.css';
+
 function App() {
+  const [currentDate, setCurrentDate] = useState(new Date());
+
   return (
-    <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
-    </div>
+    <Container>
+      <Calendar currentDate={currentDate} setCurrentDate={setCurrentDate}/>
+      <TodoListComponent currentDate={currentDate} setCurrentDate={setCurrentDate}/>
+    </Container>
   );
 }
 
 export default App;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 800px;
+  max-width: 1000px;
+  margin: 0 auto;
+`
diff --git a/src/assets/checked.svg b/src/assets/checked.svg
diff --git a/src/assets/deleteBtn.svg b/src/assets/deleteBtn.svg
diff --git a/src/assets/toTomorrow.svg b/src/assets/toTomorrow.svg
diff --git a/src/assets/toYesterday.svg b/src/assets/toYesterday.svg
diff --git a/src/assets/unchecked.svg b/src/assets/unchecked.svg
diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import BasicCalendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import styled from 'styled-components';
+
+const Calendar = ({ currentDate, setCurrentDate }) => {
+
+    return (
+        <MainContainer>
+            <StyledCalendar 
+                calendarType="gregory"
+                value={currentDate}
+                onChange={setCurrentDate}
+                formatDay={(locale, date) => date.getDate()}
+                tileClassName={({ date, view }) => 
+                    view === 'month' && date.toDateString() === currentDate.toDateString()
+                        ? 'selected'
+                        : null
+                }
+            />
+        </MainContainer>
+    );
+};
+
+export default Calendar;
+
+const MainContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 40%;
+    margin-top: 12%;
+    margin-right: 5%;
+
+    .react-calendar {
+        padding: 5% 5%;
+        border: none;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        flex-grow: 1;
+    }
+`;
+
+const StyledCalendar = styled(BasicCalendar)`
+
+    // 네비게이션 스타일
+    .react-calendar__navigation {
+        margin: 5px;
+        button {
+            font-size: 16px;
+            font-weight: bold;
+        }
+    }
+
+    // 요일 밑줄 제거
+    .react-calendar__month-view__weekdays abbr {
+        text-decoration: none;
+    }
+
+    // 토요일 텍스트 색
+    .react-calendar__month-view__days__day--weekend {
+        &:nth-child(7n) {
+            color: #91d1ff;
+        }
+    }
+
+    // 날짜 타일 스타일
+    .react-calendar__tile {
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+            border-radius: 15%;
+            border: 1px solid #91d1ff;
+            background-color: transparent;
+        }
+    }
+
+    // 오늘 날짜 표시
+    .react-calendar__tile--now {
+        background-color: #e0f7ff;
+        border-radius: 15%;
+    } 
+
+    // 선택된 날짜 표시
+    .react-calendar__tile.selected {
+        background-color: #91d1ff;
+        border-radius: 15%;
+        // 토요일
+        &:nth-child(7n) {
+            color: white;
+        }
+    }
+`;
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import checked from "../assets/checked.svg";
+import unchecked from "../assets/unchecked.svg";
+import deleteBtn from "../assets/deleteBtn.svg";
+
+const TodoItem = ({ todo, date, onTodoChange }) => {
+
+  // 투두 완료 토글
+  const toggleTodoComplete = () => {
+    onTodoChange(date, todo, false);
+  };
+
+  // 투두 삭제
+  const deleteTodo = () => {
+    onTodoChange(date, todo, true);
+  };
-  // 투두 완료 토글
-  const toggleTodoComplete = () => {
-    onTodoChange(date, todo, false);
-  };
-
-  // 투두 삭제
-  const deleteTodo = () => {
-    onTodoChange(date, todo, true);
-  };
+const handleAction = (action) => {
+  onTodoChange({ date, todo, action });
+};
-  // 투두 완료 토글
-  const toggleTodoComplete = () => {
-    onTodoChange(date, todo, false);
-  };
-
-  // 투두 삭제
-  const deleteTodo = () => {
-    onTodoChange(date, todo, true);
-  };
+const handleAction = (action) => {
+  onTodoChange({ date, todo, action });
+};
+
+  return (
+    <TodoItemContainer>
+      <Img 
+        src={todo.completed ? checked : unchecked}
+        onClick={toggleTodoComplete}
+      />
+      <TodoText completed={todo.completed}>{todo.text}</TodoText>
+      <Img 
+        src={deleteBtn}
+        onClick={deleteTodo}
+      />
+    </TodoItemContainer>
+  );
+};
+
+export default TodoItem;
+
+const TodoItemContainer = styled.li`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #C0C0C0;
+  margin: 5px 0;
+`;
+
+const Img = styled.img`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+`;
+
+const TodoText = styled.span`
+  margin-left: 5%;
+  width: 80%;
+  color: ${(props) => (props.completed ? "#C0C0C0" : "#000000")};
+  word-break: break-all;;
+`;
diff --git a/src/components/TodoListComponent.jsx b/src/components/TodoListComponent.jsx
@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import toYesterday from "../assets/toYesterday.svg";
+import toTomorrow from "../assets/toTomorrow.svg";
+import TodoItem from "./TodoItem";
+import { formatDate, formatDay, getTodoList, saveTodoList } from "../utils/Utils";
+
+const TodoListComponent = ({ currentDate, setCurrentDate }) => {
+    const [todoList, setTodoList] = useState([]);
+    const [newTodo, setNewTodo] = useState("");
+
+    // 투두 렌더링
+    useEffect(() => {
+        loadTodoList(currentDate);
+    }, [currentDate]);
+
+    const loadTodoList = (date) => {
+        const todos = getTodoList(date);
+        setTodoList(todos);
+    };
+
+    // 남은 할 일 개수
+    const updateLeftNum = () => {
+        const leftNum = todoList.filter((todo) => !todo.completed).length;
+        return `할 일 ${leftNum}개`;
+    };
+
+    // 투두 추가
+    const addTodoItem = (e) => {
+        e.preventDefault();
+        if (!newTodo.trim())
+            return;
+        const newTodoList = [...todoList, { text: newTodo, completed: false}];
+        setTodoList(newTodoList);
+        saveTodoList(currentDate, newTodoList);
+        setNewTodo("");
+    };
+
+    // 투두 삭제 or 완료 토글 처리
+    const handleTodoChange = (date, changedTodo, isDelete) => {
+        const updatedTodoList = isDelete
+        // 삭제 처리
+        ? todoList.filter((todo) => todo !== changedTodo)
+        // 완료 토글 처리
+        : todoList.map((todo) =>
+            todo === changedTodo ? { ...todo, completed: !todo.completed } : todo
+        );
+
+        setTodoList(updatedTodoList);
+        saveTodoList(date, updatedTodoList);
+    };
+
+    // 날짜 한 칸 씩 이동
+    const moveDate = (days) => {
+        const newDate = new Date(currentDate);
+        newDate.setDate(newDate.getDate() + days);
+        setCurrentDate(newDate);
+    };
+
+    return (
+        <MainContainer>
+            <Img src={toYesterday} onClick={() => moveDate(-1)} />
+            <ListContainer>
+                <LeftNum>{updateLeftNum()}</LeftNum>
+                <DateText>{formatDate(currentDate)}</DateText>
+                <DayText>{formatDay(currentDate)}</DayText>
+
+                <TodoInputForm onSubmit={addTodoItem}>
+                    <TodoInput
+                        type="text"
+                        value={newTodo}
+                        onChange={(e) => setNewTodo(e.target.value)}
+                        placeholder="To Do 입력 후 Enter"
+                    />
+                </TodoInputForm>
+
+                <TodoList>
+                    {todoList.map((todo, index) => (
+                        <TodoItem 
+                            key={index} 
+                            todo={todo} 
+                            date={currentDate}
+                            onTodoChange={handleTodoChange}
+                        />
+                    ))}
+                </TodoList>
+            </ListContainer>
+            <Img src={toTomorrow} onClick={() => moveDate(1)} />
+        </MainContainer>
+    );
+};
+
+export default TodoListComponent;
+
+const MainContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 60%;
+    min-width: 530px;
+    margin-top: 12%;
+`;
+
+const ListContainer = styled.div`
+    text-align: left;
+    background: white;
+    padding: 7% 10%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    flex-grow: 1;
+    margin: 0 20px;
+    height: 600px;
+`;
+
+const LeftNum = styled.p`
+    color: #91d1ff;
+    margin-bottom: 8px;
+    font-weight: 500;
+`;
+
+const DateText = styled.h1`
+    font-weight: 500;
+`;
+
+const DayText = styled.p`
+    margin-top: 8px;
+    font-weight: 500;
+`;
+
+const TodoInputForm = styled.form`
+    margin-top: 20px;
+`;
+
+const TodoInput = styled.input`
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #91d1ff;
+    border-radius: 10px;
+`;
+
+const TodoList = styled.ul`
+    list-style: none;
+    margin-top: 20px;
+    max-height: 370px;
+    overflow-y: auto;
+    padding-right: 20px;
+
+    // 스크롤바 스타일링
+    scrollbar-width: thin;
+    scrollbar-color: #91d1ff71 transparent;
+`;
+
+const Img = styled.img`
+    width: 40px;
+    height: 40px;
+`;