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

- className Prop 추가
- Logo 클릭 시 메인으로 이동
- 내 스테디 링크 연결
- 내 프로필 Avatar로 바꾸고 드롭다운 메뉴에 마이페이지, 로그아웃 링크 연결
- 종 아이콘 클릭 시 알림 목록 드롭다운

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