[ View product ] 상품보기 페이지 레이아웃 잡기

[Happhee]

🔥 Related Issues

• close #38

🎡 작업 내용

• [x] 상품보기 페이지 레이아웃 조정

✅ PR Point

📄pages/viewProduct.tsx

import { ProductFilter, ViewProductBanner } from '../components/viewProduct';
import styled from '@emotion/styled';
import { IcPriceLine } from '../public/assets/icons';
import { ToyList } from '../components/common';

export default function viewProduct() {
  return (
    <StViewProductWrapper>
      <ViewProductBanner />
      <StFilterBarWrapper>
        <StPriceSort>
          <h3>낮은 가격순</h3>
          <IcPriceLine />
          <h3>높은 가격순</h3>
        </StPriceSort>
      </StFilterBarWrapper>
      <StSection>
        <ProductFilter /> // 👈 이칭구가 아래로 내려왔어용!
        <StToyListWrapper> // 👈 장난감 리스트 4개씩 쭈르르륵 밑으로 보여주게!
          <ToyList
            isViewProduct={true}
            landingCategory="viewProduct"
            length={4}
          />
          <ToyList
            isViewProduct={true}
            landingCategory="viewProduct"
            length={4}
          />
          <ToyList
            isViewProduct={true}
            landingCategory="viewProduct"
            length={4}
          />
          <ToyList
            isViewProduct={true}
            landingCategory="viewProduct"
            length={4}
          />
        </StToyListWrapper>
      </StSection>
    </StViewProductWrapper>
  );
}
// ✅ flex로 아이템들을 가운데로 정렬했습니다!! padding만 부여!!! 
const StViewProductWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 37.2rem;
`;
/*
const StViewProductWrapper = styled.div`
  width: 192rem;
  padding: 0 37.2rem;
`;
*/
const StFilterBarWrapper = styled.div`
  display: flex;
  justify-content: space-between;
`;
const StPriceSort = styled.div`
  display: flex;
  align-items: center;

  height: 2rem;
  margin-top: 2rem;

  font: ${({ theme }) => theme.fonts.b5_14_medium_140};

  cursor: pointer;
`;
// ✅ 필터, 장난감 리스트 정렬을 위한 section 태그
const StSection = styled.section`
  display: flex;
`;
// ✅ 장난감 리스트 와 필터 사이 옆 마진 간격두고, 장난감 4개씩 세로로 배열 하기 위한 태그 
const StToyListWrapper = styled.section`
  display: flex;
  flex-direction: column;

  margin-left: 1rem;
`;

👀 스크린샷 / GIF / 링크

[say-young516]

꼼꼼한 추가주석과.. 당신의 깔끔한 코드로 쏙쏙 이해했서요.. 혹시라두 구현하다가 추가질문 생기면 질문할게요 당신은 최고야~ ! 감사합니다 복 받으세요 슨생님!!!!!!!!!!!!!!!!!!!!!

[Happhee]

영이 화긴해쓰면 머지 해도데는대ㅔㅎㅎㅎ