Feat(client): CardList 컴포넌트 구현 - #284
Open
jogpfls wants to merge 15 commits into
Open
Conversation
🎨 Storybook 배포 완료PR 작성자: @jogpfls |
jeonghoon11
reviewed
Aug 11, 2026
|
|
||
| const CARD_MIN_WIDTH = '34rem'; | ||
| const CARD_MAX_WIDTH = '38rem'; | ||
| const GAP = '2rem'; |
Member
Author
There was a problem hiding this comment.
ㅋㅋ fix: memo-list 컴포넌트의 그리드 스타일 상수 정리 반영함요 ^^
jogpfls
commented
Aug 12, 2026
Comment on lines
+49
to
+56
| {/* 카드 선택/드래그, 상세 페이지 연결 전까지 임시 값 전달 */} | ||
| <MemoList | ||
| cards={memosList ?? []} | ||
| isSelected={false} | ||
| isDragging={false} | ||
| onClickCard={() => {}} | ||
| /> | ||
| <div ref={loadMoreRef} /> |
|
|
||
| const CARD_MIN_WIDTH = '34rem'; | ||
| const CARD_MAX_WIDTH = '38rem'; | ||
| const GAP = '2rem'; |
Member
Author
There was a problem hiding this comment.
ㅋㅋ fix: memo-list 컴포넌트의 그리드 스타일 상수 정리 반영함요 ^^
jogpfls
marked this pull request as ready for review
August 12, 2026 09:53
jm8468
reviewed
Aug 20, 2026
Comment on lines
+27
to
+34
| card={{ | ||
| tagList: card.tagList, | ||
| title: card.title ?? '', | ||
| content: card.content ?? '', | ||
| fileCount: card.fileCount ?? 0, | ||
| imageCount: card.imageCount ?? 0, | ||
| createAt: card.createdAt ?? '', | ||
| }} |
Collaborator
There was a problem hiding this comment.
props로 보내는게 많아져서 card 객체를 통째로 보내고 Card 컴포넌트 내부에서 구조 분해 할당으로 데이터를 추출하면 좋을 것 같아요 👍
|
|
||
| useEffect(() => { | ||
| const loadMoreTarget = loadMoreRef.current; | ||
| if (!loadMoreTarget || !hasNextPage || isFetchingNextPage) return; |
Collaborator
There was a problem hiding this comment.
p4) 인지 관점에서 아래 코드처럼 하는 것도 깔끔해져요!
if (!loadMoreTarget) return;
if (!hasNextPage) return;
if (isFetchingNextPage) return;
Collaborator
There was a problem hiding this comment.
card.tsx가 memo-list.tsx에서만 쓰인다면 위치를 옮기는게 좋아보이네용
| isNewAi?: boolean; | ||
| } | ||
|
|
||
| const Card = ({ |
Collaborator
There was a problem hiding this comment.
Card 컴포넌트의 이름 더 구체화하면 어떨까요?
UI 중에 card라는 명칭을 가진 UI가 있어서 의미를 더 드러내면 좋을 것 같아요
twossu
reviewed
Aug 22, 2026
Comment on lines
+25
to
+27
| <Card | ||
| key={card.memoId} | ||
| card={{ |
Member
There was a problem hiding this comment.
행님 이곳에 isNew가 누락된 것 같습니다. isNew를 심폐소생술로 부활시켜야할 것 같다데스⚔️
| export const memoListGrid = style({ | ||
| display: 'grid', | ||
| gridTemplateColumns: columns(2), | ||
| justifyContent: 'safe center', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Summary
CardList 컴포넌트 구현
📚 Tasks
🔍 Describe
카드 리스트 너비 영역 기준으로
0~1060까지는 2줄,1060~는 3줄로 되도록 구현했어요,,,피그마의 그리드 가이드를 참고했습니당
👀 To Reviewer
무한 스크롤은 일단 대충 봐주세요,,, 카드 리스트 스타일 위주로 작업했어요 !
📸 Screenshot
2026-08-12.6.45.51.mov