[Feat/#78] 홈 컴포넌트 개발

apps/web/package.json

@@ -10,7 +10,8 @@
     "lint": "next lint --max-warnings 0",
     "check-types": "tsc --noEmit",
     "generate:api": "orval && biome check --fix --unsafe ./shared/api/**/*",
-    "postinstall": "panda codegen",
+    "panda:codegen": "panda codegen",
+    "postinstall": "pnpm run panda:codegen",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

apps/web/src/shared/components/FloatingActionButton/FloatingActionButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { css, cx } from "../../../../styled-system/css";
 import type { FloatingActionButtonProps } from "./FloatingActionButton.type";

apps/web/src/views/home/components/BottomNavigation.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NAV_ITEMS = [
+  {
+    href: "/",
+    label: "홈",
+    icon: "home",
+  },
+  {
+    href: "/schedule",
+    label: "일정",
+    icon: "schedule",
+  },
+  {
+    href: "/documents",
+    label: "문서",
+    icon: "documents",
+  },
+  {
+    href: "/profile",
+    label: "프로필",
+    icon: "profile",
+  },
+];
+
+export default function BottomNavigation() {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      style={{
+        position: "fixed",
+        bottom: "0",
+        left: "0",
+        right: "0",
+        zIndex: 50,
+        display: "flex",
+        justifyContent: "center",
+        padding: "0 16px",
+        backgroundColor: "white",
+        paddingBottom: "env(safe-area-inset-bottom)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          padding: "4px 0",
+          maxWidth: "100%",
+          justifyContent: "space-between",
+          boxShadow: "0 -4px 9.2px -1px rgba(0, 0, 0, 0.03)",
+        }}
+      >
+        {NAV_ITEMS.map(item => {
+          const isActive = pathname === item.href;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "48px",
+                height: "48px",
+              }}
+            >
+              <Image
+                src={`/icons/${item.icon}${isActive ? "-active" : ""}.png`}
+                alt={item.label}
+                width={48}
+                height={48}
+              />
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

apps/web/src/views/home/components/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import type { FloatingActionButtonProps } from "./FloatingActionButton.type";
+
+export function FloatingActionButton({
+  disabled = false,
+  className,
+  position = "fixed",
+  top,
+  left,
+  bottom = 16,
+  right = 16,
+  actions = [],
+  icon,
+  openIcon,
+  closeIcon,
+  onClick,
+}: FloatingActionButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const style: React.CSSProperties = { position };
+  if (top !== undefined) style.top = top;
+  if (left !== undefined) style.left = left;
+  if (bottom !== undefined) style.bottom = bottom;
+  if (right !== undefined) style.right = right;
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...style,
+      }}
+    >
+      <button
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "50%",
+          width: "56px",
+          height: "56px",
+          cursor: "pointer",
+          border: "none",
+          backgroundColor: "#3A8DFF",
+        }}
+        disabled={disabled}
+        type="button"
+        onClick={() => {
+          setIsOpen(!isOpen);
+          onClick?.();
+        }}
+      >
+        {isOpen ? (closeIcon ?? icon) : (openIcon ?? icon)}
+      </button>
+      <div
+        style={{
+          position: "absolute",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px",
+          bottom: "76px",
+          right: "0",
+          transition: "all 0.3s ease-in-out",
+          opacity: isOpen ? 1 : 0,
+          visibility: isOpen ? "visible" : "hidden",
+        }}
+      >
+        {actions?.map((action, index) => (
+          <div
+            key={index.toString()}
+            style={{
+              transform: isOpen ? "translateY(0)" : `translateY(${40 - index * 20}px)`,
+              transition: "transform 0.3s ease-in-out",
+              transitionDelay: isOpen ? `${(index + 1) * 0.1}s` : "0s",
+            }}
+          >
+            <button
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "50%",
+                width: "56px",
+                height: "56px",
+                cursor: "pointer",
+                border: "none",
+                backgroundColor: "#ffffff",
+                boxShadow: "0 0 5.6px 0 rgba(0, 0, 0, 0.04)",
+              }}
+              disabled={action.disabled}
+              type="button"
+              onClick={() => {
+                action.onClick?.();
+                setIsOpen(false);
+              }}
+            >
+              {action.icon}
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/src/views/home/components/FloatingActionButton/FloatingActionButton.type.ts

@@ -0,0 +1,20 @@
+export type FloatingActionButtonAction = {
+  icon: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+export type FloatingActionButtonProps = {
+  className?: string;
+  disabled?: boolean;
+  position?: "fixed" | "absolute";
+  top?: React.CSSProperties["top"];
+  left?: React.CSSProperties["left"];
+  bottom?: React.CSSProperties["bottom"];
+  right?: React.CSSProperties["right"];
+  actions?: FloatingActionButtonAction[];
+  icon?: React.ReactNode;
+  openIcon?: React.ReactNode;
+  closeIcon?: React.ReactNode;
+  onClick?: () => void;
+};

apps/web/src/views/home/components/FloatingActionButton/index.ts

@@ -0,0 +1,2 @@
+export { FloatingActionButton } from "./FloatingActionButton";
+export type { FloatingActionButtonProps } from "./FloatingActionButton.type";

apps/web/src/views/home/components/Tabs.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { TAB_ITEMS, type TabsState } from "@/views/home/types";
+import Image from "next/image";
+
+type TabsProps = {
+  activeTab: TabsState;
+  setActiveTab: (tab: TabsState) => void;
+};
+
+export function Tabs({ activeTab, setActiveTab }: TabsProps) {
+  return (
+    <ul
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        width: "100%",
+        padding: "0 20px",
+        backgroundColor: "white",
+      }}
+    >
+      <li
+        onClick={() => setActiveTab(TAB_ITEMS.DAILY)}
+        style={{
+          cursor: "pointer",
+          flex: 1,
+          height: "35px",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "12px",
+        }}
+      >
+        <Image
+          src={`/icons/check${activeTab === TAB_ITEMS.DAILY ? "-active" : ""}.png`}
+          alt={TAB_ITEMS.DAILY}
+          width={18}
+          height={18}
+        />
+        <p
+          style={{
+            fontSize: "14px",
+            lineHeight: "1.4",
+            letterSpacing: "-0.28px",
+            fontWeight: "400",
+            color: activeTab === TAB_ITEMS.DAILY ? "black" : "#B7C2D0",
+          }}
+        >
+          일일 업무
+        </p>
+      </li>
+      <li
+        onClick={() => setActiveTab(TAB_ITEMS.MEETING)}
+        style={{
+          cursor: "pointer",
+          flex: 1,
+          height: "35px",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "12px",
+        }}
+      >
+        <Image
+          src={`/icons/message${activeTab === TAB_ITEMS.MEETING ? "-active" : ""}.png`}
+          alt={TAB_ITEMS.MEETING}
+          width={20}
+          height={20}
+        />
+        <p
+          style={{
+            fontSize: "14px",
+            lineHeight: "1.4",
+            letterSpacing: "-0.28px",
+            fontWeight: "400",
+            color: activeTab === TAB_ITEMS.MEETING ? "black" : "#B7C2D0",
+          }}
+        >
+          회의 일정
+        </p>
+      </li>
+    </ul>
+  );
+}

apps/web/src/views/home/home.stories.tsx

@@ -1,7 +1,10 @@
-import { FloatingActionButton } from "@/shared/components/FloatingActionButton/FloatingActionButton";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import React from "react";
+import React, { useState } from "react";
 import { HomePage } from ".";
+import BottomNavigation from "./components/BottomNavigation";
+import { FloatingActionButton } from "./components/FloatingActionButton";
+import { Tabs } from "./components/Tabs";
+import { TAB_ITEMS, type TabsState } from "./types";
 
 const OpenIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
@@ -56,6 +59,17 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Navigation_Bar: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div style={{ width: "360px", height: "360px" }}>
+        <BottomNavigation />
+      </div>
+    );
+  },
+};
+
 export const FAB_버튼: Story = {
   args: {},
   render: () => {
@@ -73,3 +87,16 @@ export const FAB_버튼: Story = {
     );
   },
 };
+
+export const 탭: Story = {
+  args: {},
+  render: () => {
+    const [activeTab, setActiveTab] = useState<TabsState>(TAB_ITEMS.DAILY);
+
+    return (
+      <div style={{ width: "360px", height: "360px" }}>
+        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
+      </div>
+    );
+  },
+};

apps/web/src/widgets/home/Tabs.tsx

@@ -2,7 +2,7 @@
 
 import { TAB_ITEMS, type TabsState } from "@/views/home/types";
 import Image from "next/image";
-import { css } from "styled-system/css";
+import { css } from "../../../styled-system/css";
 
 type TabsProps = {
   activeTab: TabsState;
@@ -49,7 +49,7 @@ export function Tabs({ activeTab, setActiveTab }: TabsProps) {
             color: activeTab === TAB_ITEMS.DAILY ? "black" : "#B7C2D0",
           })}
         >
-          Check List
+          일일 업무
         </p>
       </li>
       <li
@@ -80,7 +80,7 @@ export function Tabs({ activeTab, setActiveTab }: TabsProps) {
             color: activeTab === TAB_ITEMS.MEETING ? "black" : "#B7C2D0",
           })}
         >
-          Meeting
+          회의 일정
         </p>
       </li>
     </ul>