feat: update ProductInfo component design

jirum-alarm · Sep 11, 2024 · e4daf39 · e4daf39
1 parent a722a8c
commit e4daf39
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 32 deletions.
diff --git a/apps/web/src/app/products/[id]/components/CommunityReaction.tsx b/apps/web/src/app/products/[id]/components/CommunityReaction.tsx
@@ -30,8 +30,10 @@ export default function CommunityReaction({
   return (
     <>
       {/* @TODO: remove after add hotdeal index section */}
-      <hr />
-      <section>
+      <div className="px-5">
+        <hr />
+      </div>
+      <section className="px-5">
         <h2 className="pb-3">커뮤니티 반응</h2>
         <div className="rounded border p-5">
           <div className="flex justify-between">

diff --git a/apps/web/src/app/products/[id]/components/HotdealGuide.tsx b/apps/web/src/app/products/[id]/components/HotdealGuide.tsx
@@ -47,8 +47,8 @@ export default function HotdealGuide({
   }
 
   return (
-    <section ref={guidesRef} className="relative">
-      <div className="py-4">
+    <section ref={guidesRef} className="relative px-5">
+      <div className="pb-4">
         <h2 className="font-semibold text-gray-800">구매 정보 요약</h2>
       </div>
       <div className={cn('overflow-hidden rounded-lg border border-secondary-300 pt-4')}>

diff --git a/apps/web/src/app/products/[id]/components/NoticeProfitUrl.tsx b/apps/web/src/app/products/[id]/components/NoticeProfitUrl.tsx
@@ -1,6 +1,6 @@
 export function NoticeProfitLink() {
   return (
-    <section>
+    <section className="px-5">
       <div className="bg-gray-50 px-5 py-4 pb-4">
         <p className="mb-2 text-sm font-medium text-gray-900">안내</p>
         <div className="flex">

diff --git a/apps/web/src/app/products/[id]/components/PopularProudcts.tsx b/apps/web/src/app/products/[id]/components/PopularProudcts.tsx
@@ -30,7 +30,7 @@ export default function PopularProducts({
   }
 
   return (
-    <section>
+    <section className="px-5">
       <h2 className="pb-5 font-semibold text-gray-900">
         ‘{product.categoryName || '기타'}’에서 인기있는 상품
       </h2>

diff --git a/apps/web/src/app/products/[id]/components/ProductDetailLayout.tsx b/apps/web/src/app/products/[id]/components/ProductDetailLayout.tsx
@@ -2,7 +2,7 @@
 import 'swiper/css';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { notFound } from 'next/navigation';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import BottomCTA from './BottomCTA';
 import CommunityReaction from './CommunityReaction';
@@ -16,6 +16,7 @@ import { cn } from '@/lib/cn';
 import { ProductGuidesQuery, ProductQuery } from '@/shared/api/gql/graphql';
 import { displayTime } from '@/util/displayTime';
 import { NoticeProfitLink } from './NoticeProfitUrl';
+import { useInView } from 'react-intersection-observer';
 
 type Product = NonNullable<ProductQuery['product']>;
 type ProductGuides = ProductGuidesQuery['productGuides'];
@@ -60,38 +61,55 @@ function ProductDetaiLayout({
 export default ProductDetaiLayout;
 
 function ProductInfoLayout({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-col gap-y-10 px-5">{children}</div>;
+  return <div className="flex flex-col gap-y-10">{children}</div>;
 }
 
 function ProductInfo({ product }: { product: Product }) {
+  const [isView, setIsView] = useState(true);
+  const { ref } = useInView({
+    threshold: 1,
+    onChange: (inView) => {
+      setIsView(inView);
+    },
+  });
   return (
     <section>
-      <h1 className="text-gray-700">{product.title}</h1>
-
-      <div>
-        <span className="text-green-700">{product?.viewCount}명</span>이 보고 있어요
+      <div className="px-5">
+        <div className="flex items-center gap-3 pb-2">
+          {product.isEnd ||
+            (product.isHot && (
+              <div
+                className={cn({
+                  'text-semibold flex h-[22px] items-center rounded-lg text-xs leading-[20px]':
+                    true,
+                  'border border-gray-400 bg-white px-2 text-gray-500': product.isEnd,
+                  'bg-error-500 px-3 text-white ': !product.isEnd && product.isHot,
+                })}
+              >
+                {product.isEnd ? '판매종료' : product.isHot ? '핫딜' : ''}
+              </div>
+            ))}
+          <span className="text-s font-semibold text-gray-500">{product.mallName}</span>
+        </div>
+        <h1 className="text-gray-800">{product.title}</h1>
+        <div className="inline-flex items-center gap-x-3 pt-3">
+          {product.price && <p className="text-xl font-semibold">{product.price}</p>}
+          <span className="text-s text-gray-400">{displayTime(product.postedAt)}</span>
+        </div>
       </div>
-
-      <div className="inline-flex gap-x-2 pt-3">
-        {product.price && <p>{product.price}</p>}
+      <div ref={ref} className="flex h-[42px] w-full justify-center">
         <div
-          className={cn({
-            'text-semibold flex h-[22px] items-center rounded-lg text-xs leading-[20px]': true,
-            'border border-gray-400 bg-white px-2 text-gray-500': product.isEnd,
-            'bg-error-500 px-3 text-white ': !product.isEnd && product.isHot,
-          })}
+          className={cn(
+            `mt-5 flex h-[42px] w-full items-center justify-center bg-gray-50 text-sm text-gray-500 transition-all`,
+            { 'fixed top-[50px] z-50 mt-0 w-5/6 rounded-full border border-gray-100': !isView },
+          )}
         >
-          {product.isEnd ? '판매종료' : product.isHot ? '핫딜' : ''}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-x-3 pt-1">
-        <div className="inline-flex items-center gap-x-1">
-          <DisplayTimeIcon />
-          <span className="text-sm text-gray-500">{displayTime(product.postedAt)}</span>
+          지금&nbsp;
+          <strong className="font-semibold text-secondary-500">
+            {product.viewCount.toLocaleString('ko-kr')}명
+          </strong>
+          이 보고 있어요
         </div>
-        <div className="h-2 border border-gray-400"></div>
-        <span className="text-sm text-gray-400">{product.mallName}</span>
       </div>
     </section>
   );

diff --git a/apps/web/src/app/products/[id]/components/RelatedProducts.tsx b/apps/web/src/app/products/[id]/components/RelatedProducts.tsx
@@ -26,8 +26,10 @@ export default function RelatedProducts({
 
   return (
     <>
-      <hr />
-      <section>
+      <div className="px-5">
+        <hr />
+      </div>
+      <section className="px-5">
         <h2 className="pb-5 font-semibold text-gray-900">다른 고객이 함께 본 상품</h2>
         <Suspense fallback={<div></div>}>
           <div