refactor/#25 Add color for toolbar click

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' />;

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}
           >

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>
   );