Merge pull request #49 from Wedvice/f/list-tab-component/suji_chae

[feat] ListTab 컴포넌트 구현

Author: suji8073

.github/workflows/git-push.yml

@@ -0,0 +1,30 @@
+name: git push into another repo to deploy to vercel
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+      - name: creates output
+        run: sh ./build.sh
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.VECEL_TOKEN }}
+        with:
+          source-directory: 'output'
+          destination-github-username: jungjunhyung99
+          destination-repository-name: Wedvice_FE
+          user-email: ${{ secrets.GITHUB_EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./Wedvice_FE/* ./output
+cp -R ./output ./Wedvice_FE/

src/components/molecules/listTab/ListTab.stories.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ListTab, ListTabProps } from './ListTab';
+import { TabInfo } from '../tab/Tab';
+
+// ListTab 타입 정의
+type ListTabType = 'all' | 'inProgress' | 'completed';
+
+const defaultListTabInfo: TabInfo<ListTabType> = [
+  { tabType: 'all', label: '전체', count: 7 },
+  { tabType: 'inProgress', label: '진행 중', count: 5 },
+  { tabType: 'completed', label: '진행 완료' },
+];
+
+const meta: Meta<typeof ListTab> = {
+  title: 'components/ListTab',
+  component: ListTab,
+  argTypes: {
+    selectedTab: { control: 'text' },
+    onClick: { action: 'clicked' },
+  },
+};
+export default meta;
+
+type Story = StoryObj<ListTabProps<ListTabType>>;
+
+// 기본 ListTab UI
+export const Default: Story = {
+  render: (args) => {
+    const [selectedTab, setSelectedTab] = useState<ListTabType>('all');
+
+    return (
+      <ListTab {...args} selectedTab={selectedTab} onClick={setSelectedTab} />
+    );
+  },
+  args: {
+    tabInfo: defaultListTabInfo,
+  },
+};
+
+// count가 있는 ListTab
+export const WithCounts: Story = {
+  render: (args) => {
+    const [selectedTab, setSelectedTab] = useState<ListTabType>('all');
+
+    return (
+      <ListTab
+        {...args}
+        tabInfo={[
+          { tabType: 'all', label: '전체', count: 7 },
+          { tabType: 'inProgress', label: '진행 중', count: 5 },
+          { tabType: 'completed', label: '진행 완료', count: 2 },
+        ]}
+        selectedTab={selectedTab}
+        onClick={setSelectedTab}
+      />
+    );
+  },
+};

src/components/molecules/listTab/ListTab.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Dispatch, forwardRef, SetStateAction } from 'react';
+import { TabInfo } from '../tab/Tab';
+
+export interface ListTabProps<T> {
+  tabInfo: TabInfo<T>;
+  selectedTab: T;
+  className?: string;
+  onClick: Dispatch<SetStateAction<T>>;
+}
+
+const ListTabComponent = <T,>(
+  { className, tabInfo, selectedTab, onClick, ...props }: ListTabProps<T>,
+  ref: React.Ref<HTMLDivElement>,
+) => {
+  return (
+    <div
+      ref={ref}
+      className={`${className} flex h-[70px] w-full items-center rounded-2xl bg-gray-100 p-1 text-center`}
+      {...props}
+    >
+      {tabInfo.map(({ tabType, label, count }) => {
+        const isSelected = selectedTab === tabType;
+
+        return (
+          <button
+            key={String(tabType)}
+            className={`flex h-full w-full select-none flex-col justify-center gap-1 rounded-2xl ${
+              isSelected ? 'bg-gray-200 text-white' : 'text-gray-500'
+            }`}
+            onClick={() => onClick(tabType)}
+          >
+            {count !== undefined && count > 0 && (
+              <span
+                className={`text-xl font-semibold ${isSelected ? 'text-primary-400' : 'text-gray-500'}`}
+              >
+                {count}
+              </span>
+            )}
+            <span className='text-xs font-medium'>{label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export const ListTab = forwardRef(ListTabComponent) as <T>(
+  props: ListTabProps<T> & { ref?: React.Ref<HTMLDivElement> },
+) => JSX.Element;

src/components/molecules/listTab/index.ts

@@ -0,0 +1 @@
+export { ListTab } from './ListTab';