diff --git a/package-lock.json b/package-lock.json index a9532ef..3ce2cbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,10 +28,8 @@ "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", - "postcss": "^8.5.3", "tailwindcss": "^4.0.15", - "typescript": "~5.7.2", "typescript-eslint": "^8.24.1", "vite": "^6.2.0" @@ -1809,7 +1807,6 @@ "dev": true, "license": "Python-2.0" }, - "node_modules/autoprefixer": { "version": "10.4.21", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", @@ -3069,9 +3066,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.8", - "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -3485,7 +3480,6 @@ "react-dom": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/postcss": { "version": "8.4.49", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", @@ -3514,7 +3508,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/stylis": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", @@ -3534,7 +3527,6 @@ "node": ">=8" } }, - "node_modules/tailwindcss": { "version": "4.0.15", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz", @@ -3542,7 +3534,6 @@ "dev": true, "license": "MIT" }, - "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3674,7 +3665,6 @@ "node": ">= 4.0.0" } }, - "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", @@ -3706,7 +3696,6 @@ "browserslist": ">= 4.21.0" } }, - "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -3838,7 +3827,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/src/assets/image/RLUSD.svg b/src/assets/image/RLUSD.svg new file mode 100644 index 0000000..376f636 --- /dev/null +++ b/src/assets/image/RLUSD.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/FileDetailPage/FileDetailPage.tsx b/src/pages/FileDetailPage/FileDetailPage.tsx index 5dd6039..f6761f8 100644 --- a/src/pages/FileDetailPage/FileDetailPage.tsx +++ b/src/pages/FileDetailPage/FileDetailPage.tsx @@ -1,13 +1,239 @@ -import { useParams } from "react-router-dom"; +import React from "react"; +import NavBar from "@/components/NavBar/NavBar"; +import RLUSD from "@/assets/image/RLUSD.svg"; -const FileDetailPage = () => { - const { id } = useParams<{ id: string }>(); // id 파라미터를 가져옵니다. +interface DocumentData { + title: string; + rating: number; + downloads: number; + pages: number; + date: string; + publisher: string; + description: string; + price: number; + currency: string; +} + +const FileDetailPage: React.FC = () => { + const documentData: DocumentData = { + title: "문서명", + rating: 4.5, + downloads: 368, + pages: 25, + date: "2025.03.20", + publisher: "윤길동", + description: "파일 업로드 때 작성한 문서 소개글", + price: 59.99, + currency: "RLUSD", + }; return ( -
-

File Detail for ID: {id}

- {/* 파일 세부 정보를 id에 따라 불러오는 로직을 추가할 수 있습니다. */} -
+ <> + + + {/* 배경 설정 */} +
+ {/* 흰색 직사각형 */} +
+ {/* 컨텐츠 컨테이너 */} +
+ {/* 문서 이미지 컨테이너 */} +
+
+ 문서 이미지 +
+
+ + {/* 문서 정보 컨테이너 */} +
+ {/* 문서 제목 */} +
+ + 📕 + +

+ {documentData.title} +

+
+ + {/* 문서 통계 정보 */} +
+ {[ + { label: "평점", value: documentData.rating }, + { label: "다운로드", value: documentData.downloads }, + { label: "페이지", value: documentData.pages }, + { label: "등록", value: documentData.date }, + ].map((item, index) => ( +
+ + {item.value} + + + {item.label} + +
+ ))} +
+ + {/* 판매자 정보 */} +
+ + 판매자 + + + {documentData.publisher} + +
+ + {/* 소개글 */} +
+ + 소개글 + +
+ {documentData.description} +
+
+ + {/* 가격 정보 */} +
+ + 가격 + +
+ RLUSD Icon + + {documentData.price} + + + {documentData.currency} + +
+
+ + {/* 구매 버튼 */} + +
+
+
+
+ ); };