[#125] Feat: 댓글 수정 삭제 기능 구현 #140

ienrum · 2024-06-28T12:31:23Z

💬 Issue Number

closes #125

🤷‍♂️ Description

작업 내용에 대한 설명

DropdownMenu 컴포넌트 설치
useModal 구현
patch method 추가
CommentForm 구현

📷 Screenshots

작업 결과물

-.Chrome.2024-06-28.21-27-47.mp4

두번째 결과물(대댓글,댓글 하이라이트)

👻 Good Function

팀원에게 공유하고 싶은 함수나 코드 일부

📋 Check List

PR 전 체크해주세요.

Merge 하는 브랜치가 올바른가?
코딩컨벤션을 준수하는가?
PR과 관련없는 변경사항이 없는가?

📒 Remarks

팀원이 코드리뷰 시 주의할 점 또는 말하고 싶은 점 특이사항

github-actions · 2024-06-28T12:32:35Z

🚀 Storybook is deployed! View it here: https://6621243cb767d61b79ad0f3c-nxdocafiqs.chromatic.com/

hyeonjinan096

수혁님 수고하셨습니다:)

hyeonjinan096 · 2024-07-03T05:33:56Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentItemMenu/index.tsx

+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button>
+          <Icon id='more-square' />


aria-label추가하면 좋을 거 같습니다.

감사합니다! 반영하겠습니다.

hyeonjinan096 · 2024-07-03T05:24:16Z

.../result/[postId]/_components/CommentList/CommentItem/CommentItemMenu/CommentRootItemMenu.tsx

CommentReplyItemMenu, CommentRootItemMenu 컴포넌트가 중복되는 부분이 좀 있는 거 같은데 둘이 분리하는 방법을 선택하신 이유가 있으실까요?

한파일 에서 분리하면 조건 문이 생길 것 같습니다. 추후에 다른 commentItemMenu 의 종류가 생긴다면 더 복잡해질 것같습니다. 변경의 크기도 reply, root 정도의 크기로 정하는게 좋을것 같아 파일단위를 정했습니다.

중복되는 부분을 함수로 빼내는 식으로 해볼까 생각이 드는데 혹시 어떻게 생각하시나요?!

hyeonjinan096 · 2024-07-03T05:31:36Z

src/app/(post)/result/[postId]/_components/CommentModalForm/CommentModalButton.tsx

+
+const CommentModalButton = () => {
+  const router = useRouter();
+  const handleClick = () => {


함수명을 더 구체화하는 것도 좋을 거 같습니다:)

넵넵 수정해보겠습니다!

hyeonjinan096 · 2024-07-03T05:33:29Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentReplyItem.tsx

+        isSelected && 'bg-gray-accent2',
+      )}
+    >
+      <Icon id='reply' className=' text-gray-accent3' />


aria-label추가해주면 좋을 거 같습니다.

hyeonjinan096 · 2024-07-03T05:34:15Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentItemMenu/index.tsx

+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          onCloseAutoFocus={e => e.preventDefault()}
+          className=' font-text-3-rg flex flex-col gap-2 rounded-lg bg-[#2d3033] p-2 text-white'


모바일에서는 괜찮은데 웹에서는 튀어나오는 부분 수정하면 좋을 거 같습니다:)

오 그러네요 알겠습니다!

HoberMin

제가 당장 코드를 돌려보면서 리뷰를 남긴게 아니라 부족한 부분이 있을 수 있을 것 같습니다 ㅠㅡㅠ 그래도 코드를 가독성있게 짜는건 너무 많이 좋아진 것 같네요 !
저녁에 한번 회의하면서 수정 해보면 좋을 것 같슴다 고생하셨어요 !!

HoberMin · 2024-07-08T00:32:47Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentItemMenu/index.tsx

+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button>


혹시 여기 button 태그 달아준 이유가 있을까요 ?

오 아니요 radix 문서 코드를 가져왔습니다.

asChild 를 제거하고 Icon 만 적용해보겠습니다!

HoberMin · 2024-07-08T00:34:52Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentItemMenu/index.tsx

+const CommentItemMenuButton = ({
+  label,
+  onClick,
+}: CommentItemMenuButtonProps) => {
+  return <DropdownMenu.Item onSelect={onClick}>{label}</DropdownMenu.Item>;
+};


Suggested change

const CommentItemMenuButton = ({

label,

onClick,

}: CommentItemMenuButtonProps) => {

return <DropdownMenu.Item onSelect={onClick}>{label}</DropdownMenu.Item>;

};

const CommentItem = ({

label,

onSelect,

}: CommentItemMenuButtonProps) => {

return <DropdownMenu.Item onSelect={onSelect}>{label}</DropdownMenu.Item>;

};

기존에 Item을 그대로 사용해도 좋을 것 같은데 Button으로 변경한 이유가 있을까요 ? 와 크게 다르지 않은 것 같아서 여쭤봅니다 !

아니요 없습니다.! 아마 DropdownMenu.Item 이것과 겹친다 생각해서 Button 으로 수정한것 같습니다!

수정해보겠습니다!

HoberMin · 2024-07-08T00:39:41Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentReplyItem.tsx

+      )}
+    >
+      <Icon id='reply' className=' text-gray-accent3' />
+      <CommentItem


이부분은 고민이 되는데, tanstack query의 캐싱기능을 잘 활용해보면 좋을 것 같은데
해당 props들을 드릴링으로 내리는 것 보단 CommentItem에서 훅을 호출해서 데이터를 꺼내보는건 어떨까요 ??
그래야 Suspense 씌울 때 로딩처리가 더 깔끔하지 않을까? 싶습니다 !

오 그러네요! 감사합니다 수정해보겠습니다!

HoberMin · 2024-07-08T00:39:53Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentReplyItem.tsx

+        createdAt={createdAt}
+        isOwnComment={isOwnComment}
+      >
+        <CommentReplyItemMenu replyId={replyId} isOwnComment={isOwnComment} />


해당내용도 위랑 동일합니다 : )

HoberMin · 2024-07-08T00:40:55Z

src/app/(post)/result/[postId]/_components/CommentList/CommentItem/CommentRootItem.tsx

+  comment,
+}: CommentRootItemProps) => {
+  const { commentId, nickname, content, createdAt, userId } = comment;
+  const commentIdFromSearchParams = useSearchParams().get('commentId');


이부분은 단순 궁금증? 이었는데, commentId는 parameter가 아니라 쿼리스트링으로 관리한 이유가 있을까요 ?
기존에 ID값들은 모두 parameter로 한 것 같아서요 !

제가 실제 환경에서 띄워놓고 테스팅 하면 좋을 것 같은데 현재 그걸 못해봐서 .. 따로 여쭤봅니다 !
혹시 RootItem이랑, ReplyItem이랑 하나의 파일에서 분리하는건 불가능했을까요 ?
뭔가 동작은 같고, UI랑 드롭다운만 다를 것 같아 여쭤봅니다

가능할것같습니다!

다만 한파일 에서 분리하면 조건 문이 생길 것 같습니다. 추후에 다른 commentItem 종류가 생긴다면 더 복잡해질 것같습니다. 변경의 크기도 reply, root 정도의 크기로 정하는게 좋을것 같아 파일단위를 정했습니다.

그래서 중복을 제거하는 방법으로, 파일을 통합하여 조건문으로 분리 하지말고 중복되는 부분만 함수로 빼는 것이 어떨까 싶은데 ,, 혹시 어떻게 생각하실까요?!

commentId 는 CommentForm 에서도 사용됩니다.

commentId 가 세그먼트 로 관리되면, CommentForm 이 특정 페이지에서 관리 되어 모달을 사용하더라도 CommentList 나 post 정보 ui 가 사라집니다.

구현하고나서 Parallel Routes 라는걸 알았는데, 요걸로 리팩토링 하면 세그먼트로 작성해도될것같습니다.

HoberMin · 2024-07-08T00:43:22Z

src/app/(post)/result/[postId]/_components/CommentList/index.tsx

+      <div className='font-h3-sm border-t border-gray-accent2 px-4 py-5'>
+        댓글 {commentSize}
+      </div>
+      <div className=' flex flex-col divide-y divide-gray-accent2'>


Suggested change

<div className=' flex flex-col divide-y divide-gray-accent2'>

<div className='flex flex-col divide-y divide-gray-accent2'>

공백있습니다 !

HoberMin · 2024-07-08T00:43:59Z

src/app/(post)/result/[postId]/_components/CommentList/index.tsx

+        댓글 {commentSize}
+      </div>
+      <div className=' flex flex-col divide-y divide-gray-accent2'>
+        {comments.map((rootComment, idx) => (


rootComment 구조분해할당 해서 쓰는건 어떨까요 ? 가독성이 많이 좋아질 것 같슴다

HoberMin · 2024-07-08T00:46:16Z

src/app/(post)/result/[postId]/_components/CommentModalForm/CommentForm.tsx

+export type CommentFormValues = {
+  comment: string;
+};
+
+const CommentForm = ({
+  isOpenModal,
+  onCloseModal: closeModal,
+}: CommentFormProps) => {
+  const { postId } = useParams() as { postId: string };
+  const method = useSearchParams().get('method') as 'create' | 'update' | null;
+  const target = useSearchParams().get('target') as 'root' | 'reply' | null;
+  const comments = useGetCommentsAPI(postId);
+  const commentId = useSearchParams().get('commentId');


Suggested change

export type CommentFormValues = {

comment: string;

};

const CommentForm = ({

isOpenModal,

onCloseModal: closeModal,

}: CommentFormProps) => {

const { postId } = useParams() as { postId: string };

const method = useSearchParams().get('method') as 'create' | 'update' | null;

const target = useSearchParams().get('target') as 'root' | 'reply' | null;

const comments = useGetCommentsAPI(postId);

const commentId = useSearchParams().get('commentId');

type MethodQueryStringType = 'create' | 'update' | null

const CommentForm = ({

isOpenModal,

onCloseModal: closeModal,

}: CommentFormProps) => {

const { postId } = useParams() as { postId: string };

const method = useSearchParams().get('method') as MethodQueryStringType

const target = useSearchParams().get('target') as 'root' | 'reply' | null;

const comments = useGetCommentsAPI(postId);

const commentId = useSearchParams().get('commentId');

간단한 comment는 그냥 아래서 단언으로 선언해주고 유니언타입을 오히려 선언해주는게 가독성이 더 좋아질 것 같아요

HoberMin · 2024-07-08T00:47:23Z

src/app/(post)/result/[postId]/_components/CommentModalForm/CommentForm.tsx

+  }, [isUpdateComment, selectedComment, setValue, setFocus]);
+
+  return (
+    <div className='p-4'>


div에서 패딩주고 form에서 또주면 이상한 것 같아요 ! form에서 마진을 주던지와 같이 해서 수정해볼 수 있지않을까요 ?

form 이 w-full 로 되어있어서 margin 을 주면 다음과 같이깨집니다.. 혹시 방법이있을까요?!

ienrum added 24 commits June 19, 2024 18:02

chore: radix dropdown 패키지 추가

d941ec2

feat: DropDown 컴포넌트 추가

5cc0826

refactor: CommentItem 이동 및 dropdown 적용

d24b3be

chore: dropdown 컴포넌트 삭제

0673496

feat: DropdownMenu 컴포넌트 사용

b59c1fb

feat: useModal 구현

e9ab444

feat: 드롭다운 메뉴에 confirmation 모달 적용

c2242c9

refactor: OwnCommentChip 이동

b1ad913

refactor: CommentMenu 로 분리

f1985e1

refactor: CommentMenu 에 수정하기, 삭제하기 그리고 신고하기 를 분리

757c01a

style: commentMenu 드롭다운 bg 수정

affbf6f

feat: delete, update comment api 추가

a374203

fix: put 을 patch 로 수정

aebdb80

refactor: Modal 컴포넌트 css 삭제

b6fea86

feat: commentMenu 에서 commentId 쿼리params 제공

9f0ca73

refactor: update 기능 추가와 input 클릭 혹은 commentId 존재시 modal 띄우기로 변경

f968fef

style: 기본 등록 링크 회색으로 변경

1787ea8

refactor: useModal open 과 close 함수에 useCallback 감싸기

5ab3e9c

refactor: CommentForm 에 useModal 사용

919181c

refactor: CommentForm 리팩토링

5d2c08d

refactor: CommentForm 에서CommentInput 과 CommentFormModal 분리

4ebd8fe

refactor: 변수명 변경

2031e4c

refactor: 신고하기 기능 삭제

29c7a2a

refactor: 내 댓글만 메뉴 아이콘 보이게설정

a0af523

ienrum added ✨Feature 새로운 기능 추가 ⚙️ Chore 의존성 변경, 설정변경 labels Jun 28, 2024

ienrum requested review from HoberMin and hyeonjinan096 June 28, 2024 12:31

ienrum self-assigned this Jun 28, 2024

ienrum added 23 commits June 29, 2024 17:21

feat: 답글 달기 적용

613da3d

refactor: reply icon 적용 및 관련 css 리팩토링

fb4d8da

refactor: CommentMenu를 reply,root commentItem 에서 내려주도록 수정

6c4f0d3

refactor: Comment Reply,Root ItemMenu 컴포넌트 로 분리

0f73173

refactor: CommentItem 관련 파일 이름 변경

a4e5a2f

feat: reply delete api 추가 및 적용

33a7ada

refactor: CommentForm page.tsx 로 이동

7407056

refactor: result 페이지의 파라미터 수정

796e971

refactor: CommentFormModal 컴포넌트 수정

28c1bb7

refactor: selectedComment 분기 로직 수정

3862d51

refactor: CommentFormModal 안으로 useModal 숨기기

2d7afdd

refactor: CommentForm 관련 컴포넌트들 리팩토링

a509ad6

fix: method,target null 검사추가

06f1772

style: CommentForm input 창 넘치는 버그수정

250039c

refactor: CommentFormModal 변수명 리팩토링

b7196f0

refactor: api method patch to delete

76ffbe4

refactor: Comments 폴더를 CommentList 로 변경

c485062

style: CommentReplyItem 의 isFirstChild props 삭제

0730e3a

refactor: CommentButton to CommentModalButton

b878fe7

refactor: CommentFormModal 관련 컴포넌트들 리팩토링

02b7a99

refactor: console.log 삭제

b6ba02b

refactor: reply icon svg 변경

ac9938b

style: comment 관련 스타일 수정

309c05d

hyeonjinan096 reviewed Jul 3, 2024

View reviewed changes

HoberMin approved these changes Jul 8, 2024

View reviewed changes

ienrum added 5 commits July 10, 2024 20:18

refactor: CommentItemMenu 과 CommentReplyItem 의 icon에 aria-label 추가

bfdfdaa

refactor: 함수이름 구체화

1774a4f

style: 튀어나오는 부분 수정

aa005fa

refactor: Trigger 의 asChild 제거

c8361ca

refactor: CommentItemMenu.Button to CommentItemMenu.Item

447e0d4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#125] Feat: 댓글 수정 삭제 기능 구현 #140

[#125] Feat: 댓글 수정 삭제 기능 구현 #140

ienrum commented Jun 28, 2024 •

edited

Loading

github-actions bot commented Jun 28, 2024

hyeonjinan096 left a comment

hyeonjinan096 Jul 3, 2024

ienrum Jul 10, 2024

hyeonjinan096 Jul 3, 2024

ienrum Jul 10, 2024

hyeonjinan096 Jul 3, 2024

ienrum Jul 10, 2024

hyeonjinan096 Jul 3, 2024

hyeonjinan096 Jul 3, 2024

ienrum Jul 10, 2024

HoberMin left a comment

HoberMin Jul 8, 2024

ienrum Jul 10, 2024 •

edited

Loading

HoberMin Jul 8, 2024

ienrum Jul 10, 2024

HoberMin Jul 8, 2024

ienrum Jul 10, 2024

HoberMin Jul 8, 2024

HoberMin Jul 8, 2024

HoberMin Jul 8, 2024

ienrum Jul 10, 2024

ienrum Jul 10, 2024

HoberMin Jul 8, 2024

HoberMin Jul 8, 2024

HoberMin Jul 8, 2024

HoberMin Jul 8, 2024

ienrum Jul 10, 2024

	<div className=' flex flex-col divide-y divide-gray-accent2'>
	<div className='flex flex-col divide-y divide-gray-accent2'>

[#125] Feat: 댓글 수정 삭제 기능 구현 #140

Are you sure you want to change the base?

[#125] Feat: 댓글 수정 삭제 기능 구현 #140

Conversation

ienrum commented Jun 28, 2024 • edited Loading

💬 Issue Number

🤷‍♂️ Description

📷 Screenshots

두번째 결과물(대댓글,댓글 하이라이트)

👻 Good Function

📋 Check List

📒 Remarks

github-actions bot commented Jun 28, 2024

hyeonjinan096 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HoberMin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ienrum Jul 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ienrum commented Jun 28, 2024 •

edited

Loading

ienrum Jul 10, 2024 •

edited

Loading