diff --git a/frontend/src/components/Home/index.stories.tsx b/frontend/src/components/Home/index.stories.tsx new file mode 100644 index 0000000..ace0d61 --- /dev/null +++ b/frontend/src/components/Home/index.stories.tsx @@ -0,0 +1,35 @@ +import '@/index.css'; +import { Meta, StoryObj } from '@storybook/react'; +import Home from '.'; +import { useState } from 'react'; + +const HomeWrapper = ({ initialLoggedIn }: { initialLoggedIn: boolean }) => { + const [isLoggedIn, setIsLoggedIn] = useState(initialLoggedIn); + + return ( + + ); +}; + +const meta: Meta = { + title: 'Components/Home', + component: Home, + parameters: { + layout: 'fullscreen', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const GoogleLogin: Story = { + render: () => , +}; + +export const SelectWorkspace: Story = { + render: () => , +}; diff --git a/frontend/src/components/Home/index.tsx b/frontend/src/components/Home/index.tsx new file mode 100644 index 0000000..23396de --- /dev/null +++ b/frontend/src/components/Home/index.tsx @@ -0,0 +1,80 @@ +import { useState } from 'react'; +import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup } from '../ui/select'; +import GoogleLogo from '@/assets/icons/web_neutral_rd_ctn@1x.png'; + +interface HomeProps { + isLoggedIn?: boolean; + setIsLoggedIn?: (loggedIn: boolean) => void; +} + +export default function Home({ isLoggedIn = false, setIsLoggedIn }: HomeProps) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [selectedWorkspace, setSelectedWorkspace] = useState(''); + + const workspaces = [ + { id: 1, name: 'Workspace 1' }, + { id: 2, name: 'Workspace 2' }, + { id: 3, name: 'Workspace 3' }, + ]; + + const handleGoogleSignIn = () => { + console.log('구글로 계속하기'); + if (setIsLoggedIn) { + setIsLoggedIn(true); + } + }; + + return ( +
+
+

서비스 설명

+

+ 본 서비스는 인공 지능(AI) 모델의 학습을 지원하기 위해 웹 기반의 자동 라벨링 도구를 개발하는 것을 목표로 + 합니다. 이 도구는 이미지나 텍스트와 같은 비정형 데이터에 레이블을 자동으로 부여하는 기능을 제공합니다. +

+

+ 기존의 수동적인 방법으로는 대량의 학습 데이터를 처리하는데 시간과 비용이 많이 소모되었습니다. 그러나 본 + 서비스의 결과물인 Auto Labeler를 사용하면, 이러한 문제를 해결할 수 있을 것으로 기대됩니다. +

+

+ Auto Labeler는 웹 기반으로 동작하므로, 별도의 설치 과정 없이 인터넷 연결 환경에서 쉽게 사용할 수 있습니다. + 또한, 사용자 친화적인 인터페이스를 제공하여 비전문가도 손쉽게 이용할 수 있도록 설계될 예정입니다. +

+

+ 본 서비스는 특히 학습 데이터 구축 과정의 효율성과 정확도를 향상시키는 데 중점을 두고 있습니다. +

+
+ + {!isLoggedIn ? ( + + ) : ( + + )} +
+ ); +}