Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 콜렉션 상세페이지 및 폴더 이름 변경, 삭제 기능 개발 #260

Merged

Conversation

ParkSohyunee
Copy link
Contributor

개요

  • 콜렉션 상세페이지를 구현했습니다.

작업 사항

  • 콜렉션 상세페이지 UI 퍼블리싱
    • 배경이미지 유무에 따른 스타일 variants 적용
  • 폴더 이름 수정하기 API 연동 및 기능 개발
  • 폴더 삭제하기 API 연동 및 기능 개발
  • 콜렉션 리스트 조회 API 연동
  • BottomSheet 컴포넌트 Compound Component 패턴으로 리팩토링

참고 사항 (optional)

  • 콜렉션 상세 조회 API Response 필드에 폴더네임 추가 요청드린 상태입니다. (백엔드)
  • 이후 다음의 작업 진행 예정입니다.
    • 콜렉션 리스트들 무한스크롤 적용
    • 코드 리팩토링

스크린샷

콜렉션 상세페이지

  • 리스트를 만들때 순위까지 아이템 제목으로 넣어버려서 아이템 순위가 두번 그려졌습니다.😅
image

바텀시트

image image image

애니메이션 확인 (수정 버튼 -> 폴더 이름 변경하기 -> 취소)

Oct-24-2024 23-44-29


리뷰어에게

  • 코드 리뷰로 코멘트 남기겠습니다.
  • 이전에 해당 내용으로 올린 PR에서 동일 브랜치 사용하려다 이전 커밋기록까지 전부 포함되어 새로운 브랜치 따서 다시 PR 올리는점 참고 부탁드립니다ㅠㅠ 다음번엔 주의하도록 하겠습니다!

Copy link

vercel bot commented Oct 25, 2024

@ParkSohyunee 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.

Copy link
Contributor

@seoyoung-min seoyoung-min left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

소현님 코드리뷰 답변주신 것, 반영해주신 것 모두 확인했습니다!! ⭐️👍
page별 컴포넌트는 '_components' 폴더에서 관리하고 있었다는 걸 잠시 잊었네요ㅠㅠ!!
답변 주셔서 감사합니다~!!

Comment on lines +14 to +42
export default function ShapeSimpleList({ list, hasImage }: ShapeSimpleListProps) {
return (
<Link
href={`/list/${list.id}`}
className={styles.contentVariant[hasImage ? 'round' : 'square']}
style={assignInlineVars({
[styles.imageUrl]: `url(${hasImage ? list.representativeImageUrl : ''})`,
})}
>
<div className={styles.category}>{list.category}</div>
<div className={styles.info}>
<h3 className={styles.title[hasImage ? 'white' : 'black']}>{list.title}</h3>
<p className={styles.owner[hasImage ? 'white' : 'black']}>{list.ownerNickname}</p>
</div>
<ul className={styles.items}>
{list.listItems.map((item) => (
<li key={item.id} className={styles.itemVariant[hasImage ? 'blue' : 'white']}>
<span>
{item.rank}
{`.`}
</span>
<span>{item.title}</span>
</li>
))}
</ul>
<p className={styles.date[hasImage ? 'white' : 'black']}>{formatDate(list.updatedDate)}</p>
</Link>
);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kanglocal 현지님, 콜렉션 리스트 및 검색페이지에서도 사용하는 Simple리스트를 ShapeSimpleList 공통 컴포넌트로 만들어 두었습니다. 검색페이지 작업하실 때 참고 부탁드립니다~!!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@seoyoung-min 서영님, ver3.0 BottomSheet 컴포넌트를 공통 컴포넌트로 만들어 두었습니다. Contents, Button 등 필요에따라 사용하시면 될 것 같습니다~!

@ParkSohyunee ParkSohyunee merged commit a083ac0 into 8-Sprinters:dev Oct 27, 2024
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design UI 수정 Feat 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants