✨ feat: mypage 관련 컴포넌트 구현 #50

src/app/mypage/_components/MypageAvatar.tsx

@@ -0,0 +1,55 @@
+import * as Avatar from "@radix-ui/react-avatar";
+import Image from "next/image";
+import { User } from "next-auth";
+import React, { FC } from "react";
+
+import { UserTypeImage } from "@/utils";
+
+interface Props {
+  user: (User & UserMeResponse) | null;
+}
+
+const MypageAvatar: FC<Props> = ({ user }) => {
+  if (!user) {
+    return (
+      <div
+        role="status"
+        className="flex h-[132px] w-full animate-pulse flex-col items-center justify-center gap-[2px]"
+      >
+        <div className="size-[64px] rounded-full bg-gray-scale-200" />
+        <div className="h-[24px] w-[104px]  bg-gray-scale-200" />
+        <div className="h-[17px] w-[170px]  bg-gray-scale-200" />
+        <span className="sr-only">Loading...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[132px] w-full flex-col items-center justify-center">
+      <Avatar.Root className="min-h-[76px]">
+        <Avatar.Image
+          width={76}
+          height={76}
+          src={UserTypeImage[user?.userTypeId]}
+          alt={user?.nickname ?? "피에스타"}
+        />
+        <Avatar.Fallback className="AvatarFallback">
+          <Image
+            width={76}
+            height={76}
+            src={"/images/fiestaLogo.png"}
+            alt={"fallback"}
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
+      <span className="text-title-bold text-gray-scale-800">
+        {user.nickname}
+      </span>
+      <span className="text-body1-regular text-gray-scale-500">
+        {user.statusMessage}
+      </span>
+    </div>
+  );
+};
+
+export default MypageAvatar;

src/app/mypage/_components/MypageFallback.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+
+const MypageFallback = () => {
+  return (
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-[8px] rounded-[12px] border-[1px] border-gray-scale-200 bg-gray-scale-0">
+      <Image
+        src="/images/fallbackLogo.png"
+        alt="service"
+        width={76}
+        height={76}
+      />
+      <span className="text-body2-medium text-gray-scale-600">
+        아직 스크랩한 페스티벌이 없어요!
+      </span>
+    </div>
+  );
+};
+
+export default MypageFallback;

src/app/mypage/_components/MypageHeader.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+import { SettingIcon } from "@/components/icons";
+
+const MypageHeader = () => {
+  return (
+    <header className="flex h-[44px] w-full items-center justify-end px-[10px]">
+      <Link href="/mypage/settings">
+        <SettingIcon
+          width="24px"
+          height="24px"
+          className="text-gray-scale-900"
+        />
+      </Link>
+    </header>
+  );
+};
+
+export default MypageHeader;

src/app/mypage/_components/MypageTab.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import { FC } from "react";
+
+interface Props {}
+
+const MypageTab: FC<Props> = ({}) => {
+  const TabList = [
+    {
+      name: "스크랩",
+      contentComponent: <h1>스크랩</h1>,
+    },
+    {
+      name: "활동뱃지",
+      contentComponent: <h1>활동뱃지</h1>,
+    },
+  ];
+
+  const handleTabChange = () => {
+    const tabElement = document.getElementById(`tab`);
+    if (tabElement) {
+      tabElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <Tabs.Root className="w-full" defaultValue={TabList[0].name}>
+      <Tabs.List
+        id={"tab"}
+        className="flex h-[47px] w-full"
+        aria-label="Manage your account"
+      >
+        {TabList.map(({ name }, index) => (
+          <Tabs.Trigger
+            key={name}
+            className="TabsTrigger w-full border-b-[1px] border-gray-scale-400 text-subtitle-semi text-gray-scale-400"
+            value={name}
+            onClick={handleTabChange}
+          >
+            {name}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+      {TabList.map(({ name, contentComponent }) => (
+        <Tabs.Content
+          key={name}
+          className="flex flex-col gap-[18px] px-[16px]"
+          value={name}
+        >
+          {contentComponent}
+        </Tabs.Content>
+      ))}
+    </Tabs.Root>
+  );
+};
+
+export default MypageTab;