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;
+`;