Product1,2 (전시)

모듈 구성

Title

Carousel

ProductUnit

Astro

---
import Title from "@shared/ui/title/Title.astro";
import Carousel from "@shared/module/carousel/Carousel.astro";
import ProductUnit from "@shared/module/product-unit/ProductUnit.astro";

const products = [
  {
    link: "#",
    brand: "STUDIO TOMBOY",
    name: "레더 블루종 자켓",
    price: "299,000",
    media: {
      src: "/dummy/images/box.svg",
      alt: "",
      width: 350,
      height: 525,
    },
  },
  /* ...*/
];
---

<section class="v-tmpl v-tmpl--product-1" style="margin-bottom: 0px;">
  <Title level={2}>3개 / 1단</Title>
  <Carousel slidesPerView={3}>
    {products.map((item) => (
      <swiper-slide>

        <!-- ProductUnit 문서 참고 -->
        <ProductUnit {...item} />
      </swiper-slide>
    ))}
  </Carousel>
</section>

<section class="v-tmpl v-tmpl--product-1" style="margin-bottom: 0px;">
  <Title level={2}>2.5개 / 1단</Title>
  <Carousel slidesPerView={2.7551}>
    <!-- 위와 동일 -->
  </Carousel>
</section>

<section class="v-tmpl v-tmpl--product-2" style="margin-bottom: 0px;">
  <Title level={2}>2.5개 / 2단</Title>
  <Carousel slidesPerView={2.7551} class="v-carousel--multi-row">
    <!-- 위와 동일 -->
  </Carousel>
</section>

HTML

1단

<!-- 전시 템플릿 간 여백은 style 속성으로 조정 -->
<section class="v-tmpl v-tmpl--product-1" style="margin-bottom: 0px;">
  <h2 class="v-truncate v-title">2.5개 / 1단</h2>
  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>
  <swiper-container
    slides-offset-before="24"
    slides-offset-after="24"
    space-between="8"
    slides-per-view="2.7551"
    css-mode="true"
    free-mode="true"
    class="v-carousel"
  >
    <swiper-slide>
      <!-- ProductUnit 문서 참고 -->
      <div class="v-product-unit">
      <!-- … -->
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

<section class="v-tmpl v-tmpl--product-1" style="margin-bottom: 0px;">
  <h2 class="v-truncate v-title">3개 / 1단</h2>
  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>
  <swiper-container
    space-between="8"
    slides-per-view="3"
    slides-per-group="3"
    navigation="true"
    pagination="true"
    class="v-carousel"
  >
    <swiper-slide>
      <!-- ProductUnit 문서 참고 -->
      <div class="v-product-unit">
      <!-- … -->
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

2단

<!-- 전시 템플릿 간 여백은 style 속성으로 조정 -->
<section class="v-tmpl v-tmpl--product-2" style="margin-bottom: 0px;">
  <h2 class="v-truncate v-title">2.5개 / 2단</h2>
  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>
  <swiper-container
    slides-offset-before="24"
    slides-offset-after="24"
    space-between="8"
    slides-per-view="2.7551"
    css-mode="true"
    free-mode="true"
    class="v-carousel v-carousel--multi-row"
  >
    <swiper-slide>
      <!-- ProductUnit 문서 참고 -->
      <div class="v-product-unit">
      <!-- … -->
      </div>

      <div class="v-product-unit">
      <!-- … -->
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>

<section class="v-tmpl v-tmpl--product-2" style="margin-bottom: 0px;">
  <h2 class="v-truncate v-title">3개 / 2단</h2>
  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>
  <swiper-container
    space-between="8"
    slides-per-view="3"
    slides-per-group="3"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel--multi-row"
  >
    <swiper-slide>
      <!-- ProductUnit 문서 참고 -->
      <div class="v-product-unit">
      <!-- … -->
      </div>

      <div class="v-product-unit">
      <!-- … -->
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>