Merge pull request #68 from SOPT-all/feat/related-component/#54

[feat/#54] 주목할 만한 작품 컴포넌트 구현

Author: jstar000

src/pages/related-product/related-product.css.ts

@@ -0,0 +1,156 @@
+import { typographyVars } from "@/shared/styles/typography.css";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { color } from "@/shared/styles/tokens/color.css";
+import { components } from "@/shared/styles/layer.css";
+
+export const section = style({
+  "@layer": {
+    [components]: {
+      display: "flex",
+      flexDirection: "column",
+      padding: "0rem 1.6rem",
+    },
+  },
+});
+
+export const headerText = recipe({
+  base: {
+    "@layer": {
+      [components]: {
+        textAlign: "left",
+      },
+    },
+  },
+  variants: {
+    type: {
+      title: {
+        "@layer": {
+          [components]: {
+            ...typographyVars.heading3,
+            color: color.black[100],
+            marginBottom: "0.4rem",
+          },
+        },
+      },
+      caption: {
+        "@layer": {
+          [components]: {
+            ...typographyVars.caption2,
+            color: color.gray[100],
+            marginBottom: "2rem",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    type: "title",
+  },
+});
+
+export const scrollContainer = style({
+  "@layer": {
+    [components]: {
+      display: "flex",
+      columnGap: "0.8rem",
+      overflowX: "auto",
+      overflowY: "hidden",
+      marginRight: "-1.6rem",
+      paddingRight: "1.6rem",
+    },
+  },
+});
+
+export const card = style({
+  "@layer": {
+    [components]: {
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "1.2rem",
+      width: "12.8rem",
+      flexShrink: 0,
+    },
+  },
+});
+
+export const thumbnailWrapper = style({
+  "@layer": {
+    [components]: {
+      borderRadius: "4px",
+      overflow: "hidden",
+      width: "100%",
+      aspectRatio: "1 / 1",
+      position: "relative",
+    },
+  },
+});
+
+export const cardTitle = style({
+  "@layer": {
+    [components]: {
+      ...typographyVars.caption1,
+    },
+  },
+});
+
+export const thumbnailImage = style({
+  "@layer": {
+    [components]: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+    },
+  },
+});
+
+export const badge = recipe({
+  base: {
+    "@layer": {
+      [components]: {
+        position: "absolute",
+        padding: "0.2rem 0.4rem",
+        borderRadius: "4px",
+        ...typographyVars.caption2,
+      },
+    },
+  },
+  variants: {
+    tone: {
+      ad: {
+        "@layer": {
+          [components]: {
+            backgroundColor: color.white[300],
+            color: color.gray[100],
+          },
+        },
+      },
+      bundle: {
+        "@layer": {
+          [components]: {
+            backgroundColor: color.brand[100],
+            color: color.white[300],
+          },
+        },
+      },
+    },
+    position: {
+      topRight: {
+        "@layer": {
+          [components]: {
+            top: "0.4rem",
+            right: "0.4rem",
+          },
+        },
+      },
+      bottomLeft: {
+        "@layer": {
+          [components]: {
+            bottom: "0.4rem",
+            left: "0.4rem",
+          },
+        },
+      },
+    },
+  },
+});

src/pages/related-product/related-product.mock.ts

@@ -0,0 +1,33 @@
+import ProductImage from "@/assets/img/product-01.png";
+
+interface RelatedProductItem {
+  id: number;
+  title: string;
+  imageUrl: string;
+  isAd: boolean;
+  isBundleShipping: boolean;
+}
+
+export const relatedProducts: RelatedProductItem[] = [
+  {
+    id: 1,
+    title: "[IDUS단독]음성을 전하는 카세트 앨범📻 음성 편지",
+    imageUrl: ProductImage,
+    isAd: true,
+    isBundleShipping: false,
+  },
+  {
+    id: 2,
+    title: "[IDUS단독]음성을 전하는 카세트 앨범📻 음성 편지",
+    imageUrl: ProductImage,
+    isAd: false,
+    isBundleShipping: true,
+  },
+  {
+    id: 3,
+    title: "[IDUS단독]음성을 전하는 카세트 앨범📻 음성 편지",
+    imageUrl: ProductImage,
+    isAd: false,
+    isBundleShipping: false,
+  },
+];

src/pages/related-product/related-product.tsx

@@ -0,0 +1,48 @@
+import * as styles from "./related-product.css";
+import { relatedProducts } from "./related-product.mock";
+
+export const RelatedProduct = () => {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.headerText({ type: "title" })}>주목할 만한 작품</h2>
+      <p className={styles.headerText({ type: "caption" })}>
+        같은 작가의 작품은 묶음배송이 가능해요.
+      </p>
+      <div className={styles.scrollContainer}>
+        {relatedProducts.map(
+          ({ id, title, imageUrl, isAd, isBundleShipping }) => (
+            <article key={id} className={styles.card}>
+              <div className={styles.thumbnailWrapper}>
+                <img
+                  src={imageUrl}
+                  alt={title}
+                  className={styles.thumbnailImage}
+                />
+
+                {isAd && (
+                  <span
+                    className={styles.badge({
+                      tone: "ad",
+                      position: "topRight",
+                    })}>
+                    광고
+                  </span>
+                )}
+                {isBundleShipping && (
+                  <span
+                    className={styles.badge({
+                      tone: "bundle",
+                      position: "bottomLeft",
+                    })}>
+                    묶음배송
+                  </span>
+                )}
+              </div>
+              <p className={styles.cardTitle}>{title}</p>
+            </article>
+          )
+        )}
+      </div>
+    </section>
+  );
+};