[김치영] sprint7

[Chiman2937]

요구사항

기본

체크리스트 [기본]
상품 상세

• 상품 상세 페이지 주소는 "/items/{productId}" 입니다.

• response 로 받은 아래의 데이터로 화면을 구현합니다.
  => favoriteCount : 하트 개수
  => images : 상품 이미지
  => tags : 상품태그
  => name : 상품 이름
  => description : 상품 설명

• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다

상품 문의 댓글

• 문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다
  => image : 작성자 이미지
  => nickname : 작성자 닉네임
  => content : 작성자가 남긴 문구
  => description : 상품 설명
  => updatedAt : 문의글 마지막 업데이트 시간

심화

• 모든 버튼에 자유롭게 Hover효과를 적용하세요.

배포

https://sprint-mission-kcy.netlify.app/

주요 변경사항

• 폴더 관리 구조 변경
• sprint7 요구사항 반영
• sprint6 미션 수정에 대한 내용은 별도로 PR 올리겠습니다.

스크린샷

반응형 디자인(PC)

반응형 디자인(TABLET, MOBILE)

댓글 없는 페이지

문의하기 버튼 활성화

댓글 수정

로딩 스피너 적용

멘토에게

1. z-index 관리

케밥버튼 및 드롭다운 구현할 때 아래와 같이 다음 댓글에 의해 드롭다운이 가려지는 문제가 있었습니다. (예시)

z-index state를 만들어서 드롭다운이 활성화 된 댓글만 z-index 우선순위를 높이는 방식으로 해결하려고 했는데요, 현재 컴포넌트 구조는 이렇습니다.
(굳이 CommentView가 있는 이유는 CommentCard 안에서 CommentView와 CommentEditForm 중 하나를 렌더링 하기 위해서 입니다)

├─ CommentsContainer
│ ├─ CommentCard
│ │ ├─ CommentView
│ │ │ ├─ KebabMenu(DropDown)

CommentCard가 댓글 한개의 최상위 컴포넌트여서 여기에 z-index를 적용하려면 KebabMenu의 isKebabSelected State를 Comment Card까지 끌어올려서 사용해야하는 문제가 있었고,

이 문제를 최대한 해결하기 위해 CommentCard에서 별도로 z-index state를 만들었고, handleKebabOpen, handleKebabClose 이벤트를 KebabButton에 props로 전달해서 z-index State를 변경하도록 만들었습니다.

  const handleKebabOpen = () => {
    setZIndex(1);
  };

  const handleKebabClose = () => {
    setZIndex(0);
  };

이런식으로 해결은 했는데 결과적으로 KebabButton의 props는 늘어났고.. 이게 최선의 방법인지 모르겠습니다. 더 좋은 방법이 있을까요?

2. DropDown 커스텀

DropDown을 커스텀하면서 아래와 같이 Button과 DropDown을 하나의 컴포넌트로 구현했는데요, 따로 나눠서 만드는게 더 확장성이 좋을까요?

return (
    <div className={styles["container"]}>
      //KebabButton
      <img
        name={id}
        className={styles["kebab-button"]}
        src={"/images/ic_kebab.png"}
        width={24}
        onClick={handleKebabClick}
        ref={kebabRef}
      />
      //DropDown
      {isKebabSelected && (
        <ul className={styles["dropdown-menu"]} ref={DropDownRef}>
          {menuItems.map(({ label, onClick }) => (
            <li className={styles["dropdown-button"]} key={label} onClick={onClick}>
              {label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );

3. 컴포넌트 분리

이번 미션7은 진행하면서 최대한 가독성/역할 분리에 초점을 맞추고 진행을 했는데 개선해야 할 점이 있는지 궁금합니다.

그 외

처음에 완전히 플랫하게 작업 한 후, 필요에 따라 컴포넌트를 분리하는 식으로 작업하고 있는데 이 부분에서 시간이 상당히 많이 걸리는 것 같습니다... 연습하다보면 빨라지겠죠? 처음부터 어느정도는 분리를 해주면서 작업을 해야할까요? 😂

• sprint6 미션 수정에 대한 내용은 별도로 PR 올리겠습니다.