chore(ui): Day, Week 컴포넌트 수정

src/components/atoms/Day/index.tsx → src/components/atoms/DayWeek/Day/index.tsx

@@ -1,19 +1,20 @@
 import styled from "@emotion/styled";
 import { theme } from "@styles/theme";
 
-import dayLeftDownDayAfterImgUrl from "../../../assets/day_leftdown_dayafter.svg";
-import dayLeftDownDayBeforeImgUrl from "../../../assets/day_leftdown_daybefore.svg";
-import dayLeftDownSelectedImgUrl from "../../../assets/day_leftdown_selected.svg";
-import dayRightUpDayBeforeImgUrl from "../../../assets/day_rightup_daybefore.svg";
-import dayRightUpSelectedImgUrl from "../../../assets/day_rightup_selected.svg";
-import dayRightUpDayAfterImgUrl from "../../../assets/day_rightup_dayafter.svg";
+import { DaysKeyType } from "../WeekGroup/Week";
 
-export type DaysKeyType = 'M' | 'T' | 'W' | 'T' | 'F' | 'S' | 'S';
+import dayLeftDownDayAfterImgUrl from "../../../../assets/day_leftdown_dayafter.svg";
+import dayLeftDownDayBeforeImgUrl from "../../../../assets/day_leftdown_daybefore.svg";
+import dayLeftDownSelectedImgUrl from "../../../../assets/day_leftdown_selected.svg";
+import dayRightUpDayBeforeImgUrl from "../../../../assets/day_rightup_daybefore.svg";
+import dayRightUpSelectedImgUrl from "../../../../assets/day_rightup_selected.svg";
+import dayRightUpDayAfterImgUrl from "../../../../assets/day_rightup_dayafter.svg";
 
 interface DayPropsType {
   children: DaysKeyType;
   variant: 'dayBefore' | 'selected' | 'dayAfter';
   leftDown: boolean;
+  onClick: () => void;
 }
 
 const TEXT_COLOR_TYPE = {
@@ -22,9 +23,15 @@ const TEXT_COLOR_TYPE = {
   'dayAfter': `${theme.palette.gray_500}`,
 }
 
-export const Day = ({ children, variant, leftDown }: DayPropsType) => {
+export const Day = ({ children, variant, leftDown, onClick }: DayPropsType) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  }
+
   return (
-    <StyledDay variant={variant}>
+    <StyledDay variant={variant} onClick={handleClick}>
       <img
         src={
           variant === 'dayBefore'
@@ -56,6 +63,7 @@ const StyledDay = styled.div<{
   position: relative;
   width: 32px;
   height: 32px;
+  cursor: pointer;
 `;
 
 const StyledDayChild = styled.div`

src/components/atoms/DayWeek/WeekGroup/Week/index.tsx

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+
+import { useState } from 'react';
+
+import { Day } from "../../Day";
+import { TodayKeyType } from "..";
+
+export type DaysKeyType = 'M' | 'T' | 'W' | 'T' | 'F' | 'S' | 'S';
+
+interface WeekPropsType {
+  today: TodayKeyType;
+}
+
+export const Week = ({ today }: WeekPropsType ) => {
+  const week: DaysKeyType[] = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+  const [selectedDay, setSelectedDay] = useState(today);
+
+  const handleDayClick = (index: TodayKeyType) => {
+    setSelectedDay(index);
+  };
+
+  return (
+    <Wrapper>
+      {week.map((day, idx) =>
+        <Day
+          key={idx}
+          children={day}
+          variant={selectedDay === idx ? 'selected' : selectedDay > idx ? 'dayBefore' : 'dayAfter'}
+          leftDown={idx % 2 === 1}
+          onClick={() => handleDayClick(idx as TodayKeyType)}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  width: fit-content;
+  gap: 12px;
+`;

src/components/atoms/DayWeek/WeekGroup/WeekGroup.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { WeekGroup } from ".";
+
+const meta = {
+  title: 'Atom/WeekGroup',
+  component: WeekGroup,
+  tags: ['autodocs'],
+} satisfies Meta<typeof WeekGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const weekGroup: Story = {}

src/components/atoms/DayWeek/WeekGroup/index.tsx

@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+import { Week } from "./Week";
+
+export type TodayKeyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+const todayList: TodayKeyType[] = [0, 1, 2, 3, 4, 5, 6];
+
+export const WeekGroup = () => {
+  return (
+    <Wrapper>
+      <WeekWrapper>
+        {todayList.map((today) => (
+          <Week key={today} today={today} />
+        ))}
+      </WeekWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: inline-grid;
+`;
+
+const WeekWrapper = styled.div`
+  display: grid;
+  gap: 20px;
+`;