Merge branch 'develop' into feat/benefit-component/#55

Author: odukong

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/recipes": "^0.5.7",
+    "ky": "^1.14.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.9.6"

pnpm-lock.yaml

@@ -0,0 +1,24 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const imageWrapper = recipe({
+  base: {
+    transition: "max-height 0.5s ease, opacity 0.5s ease",
+  },
+  variants: {
+    isDetailOpen: {
+      true: {
+        padding: "0.8rem 0 1.6rem 0",
+        maxHeight: "50rem",
+        opacity: 1,
+      },
+      false: {
+        maxHeight: 0,
+        opacity: 0,
+        overflow: "hidden",
+      },
+    },
+  },
+  defaultVariants: {
+    isDetailOpen: false,
+  },
+});

src/assets/img/product_detail.jpg

@@ -0,0 +1,30 @@
+import * as styles from "./detail-section.css";
+import { useState } from "react";
+import LargeButton from "@/shared/components/button/large-button/large-button";
+import { LARGE_BUTTON_VARIANTS } from "@/shared/constants/button";
+import ProductDetailImage from "@/assets/img/product_detail.jpg";
+
+export const DetailSection = () => {
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+
+  const largeButtonProps = {
+    type: "button" as const,
+    "aria-label": isDetailOpen ? "상세 정보 접기" : "상세 정보 더보기",
+    hasArrow: true,
+    variant: isDetailOpen
+      ? LARGE_BUTTON_VARIANTS.ACTIVE
+      : LARGE_BUTTON_VARIANTS.DEFAULT,
+    onClick: () => setIsDetailOpen(!isDetailOpen),
+  };
+  return (
+    <>
+      <div className={styles.imageWrapper({ isDetailOpen })}>
+        <img src={ProductDetailImage} alt="작품 세부 이미지" />
+      </div>
+
+      <LargeButton {...largeButtonProps}>
+        {isDetailOpen ? "상세 정보 접기" : "상세 정보 더보기"}
+      </LargeButton>
+    </>
+  );
+};

src/assets/img/product_detail.png

@@ -0,0 +1,16 @@
+import { color } from "@/shared/styles/tokens/color.css";
+import { typographyVars } from "@/shared/styles/typography.css";
+import { style } from "@vanilla-extract/css";
+
+export const productInfo = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.6rem",
+  margin: "4rem 0 3.8rem 0",
+});
+
+export const productInfoTitle = style({
+  ...typographyVars.heading3,
+  color: color.black[100],
+  cursor: "default",
+});

src/pages/product-detail/components/detail-section/detail-section.css.ts

@@ -0,0 +1,48 @@
+import { MakerAccordion } from "@/shared/components/accordian/maker-accordian";
+import * as styles from "./product-info-notice.css";
+
+interface AccordionItem {
+  id: string;
+  title: string;
+  selectedOption?: string;
+  iconType?: "arrow" | "chevron";
+}
+
+const mainInfoItems: AccordionItem[] = [
+  { id: "basic", title: "작품 기본 정보" },
+  {
+    id: "delivery",
+    title: "제작 / 배송",
+    selectedOption: "평균 1일 / 최대 1일 이내",
+  },
+  { id: "refund", title: "교환 / 환불 / 반품" },
+];
+
+const reportItem: AccordionItem = {
+  id: "report",
+  title: "작품 제보하기",
+  iconType: "arrow",
+};
+
+export const ProductInfoNotice = () => {
+  return (
+    <div className={styles.productInfo}>
+      <h3 className={styles.productInfoTitle}>작품 정보 고시</h3>
+      <div>
+        {mainInfoItems.map((item) => (
+          <MakerAccordion
+            key={item.id}
+            title={item.title}
+            iconType={item.iconType}
+            selectedOption={item.selectedOption}
+          />
+        ))}
+      </div>
+      <MakerAccordion
+        key={reportItem.id}
+        title={reportItem.title}
+        iconType={reportItem.iconType}
+      />
+    </div>
+  );
+};

src/pages/product-detail/components/detail-section/detail-section.tsx

@@ -0,0 +1,30 @@
+import { color } from "@/shared/styles/tokens/color.css";
+import { typographyVars } from "@/shared/styles/typography.css";
+import { style } from "@vanilla-extract/css";
+
+export const notice = style({
+  padding: "1.6rem 2rem",
+  backgroundColor: color.white[300],
+  borderRadius: "1.2rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.8rem",
+  margin: "2.4rem 0 1.6rem 0",
+  cursor: "default",
+});
+
+export const noticeTitle = style({
+  ...typographyVars.body3,
+  color: color.black[100],
+  whiteSpace: "pre-line",
+});
+
+export const noticeDescription = style({
+  ...typographyVars.caption2,
+  color: color.gray[100],
+  whiteSpace: "pre-line",
+});
+
+export const customerCenter = style({
+  textDecorationLine: "underline",
+});

src/pages/product-detail/components/product-info-notice/product-info-notice.css.ts

@@ -0,0 +1,23 @@
+import * as styles from "./purchase-safety-notice.css";
+
+export const PurchaseSafetyNotice = () => {
+  return (
+    <div className={styles.notice}>
+      <div className={styles.noticeTitle}>
+        안전한 거래를 위해 {"\n"}
+        아이디어스 결제 시스템을 이용해주세요.
+      </div>
+      <div className={styles.noticeDescription}>
+        개인 연락처를 통한 거래는 보호 및 중재가 어려울 수 있습니다. {"\n"}
+        작가님의 외부 거래 요청이 있다면{" "}
+        <a
+          href="#"
+          onClick={(e) => e.preventDefault()}
+          className={styles.customerCenter}>
+          고객센터
+        </a>
+        로 알려주세요.
+      </div>
+    </div>
+  );
+};