Feat : 달력 추가

.prettierrc

@@ -1,6 +1,8 @@
 {
+  "singleQuote": true,
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "useTabs": false,
+  "printWidth": 80
 }

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",

src/App.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import Form from './components/Form';
 import Todo from './components/Todo';
 import Done from './components/Done';
+import Calendar from './calendar/Calendar';
 import GlobalStyle from './styles/GloalStyle';
 
 const initialTodoData = localStorage.getItem('list')
@@ -41,44 +42,60 @@ function App() {
   list.map((data) => (data.completed ? data : countTodo++));
 
   return (
-    <>
+    <C>
       <GlobalStyle />
-      <Conatiner>
-        <Form getTodo={getTodo} value={value} setValue={setValue}></Form>
-        <Section>
-          <h3>To do...😿{countTodo}</h3>
-          {list.map((data) =>
-            data.completed ? (
-              <></>
-            ) : (
-              <Todo
-                Todo={data}
-                list={list}
-                setList={setList}
-                toggleTodo={toggleTodo}
-                deleteTodo={deleteTodo}
-              ></Todo>
-            )
-          )}
-        </Section>
-        <Section>
-          <h3>Done..!😻{list.length - countTodo}</h3>
-          {list.map((data) =>
-            data.completed ? (
-              <Done
-                Todo={data}
-                toggleTodo={toggleTodo}
-                deleteTodo={deleteTodo}
-              ></Done>
-            ) : (
-              <></>
-            )
-          )}
-        </Section>
-      </Conatiner>
-    </>
+      <Title>Todo Title</Title>
+      <Flex>
+        <Con>
+          <div>아</div>
+          <Calendar />
+        </Con>
+        <Conatiner>
+          <Form getTodo={getTodo} value={value} setValue={setValue}></Form>
+          <Section>
+            <h3>To do...😿{countTodo}</h3>
+            {list.map((data) =>
+              data.completed ? (
+                <></>
+              ) : (
+                <Todo
+                  Todo={data}
+                  list={list}
+                  setList={setList}
+                  toggleTodo={toggleTodo}
+                  deleteTodo={deleteTodo}
+                ></Todo>
+              )
+            )}
+          </Section>
+          <Section>
+            <h3>Done..!😻{list.length - countTodo}</h3>
+            {list.map((data) =>
+              data.completed ? (
+                <Done
+                  Todo={data}
+                  toggleTodo={toggleTodo}
+                  deleteTodo={deleteTodo}
+                ></Done>
+              ) : (
+                <></>
+              )
+            )}
+          </Section>
+        </Conatiner>
+      </Flex>
+    </C>
   );
 }
+
+const C = styled.div`
+  height: 100vh;
+  width: 850px;
+`;
+const Flex = styled.div`
+  display: flex;
+  //flex-direction: row;
+`;
 const Section = styled.div`
   flex: 0.5;
   border-top: 2px solid rgb(177, 171, 171);
@@ -87,13 +104,18 @@ const Section = styled.div`
   padding: 0px 20px 15px 20px;
 `;
 const Conatiner = styled.div`
-  background-color: white;
+  //background-color: white;
   display: flex;
   flex-direction: column;
-  height: 650px;
-  width: 350px;
-  border-radius: 20px;
-  box-shadow: 1px 1px 15px rgba(73, 71, 71, 0.5);
+  height: 100vh;
+  width: 425px;
+  //border-radius: 20px;
+  //box-shadow: 1px 1px 15px rgba(73, 71, 71, 0.5);
+`;
+const Con = styled.div`
+  height: 100vh;
+  width: 425px;
 `;
+const Title = styled.div``;
 
 export default App;

src/calendar/Calendar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Header from './Header';
+import Weeks from './Weeks';
+
+export default function Calendar({ currentMonth, preMonth, nextMonth }) {
+  return (
+    <div>
+      <Header
+        currentMonth={currentMonth}
+        preMonth={preMonth}
+        nextMonth={nextMonth}
+      />
+      <Weeks currentMonth={currentMonth} />
+    </div>
+  );
+}

src/calendar/Days.css

@@ -0,0 +1,15 @@
+.days {
+  display: flex;
+  justify-content: space-around;
+  font-size: 15px;
+}
+.each_days {
+  width: 40px;
+  text-align: center;
+}
+@media screen and (min-width: 1200px) {
+  .days {
+    font-size: 20px;
+    padding: 10px 20px;
+  }
+}

src/calendar/Days.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Days.css';
+
+export default function Days() {
+  const days = ['SUN', 'MON', 'THU', 'WED', 'THRS', 'FRI', 'SAT'];
+  const days_s = [];
+
+  for (let i = 0; i < 7; i++) {
+    days_s.push(
+      <div className="each_days" key={i}>
+        {days[i]}
+      </div>
+    );
+  }
+  return <div className="days">{days_s}</div>;
+}

src/calendar/Header.css

@@ -0,0 +1,28 @@
+.header {
+  padding: 20px 10px 20px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.current_month {
+  font-size: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.current_year {
+  font-size: 15px;
+}
+.month_button {
+  color: rgb(223, 197, 138);
+  cursor: pointer;
+  width: 35px;
+  height: 35px;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.month_button:hover {
+  color: black;
+}

src/calendar/Header.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { addMonths, subMonths, format } from 'date-fns';
+import './Header.css';
+import Days from './Days';
+import Weeks from './Weeks';
+
+export default function Header() {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [currentDate, setCurrentDate] = useState(new Date());
+
+  const preMonth = () => {
+    setCurrentMonth(subMonths(currentMonth, 1));
+  };
+
+  const nextMonth = () => {
+    setCurrentMonth(addMonths(currentMonth, 1));
+  };
+
+  return (
+    <div>
+      <div className="header">
+        <span className="month_button" onClick={preMonth}>
+          {'<'}
+        </span>
+
+        <div className="current_month">
+          {format(currentMonth, 'M')}
+          <span className="current_year">{format(currentMonth, 'yyyy')}</span>
+        </div>
+
+        <span className="month_button" onClick={nextMonth}>
+          {'>'}
+        </span>
+      </div>
+
+      <Days />
+      <Weeks currentMonth={currentMonth} currentDate={currentDate} />
+    </div>
+  );
+}

src/calendar/Weeks.css

@@ -0,0 +1,38 @@
+.month {
+  display: flex;
+  flex-direction: column;
+  font-size: 15px;
+}
+.one_month {
+  display: flex;
+  justify-content: space-around;
+  margin: 20px 0;
+}
+.one_weeksame_month {
+  width: 40px;
+  text-align: center;
+}
+.one_weeksame_month:hover {
+  color: rgb(255, 222, 121);
+}
+.one_weeksame_day {
+  width: 40px;
+  text-align: center;
+  color: rgb(193, 141, 18);
+  font-weight: bold;
+}
+.one_weeksame_day:hover {
+  color: rgb(255, 222, 121);
+}
+.one_weeknot_same_month {
+  color: gray;
+  width: 40px;
+  text-align: center;
+}
+
+@media screen and (min-width: 1200px) {
+  .month {
+    font-size: 20px;
+    padding: 0 20px;
+  }
+}