Feature: 사진목록 마크업 #65
Conversation
yeynii
requested review from
dohun31 and
bullmouse
and removed request for
a team
✅ Deploy Preview for life-4-cut ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
| <p className={'flex-1 text-[13px] leading-3 text-white font-bold'}>{albumName}</p> | ||
| <button className={'absolute right-3'} type={'button'} onClick={handleButtonClick}> | ||
| <button className={'absolute right-3 stroke-white'} type={'button'} onClick={handleButtonClick}> |
There was a problem hiding this comment.
string 타입이고, 탬플릿 리터럴이 아니라면 중괄호는 빼도 될것 같아요! 음.. 혹시 저희가 이것에 대해 논의를 한 적이 있었나요? 만약에 없었다면 같이 이야기해봐도 괜찮을 것 같네요!
| <nav role="tab" className="px-[27px] py-[7px]"> | ||
| <ul className="flex items-center justify-around fill-grey-placeholder"> | ||
| <li> | ||
| <Picture /> | ||
| </li> | ||
| <li> | ||
| <FloatingButton /> | ||
| </li> | ||
| <li> | ||
| <User width={20} height={20} /> | ||
| </li> | ||
| </ul> | ||
| </nav> |
| <div className="w-full flex-1 absolute bottom-0"> | ||
| <div className="flex items-center px-6 py-4 gap-x-[10px] overflow-x-scroll bg-black-80"> | ||
| {Array.from({ length: 10 }).map((_, i) => ( | ||
| <Tag key={i} text={`${i}번`} variant={i % 2 ? 'default' : 'gradient'} /> | ||
| ))} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
만약에 Filter를 다른 컴포넌트 A의 children으로 넣어서 사용하고 있다고 가정해 볼게요!
(부모컴포넌트는 A, 자식컴포넌트는 Filter)
A 컴포넌트의 className에는 반드시 relative가 들어가야 할 것 같아요! (왜냐하면, A의 부모가 relative가 된다면 A가 기준이 아니라 A의 부모를 기준으로 포지셔닝이 되기 때문이에요) 하지만, 이런 방식으로는 코딩을 하게 된다면 부모 컴포넌트에서 relative를 반드시 넣는다는 보장이 없기 때문에 실수가 날 수도 있을 것 같네요..ㅠ
괜찮은 방법이 있을까요? 저는 className 관련 props를 넣어서 className에 넣는 방법이 괜찮겠다는 생각이 들었어요. (컴파운드 컴포넌트 패턴 방식도 있을 것 같다는 생각이 들었지만, 그 방식은 왠지 복잡해질 것 같다는 생각이 들어서..)
그리고 key로 i를 넣었는데, 순서가 바뀌지 않는다는 보장이 있나요? 그렇다면 key로 i를 넣어도 상관은 없을 것 같아요!
| {Array.from({ length: 10 }).map((_, i) => ( | ||
| <AlbumThumbnail key={i} albumName={`${i}번`} memberNum={i} /> |
| <div className="flex flex-1 p-8 gap-5"> | ||
| <div className="flex flex-col flex-1 gap-5"> | ||
| <img src="4cut-vertical.png" alt="" className="w-full object-fill h-3/4" /> | ||
| <div className="flex-1"> |
There was a problem hiding this comment.
flex-1만 쓰여진 경우도 있고, flex flex-1이 쓰여진 경우도 있는데, 둘은 어떤 차이를 가지고 있나요?
| {/* <AlbumPages.ThinVertical /> */} | ||
| {/* <AlbumPages.FatVertical /> */} | ||
| <AlbumPages.FatHorizontal /> |
There was a problem hiding this comment.
음.. 이거 머지되면 저도 AlbumPages를 컴파운드 컴포넌트 방식으로 넣어야겠네요
| } | ||
|
|
||
| #root { | ||
| height: 100vh; |
There was a problem hiding this comment.
🐶 개요
사진목록 페이지 마크업 개발
🐱 설명
사진목록 페이지의 마크업을 개발했어요
반복되는 레이아웃을 MainTemplate으로 뺐어요
🏞️ 스크린샷
🤔 참고사항
#63 , #61 가 먼저 merge된 후에 리뷰해주세요~