Merge pull request #48 from DevKor-github/feat/#27/item-card

[홈화면 / #27] 상품 카드 구현 구현!

Author: halionaz

src/common/components/Navigator/index.tsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from 'react-router';
 import * as s from './style.css';
+import { NAVIGATOR_HEIGHT_PX } from '@/libs/constants/sizes';
 
 const MENU_LIST = [
   {
@@ -33,7 +34,7 @@ const Navigator = () => {
   const { pathname } = useLocation();
 
   return (
-    <nav className={s.Container}>
+    <nav className={s.Container} style={{ height: `${NAVIGATOR_HEIGHT_PX}px` }}>
       {MENU_LIST.map(({ label, path, selectedClassName, unSelectedClassName }) => {
         const selected = pathname === path;
         return (

src/common/components/Navigator/style.css.ts

@@ -27,7 +27,7 @@ export const Menu = cva({
     flexShrink: 0,
     textAlign: 'center',
     fontSize: '0.875rem',
-    lineHeight: 'normal',
+    lineHeight: 1.2,
     letterSpacing: '-0.0175rem',
     cursor: 'pointer',
     '& p': {

src/common/components/SafeArea/style.css.ts

@@ -2,4 +2,5 @@ import { css } from '@styled-system/css';
 
 export const Container = css({
   position: 'absolute',
+  bottom: 0,
 });

src/common/components/Token/index.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+
+import * as s from './style.css';
+
+const Token = ({ children }: PropsWithChildren) => {
+  return <span className={s.Container}>{children}</span>;
+};
+export default Token;

src/common/components/Token/style.css.ts

@@ -0,0 +1,11 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  padding: '0.1875rem 0.3125rem',
+  borderRadius: '4px',
+  bgColor: 'main-26',
+  color: 'main',
+  fontSize: '0.625rem',
+  fontWeight: 500,
+  letterSpacing: '-0.025rem',
+});

src/features/home/components/PostCard/index.tsx

@@ -0,0 +1,49 @@
+import { PRODUCT_TYPES_MAP, type PostInterface } from '@/libs/types/post';
+
+import * as s from './style.css';
+
+import Token from '@/common/components/Token';
+
+interface Props {
+  data: PostInterface;
+}
+const PostCard = ({ data }: Props) => {
+  return (
+    <div className={s.Container}>
+      <img className={s.Image} src={data.thumbnail} aria-hidden />
+      <div className={s.Info}>
+        <div className={s.Header}>
+          <h2 className={s.Title}>{data.title}</h2>
+          <div className={s.Price}>
+            <div className={s.PriceItem}>
+              <label>대여료</label>
+              <p>{data.price.toLocaleString()}원</p>
+            </div>
+            <div className={s.PriceItem}>
+              <label>보증금</label>
+              <p>{data.price.toLocaleString()}원</p>
+            </div>
+          </div>
+        </div>
+        <div className={s.Footer}>
+          <div className={s.Tokens}>
+            {data.productTypes.map((type, index) => (
+              <Token key={`${type}-${index}`}>{PRODUCT_TYPES_MAP[type]}</Token>
+            ))}
+          </div>
+          <div className={s.Interactions}>
+            <div className={s.InteractionItem}>
+              <span className="mgc_heart_fill" />
+              <p>{data.likeCount}</p>
+            </div>
+            <div className={s.InteractionItem}>
+              <span className="mgc_chat_2_fill" />
+              <p>{data.chatRoomCount}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default PostCard;

src/features/home/components/PostCard/style.css.ts

@@ -0,0 +1,99 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  w: 'full',
+  h: '6.25rem',
+  display: 'flex',
+  alignItems: 'stretch',
+  gap: '1rem',
+});
+
+export const Image = css({
+  w: '6.25rem',
+  h: '6.25rem',
+  borderRadius: '12.5px',
+  objectFit: 'cover',
+});
+
+export const Info = css({
+  flex: '1 0 0',
+  display: 'flex',
+  flexDir: 'column',
+  justifyContent: 'space-between',
+  padding: '0.25rem 0',
+});
+
+export const Header = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '0.25rem',
+});
+
+export const Title = css({
+  color: '100',
+  fontSize: '1rem',
+  fontWeight: 500,
+  lineHeight: 1.2,
+  letterSpacing: '-0.04rem',
+});
+
+export const Price = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.875rem',
+  height: '1.5625rem',
+});
+
+export const PriceItem = css({
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: '0.25rem',
+  '& label': {
+    color: '54',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: '-0.035rem',
+  },
+  '& p': {
+    color: '100',
+    fontSize: '1rem',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: '-0.04rem',
+  },
+});
+
+export const Footer = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+export const Tokens = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+});
+
+export const Interactions = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.875rem',
+});
+
+export const InteractionItem = css({
+  display: 'flex',
+  alignItems: 'flex-end',
+  gap: '0.1875rem',
+  color: '54',
+  '& span': {
+    fontSize: '1rem',
+  },
+  '& p': {
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    letterSpacing: '-0.03rem',
+    lineHeight: 1.2,
+  },
+});

src/features/home/components/RecentList/index.tsx

@@ -0,0 +1,16 @@
+import PostCard from '@/features/home/components/PostCard';
+import { useGetPostList } from '@/features/home/hooks/apis/useGetPostList';
+
+import * as s from './style.css';
+
+const RecentList = () => {
+  const { data: postList } = useGetPostList();
+
+  return (
+    <div className={s.Wrapper}>
+      <h2 className={s.Title}>최신 상품</h2>
+      <div className={s.PostList}>{postList?.map(post => <PostCard key={post.id} data={post} />)}</div>
+    </div>
+  );
+};
+export default RecentList;

src/features/home/components/RecentList/style.css.ts

@@ -0,0 +1,23 @@
+import { css } from '@styled-system/css';
+
+export const Wrapper = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '0.625rem',
+  px: '1rem',
+  w: 'full',
+});
+
+export const Title = css({
+  color: '100',
+  fontSize: '1rem',
+  lineHeight: 1.4,
+  letterSpacing: '-0.0255rem',
+  fontWeight: 600,
+});
+
+export const PostList = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '1rem',
+});

src/features/home/hooks/apis/useGetPostList.ts

@@ -0,0 +1,16 @@
+import client from '@/common/utils/client';
+import type { PostInterface } from '@/libs/types/post';
+import { useQuery } from '@tanstack/react-query';
+
+const getPostList = async () => {
+  const response = await client.get<{ message: string; data: PostInterface[] }>('/api/v1/post/search');
+  return response.data;
+};
+
+export const useGetPostList = () => {
+  return useQuery({
+    queryKey: ['post-list'],
+    queryFn: getPostList,
+    select: data => data.data as PostInterface[],
+  });
+};