✨ Feat(#104): AppBar 기능 추가

Team-Blitz-Steady · Nov 5, 2023 · e9a4d1d · e9a4d1d
2 parents 100dcd4 + ba8e8cb
commit e9a4d1d
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/_common/AppBar/index.tsx b/src/components/_common/AppBar/index.tsx
@@ -1,29 +1,89 @@
 import Image from "next/image";
+import Link from "next/link";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import LogoImage from "@/images/logo.png";
+import { cn } from "@/lib/utils";
 import { BellIcon } from "@radix-ui/react-icons";
+import { Avatar, IconButton, Separator } from "@radix-ui/themes";
+import Dropdown from "@/components/_common/Dropdown";
 import LoginModal from "../Modal/LoginModal";
 
 interface AppBarProps {
   isLogin: boolean;
+  className?: string;
 }
 
+const notifications = Array.from({ length: 10 }, (_, i) => `Notification ${i}`);
+
 export const appBarTextStyles = "text-lg font-bold";
 
-const AppBar = ({ isLogin = false }: AppBarProps) => {
+const AppBar = ({ isLogin = false, className }: AppBarProps) => {
   return (
-    <div className="flex items-center justify-between pb-30 pt-30 md:w-5/6 xl:w-1120">
-      <Image
-        src={LogoImage}
-        alt="스테디 로고"
-      />
+    <div
+      className={cn(
+        "flex items-center justify-between py-30 md:w-5/6 xl:w-1120",
+        className,
+      )}
+    >
+      <Link href={"/"}>
+        <Image
+          src={LogoImage}
+          alt="스테디 로고"
+        />
+      </Link>
       {isLogin ? (
-        <div className="flex w-250 justify-between">
-          <div className={appBarTextStyles}>내 스테디</div>
-          <BellIcon
-            width={25}
-            height={25}
-          />
-          <div className={appBarTextStyles}>프로필</div>
+        <div className="flex w-250 items-center justify-between">
+          <Link href={"/mysteady"}>
+            <div className={appBarTextStyles}>내 스테디</div>
+          </Link>
+          <Popover>
+            <PopoverTrigger>
+              <IconButton
+                variant={"ghost"}
+                className={"cursor-pointer text-st-black"}
+              >
+                <BellIcon
+                  width={25}
+                  height={25}
+                />
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent className={"h-300"}>
+              <ScrollArea className={"h-full w-full rounded-md"}>
+                <div className="px-4">
+                  <h4 className="mb-16 text-20 font-semibold leading-none">
+                    알림 목록
+                  </h4>
+                  {notifications.map((content, idx) => (
+                    <div
+                      className={"justify-center py-10"}
+                      key={idx}
+                    >
+                      <div className="text-md pb-15">{content}</div>
+                      <Separator className="my-2" />
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </PopoverContent>
+          </Popover>
+          <Dropdown
+            options={[
+              { label: "마이페이지", linkTo: "/mypage" },
+              { label: "로그아웃", linkTo: "/logout" },
+            ]}
+          >
+            <Avatar
+              radius={"full"}
+              fallback={<div>?</div>}
+              src={"/images/steadyturtle.png"}
+            />
+          </Dropdown>
         </div>
       ) : (
         <LoginModal

diff --git a/src/components/_common/Dropdown/index.tsx b/src/components/_common/Dropdown/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { useState } from "react";
 import Link from "next/link";
 import { Button, DropdownMenu } from "@radix-ui/themes";
 
@@ -15,12 +16,17 @@ interface DropdownProps {
 }
 
 const Dropdown = ({ children, options }: DropdownProps) => {
+  const [open, setOpen] = useState(false);
   return (
-    <DropdownMenu.Root>
+    <DropdownMenu.Root
+      open={open}
+      modal={false}
+    >
       <DropdownMenu.Trigger>
         <Button
           variant={"ghost"}
-          className={"hover:bg-transparent"}
+          className={"hover:bg-transparent cursor-pointer"}
+          onClick={() => setOpen((prev) => !prev)}
         >
           {children}
         </Button>
@@ -31,7 +37,12 @@ const Dropdown = ({ children, options }: DropdownProps) => {
             key={idx}
             className={"hover:bg-st-primary"}
           >
-            <Link href={option.linkTo}>{option.label}</Link>
+            <Link
+              href={option.linkTo}
+              onClick={() => setOpen(false)}
+            >
+              {option.label}
+            </Link>
           </DropdownMenu.Item>
         ))}
       </DropdownMenu.Content>

diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "border-l-transparent h-full w-2.5 border-l p-[1px]",
+      orientation === "horizontal" &&
+        "border-t-transparent h-2.5 flex-col border-t p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(
+        "relative rounded-full bg-border",
+        orientation === "vertical" && "flex-1",
+      )}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };