♻️ refactor: 컴포넌트 분리

src/components/global/ButtonGrid/ButtonGrid.stories.tsx

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { ButtonGrid, ButtonGridProps } from "./ButtonGrid";
+import ButtonGrid, { ButtonGridProps } from "./ButtonGrid";
 
 const meta: Meta<typeof ButtonGrid> = {
   title: "Components/ButtonGrid",

src/components/global/ButtonGrid/ButtonGrid.styles.ts

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const GridWrapper = styled.div`
+  display: grid;
+  grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 8px;
+  margin: 0 auto;
+  width: fit-content;
+`;
+
+export const ButtonStyle = styled.button<{ selected: boolean }>`
+  font-size: 12px;
+  padding: 8px 16px;
+  border: 1px solid ${({ selected }) => (selected ? "#007bff" : "#ccc")};
+  background-color: ${({ selected }) => (selected ? "#e6f0ff" : "#fff")};
+  color: ${({ selected }) => (selected ? "#007bff" : "#000")};
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: ${({ selected }) => (selected ? "#cce4ff" : "#f5f5f5")};
+  }
+`;

src/components/global/ButtonGrid/ButtonGrid.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import styled from "styled-components";
+import { useState } from "react";
+import { GridWrapper, ButtonStyle } from "./ButtonGrid.styles";
 
 export interface ButtonGridProps {
   row: number;
@@ -9,31 +9,7 @@ export interface ButtonGridProps {
   onSelect?: (indexes: number[]) => void; // 선택 이벤트
 }
 
-const GridWrapper = styled.div`
-  display: grid;
-  grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
-  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-  gap: 8px;
-  margin: 0 auto;
-  width: fit-content;
-`;
-
-const ButtonStyle = styled.button<{ selected: boolean }>`
-  font-size: 12px;
-  padding: 8px 16px;
-  border: 1px solid ${({ selected }) => (selected ? "#007bff" : "#ccc")};
-  background-color: ${({ selected }) => (selected ? "#e6f0ff" : "#fff")};
-  color: ${({ selected }) => (selected ? "#007bff" : "#000")};
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: ${({ selected }) => (selected ? "#cce4ff" : "#f5f5f5")};
-  }
-`;
-
-export function ButtonGrid({
+export default function ButtonGrid({
   row,
   col,
   buttonNames,
@@ -75,4 +51,4 @@ export function ButtonGrid({
       ))}
     </GridWrapper>
   );
-}
+}

src/components/global/ButtonGrid/index.ts

@@ -0,0 +1 @@
+export { default as ButtonGrid } from "./ButtonGrid";