diff --git a/next.config.js b/next.config.js
index aef0e36..8018a62 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,8 @@
const nextConfig = {
reactStrictMode: false,
experimental: {
- appDir: true
+ appDir: true,
+ serverActions: true
},
compiler: {
styledComponents: true
diff --git a/package-lock.json b/package-lock.json
index d6cf1d3..0885d46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,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",
@@ -12242,6 +12243,15 @@
"node": ">=8"
}
},
+ "node_modules/discord-webhook-node": {
+ "version": "1.1.8",
+ "resolved": "https://registry.npmjs.org/discord-webhook-node/-/discord-webhook-node-1.1.8.tgz",
+ "integrity": "sha512-3u0rrwywwYGc6HrgYirN/9gkBYqmdpvReyQjapoXARAHi0P0fIyf3W5tS5i3U3cc7e44E+e7dIHYUeec7yWaug==",
+ "dependencies": {
+ "form-data": "^3.0.0",
+ "node-fetch": "^2.6.0"
+ }
+ },
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -13983,7 +13993,6 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
"integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
- "dev": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
@@ -16683,7 +16692,6 @@
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
"integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
- "dev": true,
"dependencies": {
"whatwg-url": "^5.0.0"
},
@@ -20500,8 +20508,7 @@
"node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
- "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
- "dev": true
+ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
"node_modules/trim-repeated": {
"version": "2.0.0",
@@ -21117,8 +21124,7 @@
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
- "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
- "dev": true
+ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/webpack": {
"version": "5.88.2",
@@ -21306,7 +21312,6 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
- "dev": true,
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
diff --git a/package.json b/package.json
index 8c1e2ee..472769e 100644
--- a/package.json
+++ b/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",
diff --git a/src/apis/discord/index.ts b/src/apis/discord/index.ts
new file mode 100644
index 0000000..e8407da
--- /dev/null
+++ b/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);
+ }
+};
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
index 336fd0a..45f8087 100644
--- a/src/components/BottomSheet/BottomSheet.tsx
+++ b/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,
diff --git a/src/components/BottomSheet/children/Report.tsx b/src/components/BottomSheet/children/Report.tsx
index 4cb179e..469cb13 100644
--- a/src/components/BottomSheet/children/Report.tsx
+++ b/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 (
-
-
-
-
- {ReportDatas.map((data: string, idx: number) => {
- return (
-
-
-
- );
- })}
-
+
+
+
+ {ReportDatas.map((data: string, idx: number) => (
+
+ ))}
+
+
);
};
-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;
diff --git a/src/components/BottomSheet/children/ReportBlock.tsx b/src/components/BottomSheet/children/ReportBlock.tsx
index 785ef2b..e8556e6 100644
--- a/src/components/BottomSheet/children/ReportBlock.tsx
+++ b/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
+ );
}}
>