tab 컴포넌트

package.json

@@ -26,6 +26,7 @@
     "sb:ds": "pnpm --filter design-system storybook"
   },
   "dependencies": {
+    "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "next": "14.1.0",

packages/design-system/package.json

@@ -9,7 +9,9 @@
     "start": "next start",
     "preview": "next preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint:eslint": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:styles": "stylelint 'src/**/*.{js,jsx,ts,tsx,css,scss}'"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.25",

packages/design-system/src/components/index.tsx

@@ -1,5 +1,5 @@
-import Input from './input';
-
-export default { Input };
+export { Input } from './input';
 export { Select } from './select';
 export { Checkbox } from './checkbox';
+export { Tab } from './tab';
+export { Tooltip } from './tooltip';

packages/design-system/src/components/input/index.tsx

@@ -8,7 +8,7 @@ interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
   onClick: () => void;
 }
 
-const Input: React.FC<IInputProps> = React.forwardRef(
+export const Input: React.FC<IInputProps> = React.forwardRef(
   (
     { inputType = 'text', disabled, value, onChange, onClick, ...rest },
     ref: React.Ref<HTMLInputElement>,
@@ -28,5 +28,3 @@ const Input: React.FC<IInputProps> = React.forwardRef(
     );
   },
 );
-
-export default Input;

packages/design-system/src/components/tab/TabLayout.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+export const TabLayout = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+interface TabListProps {
+  active: boolean;
+}
+
+export const TabList = styled.div<TabListProps>`
+  padding: 10px 20px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+
+  background-color: ${(props) => (props.active ? '#0056b3' : '#007bff')};
+
+  color: #fff;
+  font-size: 16px;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;

packages/design-system/src/components/tab/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TabLayout, TabList } from './TabLayout';
+
+interface TabProps {
+  list: Array<{
+    value: string;
+    label: string;
+  }>;
+  selectedValue: string;
+  onChange: () => void;
+}
+
+// TODO : 삭제 필요 (TeamType/categories)
+enum TeamType {
+  PREPARE_TEAM = 'PREPARE_TEAM',
+  MISSIONARY_TEAM = 'MISSIONARY_TEAM',
+}
+
+export const Tab = ({ list, selectedValue, onChange }: TabProps) => {
+  const categories = [
+    {
+      value: TeamType.PREPARE_TEAM,
+      label: '준비팀',
+    },
+    {
+      value: TeamType.MISSIONARY_TEAM,
+      label: '선교팀',
+    },
+  ];
+
+  return (
+    <TabLayout>
+      {categories.map((category) => (
+        <TabList
+          key={category.value}
+          active={category.value === TeamType.PREPARE_TEAM}
+        >
+          {category.label}
+        </TabList>
+      ))}
+    </TabLayout>
+  );
+};

packages/design-system/src/components/tooltip/TooltipLayout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import styled from '@emotion/styled';
+
+export const TooltipLayout = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+// 툴팁 스타일
+export const TooltipText = styled.span`
+  position: absolute;
+  bottom: 150%;
+  left: 50%;
+  z-index: 1;
+
+  width: 120px;
+  margin-left: -60px;
+  padding: 5px;
+  border-radius: 6px;
+
+  background-color: #000;
+
+  color: #fff;
+  text-align: center;
+
+  opacity: 0.1;
+  visibility: hidden;
+
+  transition: opacity 0.3s;
+`;
+
+// 툴팁을 나타내는 이벤트 핸들러
+export const TooltipTrigger = styled.span`
+  &:hover + ${TooltipText} {
+    opacity: 1;
+    visibility: visible;
+  }
+`;

packages/design-system/src/components/tooltip/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+
+import { TooltipLayout, TooltipTrigger, TooltipText } from './TooltipLayout';
+
+interface TooltipProps {
+  text: string;
+  children: ReactNode;
+}
+
+export const Tooltip = ({ children, text }: TooltipProps) => {
+  return (
+    <TooltipLayout>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipText>{text}</TooltipText>
+    </TooltipLayout>
+  );
+};

packages/missionary-admin/src/app/page.tsx

@@ -1,3 +1,14 @@
+import { Input } from '@samilhero/design-system/src/components/index';
+import { Tab } from '@samilhero/design-system/src/components/tab';
+import { Tooltip } from '@samilhero/design-system/src/components';
+
 export default function Home() {
-  return <main>선교 상륙 작전1</main>;
+  return (
+    <main>
+      선교 상륙 작전1
+      <Input />
+      <Tab />
+      <Tooltip text={'ddd'}>툴탑</Tooltip>
+    </main>
+  );
 }