Merge pull request #103 from Canvas-Diary/hotfix/folder

Hotfix: 폴더 대소문자 구분 설정

Author: leve68

src/components/common/Appbar/Appbar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import Appbar from "./Appbar";
+
+const meta: Meta<typeof Appbar> = {
+  component: Appbar,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Appbar>;
+
+export const Primary: Story = {
+  args: {
+    text: "Text",
+    menuHandler: fn(),
+    backHandler: fn(),
+  },
+};

src/components/common/Appbar/Appbar.tsx

@@ -0,0 +1,41 @@
+import BackIcon from "@/assets/svg/back-button.svg?react";
+import MenuIcon from "@/assets/svg/menu-dots.svg?react";
+import { ReactNode } from "react";
+
+interface AppBarProps {
+  text?: string;
+  backHandler?: () => void;
+  menuHandler?: () => void;
+}
+
+/**
+ * 상단 AppBar
+ * @param text 가운데 글귀
+ * @param backHandler 뒤로가기 콜백 함수
+ * @param menuHandler 메뉴버튼 콜백 함수
+ * @returns
+ */
+const Appbar = ({ text, backHandler, menuHandler }: AppBarProps) => {
+  return (
+    <div className="relative z-50 flex w-full items-center justify-between bg-transparent px-500 py-300">
+      <div>{backHandler && <AppbarButton icon={<BackIcon />} onClickHandler={backHandler} />}</div>
+      {text && <span className="font-Binggrae text-body-1 font-regular">{text}</span>}
+      <div>{menuHandler && <AppbarButton icon={<MenuIcon />} onClickHandler={menuHandler} />}</div>
+    </div>
+  );
+};
+
+export default Appbar;
+
+interface AppbarButtonProps {
+  icon: ReactNode;
+  onClickHandler: () => void;
+}
+
+const AppbarButton = ({ icon, onClickHandler }: AppbarButtonProps) => {
+  return (
+    <button className="text-white" onClick={onClickHandler}>
+      {icon}
+    </button>
+  );
+};

src/components/common/Button/Button.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: { size: "big", active: true, text: "Text", onClickHandler: fn(), bgColor: "light" },
+};

src/components/common/Button/Button.tsx

@@ -0,0 +1,36 @@
+interface ButtonProps {
+  size: "big" | "small";
+  active: boolean;
+  text: string;
+  bgColor: "light" | "dark" | "gray";
+  onClickHandler: () => void;
+}
+
+const bgColorStyle = {
+  light: "bg-primary-light-2 text-primary-normal dark:bg-primary-normal dark:text-white",
+  dark: "bg-primary-normal text-white dark:bg-primary-medium",
+  gray: "bg-gray-100 text-gray-500 dark:bg-gray-500 dark:text-gray-800",
+  non: "bg-primary-light-1 text-primary-light-3 dark:bg-gray-700 dark:text-gray-300",
+};
+
+/**
+ * 공통 Button
+ * @param size  버튼 크기
+ * @param active 활성화 상태
+ * @param text 버튼 글귀
+ * @param bgColor 배경 색상
+ * @param onClickHandler 버튼 클릭 콜백 함수
+ * @returns
+ */
+const Button = ({ size, active, text, bgColor, onClickHandler }: ButtonProps) => {
+  return (
+    <button
+      className={`${size === "big" ? "w-[20.4375rem]" : "w-[9.6875rem]"} ${active ? bgColorStyle[bgColor] : `${bgColorStyle.non} pointer-events-none`} rounded-200 py-600 font-Binggrae text-body-1 font-regular transition duration-200`}
+      onClick={onClickHandler}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;

src/components/common/Divider/Divider.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Divider from "./Divider";
+
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Primary: Story = {
+  args: {},
+};

src/components/common/Divider/Divider.tsx

@@ -0,0 +1,9 @@
+interface DividerProps {
+  style?: string;
+}
+
+const Divider = ({ style }: DividerProps) => {
+  return <hr className={`w-full border border-gray-100 dark:border-gray-800 ${style && style}`} />;
+};
+
+export default Divider;

src/components/common/Navbar/Navbar.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import Navbar from "./Navbar";
+import Home from "@/assets/svg/home.svg?react";
+import Sns from "@/assets/svg/sns.svg?react";
+import Album from "@/assets/svg/album.svg?react";
+import Who from "@/assets/svg/who.svg?react";
+import ROUTE_PATH from "@/constants/ROUTE_PATH";
+
+const meta: Meta<typeof Navbar> = {
+  component: Navbar,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={["/"]}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+export const Primary: Story = {
+  args: {
+    NavList: [
+      { icon: <Home />, label: "홈", path: ROUTE_PATH.HOME },
+      { icon: <Sns />, label: "일기 공유", path: ROUTE_PATH.EXPLORE },
+      { icon: <Album />, label: "앨범", path: ROUTE_PATH.ALBUM },
+      { icon: <Who />, label: "마이페이지", path: ROUTE_PATH.MYPAGE },
+    ],
+  },
+};

src/components/common/Navbar/Navbar.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+interface NavBarProps {
+  NavList: {
+    icon: ReactNode;
+    path: string;
+    label: string;
+  }[];
+}
+
+/**
+ * 하단 공통 NavBar
+ * @param NavList nav배열
+ * @returns
+ */
+const Navbar = ({ NavList }: NavBarProps) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  return (
+    <nav className="h-[5.25rem] flex-shrink-0 border-t-[1px] border-gray-100 bg-background dark:border-gray-800">
+      <ul className="flex flex-row justify-center gap-600 px-800 pt-500">
+        {NavList.map((element) => (
+          <li
+            key={element.label}
+            className={`w-[4.375rem] ${
+              currentPath === element.path ||
+              (element.path !== "/" && currentPath.startsWith(element.path))
+                ? "text-primary-normal"
+                : "text-gray-100 dark:text-gray-700"
+            }`}
+          >
+            <Link to={element.path} className="flex flex-col items-center justify-center gap-200">
+              <div className="flex h-7 w-7 items-center justify-center">{element.icon}</div>
+              <span className="font-Binggrae text-detail-2 font-regular">{element.label}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/common/Toggle/Toggle.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Toggle from "./Toggle";
+
+const meta: Meta<typeof Toggle> = {
+  component: Toggle,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Primary: Story = {
+  args: { onClickHandler: fn(), isChecked: true },
+};

src/components/common/Toggle/Toggle.tsx

@@ -0,0 +1,19 @@
+interface ToggleProps {
+  onClickHandler: (isChecked: boolean) => void;
+  isChecked: boolean;
+}
+
+const Toggle = ({ onClickHandler, isChecked }: ToggleProps) => {
+  const handleToggle = () => {
+    onClickHandler(!isChecked);
+  };
+
+  return (
+    <label className="inline-flex cursor-pointer items-center">
+      <input type="checkbox" className="peer sr-only" checked={isChecked} onChange={handleToggle} />
+      <div className="peer relative h-[1.75rem] w-[3.25rem] rounded-full bg-gray-200 shadow-default after:absolute after:start-[2px] after:top-[2px] after:h-6 after:w-[1.48rem] after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary-medium peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
+    </label>
+  );
+};
+
+export default Toggle;