1.0.0 (15)

next.config.js

@@ -2,7 +2,8 @@
 const nextConfig = {
     reactStrictMode: false,
     experimental: {
-        appDir: true
+        appDir: true,
+        serverActions: true
     },
     compiler: {
         styledComponents: true

package.json

@@ -21,6 +21,7 @@
         "@types/styled-components": "^5.1.26",
         "autoprefixer": "10.4.15",
         "axios": "^1.5.0",
+        "discord-webhook-node": "^1.1.8",
         "eslint-config-next": "13.4.19",
         "fp-ts": "^2.16.1",
         "framer-motion": "^10.16.2",

src/apis/discord/index.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+export const sendDiscordMessage = async (message: string) => {
+    try {
+        const response = await axios.post(
+            "https://discord.com/api/webhooks/" +
+                process.env.NEXT_PUBLIC_WEBHOOK_URL,
+            {
+                content: message
+            },
+            {
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            }
+        );
+        return response.data;
+    } catch (err: any) {
+        console.log(err.message);
+    }
+};

src/components/BottomSheet/BottomSheet.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const COMPONENT_HEIGHT: any = {
-    report: 540 + 30,
+    report: 660,
     reportFriend: 331,
     reportBlock: 167,
     coin: 324 + 30,

src/components/BottomSheet/children/Report.tsx

@@ -1,5 +1,12 @@
 "use client";
 import styled from "styled-components";
+import Flex from "src/components/common/Flex";
+import Text from "src/components/common/Text";
+import { colors } from "styles/theme";
+import { usePathname } from "next/navigation";
+import { sendDiscordMessage } from "src/apis/discord";
+import { useAppDispatch } from "src/hooks/useReduxHooks";
+import { changeAction } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 
 interface Props {}
 
@@ -17,41 +24,56 @@ const ReportDatas = [
 ];
 
 const Report = ({}: Props) => {
+    const pathName = usePathname();
+    const dispatch = useAppDispatch();
+
+    const handleClickReport = async (reason: string) => {
+        const id = pathName.split("question/")[1];
+        await sendDiscordMessage(
+            `> **[게시글 신고]**
+            > 
+            > 게시글 Id: ${id}
+            > 신고사유: ${reason}`
+        );
+        return null;
+    };
     return (
-        <ReportWrapper>
-            <ReportTitle>
-                <Menu>신고하기</Menu>
-            </ReportTitle>
-            {ReportDatas.map((data: string, idx: number) => {
-                return (
-                    <ReportSelection key={idx}>
-                        <Menu>{data}</Menu>
-                    </ReportSelection>
-                );
-            })}
-        </ReportWrapper>
+        <Flex height="100%" direction="column">
+            <Menu>
+                <Text typo="Subtitle2b">신고하기</Text>
+            </Menu>
+            <Flex height="100%" direction="column">
+                {ReportDatas.map((data: string, idx: number) => (
+                    <Menu
+                        key={idx}
+                        $border
+                        onClick={() => {
+                            handleClickReport(data);
+                            dispatch(
+                                changeAction({
+                                    type: "bottomSheet",
+                                    value: { on: false }
+                                })
+                            );
+                        }}
+                    >
+                        <Text typo="Subtitle2r">{data}</Text>
+                    </Menu>
+                ))}
+            </Flex>
+        </Flex>
     );
 };
 
-const ReportWrapper = styled.div`
+const Menu = styled.div<{ $border?: boolean }>`
     width: 100%;
-`;
+    padding: 1rem 0;
 
-const ReportTitle = styled.div`
-    width: 100%;
-    height: 70px;
     display: flex;
-`;
+    justify-content: center;
 
-const ReportSelection = styled.div`
-    width: 100%;
-    height: 45px;
-    display: flex;
-`;
-
-const Menu = styled.div`
-    margin: auto;
-    display: flex;
+    border-top: ${({ $border }) =>
+        $border && `1px solid ${colors.line_black_5}`};
 `;
 
 export default Report;

src/components/BottomSheet/children/ReportBlock.tsx

@@ -6,7 +6,10 @@ import { colors } from "styles/theme";
 
 import useBlockFriendMutation from "src/hooks/account/useBlockFriendMutation";
 import { useAppSelector, useAppDispatch } from "src/hooks/useReduxHooks";
-import { changeAction } from "src/reducer/slices/bottomSheet/bottomSheetSlice";
+import {
+    changeAction,
+    changeVisibleType
+} from "src/reducer/slices/bottomSheet/bottomSheetSlice";
 import { useRouter } from "next/navigation";
 
 const ReportBlock = () => {
@@ -40,6 +43,16 @@ const ReportBlock = () => {
                             value: { on: false }
                         })
                     );
+                    setTimeout(
+                        () =>
+                            dispatch(
+                                changeVisibleType({
+                                    type: "bottomSheet",
+                                    value: [1, "report"]
+                                })
+                            ),
+                        400
+                    );
                 }}
             >
                 <Text typo="Subtitle2r" color="primary_qred">