Project-Catcher · pepperdad · Nov 9, 2023 · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/.yarn/cache/next-npm-12.3.2-ac8bcf5092-fa2372c3df.zip b/.yarn/cache/next-npm-12.3.2-ac8bcf5092-fa2372c3df.zip
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,3 +1,4 @@
+import Header from "header/components";
 import type { AppProps } from "next/app";
 import { RecoilRoot } from "recoil";
 import "@shared/styles/globals.css";
@@ -7,6 +8,7 @@ import Confirm from "../src/shared/modal/Confirm";
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
+      <Header />
       <Component {...pageProps} />
       <Alert />
       <Confirm />

diff --git a/public/header/icon_close.svg b/public/header/icon_close.svg
diff --git a/public/header/logo.svg b/public/header/logo.svg
diff --git a/public/header/notification.svg b/public/header/notification.svg
diff --git a/public/header/notification_black.svg b/public/header/notification_black.svg
diff --git a/public/header/photo_sample.svg b/public/header/photo_sample.svg
diff --git a/public/header/write-icon.svg b/public/header/write-icon.svg
diff --git a/src/header/components/MyInfo.tsx b/src/header/components/MyInfo.tsx
@@ -0,0 +1,41 @@
+// TODO: 동적으로 데이터 받아와서 보여주기
+import Image from "next/image";
+import React from "react";
+import MyInfoButton from "./MyInfoButton";
+
+const MyInfo = () => {
+  return (
+    <>
+      <div
+        className="absolute top-8 w-0 h-0 border-[12px] border-solid"
+        style={{
+          borderColor: "transparent transparent white transparent",
+        }}
+      />
+      <div className="absolute top-14 -right-10 w-[339px] bg-white rounded-[15px] shadow py-5 px-3 flex flex-wrap gap-2">
+        <MyInfoButton title={"내 일정"} number={523} />
+        <MyInfoButton title={"누적 좋아요 수"} number={523} />
+        <MyInfoButton title={"예정 일정"} number={523} />
+        <MyInfoButton title={"승인 대기 중"} number={523} />
+
+        <div className="w-[309px] h-[46.17px] bg-purple-500 rounded-[10px] shadow flex-center text-white">
+          새로운 일정만들기
+          <Image
+            src="/header/write-icon.svg"
+            alt="write-icon"
+            width={14}
+            height={14}
+          />
+        </div>
+        <div className="w-[309px] h-[46px] bg-white rounded-[10px] shadow border border-neutral-200 flex-center">
+          마이페이지
+        </div>
+        <div className="w-[309px] h-[46px] bg-stone-300 rounded-[10px] shadow flex-center text-white">
+          Log out
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MyInfo;