feat: 신고 버튼 개발

src/pages/records/[id]/index.module.scss

@@ -6,6 +6,18 @@
   padding: 20px 30px calc(env(safe-area-inset-bottom) + 50px);
 }
 
+.above-title {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.report-button {
+  color: themes.$grey300;
+  @include themes.typography('caption12');
+}
+
 .title-area {
   display: flex;
   flex-wrap: wrap;

src/pages/records/[id]/index.tsx

@@ -14,6 +14,7 @@ import Chip from '@/shared/components/Chip';
 import Icon from '@/shared/components/Icon';
 import PageLayout from '@/shared/components/PageLayout';
 import TopNavigator from '@/shared/components/TopNavigator';
+import useConfirm from '@/shared/hooks/useConfirm';
 import { Alcohol } from '@/shared/types/alcohol';
 import { Record } from '@/shared/types/record';
 import { FlavorTag } from '@/shared/types/record/flavorTag';
@@ -28,6 +29,7 @@ type RecordDetailProps = {
 
 const RecordDetail = ({ id }: RecordDetailProps) => {
   const { data } = useGetRecord({ variables: { recordId: id } });
+  const { confirm } = useConfirm();
 
   const formatRecordTags = useCallback(
     ([alcoholPercent, alcoholPercentFeeling, flavorDetailTag]: [
@@ -46,6 +48,17 @@ const RecordDetail = ({ id }: RecordDetailProps) => {
     []
   );
 
+  const handleClickReport = async () => {
+    if (
+      await confirm({
+        message: '정말 신고하시겠어요?',
+        okText: '확인',
+      })
+    ) {
+      window.location.href = 'mailto:[email protected]';
+    }
+  };
+
   if (!data) {
     return null;
   }
@@ -57,12 +70,21 @@ const RecordDetail = ({ id }: RecordDetailProps) => {
       <TopNavigator title="내 게시글" />
       <ImageSwiper images={record.photoPathList.map((url) => ({ url }))} />
       <div className={cx('contents-wrap')}>
-        <Chip
-          label="과실주"
-          type="Primary"
-          appearance="round"
-          size="mediumLarge"
-        />
+        <div className={cx('above-title')}>
+          <Chip
+            label="과실주"
+            type="Primary"
+            appearance="round"
+            size="mediumLarge"
+          />
+          <button
+            onClick={handleClickReport}
+            className={cx('report-button')}
+            type="button"
+          >
+            신고하기
+          </button>
+        </div>
         <div className={cx('title-area')}>
           <h1 className={cx('title')}>{alcoholInfo.alcoholName}</h1>
           <span className={cx('location')}>