#44 board card 컴포넌트

components/Heart/Heart.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import HeartIcon from './HeartIcon';
+
+interface HeartProps {
+  initialCount: number;
+  onClick?: () => void;
+}
+
+/**
+ * Heart count component
+ * @param {number} initialCount - 초기 카운트 수
+ * @param {function} onClick - 클릭 시 동작 할 이벤트(옵션)
+ * @example <Heart initialCount={10} onClick={() => console.log('클릭')} />
+ */
+export default function Heart({ initialCount, onClick }: HeartProps) {
+  const [isClicked, setIsClicked] = useState(false);
+  const [count, setCount] = useState(initialCount);
+
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+      setIsClicked((prev) => !prev);
+      setCount((prevCount) => (isClicked ? prevCount - 1 : prevCount + 1));
+    }
+  };
+
+  const clickStyles = {
+    icon: isClicked ? 'var(--red-100)' : 'var(--gray-400)',
+    text: isClicked && 'text-red-100',
+  };
+
+  const Wrapper = onClick ? 'button' : 'div';
+
+  return (
+    <Wrapper
+      className={`flex items-center gap-1 ${onClick ? 'cursor-pointer' : ''}`}
+      onClick={onClick ? handleClick : undefined}
+    >
+      <HeartIcon fill={clickStyles.icon} />
+      <span className={`text-14 text-gray-400 mo:text-12 ${clickStyles.text}`}>
+        {count}
+      </span>
+    </Wrapper>
+  );
+}

components/Heart/HeartIcon.tsx

@@ -0,0 +1,19 @@
+/**
+ * Heart icon
+ * @param {string} fill - 색상
+ */
+export default function HeartIcon({ fill = '#8F95B2' }: { fill?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-[18px] w-[18px] mo:h-4 mo:w-4"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M8.99276 14.782C8.83219 14.782 8.67089 14.7531 8.50888 14.6954C8.34686 14.6377 8.20431 14.5473 8.08123 14.4243L7.00386 13.445C5.67404 12.2325 4.48678 11.0414 3.44207 9.87164C2.39736 8.70193 1.875 7.44881 1.875 6.11229C1.875 5.04787 2.23389 4.15677 2.95168 3.43899C3.66947 2.7212 4.56057 2.3623 5.62498 2.3623C6.22978 2.3623 6.82714 2.50173 7.41705 2.78058C8.00695 3.05943 8.53459 3.51232 8.99998 4.13924C9.46537 3.51232 9.99301 3.05943 10.5829 2.78058C11.1728 2.50173 11.7702 2.3623 12.375 2.3623C13.4394 2.3623 14.3305 2.7212 15.0483 3.43899C15.7661 4.15677 16.125 5.04787 16.125 6.11229C16.125 7.46324 15.5937 8.7303 14.5312 9.91347C13.4687 11.0966 12.2841 12.2777 10.9774 13.4565L9.91151 14.4243C9.78844 14.5473 9.64469 14.6377 9.48026 14.6954C9.31584 14.7531 9.15334 14.782 8.99276 14.782ZM8.46056 5.27864C8.0548 4.66037 7.62764 4.20724 7.17908 3.91927C6.73051 3.63128 6.21248 3.48729 5.62498 3.48729C4.87498 3.48729 4.24998 3.73729 3.74998 4.23729C3.24998 4.73729 2.99998 5.36229 2.99998 6.11229C2.99998 6.71421 3.19397 7.34354 3.58194 8.00026C3.96992 8.65699 4.45693 9.30986 5.04298 9.95889C5.62904 10.6079 6.2639 11.2421 6.94755 11.8613C7.6312 12.4805 8.26486 13.056 8.84852 13.5878C8.89179 13.6262 8.94228 13.6455 8.99998 13.6455C9.05768 13.6455 9.10817 13.6262 9.15144 13.5878C9.73511 13.056 10.3688 12.4805 11.0524 11.8613C11.7361 11.2421 12.3709 10.6079 12.957 9.95889C13.543 9.30986 14.03 8.65699 14.418 8.00026C14.806 7.34354 15 6.71421 15 6.11229C15 5.36229 14.75 4.73729 14.25 4.23729C13.75 3.73729 13.125 3.48729 12.375 3.48729C11.7875 3.48729 11.2695 3.63128 10.8209 3.91927C10.3723 4.20724 9.94516 4.66037 9.5394 5.27864C9.47594 5.37479 9.39613 5.44691 9.29998 5.495C9.20382 5.54307 9.10382 5.56711 8.99998 5.56711C8.89614 5.56711 8.79614 5.54307 8.69998 5.495C8.60383 5.44691 8.52402 5.37479 8.46056 5.27864Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

next.config.ts

@@ -3,6 +3,9 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   reactStrictMode: true,
+  images: {
+    domains: ['via.placeholder.com'], // 허용할 이미지 도메인 추가
+  },
 };
 
 export default nextConfig;

pages/boards/components/BoardCard.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Heart from '@/components/Heart/Heart';
+import dateConversion from '@/utils/dateConversion';
+
+interface BoardCardProps {
+  id: number;
+  image: string;
+  title: string;
+  name: string;
+  updatedAt: string;
+  likeCount: number;
+}
+
+/**
+ * 게시글 카드 컴포넌트
+ * @param {number} id - 게시글 id
+ * @param {string} image - 게시글 이미지
+ * @param {string} title - 게시글 제목
+ * @param {string} name - 유저 이름
+ * @param {string} updatedAt - 게시글 수정일
+ * @param {number} likeCount - 게시글 좋아요 수
+ */
+export default function BoardCard({
+  id,
+  image,
+  title,
+  name,
+  updatedAt,
+  likeCount,
+}: BoardCardProps) {
+  return (
+    <Link
+      href={`/boards/${id}`}
+      className="block h-auto w-[250px] overflow-hidden rounded-custom shadow-custom dark:shadow-custom-dark ta:w-[302px]"
+    >
+      <div className="relative h-[130px] w-auto overflow-hidden bg-gray-100">
+        <Image
+          src={image === '' ? '/icon/icon-no-image.svg' : image}
+          alt={`${title} 썸네일`}
+          fill
+        />
+      </div>
+      <div className="bg-background px-[20px] pb-[14px] pt-[20px] mo:pt-[11px]">
+        <h3 className="mb-[6px] truncate text-18sb mo:mb-0 mo:text-16sb">
+          {title}
+        </h3>
+        <div className="flex items-center gap-2 text-14 text-gray-300 mo:text-12">
+          <p>{name}</p>
+          <span className="flex-1">{dateConversion(updatedAt)}</span>
+          <Heart initialCount={likeCount} />
+        </div>
+      </div>
+    </Link>
+  );
+}

pages/boards/index.tsx

@@ -0,0 +1,3 @@
+export default function Boards() {
+  return <h1>Boards</h1>;
+}

pages/test/boardCard.tsx

@@ -0,0 +1,50 @@
+import BoardCard from '../boards/components/BoardCard';
+
+const data_noImage = {
+  updatedAt: '2024-12-17T08:25:07.098Z',
+  createdAt: '2024-12-17T08:25:07.098Z',
+  likeCount: 0,
+  writer: {
+    name: '이름',
+    id: 1,
+  },
+  image: '',
+  title: '게시글 제목입니다.',
+  id: 1,
+};
+
+const data_Image = {
+  updatedAt: '2024-12-17T08:25:07.098Z',
+  createdAt: '2024-12-17T08:25:07.098Z',
+  likeCount: 0,
+  writer: {
+    name: '이름',
+    id: 1,
+  },
+  image: 'https://via.placeholder.com/1000',
+  title: '게시글 제목입니다.',
+  id: 1,
+};
+
+export default function BoardCardTest() {
+  return (
+    <div className="flex gap-4">
+      <BoardCard
+        id={data_noImage.id}
+        title={data_noImage.title}
+        image={data_noImage.image}
+        name={data_noImage.writer.name}
+        updatedAt={data_noImage.updatedAt}
+        likeCount={data_noImage.likeCount}
+      />
+      <BoardCard
+        id={data_Image.id}
+        title={data_Image.title}
+        image={data_Image.image}
+        name={data_Image.writer.name}
+        updatedAt={data_Image.updatedAt}
+        likeCount={data_Image.likeCount}
+      />
+    </div>
+  );
+}

pages/test/heart.tsx

@@ -0,0 +1,10 @@
+import Heart from '@/components/Heart/Heart';
+
+export default function HeartTest() {
+  return (
+    <>
+      <Heart initialCount={10} />
+      <Heart initialCount={10} onClick={() => console.log('클릭')} />
+    </>
+  );
+}

tsconfig.json

@@ -18,14 +18,18 @@
     "paths": {
       "@/components/*": ["components/*"],
       "@/styles/*": ["styles/*"],
-      "@/pages/*": ["pages/*"]
+      "@/pages/*": ["pages/*"],
+      "@/utils/*": ["utils/*"],
+      "@/hooks/*": ["hooks/*"]
     }
   },
   "include": [
     "pages/**/*.ts",
     "pages/**/*.tsx",
     "components/**/*.ts",
-    "components/**/*.tsx"
+    "components/**/*.tsx",
+    "utils/**/*.ts",
+    "utils/**/*.tsx"
   ],
   "exclude": ["node_modules", "dist", ".next"]
 }

utils/dateConversion.ts

@@ -0,0 +1,25 @@
+/**
+ * isoString으로 받아온 날짜를 {year}.{month}.{day} 타입으로 변환해주는 함수 입니다.
+ * 현재 시간 기준 24시간 이내 일 경우 '{time}분 전', '{time}시간 전' 으로 표기 됩니다.
+ * @param {string} isoString
+ * @returns {string}
+ */
+export default function dateConversion(isoString: string): string {
+  const createdDate = new Date(isoString); // 생성일
+  const currentDate = new Date(); // 현재 날짜
+  const timeDifference = currentDate.getTime() - createdDate.getTime(); // 오차 계산
+  const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60)); // 시간 환산
+  const minutesDifference = Math.floor(timeDifference / (1000 * 60)); // 분 환산
+
+  if (hoursDifference < 1) {
+    return `${minutesDifference}분 전`; // 생성한지 1시간이 안되었을 때
+  } else if (hoursDifference < 24) {
+    return `${hoursDifference}시간 전`; // 생성한지 24시간이 안되었을 때
+  } else {
+    // 24시간 이후로는 날짜로 표기
+    const year = createdDate.getFullYear();
+    const month = (createdDate.getMonth() + 1).toString().padStart(2, '0');
+    const day = createdDate.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+}