feat: member title 구현

frontend/src/components/Members/MembersTitle/MembersTitle.tsx

@@ -0,0 +1,54 @@
+import { Button, Heading, theme } from '@fun-eat/design-system';
+import { styled } from 'styled-components';
+
+import { SvgIcon } from '@/components/Common';
+import type { Member } from '@/types/member';
+
+interface MembersTitleProps {
+  member: Member;
+}
+
+const MembersTitle = ({ member }: MembersTitleProps) => {
+  const { nickname, profileImage } = member;
+
+  return (
+    <MembersTitleContainer>
+      <MemberTitleInfoWrapper>
+        <MembersImage src={profileImage} width={45} height={45} alt={`${nickname}의 프로필`} />
+        <Heading size="xl" weight="bold">
+          {nickname} 님
+        </Heading>
+        <MemberModifyButton type="button" variant="transparent">
+          <SvgIcon variant="pencil" width={20} height={24} color={theme.colors.gray3} />
+        </MemberModifyButton>
+      </MemberTitleInfoWrapper>
+      <Button textColor="disabled" variant="transparent">
+        로그아웃
+      </Button>
+    </MembersTitleContainer>
+  );
+};
+
+export default MembersTitle;
+
+const MembersTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const MemberTitleInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const MemberModifyButton = styled(Button)`
+  margin-left: 5px;
+  transform: translateY(1px);
+`;
+
+const MembersImage = styled.img`
+  margin-right: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
+`;

frontend/src/components/Members/MembersTitle/MyPageTitle.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import MembersTitle from './MembersTitle';
+
+import member from '@/mocks/data/members.json';
+
+const meta: Meta<typeof MembersTitle> = {
+  title: 'Members/MembersTitle',
+  component: MembersTitle,
+  args: {
+    member: member,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MembersTitle>;
+
+export const Default: Story = {};

frontend/src/mocks/data/members.json

@@ -0,0 +1,4 @@
+{
+  "nickname": "펀잇",
+  "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34"
+}