SCRUM-116-랜딩페이지 퍼블리싱#5
Conversation
| @@ -1,3 +1,60 @@ | |||
| import Image from "next/image"; | |||
|
|
|||
| import Logo from "../assets/icons/Logo.svg"; | |||
There was a problem hiding this comment.
파일을 불러오는 경우 파스칼 케이스 보다는 카멜 케이스로 작성 부탁드려요!
There was a problem hiding this comment.
원래 파일명이 소문자로 되어있던데 ../Assests/Icons/Logo이런식으로 해야되는건가요?
There was a problem hiding this comment.
import logo from "../assets/icons/logo.svg"; 이렇게 입니다
| <div className="flex flex-row"> | ||
| <Image src={Logo} alt="Logo" width={40} height={40} className="mr-2" /> | ||
| <div className="font-semibold text-xl">Nebula</div> | ||
| </div> |
There was a problem hiding this comment.
Image와 Nebula text 사이의 간격을 mr-2로 적용하고 있는데 이런 경우 부모에 flex가 적용되어 있기 떄문에 Image 컴포넌트에 추가로 className을 부여하는것 보다는 부모 요소에 gap을 주는게 좋을 것 같습니다. 그리고 flex의 기본 direction은 row이기 때문에 flex-row는 지워주세요!
| <div className="font-extralight text-lg ml-6 cursor-pointer">Login</div> | ||
| <div className="font-extralight text-lg ml-6 cursor-pointer">Start</div> | ||
| <div className="font-extralight text-lg ml-6 cursor-pointer">Start</div> | ||
| <div className="font-extralight text-lg ml-6 cursor-pointer">Start</div> |
There was a problem hiding this comment.
이 버튼들은 라우팅 혹은 클릭 이벤트를 발생 시킬 예정이기 때문에 Link 컴포넌트 혹은 button 요소를 쓰는게 맞습니다. div에 cursor-pointer는 불가피한 상황이 아니라면 쓰지 않는 것을 권장드릴게요.
| <div className="w-[550px] mt-20 font-extralight"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor | ||
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
| exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </div> |
There was a problem hiding this comment.
아 tailwindcss에 있는 단위로 하면 오른쪽의
이 부분이 같이 밀려서? 지정해주었습니다..!
| <button className="w-[100px] h-[48px] bg-zinc-300 self-center mt-20 rounded-sm"> | ||
| Play | ||
| </button> |
There was a problem hiding this comment.
Image 컴포넌트나 스켈레톤 UI 같이 불가피하게 크기를 지정할 때를 제외하고는 flex를 이용해서 요소를 배치하는 것이 좋습니다.
|
PR 제목 "SCRUM-번호 - 제목" 형식으로 바꿔주세요. |
2 participants
🛠️ 구현한 부분
🖼️ 실행 화면(선택)
2025-01-12.11.54.58.mov
🔥 어려웠던 부분(선택)
🔍 참고(선택)