헤더 구현

src/frontend/apps/web/src/shared/components/header/header.tsx

@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage, Popover, PopoverContent, PopoverTrigger } from '@workspace/ui/components';
+import ProfileContainer from './profile-container';
+
+//로고 이미지 경로 변경 필요
+const Header = () => {
+  return (
+    <header className="h-[68px] w-full flex items-center justify-between px-2 py-1 bg-muted">
+      <Avatar variant="square">
+        <AvatarImage src="https://github.com/shadcn.png" />
+        <AvatarFallback>logo</AvatarFallback>
+      </Avatar>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Avatar
+            variant="default"
+            className="cursor-pointer"
+          >
+            <AvatarImage src="https://github.com/shadcn.png" />
+            <AvatarFallback>Avatar</AvatarFallback>
+          </Avatar>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          className="w-72 "
+        >
+          <ProfileContainer />
+        </PopoverContent>
+      </Popover>
+    </header>
+  );
+};
+
+export default Header;

src/frontend/apps/web/src/shared/components/header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './header';

src/frontend/apps/web/src/shared/components/header/nickname.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Button, Input, Label } from '@workspace/ui/components';
+import { Pencil } from 'lucide-react';
+
+const Nickname = () => {
+  //임시변수
+  const isNameEditMode = false;
+  const name = '공작새';
+
+  return (
+    <div className="flex w-full  items-center space-x-2">
+      <Label htmlFor="name">Name</Label>
+      <Input
+        id="name"
+        disabled={!isNameEditMode}
+        placeholder="Enter your name"
+        value={name}
+      />
+      <Button
+        variant="ghost"
+        size="sm"
+      >
+        {isNameEditMode ? '저장' : <Pencil />}
+      </Button>
+    </div>
+  );
+};
+export default Nickname;

src/frontend/apps/web/src/shared/components/header/profile-container.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@workspace/ui/components';
+import ProfilePicture from './profile-picture';
+import Nickname from './nickname';
+
+const ProfileContainer = () => {
+  return (
+    <div className="flex flex-col items-start space-y-4">
+      <h4 className="font-semibold leading-none">My Account</h4>
+      <div className="flex flex-col items-center space-y-4">
+        <ProfilePicture />
+        <Nickname />
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-full text-xs"
+      >
+        LOGOUT
+      </Button>
+    </div>
+  );
+};
+export default ProfileContainer;

src/frontend/apps/web/src/shared/components/header/profile-picture.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage, Button, Input } from '@workspace/ui/components';
+
+const ProfilePicture = () => {
+  //임시변수
+  const isPictureEditMode = false;
+  const pictureUrl = 'https://github.com/shadcn.png';
+
+  return (
+    <div className="w-full flex flex-col items-end">
+      {isPictureEditMode ? (
+        <Input
+          id="picture"
+          placeholder="Upload your picture"
+        />
+      ) : (
+        <Avatar
+          variant="default"
+          className="w-full h-full"
+        >
+          <AvatarImage src={pictureUrl} />
+          <AvatarFallback>Profile Image</AvatarFallback>
+        </Avatar>
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+      >
+        {isPictureEditMode ? '저장' : '수정하기'}
+      </Button>
+    </div>
+  );
+};
+export default ProfilePicture;

src/frontend/apps/web/src/shared/components/index.ts

@@ -1,2 +1,3 @@
 export * from './providers';
 export * from './react-query';
+export * from './header';