From c28d51cdd459197813aab4f414764966ce8c6528 Mon Sep 17 00:00:00 2001
From: kwang <shinkwang@yonsei.ac.kr>
Date: Fri, 28 Jun 2024 09:09:08 +0900
Subject: [PATCH] refactor/#25 Add color for toolbar click

---
 src/components/ui/Stack.tsx         | 21 +++++++++++++++++++++
 src/components/ui/ToolBar.tsx       | 10 +---------
 src/components/ui/ToolBarDetail.tsx |  4 +++-
 3 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ui/Stack.tsx

diff --git a/src/components/ui/Stack.tsx b/src/components/ui/Stack.tsx
new file mode 100644
index 0000000..756da94
--- /dev/null
+++ b/src/components/ui/Stack.tsx
@@ -0,0 +1,21 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+
+interface StackProps extends HTMLAttributes<HTMLDivElement> {
+  rotated?: boolean;
+}
+
+export const VStack = (props: PropsWithChildren<StackProps>) => {
+  const { children, className = '', rotated, ...attributes } = props;
+  return (
+    <div
+      {...attributes}
+      className={`flex gap-1 ${rotated ? 'flex-row' : 'flex-col'} ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+export const HStack = (props: PropsWithChildren<StackProps>) =>
+  VStack({ ...props, rotated: !props.rotated });
+
+export const Spacer = () => <div className='flex-grow' />;
diff --git a/src/components/ui/ToolBar.tsx b/src/components/ui/ToolBar.tsx
index 8672fca..4c1a018 100644
--- a/src/components/ui/ToolBar.tsx
+++ b/src/components/ui/ToolBar.tsx
@@ -16,18 +16,10 @@ const ToolBar = ({ options = mockData }: ToolBarProps) => {
   return (
     <>
       <div className='flex justify-evenly min-h-12 items-center border-b border-gray-200'>
-        {/* <div className='w-1/2 bg-red-300 text-center'>나의 사업장</div> */}
-        {/* <div className='w-1/2 bg-blue-300 text-center'>캘린더</div> */}
-        {/* <button className='bg-blue-300 px-8 py-3'>
-          <ToolBarDetail title={'나의 사업장'} />
-        </button>
-        <button className='bg-red-400 px-8 py-3'>
-          <ToolBarDetail title={'캘린더'} />
-        </button> */}
         {options.map((option, idx) => (
           <button
             key={option}
-            className={`bg-white px-8 py-3 ${idx == selected ? 'border-b boder-b-2 border-hanaLightGreen' : ''}`}
+            className={`bg-white px-8 py-3 ${idx == selected ? 'border-b-2 border-hanaLightGreen' : ''}`}
             onClick={() => onClickSelect(idx)}
             disabled={selected == idx}
           >
diff --git a/src/components/ui/ToolBarDetail.tsx b/src/components/ui/ToolBarDetail.tsx
index 2772d83..7211d21 100644
--- a/src/components/ui/ToolBarDetail.tsx
+++ b/src/components/ui/ToolBarDetail.tsx
@@ -5,7 +5,9 @@ type ToolBarDetailProps = {
 
 const ToolBarDetail = ({ title, isSelected }: ToolBarDetailProps) => {
   return (
-    <div className={`transition-all ${isSelected ? 'font-bold' : ''}`}>
+    <div
+      className={`transition-all ${isSelected ? 'font-bold text-hanaLightGreen' : ''}`}
+    >
       {title}
     </div>
   );