6회차 과제 - 안현석

[nyeonseok]

신경써서 구현한 부분

{cardList.map((cd) => (
  <div id={cd.id} className="cursor-pointer"> ... </div>
))}

• cardList를 선언한 뒤, map을 사용하여 편리하게 card를 렌더링했습니다.

{categoryList.map((cl) => (
          <div
            className="flex flex-col justify-end w-fit h-full text-sm py-4 
          text-[#6b6b6b] font-semibold border-b-2 border-transparent cursor-pointer transition-all duration-200 
          hover:border-b-black hover:text-black"
          >
            {cl.category}
          </div>
        ))}

• 마찬가지로 상단의 카테고리도 map을 사용하여 편리하게 렌더링 하였습니다.
• 아이콘이 들어갈 자리를 만들기 위해 cl.category를 div로 감싸고 flex-col 설정해줬습니다.

<div
              className="flex flex-col justify-between bg-cover bg-center w-full aspect-[1/1] rounded-3xl p-4"
              style={{ backgroundImage: `url(${cd.image})` }}
            >

• 배경을 숙소 이미지로 하여, 해당 div위에 필요한 컴포넌트가 올 수 있게 했습니다.

구조 분석 및 완성본

구조 분석	완성본

새롭게 알게 된 내용

질문

[cryingdryice]

전체적으로 스타일 하나하나에 신경을 쓰신 것 같습니다.
수고하셨습니다~

[cryingdryice]

호버시 transition을 적용하니 더 자연스러운 것 같습니다!

[jihyun132]

transition을 사용해서 UI/UX 측면을 고려한 게 보여서 참 좋네요!

[jihyun132]

전체적으로 완성도가 높고 깔끔한 코드라고 생각됩니다. tailwind를 잘 사용하셔서 ui/ux 측면도 많이 고려하여 구현하신 게 돋보입니다. 과제하시느라 수고하셨습니다~

[jihyun132]

aspect 클래스를 활용해서 가로 세로 비율을 맞춘게 좋네요!!

[jihyun132]

삼항 연산자를 활용해서 잘 구현해주신 것 같습니다.

cd.guest 값이 ""(빈문자열)일 때는 cd.guest가 false라서 cd.guest !== "" ? () : () 방식도 좋지만 cd.guest ? () : () 이런 식으로 작성하셔도 좋을 것 같네요.

[jihyun132]

transition을 사용해서 UI/UX 측면을 고려한 게 보여서 참 좋네요!