Merge pull request #12 from New-Syatte/store-init-#4

제품 상세 페이지 상세설명/교환/주의사항 작업완료

src/app/(product)/product-details/[id]/CautionNotice.tsx

@@ -0,0 +1,28 @@
+const CautionNotice = () => {
+  return (
+    <div className="w-[830px] h-[263px] relative">
+      <div className="left-0 top-0 absolute text-neutral-800 text-2xl font-bold font-['Helvetica']">
+        주의사항
+      </div>
+      <div className="w-[830px] h-[215px] left-0 top-[48px] absolute flex-col justify-start items-start gap-[13px] inline-flex">
+        <div className="w-[830px] text-neutral-800 text-lg font-normal leading-[27px]">
+          전자상거래 등에서의 소비자보호법에 관한 법률에 의거하여 미성년자가
+          물품을 구매하는 경우, 법정대리인이 동의하지 않으면 미성년자 본인 또는
+          법정대리인이 구매를 취소할 수 있습니다.
+        </div>
+        <div className="w-[830px] text-neutral-800 text-lg font-normal leading-[27px]">
+          스토어에 등록된 판매 상품과 상품의 내용, 거래 정보 및 가격은 판매자가
+          등록한 것으로 스토어는 해당 내용에 대하여 일체의 책임을 지지 않습니다.
+        </div>
+        <div className="w-[830px] text-neutral-800 text-lg font-normal leading-[27px]">
+          스토어 결제시스템을 이용하지 않고 판매자와 직접 거래하실 경우 상품을
+          받지 못하거나 구매한 상품과 상이한 상품을 받는 등 피해가 발생할 수
+          있으니 유의 바랍니다. 직거래로 인해 발생한 피해에 대해 샤뜨는 책임을
+          지지 않습니다.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CautionNotice;

src/app/(product)/product-details/[id]/DetailInfo.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+
+interface DetailInfoProps {
+  detailImage: string;
+}
+
+const DetailInfo = ({ detailImage }: DetailInfoProps) => {
+  return (
+    <article className="overflow-auto w-[830px]">
+      <Image src={detailImage} alt="details" width={830} height={1080} />
+    </article>
+  );
+};
+
+export default DetailInfo;

src/app/(product)/product-details/[id]/ProductInfoNav.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useState } from "react";
+import DetailInfo from "./DetailInfo";
+import RefundOrReturn from "./RefundOrReturn";
+import CautionNotice from "./CautionNotice";
+
+interface props {
+  detailImage: string;
+}
+
+const ProductInfoNav = ({ detailImage }: props) => {
+  const [selectedTab, setSelectedTab] = useState("상세 설명");
+
+  const tabs = ["상세 설명", "교환/반품", "주의사항"];
+
+  return (
+    <div>
+      <div className="flex gap-[2px]">
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            onClick={() => setSelectedTab(tab)}
+            className={`${
+              selectedTab === tab
+                ? "border-b-2 border-zinc-500 w-[170px] h-[43px] pt-[11.10px] pb-[13.08px] bg-stone-100 rounded justify-center items-center inline-flex"
+                : "border-b border-zinc-200 bg-stone-50 w-[170px] h-[43px] pt-[11.10px] pb-[13.08px] rounded justify-center items-center inline-flex"
+            }`}
+          >
+            <span className="text-center text-neutral-800 text-xs font-bold">
+              {tab}
+            </span>
+          </button>
+        ))}
+      </div>
+      <section className="mt-12 min-h-screen">
+        {selectedTab === "상세 설명" && (
+          <DetailInfo detailImage={detailImage} />
+        )}
+        {selectedTab === "교환/반품" && <RefundOrReturn />}
+        {selectedTab === "주의사항" && <CautionNotice />}
+      </section>
+    </div>
+  );
+};
+
+export default ProductInfoNav;

src/app/(product)/product-details/[id]/RefundOrReturn.tsx

@@ -0,0 +1,48 @@
+const RefundOrReturn = () => {
+  return (
+    <div className="w-[830px] h-[487px] relative">
+      <div className="w-[830px] h-[222px] left-0 top-0 absolute">
+        <div className="left-0 top-0 absolute text-neutral-800 text-2xl font-bold font-['Helvetica']">
+          교환/반품
+        </div>
+        <div className="w-[830px] h-[174px] left-0 top-[48px] absolute flex-col justify-start items-start gap-[13px] inline-flex">
+          <div className="w-[952px] text-neutral-800 text-lg font-normal leading-[27px]">
+            반품배송비(편도) : 3,000원 (최초 배송비 미결제시 6,000원 부과)
+          </div>
+          <div className="w-[952px] text-neutral-800 text-lg font-normal leading-[27px]">
+            교환배송비(왕복) : 6,000원
+          </div>
+          <div className="text-neutral-800 text-lg font-normal leading-[27px]">
+            구매자 단순 변심 : 상품 수령 후 7일 이내(구매자 반품 배송비 부담)
+          </div>
+          <div className="text-neutral-800 text-lg font-normal leading-[27px]">
+            표시/광고와 상이, 계약 내용과 다르게 이행된 경우 : 상품 수령 후
+            3개월 이내 혹은 표시/광고와 다른 사실을 안 날로부터 30일 이내(판매자
+            반품 배송비 부담)
+          </div>
+        </div>
+      </div>
+      <div className="w-[830px] h-[195px] left-0 top-[292px] absolute">
+        <div className="left-0 top-0 absolute text-neutral-800 text-2xl font-bold font-['Helvetica']">
+          교환/반품 불가한 경우
+        </div>
+        <div className="w-[830px] h-[147px] left-0 top-[48px] absolute flex-col justify-start items-start gap-[13px] inline-flex">
+          <div className="w-[952px] text-neutral-800 text-lg font-normal leading-[27px]">
+            교환/반품 요청이 기간이 지난 경우
+          </div>
+          <div className="w-[952px] text-neutral-800 text-lg font-normal leading-[27px]">
+            소비자의 책임 있는 사유로 상품 등이 분실/파손/훼손된 경우
+          </div>
+          <div className="text-neutral-800 text-lg font-normal leading-[27px]">
+            소비자의 사용/소비에 의해 상품 등의 가치가 현저히 감소한 경우
+          </div>
+          <div className="text-neutral-800 text-lg font-normal leading-[27px]">
+            제품을 설치 또는 사용하였거나 개통한 경우
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RefundOrReturn;

src/app/(product)/product-details/[id]/page.tsx

@@ -1,6 +1,7 @@
 import ProductSummary from "./ProductSummary";
 import { ProductForDetail } from "@/model/products";
 import { getDetailProduct } from "@/services/sanity/products";
+import ProductInfoNav from "./ProductInfoNav";
 
 export default async function ProductDetails({
   params,
@@ -9,13 +10,20 @@ export default async function ProductDetails({
 }) {
   const { id } = params;
   const product: ProductForDetail = await getDetailProduct(id);
-  const { productName, price, description, feature, images, discount } =
-    product;
+  const {
+    productName,
+    price,
+    description,
+    feature,
+    images,
+    discount,
+    detailImage,
+  } = product;
 
   console.log(product);
   return (
     <>
-      <section className="w-full mx-auto mb-[200px] flex justify-center items-center px-60 py-20">
+      <section className="w-full mx-auto mb-[200px] flex justify-center items-start px-60 py-20 gap-28">
         <ProductSummary
           _id={id}
           productName={productName}
@@ -25,7 +33,9 @@ export default async function ProductDetails({
           images={images}
           discount={discount}
         />
-        <section className="w-full"></section>
+        <section className="w-full">
+          <ProductInfoNav detailImage={detailImage} />
+        </section>
       </section>
     </>
   );

src/app/layout.tsx

@@ -19,8 +19,9 @@ export const crimson = Crimson_Pro({
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Syatt",
+  description:
+    "SYATT 특수페인팅 세계 독특하고 창의적인 페인팅 기술의 아름다운 세계에서 새로운 예술과 디자인을 경험해보세요.",
 };
 
 interface RootLayoutProps {

src/model/products.ts

@@ -9,6 +9,7 @@ export type Product = {
   images: ProductImages[];
   category: string;
   detailCategory: string;
+  detailImage: string;
 };
 
 export type ProductForDetail = Omit<Product, "mainImage">;

src/services/sanity/products.ts

@@ -25,6 +25,7 @@ export function getDetailProduct(id: string) {
         },
         description,
         discount,
+        "detailImage": detailImage.asset->url,
       }`,
       { id },
     );