From ba8e8cb64163b618c4900aa7c07e312bcd8fe4a3 Mon Sep 17 00:00:00 2001
From: sscoderati <chungup5495@gmail.com>
Date: Sun, 5 Nov 2023 13:11:24 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat(#104):=20AppBar=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- className Prop 추가
- Logo 클릭 시 메인으로 이동
- 내 스테디 링크 연결
- 내 프로필 Avatar로 바꾸고 드롭다운 메뉴에 마이페이지, 로그아웃 링크 연결
- 종 아이콘 클릭 시 알림 목록 드롭다운
---
 src/components/_common/AppBar/index.tsx | 86 +++++++++++++++++++++----
 1 file changed, 73 insertions(+), 13 deletions(-)

diff --git a/src/components/_common/AppBar/index.tsx b/src/components/_common/AppBar/index.tsx
index 89377378..34280d8e 100644
--- 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