From 1b6bdb7930f150453bce9c1b918178aa4e6fa36f Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 20 Feb 2024 16:27:24 +0900 Subject: [PATCH 01/27] =?UTF-8?q?feat:=20#57=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 82 ++++++++++++++ src/components/comment/comment/Comment.tsx | 28 +++++ .../comment/commentInput/CommentInput.tsx | 70 ++++++++++++ .../comment/replyInput/ReplyInput.styled.ts | 46 ++++++++ .../comment/replyInput/ReplyInput.tsx | 65 +++++++++++ src/components/index.ts | 6 ++ .../RecruitDetailPage.styled.ts | 77 ------------- .../RecruitDetailPage/RecruitDetailPage.tsx | 101 ++++-------------- src/types/applySteps.ts | 3 + src/types/comment.ts | 5 + src/types/index.ts | 4 +- 11 files changed, 331 insertions(+), 156 deletions(-) create mode 100644 src/components/comment/comment/Comment.styled.ts create mode 100644 src/components/comment/comment/Comment.tsx create mode 100644 src/components/comment/commentInput/CommentInput.tsx create mode 100644 src/components/comment/replyInput/ReplyInput.styled.ts create mode 100644 src/components/comment/replyInput/ReplyInput.tsx create mode 100644 src/types/applySteps.ts create mode 100644 src/types/comment.ts diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts new file mode 100644 index 00000000..9fc03415 --- /dev/null +++ b/src/components/comment/comment/Comment.styled.ts @@ -0,0 +1,82 @@ +import styled from 'styled-components'; + +const Comment = styled.li` + display: flex; + gap: 2rem; + align-items: center; + + .comment-icon { + display: flex; + } + + .comment-info { + display: flex; + flex-direction: column; + gap: 0.3rem; + + span:nth-child(1) { + color: #434343; + font-size: 1.2rem; + font-style: normal; + font-weight: 400; + line-height: 1.35rem; + letter-spacing: 0.015rem; + } + span:nth-child(2) { + padding: 0.4rem 1.5rem; + background-color: #fff; + color: #373f41; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: 0.015rem; + border-radius: 0.75rem; + } + } +`; + +const ReplyInput = styled.div` + display: flex; + gap: 2.1rem; + margin-left: 5rem; + + .user-input__icon { + width: 3.15rem; + height: 3.15rem; + flex-shrink: 0; + } + + .reply-input { + width: 76.4rem; + box-sizing: border-box; + height: 3.75rem; + flex-shrink: 0; + border-radius: 0.75rem; + border: 0.75px solid #bebebe; + background: #fff; + outline: none; + padding-left: 1.3rem; + } + + .reply-btn { + display: flex; + width: 6.7rem; + height: 3.75rem; + padding: 0.75rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + border-radius: 0.6rem; + background: #000; + border: none; + outline: none; + color: #fff; + cursor: pointer; + } +`; + +const S = { Comment, ReplyInput }; + +export default S; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx new file mode 100644 index 00000000..fc4c6726 --- /dev/null +++ b/src/components/comment/comment/Comment.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; +import { Icon } from '../..'; +import S from './Comment.styled'; +import { Comment } from '../../../types'; + +const Comment = ({ id, username, content }: Comment) => { + const [isReply, setIsReply] = useState(false); + + const onClickReply = () => { + setIsReply(true); + }; + return ( + +
+ +
+
+ {username} + {content} +
+ + + ); +}; + +export default Comment; diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx new file mode 100644 index 00000000..c9057054 --- /dev/null +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { Icon } from '../..'; +import { Comment } from '../../../types'; + +let addedCmtId; + +const CommentInput = () => { + const [commentsList, setCommentsList] = useState([]); + const [contents, setContents] = useState(''); + const isLogin = true; // 임시 코드 + const [needLogin, setNeedLogin] = useState(false); + const addComment = () => { + if (contents !== '') { + if (commentsList.length === 0) { + addedCmtId = 0; + } else { + const lastCmtIndex = commentsList.length - 1; + addedCmtId = commentsList[lastCmtIndex].id + 1; + } + const newComment = { + id: addedCmtId, + username: 'yeom', + content: contents, + }; + setCommentsList([...commentsList, newComment]); + setContents(''); + } + }; + + const onKeyPress = (event: React.KeyboardEvent) => { + const target = event.currentTarget; + if (target.value.length !== 0 && event.key === 'Enter') { + event.preventDefault(); + addComment(); + } + }; + + const onChangeHandler = (event: React.ChangeEvent) => { + setContents(event.target.value); + }; + + const onClickInput = () => { + if (!isLogin) { + // 로그인 페이지로 이동 + // navigate('/login'); + } + }; + return ( +
+
+
+ +
+ + +
+
+ ); +}; + +export default CommentInput; diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts new file mode 100644 index 00000000..04b255b5 --- /dev/null +++ b/src/components/comment/replyInput/ReplyInput.styled.ts @@ -0,0 +1,46 @@ +import styled from 'styled-components'; + +const ReplyInput = styled.div` + display: flex; + gap: 2.1rem; + margin-left: 5rem; + + .user-input__icon { + width: 3.15rem; + height: 3.15rem; + flex-shrink: 0; + } + + .reply-input { + width: 76.4rem; + box-sizing: border-box; + height: 3.75rem; + flex-shrink: 0; + border-radius: 0.75rem; + border: 0.75px solid #bebebe; + background: #fff; + outline: none; + padding-left: 1.3rem; + } + + .reply-btn { + display: flex; + width: 6.7rem; + height: 3.75rem; + padding: 0.75rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + border-radius: 0.6rem; + background: #000; + border: none; + outline: none; + color: #fff; + cursor: pointer; + } +`; + +const S = { ReplyInput }; + +export default S; diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx new file mode 100644 index 00000000..98777b98 --- /dev/null +++ b/src/components/comment/replyInput/ReplyInput.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { Icon } from '../..'; +import { Comment } from '../../../types'; + +let addedCmtId; + +const ReplyInput = () => { + const isLogin = true; // 임시 코드 + const [commentsList, setCommentsList] = useState([]); + const [contents, setContents] = useState(''); + const addComment = () => { + if (contents !== '') { + if (commentsList.length === 0) { + addedCmtId = 0; + } else { + const lastCmtIndex = commentsList.length - 1; + addedCmtId = commentsList[lastCmtIndex].id + 1; + } + const newComment = { + id: addedCmtId, + username: 'yeom', + content: contents, + }; + setCommentsList([...commentsList, newComment]); + setContents(''); + } + }; + const onKeyPress = (event: React.KeyboardEvent) => { + const target = event.currentTarget; + if (target.value.length !== 0 && event.key === 'Enter') { + event.preventDefault(); + addComment(); + } + }; + const onChangeHandler = (event: React.ChangeEvent) => { + setContents(event.target.value); + }; + const onClickInput = () => { + if (!isLogin) { + // 로그인 페이지로 이동 + // navigate('/login'); + } + }; + return ( +
+
+ +
+ + +
+ ); +}; + +export default ReplyInput; diff --git a/src/components/index.ts b/src/components/index.ts index b999291b..57a091d8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -89,6 +89,9 @@ import RecruitCard from './meeteam/card/RecruitCard'; import Pagination from './pagination/Pagination'; import NaverLogin from './naver/NaverLogin'; import Create from './header/Create'; +import Comment from './comment/comment/Comment'; +import CommentInput from './comment/commentInput/CommentInput'; +import ReplyInput from './comment/replyInput/ReplyInput'; export { Header, @@ -173,4 +176,7 @@ export { RecruitCard, Pagination, Create, + Comment, + CommentInput, + ReplyInput, }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts index 89eaa298..28ac9131 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts @@ -363,83 +363,6 @@ const RecruitDetailPage = styled.div` flex-direction: column; gap: 1.3rem; margin-bottom: 2rem; - - .comment { - display: flex; - gap: 2rem; - align-items: center; - - .comment-icon { - display: flex; - } - - .comment-info { - display: flex; - flex-direction: column; - gap: 0.3rem; - - span:nth-child(1) { - color: #434343; - font-size: 1.2rem; - font-style: normal; - font-weight: 400; - line-height: 1.35rem; - letter-spacing: 0.015rem; - } - span:nth-child(2) { - padding: 0.4rem 1.5rem; - background-color: #fff; - color: #373f41; - font-size: 1.5rem; - font-style: normal; - font-weight: 400; - line-height: 150%; - letter-spacing: 0.015rem; - border-radius: 0.75rem; - } - } - } - - .reply-container { - display: flex; - gap: 2.1rem; - margin-left: 5rem; - - .user-input__icon { - width: 3.15rem; - height: 3.15rem; - flex-shrink: 0; - } - - .reply-input { - width: 76.4rem; - box-sizing: border-box; - height: 3.75rem; - flex-shrink: 0; - border-radius: 0.75rem; - border: 0.75px solid #bebebe; - background: #fff; - outline: none; - padding-left: 1.3rem; - } - - .reply-btn { - display: flex; - width: 6.7rem; - height: 3.75rem; - padding: 0.75rem; - justify-content: center; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; - border-radius: 0.6rem; - background: #000; - border: none; - outline: none; - color: #fff; - cursor: pointer; - } - } } .container-comments__title { diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index b6eff48b..c4af0f8f 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -1,38 +1,34 @@ -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import S from './RecruitDetailPage.styled'; import { Tag, - Icon, ApplyInfomation, ApplyInput, ApplySubmit, informationList, role, CONTENT, + Comment, + CommentInput, + ReplyInput, } from '../../../components'; import ColorMatching from '../../../utils/ColorMatching'; import { useRecoilValue } from 'recoil'; import { applyStepState } from '../../../atom'; import { useNavigate } from 'react-router-dom'; +import { ComponentProps } from '../../../types'; -interface Comment { - // id: number; - username: string; - content: string; -} - -type ComponentProps = { - [key: number]: JSX.Element; -}; +let addedCmtId; const RecruitDetailPage = () => { const navigate = useNavigate(); const [isReply, setIsReply] = useState(false); const [commentsList, setCommentsList] = useState([]); + const [replyList, setReplyList] = useState([]); const [contents, setContents] = useState(''); - const isLogin = false; // 임시 코드 - const [needLogin, setNeedLogin] = useState(false); + const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); + const stepLists: ComponentProps = { 0: , 1: , @@ -50,10 +46,14 @@ const RecruitDetailPage = () => { const addComment = () => { if (contents !== '') { - // const lastCmtIndex = commentsList.length - 1; - // const addedCmtId = commentsList[lastCmtIndex].id + 1; + if (commentsList.length === 0) { + addedCmtId = 0; + } else { + const lastCmtIndex = commentsList.length - 1; + addedCmtId = commentsList[lastCmtIndex].id + 1; + } const newComment = { - // id: addedCmtId, + id: addedCmtId, username: 'yeom', content: contents, }; @@ -68,9 +68,6 @@ const RecruitDetailPage = () => { event.preventDefault(); addComment(); } - // if (event.key === 'Enter') { - // event.preventDefault(); - // } }; const onChangeHandler = (event: React.ChangeEvent) => { @@ -95,9 +92,9 @@ const RecruitDetailPage = () => {
-
+ -
+
{'김민지'}
@@ -177,69 +174,17 @@ const RecruitDetailPage = () => {
댓글
    - {commentsList.map((comment, index) => { - // const commentId = comment.id; + {commentsList.map(comment => { return ( <> -
  • -
    - -
    -
    - {comment.username} - {comment.content} -
    - -
    • - {isReply && ( -
    -
    - -
    - - -
    - )} + +
      + {isReply && } ); })}
    -
    -
    -
    -
    - -
    - - -
    -
    +
    ); diff --git a/src/types/applySteps.ts b/src/types/applySteps.ts new file mode 100644 index 00000000..f485460b --- /dev/null +++ b/src/types/applySteps.ts @@ -0,0 +1,3 @@ +export type ComponentProps = { + [key: number]: JSX.Element; +}; diff --git a/src/types/comment.ts b/src/types/comment.ts new file mode 100644 index 00000000..bce6268c --- /dev/null +++ b/src/types/comment.ts @@ -0,0 +1,5 @@ +export interface Comment { + id: number; + username: string; + content: string; +} diff --git a/src/types/index.ts b/src/types/index.ts index 50b8b522..c50d9528 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,5 +1,7 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; +import type { Comment } from './comment'; +import type { ComponentProps } from './applySteps'; -export { SignUpPayload, UserReponse, User, CustomInstance }; +export { SignUpPayload, UserReponse, User, CustomInstance, Comment, ComponentProps }; From 205417f235b983d735d5343f4d5ce51ec42cbe62 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 20 Feb 2024 16:40:16 +0900 Subject: [PATCH 02/27] =?UTF-8?q?feat:=20#57=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 43 +---------------- .../commentInput/CommentInput.styled.ts | 46 +++++++++++++++++++ .../comment/commentInput/CommentInput.tsx | 9 ++-- .../RecruitDetailPage.styled.ts | 41 ----------------- .../RecruitDetailPage/RecruitDetailPage.tsx | 8 +++- 5 files changed, 59 insertions(+), 88 deletions(-) create mode 100644 src/components/comment/commentInput/CommentInput.styled.ts diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index 9fc03415..f328bc88 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -36,47 +36,6 @@ const Comment = styled.li` } `; -const ReplyInput = styled.div` - display: flex; - gap: 2.1rem; - margin-left: 5rem; - - .user-input__icon { - width: 3.15rem; - height: 3.15rem; - flex-shrink: 0; - } - - .reply-input { - width: 76.4rem; - box-sizing: border-box; - height: 3.75rem; - flex-shrink: 0; - border-radius: 0.75rem; - border: 0.75px solid #bebebe; - background: #fff; - outline: none; - padding-left: 1.3rem; - } - - .reply-btn { - display: flex; - width: 6.7rem; - height: 3.75rem; - padding: 0.75rem; - justify-content: center; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; - border-radius: 0.6rem; - background: #000; - border: none; - outline: none; - color: #fff; - cursor: pointer; - } -`; - -const S = { Comment, ReplyInput }; +const S = { Comment }; export default S; diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts new file mode 100644 index 00000000..ce2c219d --- /dev/null +++ b/src/components/comment/commentInput/CommentInput.styled.ts @@ -0,0 +1,46 @@ +import styled from 'styled-components'; + +const CommentInput = styled.div` + .user-input { + display: flex; + gap: 2.1rem; + + .user-input__icon { + width: 3.15rem; + height: 3.15rem; + flex-shrink: 0; + } + + input { + width: 79.8rem; + height: 3.75rem; + flex-shrink: 0; + border-radius: 0.75rem; + border: 0.75px solid #bebebe; + background: #fff; + outline: none; + padding-left: 1.3rem; + } + + button { + display: flex; + width: 12.7rem; + height: 3.75rem; + padding: 0.75rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + border-radius: 0.6rem; + background: var(--main-color, #5877fc); + border: none; + outline: none; + color: #fff; + cursor: pointer; + } + } +`; + +const S = { CommentInput }; + +export default S; diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index c9057054..e3a03932 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -1,14 +1,15 @@ import React, { useState } from 'react'; import { Icon } from '../..'; import { Comment } from '../../../types'; +import S from './CommentInput.styled'; let addedCmtId; const CommentInput = () => { + const isLogin = true; // 임시 코드 const [commentsList, setCommentsList] = useState([]); const [contents, setContents] = useState(''); - const isLogin = true; // 임시 코드 - const [needLogin, setNeedLogin] = useState(false); + const addComment = () => { if (contents !== '') { if (commentsList.length === 0) { @@ -46,7 +47,7 @@ const CommentInput = () => { } }; return ( -
    +
    @@ -63,7 +64,7 @@ const CommentInput = () => { 댓글 등록
    -
    +     ); }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts index 28ac9131..422b1163 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts @@ -373,47 +373,6 @@ const RecruitDetailPage = styled.div` line-height: 3rem; letter-spacing: 0.015rem; } - - .container-comments__wrapper { - .user-input { - display: flex; - gap: 2.1rem; - - .user-input__icon { - width: 3.15rem; - height: 3.15rem; - flex-shrink: 0; - } - - input { - width: 79.8rem; - height: 3.75rem; - flex-shrink: 0; - border-radius: 0.75rem; - border: 0.75px solid #bebebe; - background: #fff; - outline: none; - padding-left: 1.3rem; - } - - button { - display: flex; - width: 12.7rem; - height: 3.75rem; - padding: 0.75rem; - justify-content: center; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; - border-radius: 0.6rem; - background: var(--main-color, #5877fc); - border: none; - outline: none; - color: #fff; - cursor: pointer; - } - } - } } `; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index c4af0f8f..e3a436b0 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -178,7 +178,13 @@ const RecruitDetailPage = () => { return ( <> -
      +
        + {replyList.map(reply => { + return ( + + ); + })} +
      {isReply && } ); From 264ec25a1ba176fde25d19b7aaa0aef8288e0ee7 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 20 Feb 2024 23:00:59 +0900 Subject: [PATCH 03/27] =?UTF-8?q?refactor:=20#57=20Lifting-=20state=20up?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 7 +-- .../comment/commentInput/CommentInput.tsx | 47 +++---------------- .../RecruitDetailPage/RecruitDetailPage.tsx | 30 ++++++++++-- src/types/comment.ts | 10 ++++ src/types/index.ts | 12 ++++- 5 files changed, 55 insertions(+), 51 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index fc4c6726..d8144fe7 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -3,12 +3,7 @@ import { Icon } from '../..'; import S from './Comment.styled'; import { Comment } from '../../../types'; -const Comment = ({ id, username, content }: Comment) => { - const [isReply, setIsReply] = useState(false); - - const onClickReply = () => { - setIsReply(true); - }; +const Comment = ({ id, username, content, onClickReply }: Comment) => { return (
      diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index e3a03932..1d198cc7 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -1,51 +1,18 @@ import React, { useState } from 'react'; import { Icon } from '../..'; -import { Comment } from '../../../types'; +import { Comment, CommentInputFunctions } from '../../../types'; import S from './CommentInput.styled'; -let addedCmtId; - -const CommentInput = () => { +const CommentInput = ({ + addComment, + onKeyPress, + onChangeHandler, + onClickInput, +}: CommentInputFunctions) => { const isLogin = true; // 임시 코드 const [commentsList, setCommentsList] = useState([]); const [contents, setContents] = useState(''); - const addComment = () => { - if (contents !== '') { - if (commentsList.length === 0) { - addedCmtId = 0; - } else { - const lastCmtIndex = commentsList.length - 1; - addedCmtId = commentsList[lastCmtIndex].id + 1; - } - const newComment = { - id: addedCmtId, - username: 'yeom', - content: contents, - }; - setCommentsList([...commentsList, newComment]); - setContents(''); - } - }; - - const onKeyPress = (event: React.KeyboardEvent) => { - const target = event.currentTarget; - if (target.value.length !== 0 && event.key === 'Enter') { - event.preventDefault(); - addComment(); - } - }; - - const onChangeHandler = (event: React.ChangeEvent) => { - setContents(event.target.value); - }; - - const onClickInput = () => { - if (!isLogin) { - // 로그인 페이지로 이동 - // navigate('/login'); - } - }; return (
      diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index e3a436b0..51dabf4e 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -20,6 +20,11 @@ import { ComponentProps } from '../../../types'; let addedCmtId; +// 댓글은 전역적으로 관리 x +// 해당 페이지에서 관리 +// 자식들에게 props로 전달하고 변환된 값을 부모로 올려줘야 함. +// 자식들에게 list와 변경함수 모두 전달해야함. + const RecruitDetailPage = () => { const navigate = useNavigate(); const [isReply, setIsReply] = useState(false); @@ -81,6 +86,10 @@ const RecruitDetailPage = () => { } }; + const onClickReply = () => { + setIsReply(true); + }; + return (
      @@ -177,11 +186,21 @@ const RecruitDetailPage = () => { {commentsList.map(comment => { return ( <> - +
        {replyList.map(reply => { return ( - + ); })}
      @@ -190,7 +209,12 @@ const RecruitDetailPage = () => { ); })} - +
      ); diff --git a/src/types/comment.ts b/src/types/comment.ts index bce6268c..dc430694 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -1,5 +1,15 @@ +import React from 'react'; + export interface Comment { id: number; username: string; content: string; + onClickReply?: () => void; +} + +export interface CommentInputFunctions { + addComment?: () => void; + onKeyPress?: (event: React.KeyboardEvent) => void; + onChangeHandler?: (event: React.ChangeEvent) => void; + onClickInput?: () => void; } diff --git a/src/types/index.ts b/src/types/index.ts index c50d9528..39de3302 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,7 +1,15 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; -import type { Comment } from './comment'; +import type { Comment, CommentInputFunctions } from './comment'; import type { ComponentProps } from './applySteps'; -export { SignUpPayload, UserReponse, User, CustomInstance, Comment, ComponentProps }; +export { + SignUpPayload, + UserReponse, + User, + CustomInstance, + Comment, + ComponentProps, + CommentInputFunctions, +}; From 680ec237c8351b3d3488a0f11c8c63cd1321df56 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Wed, 21 Feb 2024 10:56:32 +0900 Subject: [PATCH 04/27] =?UTF-8?q?feat:=20#57=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EB=8B=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/commentInput/CommentInput.tsx | 5 ++--- src/components/comment/replyInput/ReplyInput.tsx | 5 +++-- .../recruit/RecruitDetailPage/RecruitDetailPage.styled.ts | 4 ++++ src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx | 8 ++++++-- src/types/comment.ts | 3 ++- 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index 1d198cc7..0fcbb2be 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -1,17 +1,16 @@ import React, { useState } from 'react'; import { Icon } from '../..'; -import { Comment, CommentInputFunctions } from '../../../types'; +import { CommentInputFunctions } from '../../../types'; import S from './CommentInput.styled'; const CommentInput = ({ + contents, addComment, onKeyPress, onChangeHandler, onClickInput, }: CommentInputFunctions) => { const isLogin = true; // 임시 코드 - const [commentsList, setCommentsList] = useState([]); - const [contents, setContents] = useState(''); return ( diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx index 98777b98..3f1e1f50 100644 --- a/src/components/comment/replyInput/ReplyInput.tsx +++ b/src/components/comment/replyInput/ReplyInput.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { Icon } from '../..'; import { Comment } from '../../../types'; +import S from './ReplyInput.styled'; let addedCmtId; @@ -42,7 +43,7 @@ const ReplyInput = () => { } }; return ( -
      +
      @@ -58,7 +59,7 @@ const ReplyInput = () => { -
      + ); }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts index 422b1163..bbe32460 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts @@ -363,6 +363,10 @@ const RecruitDetailPage = styled.div` flex-direction: column; gap: 1.3rem; margin-bottom: 2rem; + + .container-reply__lists { + margin-left: 5rem; + } } .container-comments__title { diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 51dabf4e..e17db507 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -86,7 +86,8 @@ const RecruitDetailPage = () => { } }; - const onClickReply = () => { + const onClickReply = (event: any) => { + console.log(event); setIsReply(true); }; @@ -187,15 +188,17 @@ const RecruitDetailPage = () => { return ( <> -
        +
          {replyList.map(reply => { return ( { })}
        void; + onClickReply?: (event: any) => void; } export interface CommentInputFunctions { + contents: string; addComment?: () => void; onKeyPress?: (event: React.KeyboardEvent) => void; onChangeHandler?: (event: React.ChangeEvent) => void; From 15f843919b27485f00d237894f64b216df8ebcc7 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Wed, 21 Feb 2024 11:47:58 +0900 Subject: [PATCH 05/27] =?UTF-8?q?feat:=20=EB=8B=B5=EA=B8=80=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=8C=93=EA=B8=80=EB=A7=88=EB=8B=A4=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 14 ++++-- src/components/comment/comment/Comment.tsx | 46 ++++++++++++++----- .../RecruitDetailPage.styled.ts | 4 -- .../RecruitDetailPage/RecruitDetailPage.tsx | 40 ++++------------ src/types/comment.ts | 2 +- 5 files changed, 57 insertions(+), 49 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index f328bc88..931db59d 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -1,9 +1,11 @@ import styled from 'styled-components'; const Comment = styled.li` - display: flex; - gap: 2rem; - align-items: center; + main { + display: flex; + gap: 2rem; + align-items: center; + } .comment-icon { display: flex; @@ -34,6 +36,12 @@ const Comment = styled.li` border-radius: 0.75rem; } } + + .container-reply__lists { + display: flex; + flex-direction: column; + margin-top: 2rem; + } `; const S = { Comment }; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index d8144fe7..43ca40fd 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -2,20 +2,44 @@ import React, { useState } from 'react'; import { Icon } from '../..'; import S from './Comment.styled'; import { Comment } from '../../../types'; +import { ReplyInput } from '../../index'; + +const Comment = ({ id, username, content, replyList }: Comment) => { + const [replyClicked, setReplyClicked] = useState(false); + const handleReplyClick = () => { + setReplyClicked(true); + }; -const Comment = ({ id, username, content, onClickReply }: Comment) => { return ( -
        - -
        -
        - {username} - {content} -
        - +
        +
        + +
        +
        + {username} + {content} +
        + +
        + +
        +
          + {replyList?.map(reply => { + return ( + + ); + })} +
        + {replyClicked && } +
        ); }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts index bbe32460..422b1163 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.styled.ts @@ -363,10 +363,6 @@ const RecruitDetailPage = styled.div` flex-direction: column; gap: 1.3rem; margin-bottom: 2rem; - - .container-reply__lists { - margin-left: 5rem; - } } .container-comments__title { diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index e17db507..45c19a92 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -20,11 +20,6 @@ import { ComponentProps } from '../../../types'; let addedCmtId; -// 댓글은 전역적으로 관리 x -// 해당 페이지에서 관리 -// 자식들에게 props로 전달하고 변환된 값을 부모로 올려줘야 함. -// 자식들에게 list와 변경함수 모두 전달해야함. - const RecruitDetailPage = () => { const navigate = useNavigate(); const [isReply, setIsReply] = useState(false); @@ -33,6 +28,7 @@ const RecruitDetailPage = () => { const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); + const [selectedCommentId, setSelectedCommentId] = useState(null); const stepLists: ComponentProps = { 0: , @@ -86,9 +82,9 @@ const RecruitDetailPage = () => { } }; - const onClickReply = (event: any) => { - console.log(event); + const onClickReply = (commentId: number) => { setIsReply(true); + setSelectedCommentId(commentId); }; return ( @@ -186,29 +182,13 @@ const RecruitDetailPage = () => {
          {commentsList.map(comment => { return ( - <> - -
            - {replyList.map(reply => { - return ( - - ); - })} -
          - {isReply && } - + ); })}
        diff --git a/src/types/comment.ts b/src/types/comment.ts index 8a0a2344..09d4fef5 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -4,7 +4,7 @@ export interface Comment { id: number; username: string; content: string; - onClickReply?: (event: any) => void; + replyList?: Comment[]; } export interface CommentInputFunctions { From d9d57a93d99ba398abf951d565017d2658475f08 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Wed, 21 Feb 2024 12:01:41 +0900 Subject: [PATCH 06/27] =?UTF-8?q?feat:=20#57=20=EB=8B=B5=EA=B8=80=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 3 +- src/components/comment/comment/Comment.tsx | 61 +++++++++++++++++-- .../comment/replyInput/ReplyInput.tsx | 46 +++----------- .../RecruitDetailPage/RecruitDetailPage.tsx | 9 --- src/types/comment.ts | 1 - 5 files changed, 67 insertions(+), 53 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index 931db59d..5d9422ed 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; const Comment = styled.li` - main { + .container { display: flex; gap: 2rem; align-items: center; @@ -41,6 +41,7 @@ const Comment = styled.li` display: flex; flex-direction: column; margin-top: 2rem; + margin-left: 5rem; } `; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 43ca40fd..49518b74 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -4,15 +4,58 @@ import S from './Comment.styled'; import { Comment } from '../../../types'; import { ReplyInput } from '../../index'; -const Comment = ({ id, username, content, replyList }: Comment) => { +let addedCmtId; + +const Comment = ({ id, username, content }: Comment) => { + const isLogin = true; // 임시 코드 + const [replyList, setReplyList] = useState([]); const [replyClicked, setReplyClicked] = useState(false); + const [contents, setContents] = useState(''); + const handleReplyClick = () => { setReplyClicked(true); }; + const addComment = () => { + if (contents !== '') { + if (replyList.length === 0) { + addedCmtId = 0; + } else { + const lastCmtIndex = replyList.length - 1; + addedCmtId = replyList[lastCmtIndex].id + 1; + } + const newComment = { + id: addedCmtId, + username: 'yeom', + content: contents, + }; + setReplyList([...replyList, newComment]); + setContents(''); + } + }; + + const onKeyPress = (event: React.KeyboardEvent) => { + const target = event.currentTarget; + if (target.value.length !== 0 && event.key === 'Enter') { + event.preventDefault(); + addComment(); + } + }; + + const onChangeHandler = (event: React.ChangeEvent) => { + setContents(event.target.value); + }; + + const onClickInput = () => { + if (!isLogin) { + // 로그인 페이지로 이동 + // navigate('/login'); + } + }; + return ( -
        +
        @@ -23,8 +66,7 @@ const Comment = ({ id, username, content, replyList }: Comment) => { -
        - +
          {replyList?.map(reply => { @@ -38,7 +80,16 @@ const Comment = ({ id, username, content, replyList }: Comment) => { ); })}
        - {replyClicked && } + {replyClicked && ( + + )}
        ); diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx index 3f1e1f50..0ce16d03 100644 --- a/src/components/comment/replyInput/ReplyInput.tsx +++ b/src/components/comment/replyInput/ReplyInput.tsx @@ -1,47 +1,19 @@ import React, { useState } from 'react'; import { Icon } from '../..'; -import { Comment } from '../../../types'; +import { Comment, CommentInputFunctions } from '../../../types'; import S from './ReplyInput.styled'; let addedCmtId; -const ReplyInput = () => { +const ReplyInput = ({ + contents, + addComment, + onKeyPress, + onChangeHandler, + onClickInput, +}: CommentInputFunctions) => { const isLogin = true; // 임시 코드 - const [commentsList, setCommentsList] = useState([]); - const [contents, setContents] = useState(''); - const addComment = () => { - if (contents !== '') { - if (commentsList.length === 0) { - addedCmtId = 0; - } else { - const lastCmtIndex = commentsList.length - 1; - addedCmtId = commentsList[lastCmtIndex].id + 1; - } - const newComment = { - id: addedCmtId, - username: 'yeom', - content: contents, - }; - setCommentsList([...commentsList, newComment]); - setContents(''); - } - }; - const onKeyPress = (event: React.KeyboardEvent) => { - const target = event.currentTarget; - if (target.value.length !== 0 && event.key === 'Enter') { - event.preventDefault(); - addComment(); - } - }; - const onChangeHandler = (event: React.ChangeEvent) => { - setContents(event.target.value); - }; - const onClickInput = () => { - if (!isLogin) { - // 로그인 페이지로 이동 - // navigate('/login'); - } - }; + return (
        diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 45c19a92..855552ac 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -10,7 +10,6 @@ import { CONTENT, Comment, CommentInput, - ReplyInput, } from '../../../components'; import ColorMatching from '../../../utils/ColorMatching'; import { useRecoilValue } from 'recoil'; @@ -24,11 +23,9 @@ const RecruitDetailPage = () => { const navigate = useNavigate(); const [isReply, setIsReply] = useState(false); const [commentsList, setCommentsList] = useState([]); - const [replyList, setReplyList] = useState([]); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); - const [selectedCommentId, setSelectedCommentId] = useState(null); const stepLists: ComponentProps = { 0: , @@ -82,11 +79,6 @@ const RecruitDetailPage = () => { } }; - const onClickReply = (commentId: number) => { - setIsReply(true); - setSelectedCommentId(commentId); - }; - return (
        @@ -187,7 +179,6 @@ const RecruitDetailPage = () => { id={comment.id} username={comment.username} content={comment.content} - replyList={replyList} /> ); })} diff --git a/src/types/comment.ts b/src/types/comment.ts index 09d4fef5..dd8ad133 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -4,7 +4,6 @@ export interface Comment { id: number; username: string; content: string; - replyList?: Comment[]; } export interface CommentInputFunctions { From 6c113bbd7e466c19d05ef0eed82521967075c932 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Thu, 22 Feb 2024 11:20:51 +0900 Subject: [PATCH 07/27] =?UTF-8?q?feat:=20#57=20=EB=8B=B5=EA=B8=80=20depth?= =?UTF-8?q?=201=20=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 12 +++- src/components/comment/comment/Comment.tsx | 13 ++-- .../commentInput/CommentInput.styled.ts | 56 ++++++++-------- .../comment/commentInput/CommentInput.tsx | 28 ++++---- .../comment/replyInput/ReplyInput.styled.ts | 64 ++++++++++--------- .../comment/replyInput/ReplyInput.tsx | 34 +++++----- src/types/comment.ts | 1 + 7 files changed, 117 insertions(+), 91 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index 5d9422ed..6756bc0a 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -1,6 +1,10 @@ import styled from 'styled-components'; -const Comment = styled.li` +interface CommentDepth { + depth?: number; +} + +const Comment = styled.li` .container { display: flex; gap: 2rem; @@ -9,6 +13,7 @@ const Comment = styled.li` .comment-icon { display: flex; + width: ${props => (props.depth === 1 ? '2.5rem' : '')}; } .comment-info { @@ -37,6 +42,11 @@ const Comment = styled.li` } } + .reply-btn { + background-color: transparent; + margin-left: -1.5rem; + } + .container-reply__lists { display: flex; flex-direction: column; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 49518b74..bc91e569 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -6,7 +6,7 @@ import { ReplyInput } from '../../index'; let addedCmtId; -const Comment = ({ id, username, content }: Comment) => { +const Comment = ({ id, username, content, depth }: Comment) => { const isLogin = true; // 임시 코드 const [replyList, setReplyList] = useState([]); const [replyClicked, setReplyClicked] = useState(false); @@ -54,7 +54,7 @@ const Comment = ({ id, username, content }: Comment) => { }; return ( - +
        @@ -63,9 +63,11 @@ const Comment = ({ id, username, content }: Comment) => { {username} {content}
        - + {depth !== 1 && ( + + )}
          @@ -76,6 +78,7 @@ const Comment = ({ id, username, content }: Comment) => { id={reply.id} username={reply.username} content={reply.content} + depth={1} /> ); })} diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts index ce2c219d..8c8f57a9 100644 --- a/src/components/comment/commentInput/CommentInput.styled.ts +++ b/src/components/comment/commentInput/CommentInput.styled.ts @@ -11,32 +11,38 @@ const CommentInput = styled.div` flex-shrink: 0; } - input { - width: 79.8rem; - height: 3.75rem; - flex-shrink: 0; - border-radius: 0.75rem; - border: 0.75px solid #bebebe; - background: #fff; - outline: none; - padding-left: 1.3rem; - } - - button { + .user-input__container { display: flex; - width: 12.7rem; - height: 3.75rem; - padding: 0.75rem; - justify-content: center; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; - border-radius: 0.6rem; - background: var(--main-color, #5877fc); - border: none; - outline: none; - color: #fff; - cursor: pointer; + gap: 1rem; + margin: 0 auto; + + input { + width: 85.15rem; + height: 3.75rem; + flex-shrink: 0; + border-radius: 0.75rem; + border: 0.75px solid #bebebe; + background: #fff; + outline: none; + padding-left: 1.3rem; + } + + button { + display: flex; + width: 6.7rem; + height: 3.75rem; + padding: 0.75rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + border-radius: 0.6rem; + background: var(--main-color, #5877fc); + border: none; + outline: none; + color: #fff; + cursor: pointer; + } } } `; diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index 0fcbb2be..578415f6 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -15,20 +15,22 @@ const CommentInput = ({ return (
          -
          +
          -
          - - +
        +
        + + +
        ); diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts index 04b255b5..d26b7c2b 100644 --- a/src/components/comment/replyInput/ReplyInput.styled.ts +++ b/src/components/comment/replyInput/ReplyInput.styled.ts @@ -2,42 +2,46 @@ import styled from 'styled-components'; const ReplyInput = styled.div` display: flex; - gap: 2.1rem; + gap: 2rem; margin-left: 5rem; .user-input__icon { - width: 3.15rem; - height: 3.15rem; - flex-shrink: 0; - } - - .reply-input { - width: 76.4rem; - box-sizing: border-box; - height: 3.75rem; - flex-shrink: 0; - border-radius: 0.75rem; - border: 0.75px solid #bebebe; - background: #fff; - outline: none; - padding-left: 1.3rem; + display: flex; + width: 2.5rem; } - .reply-btn { + .user-input__container { display: flex; - width: 6.7rem; - height: 3.75rem; - padding: 0.75rem; - justify-content: center; - align-items: center; - gap: 0.75rem; - flex-shrink: 0; - border-radius: 0.6rem; - background: #000; - border: none; - outline: none; - color: #fff; - cursor: pointer; + + .reply-input { + width: 83rem; + box-sizing: border-box; + height: 3.75rem; + flex-shrink: 0; + border-radius: 0.75rem; + border: 0.75px solid #bebebe; + background: #fff; + outline: none; + padding-left: 1.3rem; + } + + .reply-btn { + display: flex; + width: 6.7rem; + height: 3.75rem; + padding: 0.75rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; + border-radius: 0.6rem; + background: #000; + border: none; + outline: none; + color: #fff; + margin-left: 1rem; + cursor: pointer; + } } `; diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx index 0ce16d03..c9c5ea4f 100644 --- a/src/components/comment/replyInput/ReplyInput.tsx +++ b/src/components/comment/replyInput/ReplyInput.tsx @@ -1,10 +1,8 @@ import React, { useState } from 'react'; import { Icon } from '../..'; -import { Comment, CommentInputFunctions } from '../../../types'; +import { CommentInputFunctions } from '../../../types'; import S from './ReplyInput.styled'; -let addedCmtId; - const ReplyInput = ({ contents, addComment, @@ -16,21 +14,23 @@ const ReplyInput = ({ return ( -
        +
        -
        - - + +
        + + +
        ); }; diff --git a/src/types/comment.ts b/src/types/comment.ts index dd8ad133..b47e043f 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -4,6 +4,7 @@ export interface Comment { id: number; username: string; content: string; + depth?: number; } export interface CommentInputFunctions { From a72d7538b8e11661099101d19bc0f4e062236ea3 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Thu, 22 Feb 2024 11:44:19 +0900 Subject: [PATCH 08/27] =?UTF-8?q?feat:=20#57=20=EC=BC=80=EB=B0=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 6 +++ src/components/comment/comment/Comment.tsx | 43 +++++++++++++------ src/components/kebabMenu/KebabMenu.tsx | 1 + .../optionMenu/OptionMenu.styled.ts | 1 + 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index 6756bc0a..b2026553 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -5,6 +5,12 @@ interface CommentDepth { } const Comment = styled.li` + .wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + .container { display: flex; gap: 2rem; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index bc91e569..0f7ce60b 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Icon } from '../..'; +import { Icon, KebabMenu } from '../..'; import S from './Comment.styled'; import { Comment } from '../../../types'; import { ReplyInput } from '../../index'; @@ -11,6 +11,18 @@ const Comment = ({ id, username, content, depth }: Comment) => { const [replyList, setReplyList] = useState([]); const [replyClicked, setReplyClicked] = useState(false); const [contents, setContents] = useState(''); + const [isOpen, setIsOpen] = useState(false); + + const optionLists = [ + { + title: '수정', + optionClickHandler: () => setIsOpen(true), + }, + { + title: '삭제', + optionClickHandler: () => setIsOpen(true), + }, + ]; const handleReplyClick = () => { setReplyClicked(true); @@ -55,19 +67,24 @@ const Comment = ({ id, username, content, depth }: Comment) => { return ( -
        -
        - -
        -
        - {username} - {content} +
        +
        +
        + +
        +
        + {username} + {content} +
        + {depth !== 1 && ( + + )} +
        +
        +
        - {depth !== 1 && ( - - )}
          diff --git a/src/components/kebabMenu/KebabMenu.tsx b/src/components/kebabMenu/KebabMenu.tsx index 56e135a7..6fc71f75 100644 --- a/src/components/kebabMenu/KebabMenu.tsx +++ b/src/components/kebabMenu/KebabMenu.tsx @@ -6,6 +6,7 @@ interface Option { title: string; optionClickHandler: (e: React.MouseEvent) => void; } + export type { Option }; const KebabMenu = ({ options }: { options: Option[] }) => { diff --git a/src/components/optionMenu/OptionMenu.styled.ts b/src/components/optionMenu/OptionMenu.styled.ts index 1c00db72..a0f9891c 100644 --- a/src/components/optionMenu/OptionMenu.styled.ts +++ b/src/components/optionMenu/OptionMenu.styled.ts @@ -13,6 +13,7 @@ const OptionMenuLayout = styled.ul` background: #fff; box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1); cursor: pointer; + z-index: 501; `; const OptionMenuItem = styled.li` From 8d8c47fb296d57187f46c84c8dbb129b9f5081b5 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Fri, 23 Feb 2024 21:58:20 +0900 Subject: [PATCH 09/27] =?UTF-8?q?refactor:=20#57=20=EB=AA=A8=EB=93=A0=20?= =?UTF-8?q?=EB=8C=93=EA=B8=80,=20=EB=8C=80=EB=8C=93=EA=B8=80=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EC=9E=AC=EC=84=A4=EA=B3=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 1 + src/components/comment/comment/Comment.tsx | 63 ++++++++----------- .../comment/comment/CommentList.tsx | 20 ++++++ .../comment/comment/ReplyComment.styled.ts | 7 +++ .../comment/comment/ReplyComment.tsx | 51 +++++++++++++++ .../comment/replyInput/ReplyInput.styled.ts | 5 +- .../RecruitDetailPage/RecruitDetailPage.tsx | 46 +++++++++++++- src/types/comment.ts | 9 ++- src/types/index.ts | 3 +- 9 files changed, 163 insertions(+), 42 deletions(-) create mode 100644 src/components/comment/comment/CommentList.tsx create mode 100644 src/components/comment/comment/ReplyComment.styled.ts create mode 100644 src/components/comment/comment/ReplyComment.tsx diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index b2026553..f9e562b4 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -58,6 +58,7 @@ const Comment = styled.li` flex-direction: column; margin-top: 2rem; margin-left: 5rem; + gap: 2rem; } `; diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 0f7ce60b..da39b48e 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -3,54 +3,43 @@ import { Icon, KebabMenu } from '../..'; import S from './Comment.styled'; import { Comment } from '../../../types'; import { ReplyInput } from '../../index'; +import ReplyComment from './ReplyComment'; let addedCmtId; -const Comment = ({ id, username, content, depth }: Comment) => { +const Comment = ({ id, username, content, replies }: Comment) => { const isLogin = true; // 임시 코드 - const [replyList, setReplyList] = useState([]); const [replyClicked, setReplyClicked] = useState(false); const [contents, setContents] = useState(''); - const [isOpen, setIsOpen] = useState(false); - + const [showKebab, setShowKebab] = useState(true); + const isValid = isLogin && username === 'yeom' && showKebab; + const [isEdit, setIsEdit] = useState(false); const optionLists = [ { title: '수정', - optionClickHandler: () => setIsOpen(true), + optionClickHandler: () => { + setIsEdit(true); + setShowKebab(false); + }, }, { title: '삭제', - optionClickHandler: () => setIsOpen(true), + optionClickHandler: () => { + setShowKebab(false); + }, }, ]; const handleReplyClick = () => { setReplyClicked(true); }; - - const addComment = () => { - if (contents !== '') { - if (replyList.length === 0) { - addedCmtId = 0; - } else { - const lastCmtIndex = replyList.length - 1; - addedCmtId = replyList[lastCmtIndex].id + 1; - } - const newComment = { - id: addedCmtId, - username: 'yeom', - content: contents, - }; - setReplyList([...replyList, newComment]); - setContents(''); - } - }; + const addComment = () => {}; const onKeyPress = (event: React.KeyboardEvent) => { const target = event.currentTarget; if (target.value.length !== 0 && event.key === 'Enter') { event.preventDefault(); - addComment(); + // addComment(); } }; @@ -66,7 +55,7 @@ const Comment = ({ id, username, content, depth }: Comment) => { }; return ( - +
          @@ -76,26 +65,26 @@ const Comment = ({ id, username, content, depth }: Comment) => { {username} {content}
          - {depth !== 1 && ( - - )} +
          -
          - -
          + {isValid && ( +
          + +
          + )}
            - {replyList?.map(reply => { + {replies?.map(reply => { return ( - ); })} diff --git a/src/components/comment/comment/CommentList.tsx b/src/components/comment/comment/CommentList.tsx new file mode 100644 index 00000000..5781b392 --- /dev/null +++ b/src/components/comment/comment/CommentList.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Comment } from '../../index'; + +const CommentList = (comments: Comment[]) => { + return ( +
            + {comments.map(comment => ( + + ))} +
            + ); +}; + +export default CommentList; diff --git a/src/components/comment/comment/ReplyComment.styled.ts b/src/components/comment/comment/ReplyComment.styled.ts new file mode 100644 index 00000000..9696e898 --- /dev/null +++ b/src/components/comment/comment/ReplyComment.styled.ts @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const ReplyComment = styled.div``; + +const S = { ReplyComment }; + +export default S; diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx new file mode 100644 index 00000000..7b237221 --- /dev/null +++ b/src/components/comment/comment/ReplyComment.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import S from './ReplyComment.styled'; +import { Icon, KebabMenu } from '../..'; +import { Reply } from '../../../types'; + +const ReplyComment = ({ id, parentId, username, content }: Reply) => { + const [showKebab, setShowKebab] = useState(true); + const [isEdit, setIsEdit] = useState(false); + const [replyClicked, setReplyClicked] = useState(false); + const optionLists = [ + { + title: '수정', + optionClickHandler: () => { + setIsEdit(true); + setShowKebab(false); + }, + }, + { + title: '삭제', + optionClickHandler: () => { + setShowKebab(false); + }, + }, + ]; + const handleReplyClick = () => { + setReplyClicked(true); + }; + return ( + +
            +
            +
            + +
            +
            + {username} + {content} +
            + +
            +
            + +
            +
            +             + ); +}; + +export default ReplyComment; diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts index d26b7c2b..d7d8909d 100644 --- a/src/components/comment/replyInput/ReplyInput.styled.ts +++ b/src/components/comment/replyInput/ReplyInput.styled.ts @@ -4,6 +4,8 @@ const ReplyInput = styled.div` display: flex; gap: 2rem; margin-left: 5rem; + margin-top: 2rem; + margin: 2rem 0 2rem 5rem; .user-input__icon { display: flex; @@ -12,9 +14,10 @@ const ReplyInput = styled.div` .user-input__container { display: flex; + width: 87%; .reply-input { - width: 83rem; + width: 100%; box-sizing: border-box; height: 3.75rem; flex-shrink: 0; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 855552ac..5866cd5c 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -19,9 +19,49 @@ import { ComponentProps } from '../../../types'; let addedCmtId; +const commentsData: Comment[] = [ + { + id: 0, + username: 'john', + content: 'This is a comment', + replies: [ + { + id: 0, + parentId: 0, + username: 'lee', + content: 'Reply to the comment', + }, + { + id: 0, + parentId: 1, + username: 'jun', + content: 'Another reply', + }, + ], + }, + { + id: 1, + username: 'yeom', + content: 'a comment', + replies: [ + { + id: 0, + parentId: 0, + username: 'lee', + content: 'Reply to the comment', + }, + { + id: 0, + parentId: 1, + username: 'jun', + content: 'Another reply', + }, + ], + }, +]; + const RecruitDetailPage = () => { const navigate = useNavigate(); - const [isReply, setIsReply] = useState(false); const [commentsList, setCommentsList] = useState([]); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 @@ -54,6 +94,7 @@ const RecruitDetailPage = () => { id: addedCmtId, username: 'yeom', content: contents, + replies: [], }; setCommentsList([...commentsList, newComment]); setContents(''); @@ -172,13 +213,14 @@ const RecruitDetailPage = () => {
            댓글
              - {commentsList.map(comment => { + {commentsData.map(comment => { return ( ); })} diff --git a/src/types/comment.ts b/src/types/comment.ts index b47e043f..9ec1dd26 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -4,7 +4,7 @@ export interface Comment { id: number; username: string; content: string; - depth?: number; + replies: Reply[]; } export interface CommentInputFunctions { @@ -14,3 +14,10 @@ export interface CommentInputFunctions { onChangeHandler?: (event: React.ChangeEvent) => void; onClickInput?: () => void; } + +export interface Reply { + id: number; + parentId: number; + username: string; + content: string; +} diff --git a/src/types/index.ts b/src/types/index.ts index 39de3302..989c33f9 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,7 +1,7 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; -import type { Comment, CommentInputFunctions } from './comment'; +import type { Comment, CommentInputFunctions, Reply } from './comment'; import type { ComponentProps } from './applySteps'; export { @@ -12,4 +12,5 @@ export { Comment, ComponentProps, CommentInputFunctions, + Reply, }; From fa48c67117c17d54b7b2a9be7962d76bc85b4971 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 02:07:50 +0900 Subject: [PATCH 10/27] =?UTF-8?q?feat:=20#57=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 7 +--- src/components/comment/comment/Comment.tsx | 24 ++++++++----- .../comment/comment/ReplyComment.styled.ts | 6 +++- .../comment/comment/ReplyComment.tsx | 22 ++++++------ src/components/index.ts | 4 ++- .../RecruitDetailPage/RecruitDetailPage.tsx | 36 +++++++------------ src/types/comment.ts | 5 ++- 7 files changed, 49 insertions(+), 55 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index f9e562b4..12ad0785 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -1,10 +1,6 @@ import styled from 'styled-components'; -interface CommentDepth { - depth?: number; -} - -const Comment = styled.li` +const Comment = styled.li` .wrapper { display: flex; justify-content: space-between; @@ -19,7 +15,6 @@ const Comment = styled.li` .comment-icon { display: flex; - width: ${props => (props.depth === 1 ? '2.5rem' : '')}; } .comment-info { diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index da39b48e..60fbbe28 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,18 +1,17 @@ import React, { useState } from 'react'; import { Icon, KebabMenu } from '../..'; import S from './Comment.styled'; -import { Comment } from '../../../types'; +import { Comment, Reply } from '../../../types'; import { ReplyInput } from '../../index'; import ReplyComment from './ReplyComment'; -let addedCmtId; - const Comment = ({ id, username, content, replies }: Comment) => { const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); const isValid = isLogin && username === 'yeom' && showKebab; + const [repliesList, setRepliesList] = useState(replies); const [isEdit, setIsEdit] = useState(false); const optionLists = [ { @@ -33,13 +32,23 @@ const Comment = ({ id, username, content, replies }: Comment) => { const handleReplyClick = () => { setReplyClicked(true); }; - const addComment = () => {}; + const addComment = () => { + if (contents !== '' && contents.trim() !== '') { + const newComment = { + id: id + '-' + replies.length.toString(), + username: 'yeom', + content: contents, + }; + setRepliesList([...repliesList, newComment]); + setContents(''); + } + }; const onKeyPress = (event: React.KeyboardEvent) => { const target = event.currentTarget; if (target.value.length !== 0 && event.key === 'Enter') { event.preventDefault(); - // addComment(); + addComment(); } }; @@ -55,7 +64,7 @@ const Comment = ({ id, username, content, replies }: Comment) => { }; return ( - +
              @@ -77,12 +86,11 @@ const Comment = ({ id, username, content, replies }: Comment) => {
                - {replies?.map(reply => { + {repliesList?.map(reply => { return ( diff --git a/src/components/comment/comment/ReplyComment.styled.ts b/src/components/comment/comment/ReplyComment.styled.ts index 9696e898..453176c7 100644 --- a/src/components/comment/comment/ReplyComment.styled.ts +++ b/src/components/comment/comment/ReplyComment.styled.ts @@ -1,6 +1,10 @@ import styled from 'styled-components'; -const ReplyComment = styled.div``; +const ReplyComment = styled.div` + .comment-icon { + width: 2.7rem; + } +`; const S = { ReplyComment }; diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx index 7b237221..ab34da0f 100644 --- a/src/components/comment/comment/ReplyComment.tsx +++ b/src/components/comment/comment/ReplyComment.tsx @@ -3,10 +3,11 @@ import S from './ReplyComment.styled'; import { Icon, KebabMenu } from '../..'; import { Reply } from '../../../types'; -const ReplyComment = ({ id, parentId, username, content }: Reply) => { +const ReplyComment = ({ id, username, content }: Reply) => { + const isLogin = true; // 임시 코드 const [showKebab, setShowKebab] = useState(true); const [isEdit, setIsEdit] = useState(false); - const [replyClicked, setReplyClicked] = useState(false); + const isValid = isLogin && username === 'yeom' && showKebab; const optionLists = [ { title: '수정', @@ -22,11 +23,9 @@ const ReplyComment = ({ id, parentId, username, content }: Reply) => { }, }, ]; - const handleReplyClick = () => { - setReplyClicked(true); - }; + return ( - +
                @@ -36,13 +35,12 @@ const ReplyComment = ({ id, parentId, username, content }: Reply) => { {username} {content}
                -
                -
                - -
                + {isValid && ( +
                + +
                + )}
                ); diff --git a/src/components/index.ts b/src/components/index.ts index 57a091d8..fb8c436d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -92,6 +92,7 @@ import Create from './header/Create'; import Comment from './comment/comment/Comment'; import CommentInput from './comment/commentInput/CommentInput'; import ReplyInput from './comment/replyInput/ReplyInput'; +import CommentList from './comment/comment/CommentList'; export { Header, @@ -176,7 +177,8 @@ export { RecruitCard, Pagination, Create, - Comment, CommentInput, ReplyInput, + CommentList, + Comment, }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 5866cd5c..310ac327 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -17,42 +17,36 @@ import { applyStepState } from '../../../atom'; import { useNavigate } from 'react-router-dom'; import { ComponentProps } from '../../../types'; -let addedCmtId; - -const commentsData: Comment[] = [ +let commentsData: Comment[] = [ { - id: 0, + id: '0', username: 'john', content: 'This is a comment', replies: [ { - id: 0, - parentId: 0, + id: '0-0', username: 'lee', content: 'Reply to the comment', }, { - id: 0, - parentId: 1, + id: '0-1', username: 'jun', content: 'Another reply', }, ], }, { - id: 1, + id: '1', username: 'yeom', content: 'a comment', replies: [ { - id: 0, - parentId: 0, + id: '1-0', username: 'lee', content: 'Reply to the comment', }, { - id: 0, - parentId: 1, + id: '1-1', username: 'jun', content: 'Another reply', }, @@ -62,7 +56,7 @@ const commentsData: Comment[] = [ const RecruitDetailPage = () => { const navigate = useNavigate(); - const [commentsList, setCommentsList] = useState([]); + const [commentsList, setCommentsList] = useState(commentsData); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); @@ -83,15 +77,9 @@ const RecruitDetailPage = () => { }; const addComment = () => { - if (contents !== '') { - if (commentsList.length === 0) { - addedCmtId = 0; - } else { - const lastCmtIndex = commentsList.length - 1; - addedCmtId = commentsList[lastCmtIndex].id + 1; - } + if (contents !== '' && contents.trim() !== '') { const newComment = { - id: addedCmtId, + id: commentsData.length.toString(), username: 'yeom', content: contents, replies: [], @@ -213,10 +201,10 @@ const RecruitDetailPage = () => {
                댓글
                  - {commentsData.map(comment => { + {commentsList.map((comment, index) => { return ( Date: Sat, 24 Feb 2024 12:58:04 +0900 Subject: [PATCH 11/27] =?UTF-8?q?feat:=20#57=20=EB=8C=80=EB=8C=93=EA=B8=80?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 17 +++++++++++++---- src/components/comment/comment/ReplyComment.tsx | 7 +++++-- .../RecruitDetailPage/RecruitDetailPage.tsx | 5 +++-- src/types/comment.ts | 7 ++++--- src/types/index.ts | 6 +++--- 5 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 60fbbe28..a0b5bc6b 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,17 +1,17 @@ import React, { useState } from 'react'; import { Icon, KebabMenu } from '../..'; import S from './Comment.styled'; -import { Comment, Reply } from '../../../types'; +import { CommentForm, ReplyForm } from '../../../types'; import { ReplyInput } from '../../index'; import ReplyComment from './ReplyComment'; -const Comment = ({ id, username, content, replies }: Comment) => { +const Comment = ({ id, username, content, replies }: CommentForm) => { const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); const isValid = isLogin && username === 'yeom' && showKebab; - const [repliesList, setRepliesList] = useState(replies); + const [repliesList, setRepliesList] = useState(replies); const [isEdit, setIsEdit] = useState(false); const optionLists = [ { @@ -29,13 +29,21 @@ const Comment = ({ id, username, content, replies }: Comment) => { }, ]; + const deleteReply = (id: string) => { + let updatedReplies = [...repliesList]; + console.log(updatedReplies); + updatedReplies = updatedReplies.filter(v => v.id !== id); + console.log(id); + setRepliesList(updatedReplies); + }; + const handleReplyClick = () => { setReplyClicked(true); }; const addComment = () => { if (contents !== '' && contents.trim() !== '') { const newComment = { - id: id + '-' + replies.length.toString(), + id: id + '-' + repliesList.length.toString(), username: 'yeom', content: contents, }; @@ -93,6 +101,7 @@ const Comment = ({ id, username, content, replies }: Comment) => { id={reply.id} username={reply.username} content={reply.content} + deleteReply={() => deleteReply(reply.id)} /> ); })} diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx index ab34da0f..11d71289 100644 --- a/src/components/comment/comment/ReplyComment.tsx +++ b/src/components/comment/comment/ReplyComment.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; import S from './ReplyComment.styled'; import { Icon, KebabMenu } from '../..'; -import { Reply } from '../../../types'; +import { ReplyForm } from '../../../types'; -const ReplyComment = ({ id, username, content }: Reply) => { +const ReplyComment = ({ id, username, content, deleteReply }: ReplyForm) => { const isLogin = true; // 임시 코드 const [showKebab, setShowKebab] = useState(true); const [isEdit, setIsEdit] = useState(false); @@ -20,6 +20,9 @@ const ReplyComment = ({ id, username, content }: Reply) => { title: '삭제', optionClickHandler: () => { setShowKebab(false); + if (deleteReply) { + deleteReply(id); + } }, }, ]; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 310ac327..33303936 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -16,8 +16,9 @@ import { useRecoilValue } from 'recoil'; import { applyStepState } from '../../../atom'; import { useNavigate } from 'react-router-dom'; import { ComponentProps } from '../../../types'; +import { CommentForm } from '../../../types'; -let commentsData: Comment[] = [ +let commentsData: CommentForm[] = [ { id: '0', username: 'john', @@ -56,7 +57,7 @@ let commentsData: Comment[] = [ const RecruitDetailPage = () => { const navigate = useNavigate(); - const [commentsList, setCommentsList] = useState(commentsData); + const [commentsList, setCommentsList] = useState(commentsData); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); diff --git a/src/types/comment.ts b/src/types/comment.ts index d0ce669a..0699e12a 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -1,10 +1,10 @@ import React from 'react'; -export interface Comment { +export interface CommentForm { id: string; username: string; content: string; - replies: Reply[]; + replies: ReplyForm[]; } export interface CommentInputFunctions { @@ -15,8 +15,9 @@ export interface CommentInputFunctions { onClickInput?: () => void; } -export interface Reply { +export interface ReplyForm { id: string; username: string; content: string; + deleteReply?: (id: string) => void; } diff --git a/src/types/index.ts b/src/types/index.ts index 989c33f9..f8439b5a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,7 +1,7 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; -import type { Comment, CommentInputFunctions, Reply } from './comment'; +import type { CommentForm, CommentInputFunctions, ReplyForm } from './comment'; import type { ComponentProps } from './applySteps'; export { @@ -9,8 +9,8 @@ export { UserReponse, User, CustomInstance, - Comment, + CommentForm, ComponentProps, CommentInputFunctions, - Reply, + ReplyForm, }; From 31a1d89bfb568b5bf300e076b58f50fd43511611 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 13:01:40 +0900 Subject: [PATCH 12/27] =?UTF-8?q?refactor:=20#57=20=EB=8C=80=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EC=82=AD=EC=A0=9C=20=EC=BD=94=EB=93=9C=20=EC=B6=95?= =?UTF-8?q?=EC=95=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index a0b5bc6b..77c12731 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -30,11 +30,7 @@ const Comment = ({ id, username, content, replies }: CommentForm) => { ]; const deleteReply = (id: string) => { - let updatedReplies = [...repliesList]; - console.log(updatedReplies); - updatedReplies = updatedReplies.filter(v => v.id !== id); - console.log(id); - setRepliesList(updatedReplies); + setRepliesList(prevReplies => prevReplies.filter(v => v.id !== id)); }; const handleReplyClick = () => { From e65918c4609b2d1f095ea068c00f8545c07c9d73 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 13:21:02 +0900 Subject: [PATCH 13/27] =?UTF-8?q?feat:=20#57=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 5 ++++- .../RecruitDetailPage/RecruitDetailPage.tsx | 19 ++++++++++++------- src/types/comment.ts | 1 + 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 77c12731..b1f6bb93 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -5,7 +5,7 @@ import { CommentForm, ReplyForm } from '../../../types'; import { ReplyInput } from '../../index'; import ReplyComment from './ReplyComment'; -const Comment = ({ id, username, content, replies }: CommentForm) => { +const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); const [contents, setContents] = useState(''); @@ -25,6 +25,9 @@ const Comment = ({ id, username, content, replies }: CommentForm) => { title: '삭제', optionClickHandler: () => { setShowKebab(false); + if (deleteComment) { + deleteComment(id); + } }, }, ]; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 33303936..614fee36 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -18,38 +18,38 @@ import { useNavigate } from 'react-router-dom'; import { ComponentProps } from '../../../types'; import { CommentForm } from '../../../types'; -let commentsData: CommentForm[] = [ +const commentsData: CommentForm[] = [ { id: '0', username: 'john', - content: 'This is a comment', + content: '이거 어때?', replies: [ { id: '0-0', username: 'lee', - content: 'Reply to the comment', + content: '뭘 어때 걍 하셈', }, { id: '0-1', username: 'jun', - content: 'Another reply', + content: '조용히하셈', }, ], }, { id: '1', username: 'yeom', - content: 'a comment', + content: '아니 근데 왜 나도 이거 지원하고 싶다', replies: [ { id: '1-0', username: 'lee', - content: 'Reply to the comment', + content: '하셈', }, { id: '1-1', username: 'jun', - content: 'Another reply', + content: '바로 탈락하쥬?ㅋ', }, ], }, @@ -90,6 +90,10 @@ const RecruitDetailPage = () => { } }; + const deleteComment = (id: string) => { + setCommentsList(prevComments => prevComments.filter(v => v.id !== id)); + }; + const onKeyPress = (event: React.KeyboardEvent) => { const target = event.currentTarget; if (target.value.length !== 0 && event.key === 'Enter') { @@ -210,6 +214,7 @@ const RecruitDetailPage = () => { username={comment.username} content={comment.content} replies={comment.replies} + deleteComment={() => deleteComment(comment.id)} /> ); })} diff --git a/src/types/comment.ts b/src/types/comment.ts index 0699e12a..27a5354a 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -5,6 +5,7 @@ export interface CommentForm { username: string; content: string; replies: ReplyForm[]; + deleteComment?: (id: string) => void; } export interface CommentInputFunctions { From dd216437d8d2070ccc1a941f96c33049a5d7c3a6 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 14:24:00 +0900 Subject: [PATCH 14/27] =?UTF-8?q?feat:=20#57=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/Comment.styled.ts | 11 ++++ src/components/comment/comment/Comment.tsx | 51 +++++++++++++++---- .../comment/comment/ReplyComment.tsx | 48 +++++++++++++---- .../commentInput/CommentInput.styled.ts | 6 +-- .../comment/replyInput/ReplyInput.styled.ts | 2 +- 5 files changed, 94 insertions(+), 24 deletions(-) diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts index 12ad0785..621210f1 100644 --- a/src/components/comment/comment/Comment.styled.ts +++ b/src/components/comment/comment/Comment.styled.ts @@ -11,6 +11,17 @@ const Comment = styled.li` display: flex; gap: 2rem; align-items: center; + width: 100%; + + .input-edit { + width: 86%; + border: none; + border-bottom: 1px solid #373f41; + background-color: transparent; + outline: none; + padding-bottom: 0.5rem; + font-size: 1.5rem; + } } .comment-icon { diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index b1f6bb93..c36cbc06 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -8,6 +8,7 @@ import ReplyComment from './ReplyComment'; const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); + const [value, setValue] = useState(content); const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); const isValid = isLogin && username === 'yeom' && showKebab; @@ -39,6 +40,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const handleReplyClick = () => { setReplyClicked(true); }; + const addComment = () => { if (contents !== '' && contents.trim() !== '') { const newComment = { @@ -50,6 +52,10 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) setContents(''); } }; + const editComment = () => { + setIsEdit(false); + setShowKebab(true); + }; const onKeyPress = (event: React.KeyboardEvent) => { const target = event.currentTarget; @@ -59,6 +65,14 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) } }; + const onKeyPressEdit = (event: React.KeyboardEvent) => { + const target = event.currentTarget; + if (target.value.length !== 0 && event.key === 'Enter') { + event.preventDefault(); + editComment(); + } + }; + const onChangeHandler = (event: React.ChangeEvent) => { setContents(event.target.value); }; @@ -70,6 +84,10 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) } }; + const onChangeEdit = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + return (
                  @@ -77,19 +95,30 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm)
                  -
                  - {username} - {content} -
                  -
                  - {isValid && ( -
                  - -
                  - )} + {isValid && }
                diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx index 11d71289..48b191ac 100644 --- a/src/components/comment/comment/ReplyComment.tsx +++ b/src/components/comment/comment/ReplyComment.tsx @@ -5,6 +5,7 @@ import { ReplyForm } from '../../../types'; const ReplyComment = ({ id, username, content, deleteReply }: ReplyForm) => { const isLogin = true; // 임시 코드 + const [value, setValue] = useState(content); const [showKebab, setShowKebab] = useState(true); const [isEdit, setIsEdit] = useState(false); const isValid = isLogin && username === 'yeom' && showKebab; @@ -27,6 +28,23 @@ const ReplyComment = ({ id, username, content, deleteReply }: ReplyForm) => { }, ]; + const editComment = () => { + setIsEdit(false); + setShowKebab(true); + }; + + const onChangeEdit = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + const onKeyPressEdit = (event: React.KeyboardEvent) => { + const target = event.currentTarget; + if (target.value.length !== 0 && event.key === 'Enter') { + event.preventDefault(); + editComment(); + } + }; + return (
                @@ -34,16 +52,28 @@ const ReplyComment = ({ id, username, content, deleteReply }: ReplyForm) => {
                -
                - {username} - {content} -
                + {!isEdit ? ( +
                + {username} + {value} +
                + ) : ( + <> + + + + )}
                - {isValid && ( -
                - -
                - )} + {isValid && }
              ); diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts index 8c8f57a9..01511c50 100644 --- a/src/components/comment/commentInput/CommentInput.styled.ts +++ b/src/components/comment/commentInput/CommentInput.styled.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; const CommentInput = styled.div` .user-input { display: flex; - gap: 2.1rem; + gap: 2rem; .user-input__icon { width: 3.15rem; @@ -14,10 +14,10 @@ const CommentInput = styled.div` .user-input__container { display: flex; gap: 1rem; - margin: 0 auto; + width: 100%; input { - width: 85.15rem; + width: 89%; height: 3.75rem; flex-shrink: 0; border-radius: 0.75rem; diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts index d7d8909d..fb9d2ef5 100644 --- a/src/components/comment/replyInput/ReplyInput.styled.ts +++ b/src/components/comment/replyInput/ReplyInput.styled.ts @@ -14,7 +14,7 @@ const ReplyInput = styled.div` .user-input__container { display: flex; - width: 87%; + width: 86%; .reply-input { width: 100%; From f6878e2ba132a8d860b9f596061a572416e89ba8 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 14:57:51 +0900 Subject: [PATCH 15/27] =?UTF-8?q?feat:=20#57=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/ReplyComment.tsx | 3 +-- src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx | 3 ++- src/types/comment.ts | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx index 48b191ac..3aaf121a 100644 --- a/src/components/comment/comment/ReplyComment.tsx +++ b/src/components/comment/comment/ReplyComment.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import S from './ReplyComment.styled'; import { Icon, KebabMenu } from '../..'; import { ReplyForm } from '../../../types'; @@ -44,7 +44,6 @@ const ReplyComment = ({ id, username, content, deleteReply }: ReplyForm) => { editComment(); } }; - return (
              diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 614fee36..77cb628b 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import S from './RecruitDetailPage.styled'; import { Tag, @@ -57,6 +57,7 @@ const commentsData: CommentForm[] = [ const RecruitDetailPage = () => { const navigate = useNavigate(); + const scrollRef = useRef(null); const [commentsList, setCommentsList] = useState(commentsData); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 diff --git a/src/types/comment.ts b/src/types/comment.ts index 27a5354a..882567d1 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -6,6 +6,7 @@ export interface CommentForm { content: string; replies: ReplyForm[]; deleteComment?: (id: string) => void; + inputRef?: any; } export interface CommentInputFunctions { From 7656a1f016699932840897955fa79eebce9ade83 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 15:14:13 +0900 Subject: [PATCH 16/27] =?UTF-8?q?chore:=20#57=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 22 ++++++++++--------- .../comment/comment/ReplyComment.tsx | 2 +- .../comment/commentInput/CommentInput.tsx | 2 +- .../comment/replyInput/ReplyInput.tsx | 2 +- .../RecruitDetailPage/RecruitDetailPage.tsx | 8 +++---- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index c36cbc06..82d9eb37 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -11,7 +11,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const [value, setValue] = useState(content); const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); - const isValid = isLogin && username === 'yeom' && showKebab; + const isValid = isLogin && username === 'yeom'; const [repliesList, setRepliesList] = useState(replies); const [isEdit, setIsEdit] = useState(false); const optionLists = [ @@ -32,7 +32,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) }, }, ]; - + console.log(username, isValid); const deleteReply = (id: string) => { setRepliesList(prevReplies => prevReplies.filter(v => v.id !== id)); }; @@ -110,15 +110,17 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) onKeyPress={onKeyPressEdit} /> )} - + {isValid && ( + + )}
              - {isValid && } + {isValid && showKebab && }
                diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx index 3aaf121a..86c6b4ae 100644 --- a/src/components/comment/comment/ReplyComment.tsx +++ b/src/components/comment/comment/ReplyComment.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import S from './ReplyComment.styled'; import { Icon, KebabMenu } from '../..'; import { ReplyForm } from '../../../types'; diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index 578415f6..ac6f58fe 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Icon } from '../..'; import { CommentInputFunctions } from '../../../types'; import S from './CommentInput.styled'; diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx index c9c5ea4f..331609f1 100644 --- a/src/components/comment/replyInput/ReplyInput.tsx +++ b/src/components/comment/replyInput/ReplyInput.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Icon } from '../..'; import { CommentInputFunctions } from '../../../types'; import S from './ReplyInput.styled'; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 77cb628b..410c548e 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState } from 'react'; import S from './RecruitDetailPage.styled'; import { Tag, @@ -21,7 +21,7 @@ import { CommentForm } from '../../../types'; const commentsData: CommentForm[] = [ { id: '0', - username: 'john', + username: 'johny', content: '이거 어때?', replies: [ { @@ -57,7 +57,6 @@ const commentsData: CommentForm[] = [ const RecruitDetailPage = () => { const navigate = useNavigate(); - const scrollRef = useRef(null); const [commentsList, setCommentsList] = useState(commentsData); const [contents, setContents] = useState(''); const isLogin = true; // 임시 코드 @@ -109,8 +108,7 @@ const RecruitDetailPage = () => { const onClickInput = () => { if (!isLogin) { - // 로그인 페이지로 이동 - // navigate('/login'); + navigate('/login'); } }; From 71cff8342ce9889207813680362d41e3e2799dd0 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sat, 24 Feb 2024 15:26:36 +0900 Subject: [PATCH 17/27] =?UTF-8?q?chore:=20#57=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 5 +---- src/components/index.ts | 2 ++ 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 82d9eb37..4d182fc1 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,9 +1,7 @@ import React, { useState } from 'react'; -import { Icon, KebabMenu } from '../..'; +import { Icon, KebabMenu, ReplyComment, ReplyInput } from '../..'; import S from './Comment.styled'; import { CommentForm, ReplyForm } from '../../../types'; -import { ReplyInput } from '../../index'; -import ReplyComment from './ReplyComment'; const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { const isLogin = true; // 임시 코드 @@ -32,7 +30,6 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) }, }, ]; - console.log(username, isValid); const deleteReply = (id: string) => { setRepliesList(prevReplies => prevReplies.filter(v => v.id !== id)); }; diff --git a/src/components/index.ts b/src/components/index.ts index fb8c436d..f2d66dc1 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -93,6 +93,7 @@ import Comment from './comment/comment/Comment'; import CommentInput from './comment/commentInput/CommentInput'; import ReplyInput from './comment/replyInput/ReplyInput'; import CommentList from './comment/comment/CommentList'; +import ReplyComment from './comment/comment/ReplyComment'; export { Header, @@ -181,4 +182,5 @@ export { ReplyInput, CommentList, Comment, + ReplyComment, }; From 1641459fe46040482423388e23976c70c2d51520 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 14:54:55 +0900 Subject: [PATCH 18/27] =?UTF-8?q?fix:=20PR=20=ED=94=BC=EB=93=9C=EB=B0=B1?= =?UTF-8?q?=20=EB=AA=A8=EB=91=90=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 1 + src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx | 5 ++--- src/types/applySteps.ts | 3 --- src/types/comment.ts | 1 - src/types/index.ts | 4 ++-- src/types/indexSigniture.ts | 3 +++ 6 files changed, 8 insertions(+), 9 deletions(-) delete mode 100644 src/types/applySteps.ts create mode 100644 src/types/indexSigniture.ts diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 4d182fc1..c4b82f69 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -47,6 +47,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) }; setRepliesList([...repliesList, newComment]); setContents(''); + setReplyClicked(false); } }; const editComment = () => { diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 410c548e..036cbeb0 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -15,8 +15,7 @@ import ColorMatching from '../../../utils/ColorMatching'; import { useRecoilValue } from 'recoil'; import { applyStepState } from '../../../atom'; import { useNavigate } from 'react-router-dom'; -import { ComponentProps } from '../../../types'; -import { CommentForm } from '../../../types'; +import { JsxElementComponentProps, CommentForm } from '../../../types'; const commentsData: CommentForm[] = [ { @@ -62,7 +61,7 @@ const RecruitDetailPage = () => { const isLogin = true; // 임시 코드 const step = useRecoilValue(applyStepState); - const stepLists: ComponentProps = { + const stepLists: JsxElementComponentProps = { 0: , 1: , 2: , diff --git a/src/types/applySteps.ts b/src/types/applySteps.ts deleted file mode 100644 index f485460b..00000000 --- a/src/types/applySteps.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type ComponentProps = { - [key: number]: JSX.Element; -}; diff --git a/src/types/comment.ts b/src/types/comment.ts index 882567d1..27a5354a 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -6,7 +6,6 @@ export interface CommentForm { content: string; replies: ReplyForm[]; deleteComment?: (id: string) => void; - inputRef?: any; } export interface CommentInputFunctions { diff --git a/src/types/index.ts b/src/types/index.ts index f8439b5a..86c457f9 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -2,7 +2,7 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; import type { CommentForm, CommentInputFunctions, ReplyForm } from './comment'; -import type { ComponentProps } from './applySteps'; +import type { JsxElementComponentProps } from './indexSigniture'; export { SignUpPayload, @@ -10,7 +10,7 @@ export { User, CustomInstance, CommentForm, - ComponentProps, + JsxElementComponentProps, CommentInputFunctions, ReplyForm, }; diff --git a/src/types/indexSigniture.ts b/src/types/indexSigniture.ts new file mode 100644 index 00000000..569c4f55 --- /dev/null +++ b/src/types/indexSigniture.ts @@ -0,0 +1,3 @@ +export interface JsxElementComponentProps { + [key: number]: JSX.Element; +} From 8873ee7111ac0867086f771ac5a29d9798c3e618 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 15:01:39 +0900 Subject: [PATCH 19/27] =?UTF-8?q?chore:=20div=20->=20article=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/commentInput/CommentInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index ac6f58fe..7dda4eb5 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -14,7 +14,7 @@ const CommentInput = ({ return ( -
                +
                @@ -31,7 +31,7 @@ const CommentInput = ({ 댓글
              -
            + ); }; From 914a19ecb8eecb04a2a47370430dd581076162ad Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 15:03:38 +0900 Subject: [PATCH 20/27] =?UTF-8?q?chore:=20form=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/commentInput/CommentInput.tsx | 42 +++++++++++-------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx index 7dda4eb5..1f7d7185 100644 --- a/src/components/comment/commentInput/CommentInput.tsx +++ b/src/components/comment/commentInput/CommentInput.tsx @@ -12,26 +12,32 @@ const CommentInput = ({ }: CommentInputFunctions) => { const isLogin = true; // 임시 코드 + const onSubmit = (event: React.FormEvent) => { + event.preventDefault(); + }; + return ( -
            -
            - -
            -
            - - -
            -
            +
            +
            +
            + +
            +
            + + +
            +
            +
            ); }; From c93e8f8bd212aacec6be2442a9c58dc0faffd8c4 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 15:12:29 +0900 Subject: [PATCH 21/27] =?UTF-8?q?chore:=20=ED=95=A8=EC=88=98=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95(addComment=20->=20addRe?= =?UTF-8?q?ply)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index c4b82f69..6829f735 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -38,7 +38,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) setReplyClicked(true); }; - const addComment = () => { + const addReply = () => { if (contents !== '' && contents.trim() !== '') { const newComment = { id: id + '-' + repliesList.length.toString(), @@ -59,7 +59,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const target = event.currentTarget; if (target.value.length !== 0 && event.key === 'Enter') { event.preventDefault(); - addComment(); + addReply(); } }; @@ -138,7 +138,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) Date: Sun, 25 Feb 2024 15:15:42 +0900 Subject: [PATCH 22/27] =?UTF-8?q?chore:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 4 +++- src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 6829f735..0694fa07 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -2,8 +2,10 @@ import React, { useState } from 'react'; import { Icon, KebabMenu, ReplyComment, ReplyInput } from '../..'; import S from './Comment.styled'; import { CommentForm, ReplyForm } from '../../../types'; +import { useNavigate } from 'react-router-dom'; const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { + const navigate = useNavigate(); const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); const [value, setValue] = useState(content); @@ -78,7 +80,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const onClickInput = () => { if (!isLogin) { // 로그인 페이지로 이동 - // navigate('/login'); + navigate('/signin'); } }; diff --git a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx index 036cbeb0..a6c045a8 100644 --- a/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx +++ b/src/pages/recruit/RecruitDetailPage/RecruitDetailPage.tsx @@ -107,7 +107,7 @@ const RecruitDetailPage = () => { const onClickInput = () => { if (!isLogin) { - navigate('/login'); + navigate('/signin'); } }; From bfb4d15d84d629d2d19f3f7013f351fac7b2b924 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 16:24:50 +0900 Subject: [PATCH 23/27] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comment/comment/CommentList.tsx | 20 ------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/components/comment/comment/CommentList.tsx diff --git a/src/components/comment/comment/CommentList.tsx b/src/components/comment/comment/CommentList.tsx deleted file mode 100644 index 5781b392..00000000 --- a/src/components/comment/comment/CommentList.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Comment } from '../../index'; - -const CommentList = (comments: Comment[]) => { - return ( -
            - {comments.map(comment => ( - - ))} -
            - ); -}; - -export default CommentList; From d3c99a779d28b91c98c0692960790f20d4fae397 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Sun, 25 Feb 2024 16:39:28 +0900 Subject: [PATCH 24/27] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index f2d66dc1..7d70f07e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -92,7 +92,6 @@ import Create from './header/Create'; import Comment from './comment/comment/Comment'; import CommentInput from './comment/commentInput/CommentInput'; import ReplyInput from './comment/replyInput/ReplyInput'; -import CommentList from './comment/comment/CommentList'; import ReplyComment from './comment/comment/ReplyComment'; export { @@ -180,7 +179,6 @@ export { Create, CommentInput, ReplyInput, - CommentList, Comment, ReplyComment, }; From 477f7975ca77dae8867a7cd3dbb3755775c5b162 Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 27 Feb 2024 17:15:49 +0900 Subject: [PATCH 25/27] =?UTF-8?q?fix:=20=EB=8B=B5=EA=B8=80=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 10 +++++----- src/types/comment.ts | 9 +-------- src/types/index.ts | 3 +-- 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 0694fa07..722df5cd 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Icon, KebabMenu, ReplyComment, ReplyInput } from '../..'; import S from './Comment.styled'; -import { CommentForm, ReplyForm } from '../../../types'; +import { CommentForm } from '../../../types'; import { useNavigate } from 'react-router-dom'; const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { @@ -12,7 +12,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); const isValid = isLogin && username === 'yeom'; - const [repliesList, setRepliesList] = useState(replies); + const [repliesList, setRepliesList] = useState(replies); const [isEdit, setIsEdit] = useState(false); const optionLists = [ { @@ -33,7 +33,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) }, ]; const deleteReply = (id: string) => { - setRepliesList(prevReplies => prevReplies.filter(v => v.id !== id)); + setRepliesList(prevReplies => prevReplies?.filter(v => v.id !== id)); }; const handleReplyClick = () => { @@ -41,9 +41,9 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) }; const addReply = () => { - if (contents !== '' && contents.trim() !== '') { + if (contents !== '' && contents.trim() !== '' && repliesList) { const newComment = { - id: id + '-' + repliesList.length.toString(), + id: id + '-' + repliesList?.length.toString(), username: 'yeom', content: contents, }; diff --git a/src/types/comment.ts b/src/types/comment.ts index 27a5354a..968f19b9 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -4,7 +4,7 @@ export interface CommentForm { id: string; username: string; content: string; - replies: ReplyForm[]; + replies?: CommentForm[]; deleteComment?: (id: string) => void; } @@ -15,10 +15,3 @@ export interface CommentInputFunctions { onChangeHandler?: (event: React.ChangeEvent) => void; onClickInput?: () => void; } - -export interface ReplyForm { - id: string; - username: string; - content: string; - deleteReply?: (id: string) => void; -} diff --git a/src/types/index.ts b/src/types/index.ts index 86c457f9..bd0043a4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,7 +1,7 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; -import type { CommentForm, CommentInputFunctions, ReplyForm } from './comment'; +import type { CommentForm, CommentInputFunctions } from './comment'; import type { JsxElementComponentProps } from './indexSigniture'; export { @@ -12,5 +12,4 @@ export { CommentForm, JsxElementComponentProps, CommentInputFunctions, - ReplyForm, }; From afc175d0330ddcf41f94ca9fd972b7e8afca60cc Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 27 Feb 2024 17:16:52 +0900 Subject: [PATCH 26/27] =?UTF-8?q?fix:=20=EB=8B=B5=EA=B8=80=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index 722df5cd..e05d11c1 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -131,7 +131,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) id={reply.id} username={reply.username} content={reply.content} - deleteReply={() => deleteReply(reply.id)} + deleteComment={() => deleteReply(reply.id)} /> ); })} From 29fac9009e3178961ffa8943943c4a2dbf71f89d Mon Sep 17 00:00:00 2001 From: prgmr99 Date: Tue, 27 Feb 2024 22:15:46 +0900 Subject: [PATCH 27/27] =?UTF-8?q?fix:=20#57=20type=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/comment/comment/Comment.tsx | 6 +++--- src/types/comment.ts | 4 ++-- src/types/index.ts | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx index e05d11c1..affe9fbd 100644 --- a/src/components/comment/comment/Comment.tsx +++ b/src/components/comment/comment/Comment.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { Icon, KebabMenu, ReplyComment, ReplyInput } from '../..'; import S from './Comment.styled'; -import { CommentForm } from '../../../types'; +import { Comment } from '../../../types'; import { useNavigate } from 'react-router-dom'; -const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) => { +const Comment = ({ id, username, content, replies, deleteComment }: Comment) => { const navigate = useNavigate(); const isLogin = true; // 임시 코드 const [replyClicked, setReplyClicked] = useState(false); @@ -12,7 +12,7 @@ const Comment = ({ id, username, content, replies, deleteComment }: CommentForm) const [contents, setContents] = useState(''); const [showKebab, setShowKebab] = useState(true); const isValid = isLogin && username === 'yeom'; - const [repliesList, setRepliesList] = useState(replies); + const [repliesList, setRepliesList] = useState(replies); const [isEdit, setIsEdit] = useState(false); const optionLists = [ { diff --git a/src/types/comment.ts b/src/types/comment.ts index 968f19b9..6f60116f 100644 --- a/src/types/comment.ts +++ b/src/types/comment.ts @@ -1,10 +1,10 @@ import React from 'react'; -export interface CommentForm { +export interface Comment { id: string; username: string; content: string; - replies?: CommentForm[]; + replies?: Comment[]; deleteComment?: (id: string) => void; } diff --git a/src/types/index.ts b/src/types/index.ts index bd0043a4..c2755c31 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,15 +1,15 @@ import type { SignUpPayload } from './payload'; import type { UserReponse, User } from './response'; import type { CustomInstance } from './api'; -import type { CommentForm, CommentInputFunctions } from './comment'; +import type { Comment, CommentInputFunctions } from './comment'; import type { JsxElementComponentProps } from './indexSigniture'; -export { +export type { SignUpPayload, UserReponse, User, CustomInstance, - CommentForm, + Comment, JsxElementComponentProps, CommentInputFunctions, };