Merge branch 'dev' into feat/#97/filter-control

Author: halionaz

package.json

@@ -24,6 +24,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
+    "react-textarea-autosize": "^8.5.9",
     "swiper": "^11.2.10",
     "zustand": "^5.0.6"
   },

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/common/components/ItemTokenList/index.tsx

@@ -19,9 +19,9 @@ interface Props {
     quality?: Quality;
     size: Size;
   };
-  showAll?: boolean;
+  showCount?: number;
 }
-const ItemTokenList = ({ itemInfo, showAll = true }: Props) => {
+const ItemTokenList = ({ itemInfo, showCount }: Props) => {
   const tags: TagType[] = [
     ...(itemInfo.transactionTypes || []),
     ...(itemInfo.productTypes || []),
@@ -30,7 +30,8 @@ const ItemTokenList = ({ itemInfo, showAll = true }: Props) => {
     ...(itemInfo.color ? [itemInfo.color] : []),
     ...(itemInfo.tradeMethods || []),
   ];
-  const showTags = showAll ? tags : tags.slice(0, 4);
+  const showAll = showCount === undefined;
+  const showTags = showAll ? tags : tags.slice(0, showCount);
   const noneShownCount = tags.length - showTags.length;
 
   return (

src/common/utils/getImageUrl.ts

@@ -1,11 +1,10 @@
+const prefixUrl = import.meta.env.VITE_IMAGE_PREFIX_URL || '';
+
 const getImageUrl = (imageUrl: string) => {
   if (imageUrl.startsWith('http')) {
     return imageUrl;
   }
-  const prefixUrl = import.meta.env.VITE_IMAGE_PREFIX_URL || '';
-  if (!prefixUrl) {
-    throw new Error('VITE_IMAGE_PREFIX_URL is not defined or is empty.');
-  }
+
   return `${prefixUrl}/${imageUrl}`;
 };
 

src/features/chat/apis/usePostChatRoom.ts

@@ -0,0 +1,18 @@
+// 채팅방 들어갔을 때 오는 값
+import client from '@/common/utils/client';
+import { useMutation } from '@tanstack/react-query';
+
+const postChatRoom = async ({ chatRoomId }: { chatRoomId: number }) => {
+  const res = await client.post(`/api/v1/chatroom/${chatRoomId}/enter`, null, {
+    params: { pageSize: 5 },
+  });
+
+  console.log(res.data.message);
+
+  return res;
+};
+
+export const usePostChatRoom = () =>
+  useMutation({
+    mutationFn: postChatRoom,
+  });

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/features/home/components/ItemCard/PriceToken/index.tsx

@@ -7,14 +7,16 @@ interface Props {
 const PriceToken = ({ price, deposit }: Props) => {
   const isRental = deposit !== undefined;
   return (
-    <div className={s.PriceItem}>
-      <label>{isRental ? '대여' : '판매'}</label>
-      <p>{price.toLocaleString()}원</p>
+    <div className={s.Wrapper}>
+      <div className={s.PriceItem}>
+        <label>{isRental ? '대여료' : '판매가'}</label>
+        <p>{price.toLocaleString()}원</p>
+      </div>
       {isRental && (
-        <p>
+        <div className={s.PriceItem}>
           <label>보증금</label>
-          {deposit.toLocaleString()}원
-        </p>
+          <p>{deposit.toLocaleString()}원</p>
+        </div>
       )}
     </div>
   );

src/features/home/components/ItemCard/PriceToken/style.css.ts

@@ -1,37 +1,27 @@
 import { css } from '@styled-system/css';
 
-export const PriceItem = css({
+export const Wrapper = css({
   display: 'flex',
   alignItems: 'center',
-  gap: '0.375rem',
+  gap: '0.875rem',
+  height: '1.375rem',
+});
+
+export const PriceItem = css({
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: '0.25rem',
+  lineHeight: 1.4,
   '& > label': {
-    padding: '0.125rem 0.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    rounded: '0.25rem',
-    bgColor: 'systemGray4',
     color: '54',
-    fontSize: '0.625rem',
+    fontSize: '0.75rem',
     fontWeight: 500,
-    lineHeight: 1.4,
-    letterSpacing: '-0.025rem',
-    flexShrink: 0,
+    letterSpacing: '-0.03rem',
   },
-  '& p': {
+  '& > p': {
     color: '100',
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     fontWeight: 600,
-    lineHeight: 1.4,
-    letterSpacing: '-0.04rem',
-    display: 'flex',
-    gap: '0.375rem',
-    alignItems: 'baseline',
-    '& > label': {
-      color: '54',
-      fontSize: '0.875rem',
-      fontWeight: 500,
-      letterSpacing: '-0.035rem',
-    },
+    letterSpacing: '-0.035rem',
   },
 });