Feat: 설정-작성한 후기 페이지

src/components/Setting/MyReview/MyReview.module.scss

@@ -0,0 +1,27 @@
+@import '@/styles/globals.scss';
+
+.container {
+  background-color: $white;
+  padding: 0 20px;
+  @include Drag;
+}
+
+.section {
+  width: 100%;
+  height: 64px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid $gray10;
+  @include B14M;
+}
+
+.subtext {
+  @include C12M;
+  color: $gray50;
+}
+
+.cursor {
+  cursor: pointer;
+}

src/components/Setting/MyReview/index.tsx

@@ -0,0 +1,5 @@
+import styles from './MyReview.module.scss';
+
+export default function MyReview() {
+  return <div className={styles.container}></div>;
+}

src/components/Setting/index.tsx

@@ -3,6 +3,8 @@ import DeleteAccount from '../Auth/DeleteAccount';
 import Logout from '../Auth/Logout';
 import { useEffect, useState } from 'react';
 import { getProfile, ProfileResponse } from '@/apis/get/getProfile';
+import IconComponent from '../Asset/Icon';
+import router from 'next/router';
 
 export default function Setting() {
   const [profile, setProfile] = useState<ProfileResponse>();
@@ -26,8 +28,21 @@ export default function Setting() {
     }
   }, [loading]);
 
+  const handleReviewPageClick = () => {
+    router.push('/setting/my-review');
+  };
+
   return (
     <div className={styles.container}>
+      <section
+        className={`${styles.section} ${styles.cursor}`}
+        onClick={handleReviewPageClick}
+      >
+        <p>내가 작성한 후기</p>
+        <div className={styles.cursor}>
+          <IconComponent name="right" size="l" />
+        </div>
+      </section>
       <section className={styles.section}>
         <p>계정정보</p>
         <div>

src/pages/_app.tsx

@@ -62,6 +62,7 @@ export default function App({ Component, pageProps }: AppProps) {
     '/details/[businessId]/map',
     '/setting',
     '/search',
+    '/setting/my-review',
   ].includes(router.pathname);
   const hideHeader = [
     '/',
@@ -77,6 +78,7 @@ export default function App({ Component, pageProps }: AppProps) {
     '/setting',
     '/search',
     '/popular',
+    '/setting/my-review',
   ].includes(router.pathname);
   const withoutHeader = ['/', '/login'].includes(router.pathname);
   const tabNav = ['/lesson', '/popular'].includes(router.pathname);

src/pages/setting/my-review.tsx

@@ -0,0 +1,46 @@
+import Subheader from '@/components/Layout/Subheader';
+import MyReview from '@/components/Setting/MyReview';
+import { authState } from '@/states/authState';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { InitialPageMeta } from '@/components/MetaData';
+import { SSRMetaProps } from '@/components/MetaData/MetaData.type';
+import { serviceUrl } from '@/constants/serviceUrl';
+import { GetServerSideProps } from 'next';
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const OGTitle = '작성 후기 | HELLOFIT';
+  const OGUrl = `${serviceUrl}/setting/my-review`;
+  return {
+    props: {
+      OGTitle,
+      OGUrl,
+    },
+  };
+};
+
+export default function MyReviewPage({ OGTitle, OGUrl }: SSRMetaProps) {
+  const auth = useRecoilValue(authState);
+  const router = useRouter();
+
+  useEffect(() => {
+    // 로그인이 되어 있지 않으면 /map으로 이동
+    if (!auth.isLoggedIn) {
+      router.push('/map');
+    }
+  }, [auth.isLoggedIn, router]);
+
+  // 로그인 상태 확인 중에는 렌더링을 멈춤
+  if (!auth.isLoggedIn) {
+    return null;
+  }
+
+  return (
+    <>
+      <InitialPageMeta title={OGTitle} url={OGUrl} />
+      <Subheader subheaderText="작성 후기" isGray={false} />
+      <MyReview />
+    </>
+  );
+}