[Ui/#13] 공통 컴포넌트 제작

.husky/pre-commit

@@ -1 +1,3 @@
+export PATH="/usr/local/bin:$PATH"
+
 npx lint-staged

.storybook/preview.tsx

@@ -25,6 +25,12 @@ const preview: Preview = {
         },
       },
     },
+    backgrounds: {
+      options: {
+        dark: { name: "Dark", value: "#081221" },
+        light: { name: "Light", value: "#FCFCFD" },
+      },
+    },
   },
 };
 

app/(tabs)/index.tsx

@@ -1,10 +1,10 @@
 import { Text, View } from "react-native";
 
-import { Button } from "@/components/button";
+import { Button } from "@/components/common/Button/Button";
 
 export default function HomeScreen() {
   return (
-    <View className="flex-1 items-center justify-center gap-4 bg-bg">
+    <View className="flex-1 items-center justify-center gap-4 bg-bg px-4">
       <Text className="text-gray-900 text-h-04">비밀번호 찾기</Text>
       <Button label="Button" />
     </View>

components/common/Button/Button.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { Button } from "./Button";
+
+const meta = {
+  title: "Common/Button",
+  component: Button,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "inline-radio",
+      options: ["blue", "gray", "outline", "white"],
+    },
+    size: {
+      control: "inline-radio",
+      options: ["tiny", "sm", "modal", "lg", "xl"],
+    },
+  },
+  args: {
+    label: "label",
+  },
+  decorators: [
+    (Story) => (
+      <View className="w-[358px]">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Blue: Story = {};
+
+export const Gray: Story = {
+  args: { variant: "gray" },
+};
+
+export const Outline: Story = {
+  args: { variant: "outline" },
+};
+
+export const White: Story = {
+  args: { variant: "white", size: "xl" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const All: Story = {
+  render: (args) => (
+    <View className="gap-3">
+      <Button {...args} size="tiny" variant="outline" className="self-start" />
+      <View className="flex-row gap-3">
+        <Button {...args} size="sm" />
+        <Button {...args} size="sm" variant="outline" />
+        <Button {...args} size="sm" variant="gray" />
+      </View>
+      <Button {...args} size="modal" />
+      <Button {...args} size="modal" variant="gray" />
+      <Button {...args} size="lg" />
+      <Button {...args} size="lg" variant="gray" />
+      <Button {...args} size="xl" />
+      <Button {...args} size="xl" variant="white" />
+    </View>
+  ),
+};

components/common/Button/Button.tsx

@@ -0,0 +1,79 @@
+import { Pressable, Text } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+export type ButtonStyle = "blue" | "gray" | "outline" | "white";
+export type ButtonSize = "tiny" | "sm" | "modal" | "lg" | "xl";
+
+const VARIANT_CLASS: Record<ButtonStyle, string> = {
+  blue: "bg-primary",
+  gray: "bg-gray-100",
+  outline: "border border-primary bg-bg",
+  // white는 xl 전용 색상
+  white: "bg-gray-0",
+};
+
+const VARIANT_TEXT_CLASS: Record<ButtonStyle, string> = {
+  blue: "text-gray-0",
+  gray: "text-gray-600",
+  outline: "text-primary",
+  white: "text-gray-600",
+};
+
+const SIZE_CLASS: Record<ButtonSize, string> = {
+  tiny: "w-auto rounded-full px-3 py-1.5",
+  sm: "w-[84px] rounded py-2",
+  modal: "h-11 rounded-lg p-2.5",
+  lg: "h-12 rounded-lg p-2.5",
+  xl: "h-12 p-2.5",
+};
+
+const SIZE_TEXT_CLASS: Record<ButtonSize, string> = {
+  tiny: "text-b-04-m",
+  sm: "text-b-04-m",
+  modal: "text-b-02-m",
+  lg: "text-btn",
+  xl: "text-btn",
+};
+
+export type ButtonProps = {
+  label: string;
+  variant?: ButtonStyle;
+  size?: ButtonSize;
+  onPress?: () => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function Button({
+  label,
+  variant = "blue",
+  size = "lg",
+  onPress,
+  disabled = false,
+  className,
+}: ButtonProps) {
+  return (
+    <Pressable
+      accessibilityRole={onPress ? "button" : undefined}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      className={cn(
+        "w-full items-center justify-center",
+        SIZE_CLASS[size],
+        disabled ? "bg-gray-200" : VARIANT_CLASS[variant],
+        className
+      )}
+    >
+      <Text
+        className={cn(
+          disabled ? "text-gray-400" : VARIANT_TEXT_CLASS[variant],
+          SIZE_TEXT_CLASS[size]
+        )}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}

components/common/Fab/Fab.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+
+import { Fab } from "./Fab";
+
+const meta = {
+  title: "Common/Fab",
+  component: Fab,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultOpen: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <View pointerEvents="none">
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof Fab>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  args: { defaultOpen: true },
+};

components/common/Fab/Fab.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+
+import { Add, Cancel, TaskGenerate, TaskJoin } from "@/components/icons";
+import { FAB_PRIMARY_SHADOW, FAB_SECONDARY_SHADOW } from "@/constants/shadows";
+import { cn } from "@/lib/utils";
+
+export type FabProps = {
+  onCreateTask?: () => void;
+  onJoinTeamTask?: () => void;
+  defaultOpen?: boolean;
+  className?: string;
+};
+
+export function Fab({
+  onCreateTask,
+  onJoinTeamTask,
+  defaultOpen = false,
+  className,
+}: FabProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  function handleCreateTask() {
+    setIsOpen(false);
+    onCreateTask?.();
+  }
+
+  function handleJoinTeamTask() {
+    setIsOpen(false);
+    onJoinTeamTask?.();
+  }
+
+  return (
+    <View className={cn("items-end gap-3", className)}>
+      {isOpen ? (
+        <>
+          <View className="flex-row items-center gap-4">
+            <Text className="text-gray-0 text-b-01-m">새 과제 생성</Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="새 과제 생성"
+              onPress={handleCreateTask}
+              style={FAB_SECONDARY_SHADOW}
+              className="size-[60px] items-center justify-center rounded-full bg-gray-100"
+            >
+              <TaskGenerate variant="2xl" className="text-gray-800" />
+            </Pressable>
+          </View>
+          <View className="flex-row items-center gap-4">
+            <Text className="text-gray-0 text-b-01-m">팀 과제 참여</Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="팀 과제 참여"
+              onPress={handleJoinTeamTask}
+              style={FAB_SECONDARY_SHADOW}
+              className="size-[60px] items-center justify-center rounded-full bg-gray-100"
+            >
+              <TaskJoin variant="2xl" className="text-gray-800" />
+            </Pressable>
+          </View>
+        </>
+      ) : null}
+
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={isOpen ? "닫기" : "새 과제 만들기"}
+        onPress={() => setIsOpen((prev) => !prev)}
+        style={FAB_PRIMARY_SHADOW}
+        className="size-[60px] items-center justify-center rounded-full bg-blue-500"
+      >
+        {isOpen ? (
+          <Cancel variant="2xl" className="text-primary-button-text" />
+        ) : (
+          <Add variant="2xl" className="text-primary-button-text" />
+        )}
+      </Pressable>
+    </View>
+  );
+}

components/common/Header/BackHeader.tsx

@@ -0,0 +1,30 @@
+import { Pressable, Text } from "react-native";
+
+import { Left } from "@/components/icons";
+
+import { HeaderContainer } from "./HeaderContainer";
+
+export type BackHeaderProps = {
+  label?: string;
+  onBack?: () => void;
+  className?: string;
+};
+
+export function BackHeader({ label, onBack, className }: BackHeaderProps) {
+  return (
+    <HeaderContainer className={className}>
+      <Pressable
+        accessibilityRole={onBack ? "button" : undefined}
+        accessibilityLabel="뒤로가기"
+        onPress={onBack}
+        hitSlop={8}
+        className="flex-row items-center gap-1"
+      >
+        <Left variant="lg" className="text-gray-800" />
+        {label ? (
+          <Text className="text-gray-800 text-b-01-m">{label}</Text>
+        ) : null}
+      </Pressable>
+    </HeaderContainer>
+  );
+}

components/common/Header/CloseHeader.tsx

@@ -0,0 +1,26 @@
+import { Pressable } from "react-native";
+
+import { Cancel } from "@/components/icons";
+
+import { HeaderContainer } from "./HeaderContainer";
+
+export type CloseHeaderProps = {
+  onClose?: () => void;
+  className?: string;
+};
+
+export function CloseHeader({ onClose, className }: CloseHeaderProps) {
+  return (
+    <HeaderContainer className={className}>
+      <Pressable
+        accessibilityRole={onClose ? "button" : undefined}
+        accessibilityLabel="닫기"
+        onPress={onClose}
+        hitSlop={8}
+        className="ml-auto"
+      >
+        <Cancel variant="xl" color="text-gray-800" />
+      </Pressable>
+    </HeaderContainer>
+  );
+}