Feat: 리스트 상세 페이지 기능 구현(리스트 삭제, 존재하지 않는 리스트 처리, 유저 정보에 따른 ui 처리) 및 리팩토링 #31

Nahyun-Kang · 2024-02-14T18:43:22Z

개요

개요는 변경 사항 및 관련 이슈에 대해 간단하게 작성해주세요.
해당 PR에 대한 리뷰어와 라벨을 생성해 주세요.

작업 사항

QA 전에 필요한 전반적인 기능을 수정, 리팩토링하였습니다.

기능 구현

리스트 삭제 모달 추가
존재하지 않는 리스트 (404) 에러 처리
콜라보레이터일 경우에도 리스트 수정이 가능하도록 처리(리스트 삭제는 disabled)
유저 로그인 정보에 따른 비회원, 회원 ui 분기 처리
공용 헤더 반영
댓글 및 답글 생성, 삭제, 조회 기능 구현
댓글 무한스크롤, 스켈레톤 ui
논리 삭제된 댓글(즉, 답글이 남아있는 댓글)에 대한 처리

리팩토링 관련

1차 mvp QA 내용 반영
전반적인 디자인 여백 수정
필요없는 코드 삭제
타입 정리(_api 부분과 유진님께서 정리해주신 타입 반영)
코드에 대한 주석 추가
css 공용 색상 반영

참고 사항 (optional)

QA 전에 최대한 할 수 있는 것까지는 해보았는데 놓친 부분이 있을 수 있습니다..🥹

스크린샷

리뷰어에게

@kanglocal 바텀시트 부분 disabled 처리를 위해 코드가 추가되었고, 리스트 상세 조회 api에 listId가 따로 없어서 ListDetailInner 부분에 일부 코드를 추가해주었습니다..! 확인해주시고 수정할 부분 있으면 말씀해주시면 감사드리게습니다!🙇‍♀️

vercel · 2024-02-14T18:43:27Z

@Nahyun-Kang is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

Nahyun-Kang · 2024-02-14T18:49:19Z

src/app/layout.tsx

@@ -34,6 +34,7 @@ export default function TempLayout({ children }: { children: ReactNode }) {
        <QueryClientProvider client={queryClient}>
          <div id="modal-root" />
          <div>{children}</div>
+          <ToastContainer />


다시 복구해놓았습니다..🥹 죄송합니다..담부턴 꼼꼼히 체크할게용

Eugene-A-01

84개의 커밋..
제인생에 이런 숫자를 다시 볼 수 있을까요
귀하네요..✨

seoyoung-min

나현님 정말,,, 커밋수 보고도 놀랐지만 코드 보고도 너무 놀랐어요..!
정말 엄청 많은 경우의 수와 상황이 있을 것 같은데, 너무 고생하셨고 감사합니다🙇‍♀️🥹💗

seoyoung-min · 2024-02-15T06:10:17Z

src/app/_api/comment/createComment.ts


+async function createComment({ listId, comment }: CreateCommentType) {


➡️ 화살표 함수로 바꿔야 할 것 같아요~!

seoyoung-min · 2024-02-15T06:17:17Z

src/app/_api/comment/getComments.ts

+
+//리스트 상세 페이지 리스트 조회 api
+async function getComments({ listId, cursorId }: GetCommentsType) {
+  const params = new URLSearchParams({


우와 이렇게 객체형식으로 넣어주면 쿼리 형태로 바꿔 주는가봐요!! 배워갑니다!!💗
+) 댓글 받아오는 사이즈를 5개로 정하신 이유가 (단순) 궁금합니다!!👀

(저도 소현님 PR로 어깨넘어 배운건데 감사합니다 ㅎㅎ👍) 5개로 한 이유는 무한스크롤이 잘 되는지 확인하기 위해 5개로 설정한 것이었는데 IA 보고 공통 개수로 수정해두겠습니다..!! 발견 감사드려용..👍

seoyoung-min · 2024-02-15T06:36:28Z

src/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet.css.ts

+export const disabledSheetItemWrapper = style({
+  ':hover': {
+    backgroundColor: '#ffffff',
+  },
+});
+
+export const disabledSheetItem = style({
+  cursor: 'not-allowed',
+  selectors: {
+    [`${sheetItemWrapper}:hover &`]: {
+      color: '#e9e9e9',
+    },
+  },
+});


요기도 공용색상 사용해도 좋을 것 같아요! 🎨

var.color.white
var.color.gray5

seoyoung-min · 2024-02-15T06:49:57Z

src/app/user/[userId]/list/[listId]/_components/ListDetailInner/Footer.tsx

-import BottomSheet from '@/app/[userNickname]/[listId]/_components/BottomSheet/BottomSheet';
-import ModalPortal from '@/components/ModalPortal';
+import BottomSheet from '@/app/user/[userId]/list/[listId]/_components/BottomSheet/BottomSheet';
+import ModalPortal from '@/components/modal-portal';


modal-portal을 케밥으로 해주신 이유가 무엇인지 궁금합니다!!🙇‍♀️

엇 서영님 혹시 모달포탈이 케밥으로 되어있는 부분이 어디일까용..?! 🥲

seoyoung-min · 2024-02-15T06:57:23Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CollaboratorsPopOver.tsx

+              <Image
+                src={item.profileImageUrl}
+                className={styles.profileImage}
+                alt="사용자 프로필 이미지"
+                width={25}
+                height={25}
+                style={{
+                  objectFit: 'cover',
+                }}


제가 아는 바로는 obejectFit 속성은 Image컴포넌트 사이작 fill일때 적용이 되는 것 같아요~! 부모div를 만들어 사이즈 지정 & position:relative 주고, Image 컴포넌트는 fill 속성으로 대체하면 어떨까요??

Suggested change

<Image

src={item.profileImageUrl}

className={styles.profileImage}

alt="사용자 프로필 이미지"

width={25}

height={25}

style={{

objectFit: 'cover',

}}

<div className={styles.profileWrapper} > {/*프로필이미지 부모. width=25, height=25, position:relative*/}

<Image

src={item.profileImageUrl}

className={styles.profileImage}

alt="사용자 프로필 이미지"

fill

style={{

objectFit: 'cover',

}}

</div>

오매낫 사용법을 제대로 모르고 사용하고 있었군용.. 🫠 정말 감사합니다.. 당장 바꾸겠습니다!

seoyoung-min · 2024-02-15T07:16:27Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx

+  const comments = useMemo(() => {
+    const totalCount = commentsData ? commentsData.pages[commentsData.pages.length - 1].totalCount : 0;
+    const commentsList = commentsData ? commentsData.pages.flatMap(({ comments }) => comments) : [];
+    return { commentsList, totalCount };
+  }, [commentsData]);
+


useMemo를 이럴때 이렇게 쓰는거군요! 배워갑니다🥹👍👍
flatMap이라는 건 처음 보네요!
와 저에게는 엄청 어렵습니다! 이따 직접 여쭙겠습니다 🥰
(완료~! 감사합니다 🙇‍♀️)

seoyoung-min · 2024-02-15T07:17:28Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx

+    setCommentId(id);
+  };
+
+  //댓글 폼 사용(추후 리액트 훅폼으로 수정해 볼 예정)


어서 리액트 훅 폼의 세계로...⭐️

seoyoung-min · 2024-02-15T07:27:31Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/CommentsSkeleton.tsx

우왓 스켈레톤 까지!!

seoyoung-min · 2024-02-15T07:28:44Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx

+        <button className={styles.buttonResetStyle} onClick={handleHistoryButtonClick}>
+          <HistoryButton alt="히스토리 버튼" />
+        </button>
+        {/* {리스트 관리 버튼은 리스트 오너일 때만 보이게 하기} */}


요거 너므 사소하지만 주석 "리스트 오너, 콜라보레이터"로 바꿔도 좋을 것 같아요!!

seoyoung-min · 2024-02-15T07:31:46Z

src/components/exploreComponents/TrendingLists.tsx

+            <SwiperSlide
+              key={item.id}
+              className={styles.swiperSlide}
+              onClick={() => {
+                router.push(`/user/${item.ownerId}/list/${item.id}`);
+              }}
+            >


👍👍👍

ParkSohyunee

나현님, 리뷰 늦게 드려 죄송합니다..
댓글/답글 로직, 권한, UI, 인터랙션 등 디테일한 부분이 많았을텐데 구현하시느라 정말 고생많으셨습니다!! 👍🥰 덕분에 많은 부분 얻어갑니다!! 감사합니다. 🙇‍♀️

ParkSohyunee · 2024-02-15T15:35:37Z

src/app/_api/comment/createComment.ts

+    `/lists/${listId}/comments`,
+    {
+      content: comment,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }


나현님, axios 요청보낼때 content와 headers를 따로 명시하신 이유가 궁금합니다!!

요청이 안 가지길래 요 문제인 줄 알고 추가해봤는데 아니었더라구요... 삭제해두겠습니다!!

ParkSohyunee · 2024-02-15T15:36:11Z

src/app/_api/comment/createReply.ts

+interface CreateReplyType {
+  listId: number | undefined;
+  commentId: number | undefined | null;
+  data: string;


undefined는 옵셔널로 수정해도 좋을 것 같습니다!!

ParkSohyunee · 2024-02-15T15:42:15Z

src/app/_api/comment/createReply.ts

+async function createReply({ listId, commentId, data }: CreateReplyType) {
+  if (commentId === null) {
+    return;
+  }


나현님 궁금한점이 commentId가 null일 수도 있는 것인가요?? 댓글이 삭제된 경우를 의미하는 것인가용??

앗 저 commentId는 댓글 작성중일 때를 의미합니당..! 하나의 폼에서 댓글 / 답글 요청을 다 보내다보니 답글 작성중일 때 어떤 댓글에 대하여 답글을 작성중인지 정보가 필요해서 setState로 관리해주고 있었습니다..! 근데 변수명이 오해의 소지가 있는 것 같아서 CurrenCommentId 요런 느낌으로 고쳐봐야겠습니다!

ParkSohyunee · 2024-02-15T15:45:00Z

src/app/_api/comment/deleteComment.ts

+async function deleteComment({ listId, commentId }: DeleteCommentType) {
+  const response = await axiosInstance.delete(`/lists/${listId}/comments/${commentId}`);
+  return response.data;
+}
+
+export default deleteComment;


delete 후에 response로 받는 데이터가 있는 것인지 궁금합니다!!

흑흑 코드 복붙의 흔적이 여기저기(Post 요청에서 가져온 것 같습니당).. 깔끔하게 정리를 못해서 부끄럽습니다.. 감사합니다!!

ParkSohyunee · 2024-02-15T15:46:18Z

src/app/_api/list/deleteList.ts

+//댓글 삭제 api
+async function deleteList(listId: string | undefined) {


나현님, undefined는 옵셔널로 처리해 주는 것이 더 좋을 것 같은데 나현님 생각은 어떠신가요..? 🤔

ParkSohyunee · 2024-02-15T16:00:49Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/Comments.tsx

+  //댓글/답글 폼 submit 함수
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!userId) {
+      return;
+    }
+    if (commentId && activeNickname) {
+      createReplyMutation.mutate();
+      return;
+    }
+    createCommentMutation.mutate();
+  };


나현님, 조건에 따른 댓글/답글 로직이 복잡하셨을 것 같은데 해당 컴포넌트에서 깔끔하게 정리해 주신 것 같습니다!👍👍🏄‍♀️

사실 소현님 PR 보고 많이 참고했습니다..!!🥰 제 교재같은 소현님 PR..

ParkSohyunee · 2024-02-15T16:01:41Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx

+    enabled: !!params?.listId,
+    retry: 0,


ParkSohyunee · 2024-02-15T16:05:49Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx

+  //리스트 생성자 제외한 사람들만 콜라보레이터들로 설정
+  const filteredCollaboratorsList = list?.collaborators.filter((item: UserProfileType) => item?.id !== list.ownerId);
+  //리스트 오너가 아니고 콜라보레이터인 경우에 권한을 설정하기 위한 변수
+  const isCollaborator: boolean | undefined =
+    list?.collaborators.some((item: UserProfileType) => item?.id === userId) && userId !== Number(params?.userId);
+


와우! 이렇게 조건에따라 변수에 먼저 할당하는 부분 너무 좋은 것 같습니다!☺️
+. 사소하지만 변수명 collaborators와 list가 중복된 느낌이라서 filteredCollaborators 로만 이름 지어줘도 좋을 것 같습니다.
+. some을 사용하신 점 좋네요!

ParkSohyunee · 2024-02-15T16:07:48Z

src/app/user/[userId]/list/[listId]/_components/ListDetailOuter/ListInformation.tsx

+
+  if (error && error?.message.includes('404')) {
+    return (
+      <Modal handleModalClose={handleSetOff}>
+        <Modal.Title>이 리스트는 삭제 또는 비공개 처리 되었어요.</Modal.Title>
+        <Modal.Button onCancel={handleSetOff} onClick={handleConfirmButtonClick}>
+          확인
+        </Modal.Button>
+      </Modal>
+    );
+  }
+


나현님 이 부분이 리스트 없을때 커스텀 404인 것인가요? 👍
(+. 내일 자세하게 여쭤봐도 될까요?? ㅎㅎ)

넵..!! 페이지로 따로 뺄까 고민하다가 로직이 이게 맞는지 확신이 들지 않아서 요렇게 썼습니당... 더 좋은 방향으로 바꿔볼 수 있는 피드백이 있다면 언제든지 말씀해주세요..!!🥹

ParkSohyunee · 2024-02-15T16:12:31Z

src/hooks/useInfiniteScroll.ts

+const useInfiniteScroll = (handler: () => void) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  //scroll로 한 번 도전해봤는데 ref wrapper 자체가 clientHeight보다 작으면 문제가 생겨서 document로 걸어주었습니다 ㅠ


나현님 혹시 해당 hook은 어디서 사용되는 것인가용? 다른 코드에서 못본것 같아서 확인차 여쭤봅니다!!

소현님 훅 만드신 거 보자마자 버린 파일인데 삭제를 못했네요..🥲 얼른 잽싸게 지우겠습니다!!

Nahyun-Kang · 2024-02-16T08:35:56Z

@seoyoung-min @ParkSohyunee @Eugene-A-01 시간내주셔서 꼼꼼하게 리뷰해주셔서 감사합니다!! 소중한 의견들 모두 반영해서 다음 PR 때 올리도록 하겠습니다🙇‍♀️

Nahyun-Kang added 30 commits February 7, 2024 17:05

Feat: 리스트 상세 조회 api 연결

3154db7

Feat: comment create 일부 구현

edbeb10

Feat: 댓글 로직 구현

f07032a

Chore: 서영님 PR git pull

318e0ce

Feat: 댓글 조회 데이터 바인딩

ecd8f9b

Feat: useQuery 함수 일부 수정

cfc19e5

Feat: comment 타입 지정

1c5318c

Design: (1차mvp) QA 댓글 wrapper gap 조정

7ba8277

Design: (1차 mvp QA) collaborators default profile 아웃라인 깨짐 현상 수정

ab43873

Fix: 바뀐 url에 맞게 폴더 구조 변경

1925356

Fix: 폴더구조 바꾸면서 생긴 경로 에러 처리

a700f4e

Merge branch 'dev' into feature/list-detail-outer-api

5f80555

Chore: 필요없는 파일 삭제

c0ee52d

Refactor: collaborators 매직 넘버 없애기

163e887

Refactor: 이미지 태그 클로징 태그 삭제

d861765

Refactor: 파일 이름 정리

5f8f68b

Feat: 리스트 상세 페이지 floating button 추가

8ad6e12

Refactor: 리스트 상세 페이지 페이지명 수정

5553318

Chore: 충돌 해결

e8dab24

Design: 콜라보레이터 팝오버 그림자, 불투명도 수정

2c3837b

Feat: 답글 없으면 답글 구분선 안 보이게 하기

8204372

Feat: 댓글 생성 기능 구현

9c19e97

Fix: 댓글 작성자 안 나오는 문제 해결

616a64d

Refactor: comment type 정리

5286f6f

Fix: 답글 타입 정리 및 사용자 이름 안 보이는 문제 해결

eb35479

Feat: 댓글 삭제 기능 구현

6c84634

Feat: 리스트 수정하기 기능 구현

671bf45

Feat: 리스트 삭제 기능 구현

a758c29

Design: 댓글, 답글 간격 조정

898244d

Design: 답글 간격 조정

30a82a7

Nahyun-Kang added 10 commits February 15, 2024 01:21

Feat: 바텀시트 리스트 삭제 권한 로직 수정

a7e6f57

Refactor: collaborators.tsx / collaborators.css.ts 리팩토링

7cdc7a3

Refactor: collaboratorspopover.tsx / collaboratorpopover.css.ts 리팩토링

b6613ab

Refactor: comments.tsx, style 리팩토링

985ff7a

Refactor: reply.tsx, style 리팩토링

cae35fb

Refactor: comments.tsx, style 리팩토링

1f181d9

Refactor: headerRight.tsx 와 style 리팩토링

485abe7

Refactor: listinformation.tsx와 style 리팩토링

80b6269

Chore: 지금 사용하지 않는 컴포넌트 삭제

75a7d22

Design: 세부 여백, 디자인 수정

bb8ead3

Nahyun-Kang added Feat 구현 Refactor 리팩토링 Design UI 수정 Style 코드 스타일 변경 labels Feb 14, 2024

auto-assign bot requested review from Eugene-A-01, kanglocal, ParkSohyunee and seoyoung-min February 14, 2024 18:43

auto-assign bot assigned Nahyun-Kang Feb 14, 2024

Chore: 필요없는 파일 및 목데이터 폴더 삭제

7815a57

Nahyun-Kang commented Feb 14, 2024

View reviewed changes

Style: 타입명 대문자로 수정

fca16c0

Eugene-A-01 approved these changes Feb 15, 2024

View reviewed changes

seoyoung-min approved these changes Feb 15, 2024

View reviewed changes

Chore: dev와의 충돌 해결

1d4a404

Nahyun-Kang merged commit 9e6128b into 8-Sprinters:dev Feb 15, 2024
0 of 2 checks passed

Nahyun-Kang deleted the feature/list-detail-outer-api branch February 15, 2024 08:24

ParkSohyunee reviewed Feb 15, 2024

View reviewed changes


		async function createComment({ listId, comment }: CreateCommentType) {

		//댓글 삭제 api
		async function deleteList(listId: string \| undefined) {

Feat: 리스트 상세 페이지 기능 구현(리스트 삭제, 존재하지 않는 리스트 처리, 유저 정보에 따른 ui 처리) 및 리팩토링 #31

Feat: 리스트 상세 페이지 기능 구현(리스트 삭제, 존재하지 않는 리스트 처리, 유저 정보에 따른 ui 처리) 및 리팩토링 #31

Conversation

Nahyun-Kang commented Feb 14, 2024 • edited Loading

개요

작업 사항

기능 구현

리팩토링 관련

참고 사항 (optional)

관련 이슈 (optional)

스크린샷

리뷰어에게

vercel bot commented Feb 14, 2024

Choose a reason for hiding this comment

Eugene-A-01 left a comment

Choose a reason for hiding this comment

seoyoung-min 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

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

ParkSohyunee 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

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

Nahyun-Kang commented Feb 16, 2024 • edited Loading

Nahyun-Kang commented Feb 14, 2024 •

edited

Loading

Nahyun-Kang commented Feb 16, 2024 •

edited

Loading