diff --git a/package-lock.json b/package-lock.json index 2aeae99..c706553 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,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" } }, diff --git a/package.json b/package.json index 5637672..cca4cff 100644 --- a/package.json +++ b/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" } } diff --git a/src/assets/icons/bookmark.svg b/src/assets/icons/bookmark.svg new file mode 100644 index 0000000..38fa5df --- /dev/null +++ b/src/assets/icons/bookmark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/profile.svg b/src/assets/icons/profile.svg new file mode 100644 index 0000000..f57b3eb --- /dev/null +++ b/src/assets/icons/profile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/preview/PreviewThumbnail.tsx b/src/components/preview/PreviewThumbnail.tsx new file mode 100644 index 0000000..7f8110e --- /dev/null +++ b/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 = ({ + imageUrl = '', + profileImage = '', + username = '', + description = '', + price = 0, + isBookmarked = false, + onBookmarkClick = () => {}, + verified = false, +}) => { + return ( +
+
+
+ {username} +
+ {username} + {verified && 인증됨} +
+ +
+ {imageUrl ? ( + {description} + ) : ( + placeholder + )} +
+ +
+

{description}

+
+ {price?.toLocaleString() ?? 0}원 + +
+
+
+ ); +}; + +export default PreviewThumbnail; diff --git a/src/components/preview/previewThumbnail.module.scss b/src/components/preview/previewThumbnail.module.scss new file mode 100644 index 0000000..03b9e9d --- /dev/null +++ b/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; + } + } \ No newline at end of file