From 322d205c93f93ae7dedeb590a61b932a5705ba4b Mon Sep 17 00:00:00 2001
From: wooooooood <13pft13@gmail.com>
Date: Sun, 20 Aug 2023 06:15:50 +0900
Subject: [PATCH] feat(schedule): weekly select

---
 package.json                                  |  1 +
 .../schedule/components/WeekSelector.tsx      | 30 +++++++++++++++++--
 yarn.lock                                     |  5 ++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 408792c..b8073d4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@tanstack/react-query": "^4.32.6",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.9",
     "html2canvas": "^1.4.1",
     "jotai": "^2.3.1",
     "react": "^18.2.0",
diff --git a/src/features/schedule/components/WeekSelector.tsx b/src/features/schedule/components/WeekSelector.tsx
index 59b34b7..3fdb4b7 100644
--- a/src/features/schedule/components/WeekSelector.tsx
+++ b/src/features/schedule/components/WeekSelector.tsx
@@ -1,15 +1,39 @@
+import dayjs from 'dayjs';
+
 import calendar from '/svg/Calendar.svg';
 import arrow from '/svg/Arrow.svg';
 
+import { useState } from 'react';
+
 const WeekSelector = ({ onClick }: { onClick: () => void }) => {
+  const [startDate, setStartDate] = useState(dayjs(new Date()));
+
+  const handleLeftArrowClick = () => {
+    setStartDate(startDate.add(-8, 'day'));
+    onClick();
+  };
+  const handleRightArrowClick = () => {
+    setStartDate(startDate.add(8, 'day'));
+    onClick();
+  };
+
   return (
     <div className="week-selector">
-      <img className="arrow arrow-left" src={arrow} onClick={onClick} />
+      <img
+        className="arrow arrow-left"
+        src={arrow}
+        onClick={handleLeftArrowClick}
+      />
       <h1>
         <img src={calendar} />
-        00.00&nbsp;&nbsp;~&nbsp;&nbsp;00.00
+        {startDate.format('MM.DD')}&nbsp;&nbsp;~&nbsp;&nbsp;
+        {startDate.add(7, 'day').format('MM.DD')}
       </h1>
-      <img className="arrow arrow-right" src={arrow} onClick={onClick} />
+      <img
+        className="arrow arrow-right"
+        src={arrow}
+        onClick={handleRightArrowClick}
+      />
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 4488cbe..a0b1fb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -914,6 +914,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+dayjs@^1.11.9:
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
+  integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"