feat: JCL-73 TimeBoard 생성, 버튼에 selected 상태 추가

src/components/atoms/Button/index.module.scss

@@ -68,4 +68,9 @@
       @include spinner-rotation;
     }
   }
+
+  &.selected {
+    color: $GRAY-50;
+    background-color: $BLUE-300;
+  }
 }

src/components/atoms/Button/index.stories.tsx

@@ -85,3 +85,12 @@ export const Loading: Story = {
     isLoading: true,
   },
 };
+
+export const Selected: Story = {
+  args: {
+    size: "normal",
+    border: true,
+    children: "Button",
+    isSelected: true,
+  },
+};

src/components/atoms/Button/index.tsx

@@ -17,6 +17,7 @@ export interface ButtonProps extends HtmlButtonProps {
   fontSize?: FontSizeType;
   fontWeight?: FontWeightType;
   isLoading?: boolean;
+  isSelected?: boolean;
 }
 
 export const Button = ({
@@ -28,6 +29,7 @@ export const Button = ({
   fontWeight = 400,
   isLoading = false,
   disabled,
+  isSelected,
   ...props
 }: ButtonProps) => {
   return (
@@ -40,6 +42,7 @@ export const Button = ({
           ${styles[`font-size-${fontSize}`]}
           ${styles[`font-weight-${fontWeight}`]}
           ${styles[isLoading ? "loading" : ""]}
+          ${styles[isSelected ? "selected" : ""]}
           ${className}`,
       )}
       {...props}

src/components/molecules/TimeBoard/index.module.scss

@@ -0,0 +1,28 @@
+@use "src/styles/libs" as *;
+
+.time-board {
+  display: flex;
+  justify-content: center;
+  gap: 3px;
+  width: 240px;
+  height: 245px;
+  padding: 3px;
+  list-style: none;
+  background-color: $BLUISH-GRAY-100;
+  border: 1px $BLUE-400 solid;
+  border-radius: 3px;
+
+  &_buttons {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    gap: 3px;
+    padding-right: 10px;
+  }
+
+  &_button {
+    width: 90px;
+  }
+}

src/components/molecules/TimeBoard/index.stories.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { TimeBoard } from "@/index";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof TimeBoard> = {
+  title: "molecules/TimeBoard",
+  component: TimeBoard,
+  decorators: [(Story) => <Story />],
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeBoard>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState({ hour: 0, minute: 0 });
+    return (
+      <div style={{ width: "600px", height: "300px", position: "relative" }}>
+        <TimeBoard value={value} onChange={(value) => setValue(value)} />
+
+        <div style={{ position: "absolute", bottom: 0 }}>
+          {JSON.stringify(value)}
+        </div>
+      </div>
+    );
+  },
+};

src/components/molecules/TimeBoard/index.tsx

@@ -0,0 +1,68 @@
+import { Button } from "@/components/atoms";
+import styles from "./index.module.scss";
+import { useState } from "react";
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i + 1);
+const MINUTES = Array.from({ length: 60 }, (_, i) => i + 1);
+
+export interface TimeBoardProps {
+  value?: {
+    hour: number;
+    minute: number;
+  };
+  onChange?: (value: { hour: number; minute: number }) => void;
+}
+
+export const TimeBoard = ({ value, onChange }: TimeBoardProps) => {
+  const [selectedHour, setSelectedHour] = useState<number>(
+    new Date().getHours(),
+  );
+  const [selectedMinute, setSelectedMinute] = useState<number>(
+    new Date().getMinutes(),
+  );
+
+  const handleChangeHour = (hour: number) => {
+    setSelectedHour(hour);
+    value && onChange && onChange({ ...value, hour });
+  };
+
+  const handleChangeMinute = (minute: number) => {
+    setSelectedMinute(minute);
+    value && onChange && onChange({ ...value, minute });
+  };
+  return (
+    <div className={styles["time-board"]}>
+      <ul className={styles["time-board_buttons"]}>
+        {HOURS.map((hour, i) => (
+          <li key={i}>
+            <Button
+              isSelected={selectedHour === hour}
+              className={styles["time-board_button"]}
+              onClick={(e) => {
+                handleChangeHour(Number(e.currentTarget.textContent));
+              }}
+            >
+              {hour}
+            </Button>
+          </li>
+        ))}
+      </ul>
+
+      <ul className={styles["time-board_buttons"]}>
+        {MINUTES.map((minute, i) => (
+          <li key={i}>
+            <Button
+              isSelected={selectedMinute === minute}
+              onClick={(e) => {
+                handleChangeMinute(Number(e.currentTarget.textContent));
+              }}
+              className={styles["time-board_button"]}
+            >
+              {minute}
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/components/molecules/index.tsx

@@ -9,3 +9,4 @@ export * from "./Modal";
 export * from "./Table";
 export * from "./Options";
 export * from "./Checkbox";
+export * from "./TimeBoard";

src/styles/_global.scss

@@ -13,6 +13,15 @@ body {
   color: libs.$BLUISH-GRAY-800;
 }
 
+ul {
+  list-style: none;
+}
+button {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 html {
   font-size: 16px;
 }