Merge pull request #89 from DevKor-github/feat/#63/detail-bottom

[#63] 제품 페이지 하단 바 구현 구현

Author: halionaz

panda.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from '@pandacss/dev';
 const PANDA_CSS_CONSTANTS = {
   NAVIGATOR_HEIGHT: { value: '97px' },
   HOME_HEADER_HEIGHT: { value: '52px' },
-  DETAIL_PAGE_NAVIGATOR_HEIGHT: { value: '6.75rem' },
+  DETAIL_PAGE_NAVIGATOR_HEIGHT: { value: '6.375rem' },
   MAX_WIDTH: { value: '700px' },
   CHAT_ROOM_FOOTER_HEIGHT: { value: '102px' },
   CHAT_MAX_WIDTH: { value: '270px' },

src/common/components/Button/index.tsx

@@ -1,14 +1,17 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { cx } from '@styled-system/css';
+
 import * as s from './style.css';
 
 interface Props extends PropsWithChildren {
   mode?: 'main' | 'default' | 'back' | 'disabled';
   onClick?: () => void;
   style?: HTMLAttributes<HTMLDivElement>['style'];
+  className?: string;
 }
-const Btn = ({ children, mode = 'default', onClick, style }: Props) => {
+const Btn = ({ children, mode = 'default', onClick, style, className }: Props) => {
   return (
-    <div className={s.Button({ mode })} style={style} onClick={onClick}>
+    <div className={cx(s.Button({ mode }), className)} style={style} onClick={onClick}>
       {children}
     </div>
   );

src/features/detail/components/BottomActions/index.tsx

@@ -0,0 +1,70 @@
+import Btn from '@/common/components/Button';
+
+import * as s from './style.css';
+import type { TransactionType } from '@/libs/types/item';
+import type { ItemInfoInterface } from '@/features/detail/types';
+
+interface PickButtonProps {
+  type: TransactionType;
+  index: number;
+  salePrice: number;
+  deposit: number;
+  rentalFee: number;
+}
+const PickButton = ({ type, index, salePrice, deposit, rentalFee }: PickButtonProps) => {
+  const color = index === 0 ? 'red' : 'blue';
+  const label = type === 'RENTAL' ? '대여' : '구매';
+  const priceText =
+    type === 'RENTAL'
+      ? `대여료+보증금 ${(deposit + rentalFee).toLocaleString()}원`
+      : `판매가 ${salePrice.toLocaleString()}원`;
+
+  const handlePickClick = () => {
+    alert(`${type} 선택`);
+  };
+
+  return (
+    <button className={s.PickButton({ color })} onClick={handlePickClick} aria-label={`${label}, ${priceText}`}>
+      <span>{label}</span>
+      <p>{priceText}</p>
+    </button>
+  );
+};
+
+interface Props {
+  itemInfo: ItemInfoInterface;
+}
+const BottomActions = ({ itemInfo }: Props) => {
+  const { transactionTypes, mine, salePrice, deposit, rentalFee } = itemInfo;
+
+  // TODO: 실제 액션 추가
+  const handleChatClick = () => {
+    alert('채팅 연결');
+  };
+
+  return (
+    <div className={s.Container}>
+      <Btn className={s.ChatButton({ isMine: mine })} onClick={handleChatClick}>
+        <span className="mgc_chat_2_fill" />
+        {mine && <p>채팅</p>}
+      </Btn>
+      {!mine && (
+        <div className={s.PickButtonContainer}>
+          {transactionTypes.map((type, index) => {
+            return (
+              <PickButton
+                key={type}
+                type={type}
+                index={index}
+                salePrice={salePrice}
+                deposit={deposit}
+                rentalFee={rentalFee}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+export default BottomActions;

src/features/detail/components/BottomActions/style.css.ts

@@ -0,0 +1,76 @@
+import { css, cva } from '@styled-system/css';
+
+export const Container = css({
+  position: 'fixed',
+  bottom: '0',
+  left: '0',
+  right: '0',
+  height: 'DETAIL_PAGE_NAVIGATOR_HEIGHT',
+  display: 'flex',
+  gap: '0.87rem',
+  px: '1rem',
+  pt: '0.625rem',
+  bg: 'linear-gradient(180deg, rgba(28, 28, 30, 0.00) 0%, #1C1C1E 8.82%)',
+  roundedTop: '0.625rem',
+});
+
+export const ChatButton = cva({
+  base: {
+    flexShrink: 0,
+    height: '3.125rem',
+  },
+  variants: {
+    isMine: {
+      true: {
+        width: 'full',
+      },
+      false: {
+        width: '3.125rem',
+      },
+    },
+  },
+});
+
+export const PickButtonContainer = css({
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.87rem',
+  height: '3.125rem',
+});
+
+export const PickButton = cva({
+  base: {
+    flexGrow: 1,
+    flexBasis: 0,
+    flexDir: 'column',
+    gap: '0.25rem',
+    height: 'full',
+    overflow: 'hidden',
+    rounded: '0.375rem',
+    '& > span': {
+      color: '80',
+      fontSize: '1rem',
+      fontWeight: 500,
+      lineHeight: 'normal',
+      letterSpacing: '-0.04rem',
+    },
+    '& > p': {
+      color: '100',
+      fontSize: '0.75rem',
+      fontWeight: 600,
+      lineHeight: 'normal',
+      letterSpacing: '-0.03rem',
+    },
+  },
+  variants: {
+    color: {
+      red: {
+        bgColor: 'main',
+      },
+      blue: {
+        bgColor: '#3978FF',
+      },
+    },
+  },
+});

src/pages/DetailPage/index.tsx

@@ -7,6 +7,7 @@ import ImageContainer from '@/features/detail/components/ImageContainer';
 import UserInfo from '@/features/detail/components/UserInfo';
 import PostContent from '@/features/detail/components/PostContent';
 import useGetItemDetail from '@/features/detail/apis/useGetItemDetail';
+import BottomActions from '@/features/detail/components/BottomActions';
 
 const DetailPage = () => {
   const { id } = useParams();
@@ -26,6 +27,7 @@ const DetailPage = () => {
           <PostContent itemInfo={data.itemInfo} />
         </div>
       </div>
+      <BottomActions itemInfo={data.itemInfo} />
     </div>
   );
 };