Merge pull request #22 from junction-asia-2023/feat/schedule-day

feat(schedule): weekly select
junction-asia-2023 · Aug 19, 2023 · 7865c7b · 7865c7b
2 parents 2b722dd + 322d205
commit 7865c7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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"