Merge pull request #18 from gyuhochoime/feat/createPreviewThumbnail

feat:미리보기 컴포넌트 구현

package.json

@@ -42,7 +42,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^6.0.5",
+    "vite": "^6.0.7",
     "vite-plugin-svgr": "^4.3.0"
   }
 }

src/components/preview/PreviewThumbnail.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styles from './previewThumbnail.module.scss';
+import Bookmark from '../../assets/icons/bookmark.svg?react';
+
+interface PreviewThumbnailProps {
+  imageUrl?: string;
+  profileImage?: string;
+  username?: string;
+  description?: string;
+  price?: number;
+  isBookmarked?: boolean;
+  onBookmarkClick?: () => void;
+  verified?: boolean;
+}
+
+const PreviewThumbnail: React.FC<PreviewThumbnailProps> = ({
+  imageUrl = '',
+  profileImage = '',
+  username = '',
+  description = '',
+  price = 0,
+  isBookmarked = false,
+  onBookmarkClick = () => {},
+  verified = false,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.profileSection}>
+        <div className={styles.profileImage}>
+          <img
+            src={profileImage || '/api/placeholder/24/24'}
+            alt={username}
+          />
+        </div>
+        <span>{username}</span>
+        {verified && <span className={styles.verifiedBadge}>인증됨</span>}
+      </div>
+
+      <div className={styles.thumbnailImage}>
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={description}
+          />
+        ) : (
+          <img
+            src='/api/placeholder/312/372'
+            alt='placeholder'
+          />
+        )}
+      </div>
+
+      <div className={styles.contentSection}>
+        <p>{description}</p>
+        <div className={styles.priceSection}>
+          <span>{price?.toLocaleString() ?? 0}원</span>
+          <button onClick={onBookmarkClick}>
+            <Bookmark
+              className={`${styles.bookmarkIcon} ${isBookmarked ? styles.bookmarked : ''}`}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewThumbnail;

src/components/preview/previewThumbnail.module.scss

@@ -0,0 +1,95 @@
+.container {
+    width: 312px;
+    border: 0.5px solid #DBDBDB;
+    border-radius: 5px;
+  }
+
+  .profileSection {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+
+    & > span {
+      font-size: 14px;
+      color: #424242;
+    }
+  }
+
+  .profileImage {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .verifiedBadge {
+    padding: 2px 8px;
+    background-color: #006AC6;
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+
+  .thumbnailImage {
+    width: 312px;
+    height: 372px;
+    background-color: #DBDBDB;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .contentSection {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    & > p {
+      font-size: 14px;
+      color: #424242;
+    }
+  }
+
+  .priceSection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > span {
+      font-weight: 500;
+      font-size: 16px;
+      color: #424242;
+    }
+
+    & > button {
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 0;
+    }
+  }
+
+  .bookmarkIcon {
+    width: 20px;
+    height: 20px;
+    color: #757575;
+
+    &.bookmarked {
+      fill: #757575;
+    }
+
+    &:hover {
+      color: #424242;
+    }
+  }