From 8e3454970076ee31c61e48dd38a3fad05f7dc597 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 12 Aug 2023 15:00:02 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20members=20title=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MembersTitle/MembersTitle.stories.tsx     | 16 ++++++++++
 .../Memebers/MembersTitle/MembersTitle.tsx    | 31 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 frontend/src/components/Memebers/MembersTitle/MembersTitle.stories.tsx
 create mode 100644 frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx

diff --git a/frontend/src/components/Memebers/MembersTitle/MembersTitle.stories.tsx b/frontend/src/components/Memebers/MembersTitle/MembersTitle.stories.tsx
new file mode 100644
index 000000000..f84439407
--- /dev/null
+++ b/frontend/src/components/Memebers/MembersTitle/MembersTitle.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import MembersTitle from './MembersTitle';
+
+const meta: Meta<typeof MembersTitle> = {
+  title: 'members/MembersTitle',
+  component: MembersTitle,
+  args: {
+    title: '내가 작성한 리뷰 (12개)',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MembersTitle>;
+
+export const Default: Story = {};
diff --git a/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
new file mode 100644
index 000000000..eb49ccacf
--- /dev/null
+++ b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
@@ -0,0 +1,31 @@
+import { Heading, Link, theme } from '@fun-eat/design-system';
+import { styled } from 'styled-components';
+
+import { SvgIcon } from '@/components/Common';
+
+interface MembersTitleProps {
+  title: string;
+}
+
+const MembersTitle = ({ title }: MembersTitleProps) => {
+  return (
+    <MemberTitleContainer>
+      <Heading size="xl">{title}</Heading>
+      <Link>
+        <ArrowIcon variant="arrow" color={theme.colors.gray5} width={18} height={18} />
+      </Link>
+    </MemberTitleContainer>
+  );
+};
+
+export default MembersTitle;
+
+const MemberTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ArrowIcon = styled(SvgIcon)`
+  transform: translateY(3px) rotate(180deg);
+`;

From 53707d57fd9d508b87b448e940ef82d8cb2c6e28 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 12 Aug 2023 17:41:44 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20h2=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Memebers/MembersTitle/MembersTitle.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
index eb49ccacf..8e9df7b02 100644
--- a/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
+++ b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
@@ -10,7 +10,9 @@ interface MembersTitleProps {
 const MembersTitle = ({ title }: MembersTitleProps) => {
   return (
     <MemberTitleContainer>
-      <Heading size="xl">{title}</Heading>
+      <Heading as="h2" size="xl">
+        {title}
+      </Heading>
       <Link>
         <ArrowIcon variant="arrow" color={theme.colors.gray5} width={18} height={18} />
       </Link>

From 6627f0e56fa2ab9b0118f0f0cee4336be1b512db Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sat, 12 Aug 2023 17:46:38 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20props=EB=A1=9C=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EB=AA=A9=EC=A0=81=EC=A7=80=20=EB=B0=9B=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Memebers/MembersTitle/MembersTitle.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
index 8e9df7b02..2c09891ec 100644
--- a/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
+++ b/frontend/src/components/Memebers/MembersTitle/MembersTitle.tsx
@@ -1,19 +1,22 @@
 import { Heading, Link, theme } from '@fun-eat/design-system';
+import { Link as RouterLink } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import { SvgIcon } from '@/components/Common';
+import { PATH } from '@/constants/path';
 
 interface MembersTitleProps {
   title: string;
+  routeDestination: string;
 }
 
-const MembersTitle = ({ title }: MembersTitleProps) => {
+const MembersTitle = ({ title, routeDestination }: MembersTitleProps) => {
   return (
     <MemberTitleContainer>
       <Heading as="h2" size="xl">
         {title}
       </Heading>
-      <Link>
+      <Link as={RouterLink} to={`${PATH.PROFILE}/${routeDestination}`}>
         <ArrowIcon variant="arrow" color={theme.colors.gray5} width={18} height={18} />
       </Link>
     </MemberTitleContainer>