[Fix] 안 쓰는 inport, console.log, 함수 정리 #592

blind-42 · Apr 4, 2022 · d88c38f · d88c38f
1 parent 42b4859
commit d88c38f
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 84 deletions.
diff --git 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<string>('');
 
-  const newCmtInputHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setComment(e.target.value);
-  };
-
-  // const submitKeyboardHandler = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-  // 	if (e.key === 'Enter') {
-  // 		submitCmtHandler(comment)
-  // 		setComment('')
-  // 	}
-  // }
-
   useEffect(() => {
     if (defaultContent) setComment(defaultContent);
   }, []);
 
+  const newCmtInputHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    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
@@ -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<boolean>(false);
   const [openReportModal, setOpenReportModal] = useState<boolean>(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
@@ -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<string>('');
-	const [openIssue, setOpenIssue] = useState<boolean>(false);
+export default function ReportModal({
+  clickModalHandler,
+  reportHandler,
+}: GreetingProps) {
+  const [reportIssue, setReportIssue] = useState<string>('');
+  const [openIssue, setOpenIssue] = useState<boolean>(false);
 
-	const issueHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-		setOpenIssue(false);
-		setReportIssue(event.target.value);
-	}
+  const issueHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setOpenIssue(false);
+    setReportIssue(event.target.value);
+  };
 
-	const issueInputHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-		setReportIssue(event.target.value);
-	}
+  const issueInputHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReportIssue(event.target.value);
+  };
 
-	const openIssueHandler = () => {
-		setOpenIssue(!openIssue);
-		setReportIssue('');
-	}
+  const openIssueHandler = () => {
+    setOpenIssue(!openIssue);
+    setReportIssue('');
+  };
 
-	const submitReportAndCloseModal = () => {
-		reportHandler(reportIssue);
-		clickModalHandler();
-	}
-	console.log(reportIssue)
-	return (
-		<>
-			<ModalBackdrop onClick={clickModalHandler}>
-				<ReportModalContainer onClick={(e) => e.stopPropagation()}>
-					<TopBar>
-						<PageName>신고하기</PageName>
-						<Squares>
-							<div>&#9866;</div>
-							<div>&#10064;</div>
-							<div onClick={clickModalHandler}>&times;</div>
-						</Squares>
-					</TopBar>
-					<ContentContainer>
-						<Instruction>
-							<div>신고는 반대 의견을 표시하는 기능이 아닙니다.</div>
-							<div>허위신고일 경우, 서비스 이용이 제한될 수 있으니 신중하게 신고해주세요.</div>
-						</Instruction>
-						<ReportBox>
-							<ListName>신고사유</ListName>
-							<ReportList>
-								<form>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="욕설/혐오"/>욕설/폭력/혐오/차별적 표현입니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="인권침해"/>명예훼손/사칭/사생활침해 게시물입니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="개인정보"/>개인정보 노출 게시물입니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="음란물"/>음란물입니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="불법정보"/>불법정보를 포함하고 있습니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="스팸/도배"/>스팸홍보/도배글입니다.</div>
-									<div><input type="radio" onChange={issueHandler} name="issue" value="분탕"/>지나친 분란을 유도합니다.</div>
-									<div><input type="radio" onClick={openIssueHandler} name="issue" value="기타"/>직접입력</div>
-									{openIssue && 
-										<div><textarea placeholder={'신고사유를 입력해주세요.'} onChange={issueInputHandler} value={reportIssue} maxLength={300} /></div>
-									}
-								</form>
-							</ReportList>	
-						</ReportBox>
-						<Buttons>
-							<form >
-								<input type="button" onClick={submitReportAndCloseModal} value="신고" />
-							</form>
-						</Buttons>
-					</ContentContainer>
-				</ReportModalContainer>
-			</ModalBackdrop>
-		</>
-	);
+  const submitReportAndCloseModal = () => {
+    reportHandler(reportIssue);
+    clickModalHandler();
+  };
+
+  return (
+    <>
+      <ModalBackdrop onClick={clickModalHandler}>
+        <ReportModalContainer onClick={(e) => e.stopPropagation()}>
+          <TopBar>
+            <PageName>신고하기</PageName>
+            <Squares>
+              <div>&#9866;</div>
+              <div>&#10064;</div>
+              <div onClick={clickModalHandler}>&times;</div>
+            </Squares>
+          </TopBar>
+          <ContentContainer>
+            <Instruction>
+              <div>신고는 반대 의견을 표시하는 기능이 아닙니다.</div>
+              <div>
+                허위신고일 경우, 서비스 이용이 제한될 수 있으니 신중하게
+                신고해주세요.
+              </div>
+            </Instruction>
+            <ReportBox>
+              <ListName>신고사유</ListName>
+              <ReportList>
+                <form>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="욕설/혐오"
+                    />
+                    욕설/폭력/혐오/차별적 표현입니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="인권침해"
+                    />
+                    명예훼손/사칭/사생활침해 게시물입니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="개인정보"
+                    />
+                    개인정보 노출 게시물입니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="음란물"
+                    />
+                    음란물입니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="불법정보"
+                    />
+                    불법정보를 포함하고 있습니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="스팸/도배"
+                    />
+                    스팸홍보/도배글입니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onChange={issueHandler}
+                      name="issue"
+                      value="분탕"
+                    />
+                    지나친 분란을 유도합니다.
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      onClick={openIssueHandler}
+                      name="issue"
+                      value="기타"
+                    />
+                    직접입력
+                  </div>
+                  {openIssue && (
+                    <div>
+                      <textarea
+                        placeholder={'신고사유를 입력해주세요.'}
+                        onChange={issueInputHandler}
+                        value={reportIssue}
+                        maxLength={300}
+                      />
+                    </div>
+                  )}
+                </form>
+              </ReportList>
+            </ReportBox>
+            <Buttons>
+              <form>
+                <input
+                  type="button"
+                  onClick={submitReportAndCloseModal}
+                  value="신고"
+                />
+              </form>
+            </Buttons>
+          </ContentContainer>
+        </ReportModalContainer>
+      </ModalBackdrop>
+    </>
+  );
 }