Merge pull request #63 from SOPT-all/feat/benefit-component/#55

[feat/#60] 제품 메인정보 페이지 구현

Author: odukong

src/App.tsx

@@ -1,5 +1,12 @@
+import { ProductInfo } from "./pages/product-info/product-info";
+import * as styles from "./test.css";
+
 function App() {
-  return <div />;
+  return (
+    <div className={styles.test}>
+      <ProductInfo />
+    </div>
+  );
 }
 
 export default App;

src/pages/home/components/.gitkeep

@@ -0,0 +1,77 @@
+import { color } from "@/shared/styles/tokens/color.css";
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.6rem",
+  width: "100%",
+  padding: "2.4rem 1rem",
+  boxShadow: `0 8px 8px 0 rgba(18, 18, 18, 0.02)`,
+});
+
+export const mainInfo = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.7rem",
+});
+
+export const priceInfo = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.2rem",
+});
+
+export const originalPrice = style({
+  textDecoration: "line-through",
+});
+
+export const discountRate = style({
+  marginRight: "0.4rem",
+});
+
+export const discountedPrice = style({
+  marginRight: "0.2rem",
+});
+
+export const benefitInfo = style({
+  display: "flex",
+  gap: "0.6rem",
+  overflowX: "auto",
+  marginTop: "-0.4rem",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+});
+
+export const extraInfo = style({
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: "0.6rem",
+});
+
+export const extraInfoItem = style({
+  display: "flex",
+  alignItems: "center",
+  selectors: {
+    "&:not(:first-child)": {
+      gap: "0.6rem",
+    },
+    "&:not(:last-child)::after": {
+      content: '""',
+      display: "block",
+      width: "0.1rem",
+      height: "1.2rem",
+      backgroundColor: color.gray[200],
+      marginLeft: "0.8rem",
+      marginRight: "0.8rem",
+    },
+  },
+});
+
+export const flexRow = style({
+  display: "flex",
+  alignItems: "center",
+});

src/pages/home/constants/.gitkeep

@@ -0,0 +1,107 @@
+import { MembershipBenefit } from "@/shared/components/benefit/membership-benefit";
+import * as styles from "./product-main-info.css";
+import { addComma } from "@/shared/utils/add-comma";
+import { MEMBERSHIP_DATA, PAY_BENEFITS_DATA } from "@/shared/constants/benefit";
+import { PayBenefit } from "@/shared/components/benefit/pay-benefit";
+import { MoreBenefit } from "@/shared/components/benefit/more-benefit";
+import { ChevronRightRounded, Share } from "@/assets/svg";
+import { Text } from "../text/text";
+import { getProductStatsList } from "../../utils/get-product-stats";
+export interface ProductMainInfoProps {
+  authorName: string;
+  productName: string;
+  originalPrice: number;
+  discountRate: number;
+  discountedPrice: number;
+  averageScore: number;
+  reviewCount: number;
+  salesCount: number;
+}
+
+export const ProductMainInfo = ({ data }: { data: ProductMainInfoProps }) => {
+  const statsList = getProductStatsList(data); // 제품 부가정보 데이터 포맷팅 함수
+
+  return (
+    <div className={styles.container}>
+      {/** 제품 메인 정보 */}
+      <div className={styles.mainInfo}>
+        <div className={styles.flexRow}>
+          <Text type="caption" color="gray-100">
+            {data.authorName}
+          </Text>
+          <ChevronRightRounded />
+        </div>
+        <Text type="subTitle" color="black-100">
+          {data.productName}
+        </Text>
+      </div>
+
+      {/** 제품 가격 정보 */}
+      <div className={styles.priceInfo}>
+        <Text className={styles.originalPrice} type="caption" color="gray-100">
+          {addComma(String(data.originalPrice))}원
+        </Text>
+        <div className={styles.flexRow}>
+          <Text
+            className={styles.discountRate}
+            type="subTitle"
+            color="gray-300">
+            {data.discountRate}%
+          </Text>
+          <div className={styles.flexRow}>
+            <Text
+              className={styles.discountedPrice}
+              type="heading"
+              color="black-100">
+              {addComma(String(data.discountedPrice))}
+            </Text>
+            <Text type="body" color="black-100">
+              원
+            </Text>
+          </div>
+        </div>
+      </div>
+
+      {/** 제품 혜택가 정보 */}
+      <div className={styles.benefitInfo}>
+        <MembershipBenefit
+          description={MEMBERSHIP_DATA.description}
+          price={MEMBERSHIP_DATA.price}
+          unit={MEMBERSHIP_DATA.unit}
+          badges={MEMBERSHIP_DATA.badges}
+        />
+        {PAY_BENEFITS_DATA.map((benefit) => (
+          <PayBenefit
+            key={benefit.id}
+            title={benefit.title}
+            description={benefit.desc}
+          />
+        ))}
+        <MoreBenefit />
+      </div>
+
+      {/** 제품 부가 정보 */}
+      <div className={styles.extraInfo}>
+        <div className={styles.flexRow}>
+          {statsList.map((stat, index) => (
+            <div key={index} className={styles.extraInfoItem}>
+              {typeof stat.label === "string" ? (
+                <Text type="caption" color="gray-300">
+                  {stat.label}
+                </Text>
+              ) : (
+                stat.label
+              )}
+              <Text type="caption" color={stat.color}>
+                {stat.value}
+              </Text>
+            </div>
+          ))}
+        </div>
+        <button type="button" aria-label="공유하기">
+          <Share />
+        </button>
+      </div>
+    </div>
+  );
+};

…home/components/carousel/carousel.css.ts …info/components/carousel/carousel.css.tssrc/pages/home/components/carousel/carousel.css.ts renamed to src/pages/product-info/components/carousel/carousel.css.ts src/pages/home/components/carousel/carousel.css.ts renamed to src/pages/product-info/components/carousel/carousel.css.ts

@@ -5,5 +5,5 @@ export const container = style({
   flexDirection: "column",
   gap: "1rem",
 
-  padding: "0 1rem",
+  padding: "2.4rem 1rem",
 });