feat: 고객센터 페이지 구현

apps/jurumarble/public/images/index.ts

@@ -19,3 +19,4 @@ export { default as MobileOnboarding1 } from './VoteOnboardM01.png';
 export { default as MobileOnboarding2 } from './VoteOnboardM02.png';
 export { default as MobileOnboarding3 } from './VoteOnboardM03.png';
 export { default as MobileOnboarding4 } from './VoteOnboardM04.png';
+export { default as howToReportImage } from './howToReportImage.png';

apps/jurumarble/src/app/help/page.module.css

@@ -0,0 +1,19 @@
+.container {
+  background-color: var(--bg_02);
+  padding: 20px 20px 60px 20px;
+}
+
+.mt-6 {
+  margin-top: 6px;
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  margin-top: 18px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}

apps/jurumarble/src/app/help/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { SideButtonHeader } from 'components/SideButtonHeader';
+import { getClassNames } from 'lib/styles/getClassNames';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { howToReportImage } from 'public/images';
+import { SvgIcX } from 'src/assets/icons/components';
+
+import styles from './page.module.css';
+
+function HelpPage() {
+  const cx = getClassNames(styles);
+  const router = useRouter();
+  /**
+   * @TODO 서버 컴포넌트에서 router 대신 사용할 수 있는 것을 찾아서 대체
+   */
+
+  return (
+    <>
+      <SideButtonHeader
+        rightButton={
+          <button
+            className={cx('close-button')}
+            onClick={() => {
+              router.back();
+            }}
+          >
+            <SvgIcX width={24} height={24} />
+          </button>
+        }
+      >
+        고객센터
+      </SideButtonHeader>
+      <div className={cx('container')}>
+        <div className={cx('headline02')}>불쾌한 투표/댓글이 있으신가요?</div>
+        <div className={cx('body_long03', 'mt-6')}>
+          우측 상단에 점 세개 버튼을 눌러서 <br />
+          신고 버튼을 누르면 신고할 수 있습니다.
+        </div>
+        <div className={cx('image-wrapper')}>
+          <Image src={howToReportImage} fill alt="온보딩" />
+        </div>
+        <div className={cx('headline02', 'mt-40')}>
+          그외 다른 도움이 필요하신가요?
+        </div>
+        <div className={cx('body_long03', 'mt-6')}>
+          서비스 제휴와 광고 등은 아래의 이메일로 문의해주세요. <br />
+          [email protected]
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default HelpPage;

apps/jurumarble/src/lib/Path.ts

@@ -5,7 +5,7 @@ const Path = {
   AGREEMENT_PAGE: '/agreement',
   DRINK_INFO_PAGE: '/drink-info',
   DRINK_MAP_PAGE: '/map',
-  HOW_TO_REPORT_PAGE: '/how-to-report',
+  HELP_PAGE: '/help',
   KAKAO_LOGIN_PROCESS: '/login/kakao-login-process',
   // no Logged In
   LOGIN_PAGE: '/login',