feat(ui): 시스템 컴포넌트 추가 및 매니저 로그인 구현

apps/manager/src/api/index.ts

@@ -0,0 +1 @@
+export * from './mutations';

apps/manager/src/api/mutations/index.ts

@@ -0,0 +1 @@
+export * from './useLogin';

apps/manager/src/api/mutations/useLogin.ts

@@ -0,0 +1,12 @@
+import { fetcher, useMutation } from '@hcc/api-base';
+
+type Request = {
+  email: string;
+  password: string;
+};
+
+export const postLogin = (request: Request) => {
+  return fetcher.post<void>('manager/login', { json: request });
+};
+
+export const useLogin = () => useMutation({ mutationFn: postLogin });

apps/manager/src/app/auth/login/login-form.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Button, Input, toast } from '@hcc/ui';
+import type { FormEvent } from 'react';
+import { useLogin } from '~/api';
+
+export const LoginForm = () => {
+  const { mutate } = useLogin();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+
+    mutate(
+      { email, password },
+      {
+        onSuccess: () => {
+          window.location.href = '/';
+        },
+        onError: error => {
+          if (error instanceof Error) {
+            toast.error(error.message);
+          } else {
+            toast.error('로그인에 실패했습니다. 다시 시도해주세요.');
+          }
+        },
+      },
+    );
+  };
+
+  return (
+    <form className="column w-full" onSubmit={handleSubmit}>
+      <Input
+        id="email"
+        name="email"
+        size="xl"
+        type="email"
+        placeholder="이메일"
+        autoComplete="email"
+      />
+      <Input
+        id="password"
+        name="password"
+        className="mt-4"
+        size="xl"
+        type="password"
+        placeholder="비밀번호"
+        autoComplete="current-password"
+      />
+      <Button className="mt-6" size="xl" color="black" variant="solid" type="submit">
+        로그인
+      </Button>
+    </form>
+  );
+};

apps/manager/src/app/auth/login/page.tsx

@@ -1,4 +1,5 @@
 import { Badge } from '@hcc/ui';
+import { LoginForm } from './login-form';
 
 const Page = () => {
   return (
@@ -9,11 +10,12 @@ const Page = () => {
           <br />
           manager
         </h1>
-        <Badge className="h-fit" size="small" variant="success">
+        <Badge className="h-fit" size="sm" variant="primary">
           매니저 용
         </Badge>
       </div>
-      <div className="column w-full" />
+
+      <LoginForm />
     </div>
   );
 };

apps/manager/src/app/layout.tsx

@@ -1,11 +1,13 @@
+import '@hcc/ui/styles.css';
+import '~/styles/globals.css';
+
+import { Toaster } from '@hcc/ui';
 import { Analytics } from '@vercel/analytics/next';
 import type { Metadata } from 'next';
 import type { PropsWithChildren } from 'react';
 import { Layout } from '~/components/layout';
 import { Pretendard } from './_fonts';
 import { Provider } from './provider';
-import '~/styles/globals.css';
-import '@hcc/ui/styles.css';
 
 export const metadata: Metadata = {
   title: '훕치치 매니저',
@@ -20,6 +22,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
           <Layout>{children}</Layout>
         </Provider>
         <Analytics />
+        <Toaster />
       </body>
     </html>
   );

packages/api-base/package.json

@@ -3,8 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "build": "rm -rf dist && node build.js && tsc",
-    "dev": "node build.js --watch",
     "start": "next start",
     "lint": "biome lint .",
     "format": "biome format --write ."
@@ -15,21 +13,10 @@
       "biome format --write"
     ]
   },
-  "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "peerDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

packages/ui/package.json

@@ -46,6 +46,8 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "sonner": "^2.0.7",
+    "ts-pattern": "^5.8.0"
   }
 }

packages/ui/src/badge/Badge.tsx

@@ -1,20 +1,21 @@
 import { clsx } from 'clsx';
 import { type ComponentProps, type CSSProperties, forwardRef } from 'react';
-import { color } from '../token';
+import { match } from 'ts-pattern';
+import { colors, type ResponsiveFontSize } from '../token';
 import { Typography } from '../typography';
 import styles from './Badge.module.css';
 
-type BadgeSize = 'small' | 'medium' | 'large';
+type BadgeSize = 'sm' | 'md' | 'lg';
 
-type BadgeVariant = 'default' | 'danger' | 'success';
+type BadgeVariant = 'default' | 'danger' | 'primary';
 
 export interface BadgeProps extends ComponentProps<'div'> {
   size?: BadgeSize;
   variant?: BadgeVariant;
 }
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, children, size = 'medium', variant = 'default', style: _style, ...props }, ref) => {
+  ({ className, children, size = 'md', variant = 'default', style: _style, ...props }, ref) => {
     const backgroundColor = getBackgroundColor(variant);
     const padding = getPadding(size);
     const style = {
@@ -30,54 +31,44 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
 
     return (
       <div ref={ref} className={clsx(styles.badge, className)} style={style} {...props}>
-        <Typography color={fontColor} size={fontSize} weight="semiBold" lineHeight="tight" asChild>
+        <Typography
+          color={fontColor}
+          fontSize={fontSize as ResponsiveFontSize}
+          weight="semibold"
+          lineHeight="tight"
+          asChild
+        >
           <span>{children}</span>
         </Typography>
       </div>
     );
   },
 );
 
-const getPadding = (size: BadgeSize) => {
-  switch (size) {
-    case 'small':
-      return '6px 8px';
-    case 'medium':
-      return '8px 12px';
-    case 'large':
-      return '10px 16px';
-  }
-};
+const getPadding = (size: BadgeSize) =>
+  match(size)
+    .with('sm', () => '4px 8px')
+    .with('md', () => '6px 12px')
+    .with('lg', () => '8px 16px')
+    .exhaustive();
 
-const getFontSize = (size: BadgeSize) => {
-  switch (size) {
-    case 'small':
-      return 12;
-    case 'medium':
-      return 14;
-    case 'large':
-      return 18;
-  }
-};
+const getFontSize = (size: BadgeSize) =>
+  match(size)
+    .with('sm', () => 12)
+    .with('md', () => 14)
+    .with('lg', () => 16)
+    .exhaustive();
 
-const getFontColor = (variant: BadgeVariant) => {
-  switch (variant) {
-    case 'default':
-      return color.neutral600;
-    case 'danger':
-      return color.white;
-    case 'success':
-      return color.primary600;
-  }
-};
+const getFontColor = (variant: BadgeVariant) =>
+  match(variant)
+    .with('default', () => colors.neutral600)
+    .with('danger', () => colors.white)
+    .with('primary', () => colors.primary600)
+    .exhaustive();
 
-const getBackgroundColor = (variant: BadgeVariant) => {
-  switch (variant) {
-    case 'default':
-      return color.neutral100;
-    case 'danger':
-      return color.danger600;
-    case 'success':
-      return color.primary100;
-  }
-};
+const getBackgroundColor = (variant: BadgeVariant) =>
+  match(variant)
+    .with('default', () => colors.neutral100)
+    .with('danger', () => colors.danger600)
+    .with('primary', () => colors.primary100)
+    .exhaustive();

packages/ui/src/button/Button.module.css

@@ -0,0 +1,40 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+
+  height: var(--hcc-button-height);
+  color: var(--hcc-button-font-color);
+  font-size: var(--hcc-button-font-size);
+  font-weight: var(--hcc-button-font-weight);
+  border: var(--hcc-button-border);
+  border-radius: var(--hcc-button-border-radius);
+  background-color: var(--hcc-button-bg-color);
+
+  --hcc-button-height: inherit;
+  --hcc-button-font-color: inherit;
+  --hcc-button-font-size: inherit;
+  --hcc-button-font-weight: inherit;
+  --hcc-button-border: inherit;
+  --hcc-button-border-radius: inherit;
+  --hcc-button-bg-color: inherit;
+}
+
+.button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.button:hover {
+  background-color: var(--hcc-button-bg-hover-color);
+
+  --hcc-button-bg-hover-color: inherit;
+}