From 42b48599f95b705fecb9c3020638a63682da060b Mon Sep 17 00:00:00 2001 From: pearpearB Date: Mon, 4 Apr 2022 15:52:43 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Fix]=20=EB=8C=93=EA=B8=80=EC=9D=98=20?= =?UTF-8?q?=EB=8B=B5=EA=B8=80=20=EB=8B=AC=EA=B8=B0=20=EC=97=AC=EB=9F=AC?= =?UTF-8?q?=EA=B0=9C=20=EC=97=B4=EB=A6=AC=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?Close=20#592?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Comments/Comments.tsx | 17 ++++++++++++++--- client/src/components/Comments/ReComments.tsx | 16 ++++++++++++++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/client/src/components/Comments/Comments.tsx b/client/src/components/Comments/Comments.tsx index 7cb007c..914c3c3 100644 --- a/client/src/components/Comments/Comments.tsx +++ b/client/src/components/Comments/Comments.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useQueryClient, useMutation } from 'react-query'; import instance from 'utils/functions/axios'; import DropdownMenu from 'components/DropdownMenu/DropdownMenu'; @@ -32,7 +32,6 @@ type GreetingProps = { roleType: string; comment: CommentData; commentsUserList: number[]; - // setReRender: React.Dispatch> }; function Comments({ roleType, comment, commentsUserList }: GreetingProps) { @@ -69,6 +68,18 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) { instance.put(path, data), ); + useEffect(() => { + if (openReCmt) { + window.addEventListener( + 'click', + () => { + setOpenReCmt(false); + }, + { once: true }, + ); + } + }); + const modifyCmtHandler = () => { setOpenEditor(!openEditor); }; @@ -226,7 +237,7 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) { <> - + e.stopPropagation()}> ↳ { + if (openReReCmt) { + window.addEventListener( + 'click', + () => { + setOpenReReCmt(false); + }, + { once: true }, + ); + } + }); + const modifyCmtHandler = () => { setOpenEditor(!openEditor); }; @@ -239,7 +251,7 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) { <> - + e.stopPropagation()}> ↳ Date: Mon, 4 Apr 2022 16:01:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Fix]=20=EC=95=88=20=EC=93=B0=EB=8A=94=20in?= =?UTF-8?q?port,=20console.log,=20=ED=95=A8=EC=88=98=20=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC=20#592?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CommentInput/CommentInput.tsx | 15 +- .../components/DropdownMenu/DropdownMenu.tsx | 11 +- client/src/components/Modal/ReportModal.tsx | 224 ++++++++++++------ 3 files changed, 166 insertions(+), 84 deletions(-) diff --git a/client/src/components/CommentInput/CommentInput.tsx b/client/src/components/CommentInput/CommentInput.tsx index fd9f579..3513080 100644 --- a/client/src/components/CommentInput/CommentInput.tsx +++ b/client/src/components/CommentInput/CommentInput.tsx @@ -15,21 +15,14 @@ export default function CommentInput({ }: Props) { const [comment, setComment] = useState(''); - const newCmtInputHandler = (e: React.ChangeEvent) => { - setComment(e.target.value); - }; - - // const submitKeyboardHandler = (e: React.KeyboardEvent) => { - // if (e.key === 'Enter') { - // submitCmtHandler(comment) - // setComment('') - // } - // } - useEffect(() => { if (defaultContent) setComment(defaultContent); }, []); + const newCmtInputHandler = (e: React.ChangeEvent) => { + setComment(e.target.value); + }; + const submitValidHandler = () => { submitCmtHandler(comment); setComment(''); diff --git a/client/src/components/DropdownMenu/DropdownMenu.tsx b/client/src/components/DropdownMenu/DropdownMenu.tsx index 88bc9df..f7d2e02 100644 --- a/client/src/components/DropdownMenu/DropdownMenu.tsx +++ b/client/src/components/DropdownMenu/DropdownMenu.tsx @@ -1,9 +1,8 @@ -import React, { useState, useRef, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { IoEllipsisVerticalOutline } from 'react-icons/io5'; import ReportModal from 'components/Modal/ReportModal'; import DeleteModal from 'components/Modal/DeleteModal'; import { DropdownWrap, HamburgerButton, DropdownBox, MenuList } from './styled'; -import { ALL } from 'dns'; type GreetingProps = { isPost: boolean; @@ -30,10 +29,6 @@ export default function DropdownMenu({ const [openDeleteModal, setOpenDeleteModal] = useState(false); const [openReportModal, setOpenReportModal] = useState(false); - const dropdownHandler = () => { - setOpenDropdown(!openDropdown); - }; - useEffect(() => { if (openDropdown) { window.addEventListener( @@ -46,6 +41,10 @@ export default function DropdownMenu({ } }); + const dropdownHandler = () => { + setOpenDropdown(!openDropdown); + }; + const deleteModalHandler = () => { setOpenDropdown(false); setOpenDeleteModal(!openDeleteModal); diff --git a/client/src/components/Modal/ReportModal.tsx b/client/src/components/Modal/ReportModal.tsx index 164dec7..acc857c 100644 --- a/client/src/components/Modal/ReportModal.tsx +++ b/client/src/components/Modal/ReportModal.tsx @@ -1,78 +1,168 @@ import React, { useState } from 'react'; import { PageName, Squares, TopBar } from 'styles/styled'; -import { ModalBackdrop, ReportModalContainer, ContentContainer, Instruction, ReportBox, ListName, ReportList, Buttons } from './styled'; +import { + ModalBackdrop, + ReportModalContainer, + ContentContainer, + Instruction, + ReportBox, + ListName, + ReportList, + Buttons, +} from './styled'; type GreetingProps = { - clickModalHandler: () => void; - reportHandler: (reportIssue: string) => void; + clickModalHandler: () => void; + reportHandler: (reportIssue: string) => void; }; -export default function ReportModal ({ clickModalHandler, reportHandler }: GreetingProps) { - const [reportIssue, setReportIssue] = useState(''); - const [openIssue, setOpenIssue] = useState(false); +export default function ReportModal({ + clickModalHandler, + reportHandler, +}: GreetingProps) { + const [reportIssue, setReportIssue] = useState(''); + const [openIssue, setOpenIssue] = useState(false); - const issueHandler = (event: React.ChangeEvent) => { - setOpenIssue(false); - setReportIssue(event.target.value); - } + const issueHandler = (event: React.ChangeEvent) => { + setOpenIssue(false); + setReportIssue(event.target.value); + }; - const issueInputHandler = (event: React.ChangeEvent) => { - setReportIssue(event.target.value); - } + const issueInputHandler = (event: React.ChangeEvent) => { + setReportIssue(event.target.value); + }; - const openIssueHandler = () => { - setOpenIssue(!openIssue); - setReportIssue(''); - } + const openIssueHandler = () => { + setOpenIssue(!openIssue); + setReportIssue(''); + }; - const submitReportAndCloseModal = () => { - reportHandler(reportIssue); - clickModalHandler(); - } - console.log(reportIssue) - return ( - <> - - e.stopPropagation()}> - - 신고하기 - -
⚊
-
❐
-
×
- - - - -
신고는 반대 의견을 표시하는 기능이 아닙니다.
-
허위신고일 경우, 서비스 이용이 제한될 수 있으니 신중하게 신고해주세요.
- - - 신고사유 - -
-
욕설/폭력/혐오/차별적 표현입니다.
-
명예훼손/사칭/사생활침해 게시물입니다.
-
개인정보 노출 게시물입니다.
-
음란물입니다.
-
불법정보를 포함하고 있습니다.
-
스팸홍보/도배글입니다.
-
지나친 분란을 유도합니다.
-
직접입력
- {openIssue && -