Merge pull request #55 from Team-Tiki/feature/archiving/#51-render-day

[Feat] 달에 따른 일수 렌더링

package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-query-devtools": "^5.49.2",
     "axios": "^1.7.2",
+    "date-fns": "^3.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",

src/common/router/Router.tsx

@@ -1,4 +1,5 @@
 import App from '@/App';
+import ArchivingPage from '@/page/archiving/ArchivingPage';
 import TermPage from '@/page/signIn/index/TermPage';
 
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
@@ -9,7 +10,7 @@ const router = createBrowserRouter([
     element: <App />,
     children: [
       { path: 'showcase', element: <p>showcase</p> },
-      { path: 'archiving', element: <p>archiving</p> },
+      { path: 'archiving', element: <ArchivingPage /> },
       {
         path: 'signin',
         element: <TermPage />,

src/page/archiving/Archiving.style.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+
+export const pageStyle = css({
+  padding: '2rem 16rem',
+});
+
+export const sectionStyle = css({
+  display: 'flex',
+
+  flexDirection: 'column',
+  gap: '2rem',
+
+  overflow: 'hidden',
+});
+
+export const daySectionStyle = css({
+  display: 'flex',
+
+  borderRadius: '6px',
+
+  overflow: 'scroll',
+
+  scrollBehavior: 'smooth',
+
+  '&::-webkit-scrollbar': {
+    display: 'none',
+  },
+});

src/page/archiving/ArchivingPage.tsx

@@ -0,0 +1,47 @@
+import { daySectionStyle, pageStyle, sectionStyle } from '@/page/archiving/Archiving.style';
+import DaySection from '@/page/archiving/component/DaySection/DaySection';
+import MonthHeader from '@/page/archiving/component/MonthHeader/MonthHeader';
+import { MonthType } from '@/page/archiving/type/monthType';
+import { getMonthDate } from '@/page/archiving/util/getMonthDate';
+import { endOfMonth } from 'date-fns';
+
+import { useState } from 'react';
+
+const ArchivingPage = () => {
+  const currentDate = new Date();
+  const [selectedMonth, setSelectedMonth] = useState<MonthType>(`${currentDate.getMonth() + 1}월` as MonthType);
+  const dateOfMonth = getMonthDate(selectedMonth);
+  const endDay = endOfMonth(dateOfMonth);
+  const [clickedDay, setClickedDay] = useState<number | null>(null);
+
+  return (
+    <div css={pageStyle}>
+      <section css={sectionStyle}>
+        <MonthHeader
+          onMonthClick={(month: MonthType) => {
+            setSelectedMonth(month);
+            setClickedDay(null);
+          }}
+        />
+        <div css={daySectionStyle}>
+          {Array.from({ length: endDay.getDate() }, (_, index) => {
+            const day = index + 1;
+            const isEven = day % 2 === 0;
+            const isClicked = clickedDay === day;
+            return (
+              <DaySection
+                key={day}
+                day={day}
+                isClicked={isClicked}
+                isEven={isEven}
+                onDayClick={() => setClickedDay(day)}
+              />
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ArchivingPage;

src/page/archiving/component/DaySection/DaySection.style.ts

@@ -2,21 +2,30 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const dayStyle = (isClicked: boolean) =>
+export const dayStyle = (isEven: boolean) =>
   css({
-    color: isClicked ? theme.colors.blue_900 : theme.colors.black,
-    padding: '0.8rem 2.6rem',
+    dixplay: 'flex',
+
+    backgroundColor: isEven ? theme.colors.white : theme.colors.gray_100,
+  });
+
+export const dayBtnStyle = (isClicked: boolean) =>
+  css({
+    padding: '1.2rem 2.6rem',
+
     border: 'none',
-    backgroundColor: theme.colors.white,
+
+    color: isClicked ? theme.colors.blue_900 : theme.colors.black,
+    backgroundColor: theme.colors.gray_100,
     ...theme.text.body04,
+
     cursor: 'pointer',
   });
 
-export const bodyStyle = {
-  width: '6rem',
-  height: '48.4rem',
-
-  overflow: 'scroll',
+export const bodyStyle = () =>
+  css({
+    width: '6rem',
+    height: '48.4rem',
 
-  backgroundColor: theme.colors.white,
-};
+    overflow: 'scroll',
+  });

src/page/archiving/component/DaySection/DaySection.tsx

@@ -1,16 +1,20 @@
-import { bodyStyle, dayStyle } from './DaySection.style';
+import { bodyStyle, dayBtnStyle, dayStyle } from '@/page/archiving/component/DaySection/DaySection.style';
 
 interface DaySectionProps {
   day: number;
   isClicked: boolean;
+  isEven: boolean;
+  onDayClick: () => void;
 }
 
-const DaySection = ({ day, isClicked }: DaySectionProps) => {
+const DaySection = ({ day, isClicked, isEven, onDayClick }: DaySectionProps) => {
   return (
-    <>
-      <button css={dayStyle(isClicked)}>{day}</button>
+    <article css={dayStyle(isEven)}>
+      <button css={dayBtnStyle(isClicked)} onClick={onDayClick}>
+        {day}
+      </button>
       <div css={bodyStyle} />
-    </>
+    </article>
   );
 };
 

src/page/archiving/component/MonthHeader/MonthHeader.style.ts

@@ -3,6 +3,8 @@ import { theme } from '@/common/style/theme/theme';
 export const headerStyle = {
   display: 'flex',
 
+  padding: '0.4rem',
+
   gap: '4.4rem',
 };
 

src/page/archiving/component/MonthHeader/MonthHeader.tsx

@@ -1,22 +1,22 @@
-import { monthBtnStyle } from '@/page/archiving/component/MonthHeader/MonthHeader.style';
+import { headerStyle, monthBtnStyle } from '@/page/archiving/component/MonthHeader/MonthHeader.style';
 import { MONTHS } from '@/page/archiving/constant/month';
+import { MonthType } from '@/page/archiving/type/monthType';
 
 import Button from '@/common/component/Button/Button';
-import { headerStyle } from '@/common/component/Header/Header.style';
 
 interface MonthHeaderProps {
-  onMonthClick: (month: string) => void;
+  onMonthClick: (month: MonthType) => void;
 }
 
 const MonthHeader = ({ onMonthClick }: MonthHeaderProps) => {
   return (
-    <section css={headerStyle}>
+    <header css={headerStyle}>
       {MONTHS.map((month) => (
         <Button key={month} variant="primary" css={monthBtnStyle} onClick={() => onMonthClick(month)}>
           {month}
         </Button>
       ))}
-    </section>
+    </header>
   );
 };
 

src/page/archiving/type/monthType.ts

@@ -0,0 +1,13 @@
+export type MonthType =
+  | '1월'
+  | '2월'
+  | '3월'
+  | '4월'
+  | '5월'
+  | '6월'
+  | '7월'
+  | '8월'
+  | '9월'
+  | '10월'
+  | '11월'
+  | '12월';

src/page/archiving/util/getMonthDate.ts

@@ -0,0 +1,9 @@
+import { MONTHS } from '@/page/archiving/constant/month';
+import { MonthType } from '@/page/archiving/type/monthType';
+
+export const getMonthDate = (monthName: MonthType) => {
+  const monthIndex = MONTHS.indexOf(monthName);
+  const year = new Date().getFullYear();
+
+  return new Date(year, monthIndex);
+};

src/story/page/archiving/DaySection.stories.tsx

@@ -10,17 +10,36 @@ const meta = {
   args: {
     day: 1,
     isClicked: false,
+    onDayClick: () => {},
   },
   argTypes: {
     day: {
       control: {
         type: 'number',
       },
     },
+    isClicked: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isEven: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 } satisfies Meta<typeof DaySection>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    day: 1,
+    isClicked: false,
+    isEven: false,
+    onDayClick: () => {},
+  },
+};
+