개시
페이지 제작을 다시 개시 해보도록 하자.
아주 알찬 휴가를 다녀왔다.
고작 이틀이었지만.
굉장한 하루들의 연속이었다.
그 좋은 마음과 에너지를
부대에 복귀했다는 이유만으로 낭비할 수는 없잖아요?
그러니까 페이지 제작 다시 개시해보자구요.
가즈아~
인터페이스 수정
내가 토대로 만들고 있는 사과음악의 사이트를 한번 보자.
굉장히 깔쌈하다.
그에 반해 내 걸 보자.
이건 뭐 음악이랑 플레이리스트 구분도 안되고,,
보기 불편하다고 느껴진다.
그럼 자세를 고쳐 앉아~
약간 전교5등 하는 아이의 엄마가
옆집 철수는 전교1등 하더라 넌 뭐가 문제냐
하는 그런 재수없는 느낌의 비교긴 하지만.
아무튼 그럼 플레이리스트, 음악 레이아웃을 구분할 수 있도록 제작해보자.
음악 레이아웃 제작
우선 애플 뮤직의 음악 레이아웃을 보면
이런식으로 4x4의 테이블 형식으로 음악을 진열해주고 있다.
나도 이렇게 할래.
그러면 map을 이용해서 진열하는 데이터를
4x4형식으로 진열을 할 수 있어야 하는데..
그거 어떻게 하는건데.
Grid Layout
보통 그리드 레이아웃은 플렉스 레이아웃과 비교되는데,
플렉스 레이아웃이 1차원 배열이라고 생각한다면,
그리드 레이아웃은 2차원 배열이라고 생각하면 편하다.
여기 아주 좋은 예시의 사진이 있어서 퍼와요~
이렇게 가로-세로 로 레이아웃을 표현해준다는 말이에요~
그렇기에 이 Grid Layout을 사용해주면
테이블과 같은 형식으로
제가 원하는 느낌을 내줄 수 있겠죠?
grid 형태 정의
그리드 레이아웃의 형태를 정의해줍시다.
무슨 말이냐면 ?x? 칸으로 어떻게 할건지 정한다는 말임.
- grid-template-rows는 행(row)의 배치
- grid-template-columns는 열(column)의 배치
그래서 Grid 태그 안에 속성으로
gridTemplateColumns, gridTemplateRows 를 사용해준다.
해당 속성의 값은 어떻게 지정하느냐~
gridTemplateColumns="200px, 200px"이렇게 해주면 200px 짜리의 열 2개를 만들겠다는 말.
gridTemplateColumns="1fr, 1fr, 1fr"이렇게 해주면 1:1:1 비율의 열 3개를 만들겠다는 말.
이런 느낌따리입니다.
repeat 함수
만약 여러분이 일정한 비율의 열 10개를 만들고 싶으면 어떡할래.
gridTemplateColumns="1fr,1fr,1fr,1fr,1fr,1fr,1fr,1fr,1fr,1fr"진짜 이렇게 할거야?
에이 왜그래 우리 프로잖아~
repeat 함수를 사용하면 이럴 필요 없잖아~
gridTemplateColumns="repeat(10, 1fr)"이렇게 해주는 거야.
만약 1:4:3의 비율의 칸 30개를 만들고 싶어요?
gridTemplateColumns="repeat(10, 1fr 4fr 3fr)"이렇게 하는거라고~
이걸 이용해서 원하는대로 만들어봅시다.
코드 작성
chakra ui에서는 grid layout 도 지원해주고 있다.
SimpleGrid 태그를 사용해주면 됩니다~
<SimpleGrid columns={4} minChildWidth="200px" gridTemplateRows="repeat(4, 1fr)" gridTemplateColumns="repeat(4, 1fr)" alignItems="center"> {playListResult?.map((track: Tracks) => ( <Box key={track.track.album.id}> <Flex p={5} py={0} flexShrink="0" alignItems="center"> <Image rounded="md" src={track.track.album.images[0].url} alt="Album Cover" maxH="40px" /> <Box ml={3}> <Text noOfLines={1} fontSize="lg" mb={1}>{track.track.name}</Text> <Text noOfLines={1} color="gray" fontSize="sm">{track.track.album.artists[0].name}</Text> </Box> </Flex> <Box borderBottom="1px" borderColor="gray.300" mb={4} ml={3} mr={3}></Box> </Box> ))} </SimpleGrid>
코드 리뷰
<SimpleGrid minChildWidth="200px" gridTemplateRows="repeat(4, 1fr)" gridTemplateColumns="repeat(4, 1fr)" alignItems="center">차크라에서 지원해주는 SimpleGrid 태그를 사용했다.
minChildWidth 속성을 이용해서
한 박스의 최소크기를 정해줬다.원래는 minmax 라는 함수를 사용한다.
궁금하면 검색하세요.
gridTemplateRows와 gridTemplateColumns 속성을 이용해서
1:1:1:1의 비율로 4x4의 칸을 만들어줬다.
alignItems를 이용해서 한 칸 안에 들어갈 앨범 이미지와 제목, 가수를 정렬해줬다.
나머지는 이전에 작성했던 플레이리스트 코드와 거의 일치한다.
결과
이야~ 결과보소?
