[꼬랑지랑] next.js 사이트 개선기 (2) 이커머스 상세페이지 더보기 구현

꼬랑지랑 로고

안녕하세요 주니어 프론트엔드 개발자입니다!
이번엔 사이드 프로젝트로 만들었던 꼬랑지랑(이커머스 사이트)의 상세페이지 더보기 기능을 구현하겠습니다.
- 상세페이지 탭 고정, 미리보기 이미지의 화면 상단에 보이게 하기 등

 

 

꼬랑지랑에 적용하기

1. 상품정보 더보기 기능
2. 상품상세 메뉴바가 위에 고정되는 기능

Before

AFTER

 

문제정의

• 문제 : 미리보기 페이지가 이미지의 중간부터 보여줌
  => 미리보기 부분이 이미지의 가장 윗부분 으로 바꾸기
• 문제 : 화면을 펼쳤을 당시 아랫부분에 렌더링되야하는 상품후기 탭 레이아웃이 깨진다
  => 이미지 더보기를 클릭해도 레이아웃이 깨지지 않고 그 하단에 탭이 생성되게 하기

기존코드

<div className="flex w-full flex-col items-start justify-center px-4">
            <Image src={"/imgs/logos/logo2.png"} width={250} height={100} alt={"로고"} />
            <div className="mt-4 w-full border-t pt-4">
              <TextMedium style={{ fontWeight: "bold" }}>상품설명</TextMedium>
              <div id={"description"} className="">
                {productDetailInfo?.description}
              </div>
            </div>
            <button
              onClick={() => {
                setShowDeatil(!showDetail);
              }}
            >
              더보기
            </button>
            <div className={`flex h-1/4 w-full justify-center py-8 ${showDetail ? "" : "overflow-hidden"}`}>
              <Image
                width={0}
                height={0}
                quality={100}
                sizes="100"
                src={productDetailInfo?.descriptionImageUrl!}
                alt={"상품설명 이미지"}
                style={{
                  objectFit: "cover",
                  width: "80%",
                  height: showDetail ? "300px" : "auto",
                }} // optional
              />
            </div>
          </div>

1. 문제점
   1. style부분의 object-fit 부분이 cover로 되어있다. object-fit : cover는 이미지의 비율을 유지하며 화면을 채우는 방식이라 크기가 안맞을 경우 잘릴 수 있다.
2. MDN문서

• MDN object-fit 을 보면 object-position을 이용해 콘텐츠의 정렬을 바꿀 수 있다고 한다.
• You can alter the alignment of the replaced element's content object within the element's box using the object-position property.
• MDN object-position
• object-position의 기본 value 가 50% 50%로 되어있다.

1. chatgpt

object-fit: cover를 사용할 때 이미지의 중앙 부분이 표시되는 이유는, 이 속성이 이미지를 요소의 중앙에 맞춰서 잘라내기 때문이야. 이미지의 비율을 유지하면서 요소의 크기를 채우기 위해, 기본적으로 중앙을 기준으로 잘리는 방식이야.

이미지의 상단부를 먼저 출력하고 싶다면, CSS의 object-position 속성을 활용할 수 있어. object-position을 사용하면 이미지의 표시 위치를 조정할 수 있어. 기본값은 50% 50%로 중앙에 맞춰지는데, 이를 top 또는 0% 0%로 설정하면 상단부가 표시될 거야.
object-fit 속성은 기본적으로 중앙 (50%,50%) 맞춰서 잘라낸다. 이유는 이미지의 비율을 유지하면서 요소의 크기를 채우기위해! 그래서 object-position을 이용해 표시 위치를 조정할 수 있다.

 

 

1. 수정완료

 

 

 <Image
                width={0}
                height={0}
                quality={100}
                sizes="100"
                src={productDetailInfo?.descriptionImageUrl!}
                alt={"상품설명 이미지"}
                style={{
                  objectPosition: "top", //이부분을 추가해준다.
                  objectFit: "cover",
                  width: "80%",
                  height: showDetail ? "300px" : "auto",
                }} // optional
              />

 

2. 레이아웃 외부에 컴포넌트가 있었음

컴포넌트를 내부로 다시 넣어주니까 레이아웃이 깨지지 않으면서 잘 인식했다.

 

 

AFTER