myFavoriteIdol #137
myFavoriteIdol #137
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| <div className="w-full min-h-screen bg-[#02000E] flex flex-col items-center font-pretendard"> | ||
| <Header /> |
There was a problem hiding this comment.
bg-midnightBlack으로 쓰시는 게 좋을 거 같아요!
| <div className="w-full max-w-[1200px] flex flex-col items-center py-6 sm:py-10"> | ||
| <h1 className="text-white text-[16px] tablet:text-[20px] pc:text-[24px] font-bold self-start"> |
There was a problem hiding this comment.
첫번째에 sm도 저희는 mobile로 써요!
반응형 써 놓으신 것들은 다 바꾸셔야 할 거에요!
읽으면서 보이면 다 적어 놓겠습니다!
| className={`relative w-[98px] h-[98px] md:w-[128px] md:h-[128px] p-[2px] | ||
| flex items-center justify-center rounded-full | ||
| ${isSelectable ? 'cursor-pointer' : 'cursor-default'} transition-all`} | ||
| onClick={isSelectable ? toggleFavorite : undefined} |
There was a problem hiding this comment.
첫번째에 md는 tablet으로 쓰기로 했어요!
반응형 써 놓으신 것들은 다 바꾸셔야 할 거에요!
읽으면서 보이면 다 적어 놓겠습니다!
| <img | ||
| src={checkIcon} | ||
| alt="check" | ||
| className="absolute w-[40%] h-[40%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30" | ||
| /> |
There was a problem hiding this comment.
저 가운데로 설정하는 css를 진짜 많이 써서 기억해놓으면 좋아요! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 이거요!
| <style> | ||
| {` | ||
| html, body { | ||
| background-color: #02000E; /* 브라우저 전체 배경 */ | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow-x: hidden; /* 가로 스크롤 방지 */ | ||
| } | ||
| `} | ||
| </style> |
There was a problem hiding this comment.
이거 없어도 될 거 같아요! 없어도 크게 문제 없어 보입니다!
| `} | ||
| </style> | ||
| <div className="w-full overflow-x-auto scrollbar-thin scrollbar-thumb-steelGray"> | ||
| <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-3 mt-4 mx-auto min-h-[150px]"> |
| <button | ||
| onClick={prevPage} | ||
| disabled={currentPage === 0} | ||
| className="absolute left-[1%] md:left-[-6%] lg:left-[-4%] top-1/2 transform -translate-y-1/2 |
There was a problem hiding this comment.
이 친구도 반응형이요!
그리고 정중앙에 놓은 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 이거는 자주 사용하시는 거 같아서 apply 문법 적용해보는 것도 좋아보입니다!
| </button> | ||
|
|
||
| {/* 아이돌 리스트 */} | ||
| <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-3 mt-4 mx-auto min-h-[300px]"> |
| className="absolute right-[1%] md:right-[-6%] lg:right-[-4%] top-1/2 transform -translate-y-1/2 | ||
| w-[29px] h-[135px] rounded-[4px] | ||
| bg-[rgba(27,27,27,0.8)] | ||
| hover:bg-[rgba(27,27,27,1)] transition-all | ||
| flex items-center justify-center" |
There was a problem hiding this comment.
반응형이요! 근데 flex items-center justify-center도 많이 써서 tailwind의 apply 적용해보는 것도 좋아보여요!
doctor-taco
left a comment
doctor-taco
left a comment
There was a problem hiding this comment.
효준님이 짚은 거 외에 더 짚을 거 없는 거 같아요 👀
수고하셨습니다! 👍
#️⃣ Issue Number
#28
📝 요약(Summary)
페이지에 오류가 많은 것 같으니 의심가는 부분이나 오류 원인이 있으시면
말씀해 주시면 감사하겠습니다
(슬라이드 관련 논의 예정)
🛠️ PR 유형
어떤 변경 사항이 있나요?
📸스크린샷 (선택)
bandicam.2025-02-05.19-20-13-818.mp4
💬 공유사항
📚 코드 이해에 필요한(혹은 본인이 이해하는데 사용한) 레퍼런스 목록