diff --git a/client/src/components/CommentInput/CommentInput.tsx b/client/src/components/CommentInput/CommentInput.tsx index fd9f579b..35130801 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/Comments/Comments.tsx b/client/src/components/Comments/Comments.tsx index 7cb007c3..914c3c3d 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()}> (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 164dec7d..acc857c4 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 && -