[2주차] 김서연 미션 제출합니다!

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Font } from './styles/font';
+import DateBox from './components/DateBox';
+import TodayGoal from './components/TodayGoal';
+import TodoInput from './components/TodoInput';
+import Tasks from './components/Tasks';
 function App() {
+  const TODO = 0;
+  const DONE = 1;
+  const [tasks, setTasks] = useState({
+    12345678: {
+      id: '12345678',
+      state: TODO,
+      text: 'CEOS 1주차 과제 : JS로 Todo 구현하기',
+    },
+    12345679: {
+      id: '12345679',
+      state: TODO,
+      text: 'CEOS 2주차 과제 : React로 Todo 구현하기',
+    },
+  });
+  const _saveTasks = (tasks) => {
+    setTasks(tasks);
+    localStorage.setItem('tasks', tasks);
+  };
+
+  const _loadTasks = () => {
+    var tasks = JSON.parse(localStorage.getItem('tasks') || `{}`); // 저장된 tasks 정보 불러오기
+    // 저장된 tasks가 없을 경우 비어있는 객체 불러올 수 있도록
+    setTasks(tasks);
+  };
+  const _toggleTask = (id) => {
+    var newTasks = { ...tasks };
+
+    newTasks[id].state = 1 - newTasks[id].state; // TODO <-> DONE 상태 전환
+    console.log(newTasks);
+    _saveTasks(newTasks);
+  };
+
+  const _deleteTask = (id) => {
+    var newTasks = { ...tasks };
+    delete newTasks[id]; //id가 key값인 객체 삭제
+    _saveTasks(newTasks);
+  };
+  const _addTask = (text) => {
+    if (text.trim() === '') {
+      return;
+    }
+    var newId = Date.now();
+
+    /* 변수의 value값을 JS의 key값으로 사용하는 방법
+    https://koonsland.tistory.com/146 */
+
+    _saveTasks({
+      ...tasks,
+      [newId]: {
+        id: [newId],
+        state: TODO,
+        text: text,
+      },
+    });
+  };
+  useEffect(() => {
+    //_loadTasks();
+  }, []);
+
+  console.log(tasks);
   return (
-    <div>
-      <h1>17기 프론트 화이팅~ 우하하</h1>
-    </div>
+    <Background>
+      <MainBox>
+        <DateBox />
+        <TodayGoal />
+        <TodoInput _addTask={_addTask} />
+        <Tasks
+          tasks={tasks}
+          _toggleTask={_toggleTask}
+          _deleteTask={_deleteTask}
+        />
+      </MainBox>
+    </Background>
   );
 }
+const Background = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100vw;
+`;
+
+const MainBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  padding: 5vh 5vw;
+  box-shadow: 0px 4px 4px rgba(45, 45, 45, 0.45);
+  width: 90vw;
+  height: 100vh;
+
+  max-width: 600px;
+`;
 
-export default App;
+export default App;

src/components/DateBox.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Font } from '../styles/font';
+export default function DateBox() {
+  let days = [
+    'SUNDAY',
+    'MONDAY',
+    'TUESDAY',
+    'WEDNESDAY',
+    'THURSDAY',
+    'FRIDAY',
+    'SATURDAY',
+  ];
+
+  let months = [
+    '',
+    'JANUARY',
+    'FEBRUARY',
+    'MARCH',
+    'APRILL',
+    'MAY',
+    'JUNE',
+    'JULY',
+    'AUGUST',
+    'SEMTEMBER',
+    'OCTOBER',
+    'NOBEMBER',
+    'DESEMBER',
+  ];
+
+  const [currentMonthText, setCurrentMonthText] = useState('MARCH');
+  const [currentMonth, setCurrentMonth] = useState(0);
+  const [currentDate, setCurrentDate] = useState(0);
+  const [currentDay, setCurrentDay] = useState('MON');
+
+  useEffect(() => {
+    let today = new Date();
+
+    setCurrentMonth(today.getMonth() + 1);
+    setCurrentDate(today.getDate());
+
+    let currentDayIdx = today.getDay();
+    setCurrentDay(days[currentDayIdx]);
+    setCurrentMonthText(months[currentMonth]);
+  }, []);
+  return (
+    <Col>
+      <HeadLine fontSize={'var(--font-size-lg)'} color={`var(--pink)`}>
+        {currentMonthText}
+      </HeadLine>
+      <Row>
+        <Font fontSize={'var(--font-size-ml)'} color={`var(--gray)`}>
+          {currentMonth}.{currentDate}
+        </Font>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <Font fontSize={'var(--font-size-ml)'} color={`var(--gray)`}>
+          {currentDay}
+        </Font>
+      </Row>
+    </Col>
+  );
+}
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+`;
+
+const Col = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin: 10px;
+`;
+const HeadLine = styled(Font)`
+  letter-spacing: 3px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+`;

src/components/Tasks.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Font } from '../styles/font';
+import CheckIconSrc from '../assets/images/check.svg';
+import DeleteIconSrc from '../assets/images/delete.svg';
+import UnCheckIconSrc from '../assets/images/uncheck.svg';
+export default function Tasks({ tasks, _toggleTask, _deleteTask }) {
+  return (
+    <TasksLayout>
+      <TaskBox>
+        <Font fontSize={'var(--font-size-md)'}>TO DO</Font>
+        <TaskContent>
+          {Object.values(tasks)
+            .filter((task) => task.state === 0)
+            .map(({ text, id }) => (
+              <TaskContentItem fontSize="var(--font-size-sm)">
+                <SvgIcon src={UnCheckIconSrc} onClick={() => _toggleTask(id)} />
+                {text}
+                <SvgIcon src={DeleteIconSrc} onClick={() => _deleteTask(id)} />
+              </TaskContentItem>
+            ))}
+        </TaskContent>
+      </TaskBox>
+
+      <TaskBox>
+        <Font fontSize={'var(--font-size-md)'}>DONE</Font>
+        <TaskContent>
+          {' '}
+          {Object.values(tasks)
+            .filter((task) => task.state === 1)
+            .map(({ text, id }) => (
+              <Font fontSize="var(--font-size-sm)">
+                <SvgIcon
+                  src={CheckIconSrc}
+                  onClick={() => _toggleTask(id)}
+                  width={'var(--font-size-sm)'}
+                />
+
+                {text}
+                <SvgIcon
+                  src={DeleteIconSrc}
+                  onClick={() => _deleteTask(id)}
+                  width={'var(--font-size-sm)'}
+                />
+              </Font>
+            ))}
+        </TaskContent>
+      </TaskBox>
+    </TasksLayout>
+  );
+}
+const TasksLayout = styled.div`
+  display: flex;
+  gap: 20px;
+  height: 100%;
+  width: 100%;
+
+  @media (max-width: 767px) {
+    //모바일
+
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  @media (min-width: 1200px) {
+    // 데스크탑 일반
+    flex-direction: row;
+
+    justify-content: space-between;
+  }
+`;
+
+const TaskContent = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border: 3px solid var(--medium-pink);
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow-y: scroll;
+  list-style: none;
+`;
+
+const TaskContentItem = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+const TaskBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  @media (max-width: 767px) {
+    //모바일
+
+    height: 50%;
+  }
+
+  @media (min-width: 1200px) {
+    // 데스크탑 일반
+    height: 50vh;
+  }
+`;
+
+const SvgIcon = styled.img`
+  cursor: pointer;
+`;

src/components/TodayGoal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Font } from '../styles/font';
+export default function TodayGoal() {
+  return (
+    <Box>
+      <Label fontSize={'var(--font-size-md)'} color={'var(--darken-pink)'}>
+        TODAY GOAL
+      </Label>
+      <TextInput type="text" />
+    </Box>
+  );
+}
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: center;
+  background-color: var(--light-pink);
+  width: 100%;
+  height: 30%;
+  padding: 10px;
+`;
+/* 상속 받아서 사용하기 */
+const TextInput = styled.input`
+  border: none;
+  background: transparent;
+  height: 100%;
+  font-size: var(--font-size-md);
+`;
+
+const Label = styled(Font)`
+  font-weight: 500;
+  letter-spacing: 3px;
+
+  align-self: center;
+`;