Shared components 추가 (Button, BottomTabBar, AppBar, SegmentedControl, SnakBar, Toast)

.gitignore

@@ -53,4 +53,5 @@ storybook-static
 
 
 # local environment - vscode
-.vscode
+.vscode
+package-lock.json

.storybook/main.ts

@@ -1,9 +1,9 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-import path from "path";
+const path = require("path");
+
 // 커맨드 내 환경 변수 확인 (STORYBOOK_SCOPE가 'shared'이면 공유 컴포넌트만 로드)
 const STORYBOOK_SCOPE = process.env.STORYBOOK_SCOPE;
 
-const config: StorybookConfig = {
+const config = {
   stories: [
     "./Introduction.mdx",
     "./CHANGELOG.mdx",
@@ -58,4 +58,5 @@ const config: StorybookConfig = {
     return config;
   },
 };
-export default config;
+
+module.exports = config;

components/icons/BellIcon.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+interface BellIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  hasNotification?: boolean;
+}
+
+export const BellIcon = ({
+  color = "#1E2124",
+  className,
+  width = 24,
+  height = 24,
+  hasNotification = false,
+  ...props
+}: BellIconProps) => {
+  return (
+    <div className="relative">
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        fill="none"
+        className={className}
+        {...props}
+      >
+        <path
+          d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {hasNotification && (
+        <div 
+          className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full"
+          style={{
+            backgroundColor: '#EA3429',
+            width: '10px',
+            height: '10px',
+            top: '1px',
+            right: '1px'
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default BellIcon; 

components/icons/ChatIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface ChatIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const ChatIcon = ({
+  color = "#8A949E",
+  className,
+  width = 24,
+  height = 24,
+  ...props
+}: ChatIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChatIcon; 

components/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface ChevronLeftIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const ChevronLeftIcon = ({
+  color = "#33363D",
+  className,
+  width = 24,
+  height = 24,
+  ...props
+}: ChevronLeftIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M15 18L9 12L15 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChevronLeftIcon; 

components/icons/HomeIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface HomeIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const HomeIcon = ({
+  color = "#8A949E",
+  className,
+  width = 24,
+  height = 24,
+  ...props
+}: HomeIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default HomeIcon;

components/icons/UserIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface UserIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const UserIcon = ({
+  color = "#8A949E",
+  className,
+  width = 24,
+  height = 24,
+  ...props
+}: UserIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UserIcon; 

components/icons/WarningIcon.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+interface WarningIconProps extends React.SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const WarningIcon = ({
+  color = "#EA3429",
+  className,
+  width = 20,
+  height = 20,
+  ...props
+}: WarningIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <circle
+        cx="10"
+        cy="10"
+        r="7.5"
+        fill={color}
+      />
+      <path
+        d="M10 6V10"
+        stroke="#FFFFFF"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="10"
+        cy="13"
+        r="1"
+        fill="#FFFFFF"
+      />
+    </svg>
+  );
+};
+
+export default WarningIcon; 

components/shared/AppBar/AppBar.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBar } from "./AppBar";
+
+const meta: Meta<typeof AppBar> = {
+  title: "Shared/AppBar",
+  component: AppBar,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["main", "back", "progress"],
+    },
+    title: { control: "text" },
+    points: { control: "text" },
+    hasNotification: { control: "boolean" },
+    progress: { 
+      control: { type: "range", min: 0, max: 100, step: 1 }
+    },
+    className: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBar>;
+
+export const Main: Story = {
+  args: {
+    type: "main",
+    points: "1,000P",
+    hasNotification: false,
+  },
+};
+
+export const MainWithNotification: Story = {
+  args: {
+    type: "main",
+    points: "1,000P",
+    hasNotification: true,
+  },
+};
+
+export const Back: Story = {
+  args: {
+    type: "back",
+    title: "투두 추가",
+  },
+};
+
+export const Progress: Story = {
+  args: {
+    type: "progress",
+    progress: 50,
+  },
+};
+
+export const ProgressComplete: Story = {
+  args: {
+    type: "progress",
+    progress: 100,
+  },
+};