#45 board list 컴포넌트

components/Heart/Heart.tsx

@@ -5,15 +5,27 @@ import HeartIcon from './HeartIcon';
 interface HeartProps {
   initialCount: number;
   onClick?: () => void;
+  textSize?: string;
+  iconSize?: string;
+  className?: string;
 }
 
 /**
  * Heart count component
  * @param {number} initialCount - 초기 카운트 수
  * @param {function} onClick - 클릭 시 동작 할 이벤트(옵션)
+ * @param {string} textSize - 텍스트 사이즈(옵션)
+ * @param {string} iconSize - 아이콘 사이즈(옵션)
+ * @param {string} className - 커스텀 클래스(옵션)
  * @example <Heart initialCount={10} onClick={() => console.log('클릭')} />
  */
-export default function Heart({ initialCount, onClick }: HeartProps) {
+export default function Heart({
+  initialCount,
+  onClick,
+  textSize,
+  iconSize,
+  className,
+}: HeartProps) {
   const [isClicked, setIsClicked] = useState(false);
   const [count, setCount] = useState(initialCount);
 
@@ -34,11 +46,13 @@ export default function Heart({ initialCount, onClick }: HeartProps) {
 
   return (
     <Wrapper
-      className={`flex items-center gap-1 ${onClick ? 'cursor-pointer' : ''}`}
+      className={`flex items-center gap-1 ${onClick ? 'cursor-pointer' : ''} ${className}`}
       onClick={onClick ? handleClick : undefined}
     >
-      <HeartIcon fill={clickStyles.icon} />
-      <span className={`text-14 text-gray-400 mo:text-12 ${clickStyles.text}`}>
+      <HeartIcon fill={clickStyles.icon} iconSize={iconSize} />
+      <span
+        className={`text-14 text-gray-400 mo:text-12 ${clickStyles.text} ${textSize}`}
+      >
         {count}
       </span>
     </Wrapper>

components/Heart/HeartIcon.tsx

@@ -2,11 +2,17 @@
  * Heart icon
  * @param {string} fill - 색상
  */
-export default function HeartIcon({ fill = '#8F95B2' }: { fill?: string }) {
+export default function HeartIcon({
+  fill = '#8F95B2',
+  iconSize,
+}: {
+  fill?: string;
+  iconSize?: string;
+}) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className="h-[18px] w-[18px] mo:h-4 mo:w-4"
+      className={`h-[18px] w-[18px] mo:h-4 mo:w-4 ${iconSize}`}
       viewBox="0 0 18 18"
       fill="none"
     >

pages/boards/components/BoardItem.tsx

@@ -0,0 +1,61 @@
+import Link from 'next/link';
+
+import Heart from '@/components/Heart/Heart';
+import useCheckMobile from '@/hooks/useCheckMobile';
+import dateConversion from '@/utils/dateConversion';
+
+interface BoardItemProps {
+  id: number;
+  title: string;
+  name: string;
+  likeCount: number;
+  updatedAt: string;
+  className?: string;
+}
+
+/**
+ * 게시글 리스트 아이템
+ * @param {number} id - 게시글 아이디
+ * @param {string} title - 게시글 제목
+ * @param {string} name - 작성자 이름
+ * @param {number} likeCount - 좋아요 수
+ * @param {string} updatedAt - 업데이트 날짜
+ * @param {string} className - 커스텀 클래스
+ * @example <BoardItem id={1} title="게시글 제목" name="작성자" likeCount={10} updatedAt="2024-12-17T08:25:07.098Z" />
+ */
+export default function BoardItem({
+  id,
+  title,
+  name,
+  likeCount,
+  updatedAt,
+  className,
+}: BoardItemProps) {
+  const isMobile = useCheckMobile();
+
+  const textColors = 'mo:text-gray-400';
+
+  return (
+    <Link
+      href={`/boards/${id}`}
+      className={`border-b ${className} mo:flex-wrap`}
+    >
+      <p className="mo:hidden">{id}</p>
+      <p className="w-full truncate mo:mb-[3px]">{title}</p>
+      <p className={`mo:order-2 mo:mr-[16px] ${textColors}`}>{name}</p>
+      {isMobile ? (
+        <Heart
+          initialCount={likeCount}
+          textSize="mo:text-16"
+          iconSize="mo:w-[18px] mo:h-[18px]"
+          className="mo:order-4"
+        />
+      ) : (
+        <p className="mo:hidden">{likeCount}</p>
+      )}
+      <p className={`mo:order-3 mo:flex-1 ${textColors}`}>
+        {dateConversion(updatedAt)}
+      </p>
+    </Link>
+  );
+}

pages/boards/components/BoardList.tsx

@@ -0,0 +1,34 @@
+import BoardItem from './BoardItem';
+
+/**
+ * 게시글 리스트
+ * @param {any[]} data - 게시글 데이터
+ * @example <BoardList data={data} />
+ */
+export default function BoardList({ data }: { data: any[] }) {
+  const tableStyles =
+    'grid grid-cols-[50px_2fr_100px_100px_150px] py-[11px] mo:py-[14px] border-b items-center text-16 pc:px-[50px] ta:px-[20px]';
+
+  return (
+    <div className="w-full text-center mo:text-left">
+      <div className={`${tableStyles} border-t text-gray-400 mo:hidden`}>
+        <p>번호</p>
+        <p>제목</p>
+        <p>작성자</p>
+        <p>좋아요</p>
+        <p>날짜</p>
+      </div>
+      {data.map((item) => (
+        <BoardItem
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          name={item.writer.name}
+          likeCount={item.likeCount}
+          updatedAt={item.updatedAt}
+          className={`${tableStyles} mo:flex`}
+        />
+      ))}
+    </div>
+  );
+}

pages/test/boardTable.tsx

@@ -0,0 +1,28 @@
+import BoardList from '../boards/components/BoardList';
+
+const data = [
+  {
+    updatedAt: '2024-12-17T08:25:07.098Z',
+    likeCount: 123,
+    writer: {
+      name: '이름',
+      id: 1,
+    },
+    title: '게시글 제목입니다.',
+    id: 1,
+  },
+  {
+    updatedAt: '2024-12-17T08:25:07.098Z',
+    likeCount: 10,
+    writer: {
+      name: '이름',
+      id: 2,
+    },
+    title: '게시글 제목입니다.',
+    id: 2,
+  },
+];
+
+export default function BoardTableTest() {
+  return <BoardList data={data} />;
+}