monoid/dc-copy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

content

Browse source
This commit is contained in:
monoid 2025-02-05 00:03:38 +09:00
parent 801daef5ec
commit c0bbd74a34
6 changed files with 915 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
pnpm-lock.yaml generated
View file

@ -29,16 +29,16 @@ importers:
version: 18.3.5(@types/react@18.3.18)
'@vitejs/plugin-react-swc':
specifier: ^3.5.0
version: 3.7.2(vite@6.0.9)
version: 3.7.2(vite@6.0.9(jiti@2.4.2)(lightningcss@1.29.1))
eslint:
specifier: ^9.17.0
version: 9.18.0
version: 9.18.0(jiti@2.4.2)
eslint-plugin-react-hooks:
specifier: ^5.0.0
version: 5.1.0(eslint@9.18.0)
version: 5.1.0(eslint@9.18.0(jiti@2.4.2))
eslint-plugin-react-refresh:
specifier: ^0.4.16
version: 0.4.18(eslint@9.18.0)
version: 0.4.18(eslint@9.18.0(jiti@2.4.2))
globals:
specifier: ^15.14.0
version: 15.14.0
@ -47,10 +47,10 @@ importers:
version: 5.6.3
typescript-eslint:
specifier: ^8.18.2
version: 8.20.0(eslint@9.18.0)(typescript@5.6.3)
version: 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
vite:
specifier: ^6.0.5
version: 6.0.9
version: 6.0.9(jiti@2.4.2)(lightningcss@1.29.1)
packages:
@ -582,6 +582,11 @@ packages:
deep-is@0.1.4:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
detect-libc@1.0.3:
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
engines: {node: '>=0.10'}
hasBin: true
esbuild@0.24.2:
resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
engines: {node: '>=18'}
@ -734,6 +739,10 @@ packages:
isexe@2.0.0:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@ -757,6 +766,70 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'}
lightningcss-darwin-arm64@1.29.1:
resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
lightningcss-darwin-x64@1.29.1:
resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
lightningcss-freebsd-x64@1.29.1:
resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
lightningcss-linux-arm-gnueabihf@1.29.1:
resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
lightningcss-linux-arm64-gnu@1.29.1:
resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-arm64-musl@1.29.1:
resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-x64-gnu@1.29.1:
resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-linux-x64-musl@1.29.1:
resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-win32-arm64-msvc@1.29.1:
resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
lightningcss-win32-x64-msvc@1.29.1:
resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
lightningcss@1.29.1:
resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
engines: {node: '>= 12.0.0'}
locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
@ -1052,9 +1125,9 @@ snapshots:
'@esbuild/win32-x64@0.24.2':
optional: true
'@eslint-community/eslint-utils@4.4.1(eslint@9.18.0)':
'@eslint-community/eslint-utils@4.4.1(eslint@9.18.0(jiti@2.4.2))':
dependencies:
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
eslint-visitor-keys: 3.4.3
'@eslint-community/regexpp@4.12.1': {}
@ -1243,15 +1316,15 @@ snapshots:
'@types/prop-types': 15.7.14
csstype: 3.1.3
'@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.18.0)(typescript@5.6.3))(eslint@9.18.0)(typescript@5.6.3)':
'@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)':
dependencies:
'@eslint-community/regexpp': 4.12.1
'@typescript-eslint/parser': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/parser': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
'@typescript-eslint/scope-manager': 8.20.0
'@typescript-eslint/type-utils': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/type-utils': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
'@typescript-eslint/visitor-keys': 8.20.0
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
graphemer: 1.4.0
ignore: 5.3.2
natural-compare: 1.4.0
@ -1260,14 +1333,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@typescript-eslint/parser@8.20.0(eslint@9.18.0)(typescript@5.6.3)':
'@typescript-eslint/parser@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)':
dependencies:
'@typescript-eslint/scope-manager': 8.20.0
'@typescript-eslint/types': 8.20.0
'@typescript-eslint/typescript-estree': 8.20.0(typescript@5.6.3)
'@typescript-eslint/visitor-keys': 8.20.0
debug: 4.4.0
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
typescript: 5.6.3
transitivePeerDependencies:
- supports-color
@ -1277,12 +1350,12 @@ snapshots:
'@typescript-eslint/types': 8.20.0
'@typescript-eslint/visitor-keys': 8.20.0
'@typescript-eslint/type-utils@8.20.0(eslint@9.18.0)(typescript@5.6.3)':
'@typescript-eslint/type-utils@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)':
dependencies:
'@typescript-eslint/typescript-estree': 8.20.0(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
debug: 4.4.0
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
ts-api-utils: 2.0.0(typescript@5.6.3)
typescript: 5.6.3
transitivePeerDependencies:
@ -1304,13 +1377,13 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@typescript-eslint/utils@8.20.0(eslint@9.18.0)(typescript@5.6.3)':
'@typescript-eslint/utils@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)':
dependencies:
'@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0)
'@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0(jiti@2.4.2))
'@typescript-eslint/scope-manager': 8.20.0
'@typescript-eslint/types': 8.20.0
'@typescript-eslint/typescript-estree': 8.20.0(typescript@5.6.3)
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
typescript: 5.6.3
transitivePeerDependencies:
- supports-color
@ -1320,10 +1393,10 @@ snapshots:
'@typescript-eslint/types': 8.20.0
eslint-visitor-keys: 4.2.0
'@vitejs/plugin-react-swc@3.7.2(vite@6.0.9)':
'@vitejs/plugin-react-swc@3.7.2(vite@6.0.9(jiti@2.4.2)(lightningcss@1.29.1))':
dependencies:
'@swc/core': 1.10.8
vite: 6.0.9
vite: 6.0.9(jiti@2.4.2)(lightningcss@1.29.1)
transitivePeerDependencies:
- '@swc/helpers'
@ -1392,6 +1465,9 @@ snapshots:
deep-is@0.1.4: {}
detect-libc@1.0.3:
optional: true
esbuild@0.24.2:
optionalDependencies:
'@esbuild/aix-ppc64': 0.24.2
@ -1422,13 +1498,13 @@ snapshots:
escape-string-regexp@4.0.0: {}
eslint-plugin-react-hooks@5.1.0(eslint@9.18.0):
eslint-plugin-react-hooks@5.1.0(eslint@9.18.0(jiti@2.4.2)):
dependencies:
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
eslint-plugin-react-refresh@0.4.18(eslint@9.18.0):
eslint-plugin-react-refresh@0.4.18(eslint@9.18.0(jiti@2.4.2)):
dependencies:
eslint: 9.18.0
eslint: 9.18.0(jiti@2.4.2)
eslint-scope@8.2.0:
dependencies:
@ -1439,9 +1515,9 @@ snapshots:
eslint-visitor-keys@4.2.0: {}
eslint@9.18.0:
eslint@9.18.0(jiti@2.4.2):
dependencies:
'@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0)
'@eslint-community/eslint-utils': 4.4.1(eslint@9.18.0(jiti@2.4.2))
'@eslint-community/regexpp': 4.12.1
'@eslint/config-array': 0.19.1
'@eslint/core': 0.10.0
@ -1475,6 +1551,8 @@ snapshots:
minimatch: 3.1.2
natural-compare: 1.4.0
optionator: 0.9.4
optionalDependencies:
jiti: 2.4.2
transitivePeerDependencies:
- supports-color
@ -1572,6 +1650,9 @@ snapshots:
isexe@2.0.0: {}
jiti@2.4.2:
optional: true
js-tokens@4.0.0: {}
js-yaml@4.1.0:
@ -1593,6 +1674,52 @@ snapshots:
prelude-ls: 1.2.1
type-check: 0.4.0
lightningcss-darwin-arm64@1.29.1:
optional: true
lightningcss-darwin-x64@1.29.1:
optional: true
lightningcss-freebsd-x64@1.29.1:
optional: true
lightningcss-linux-arm-gnueabihf@1.29.1:
optional: true
lightningcss-linux-arm64-gnu@1.29.1:
optional: true
lightningcss-linux-arm64-musl@1.29.1:
optional: true
lightningcss-linux-x64-gnu@1.29.1:
optional: true
lightningcss-linux-x64-musl@1.29.1:
optional: true
lightningcss-win32-arm64-msvc@1.29.1:
optional: true
lightningcss-win32-x64-msvc@1.29.1:
optional: true
lightningcss@1.29.1:
dependencies:
detect-libc: 1.0.3
optionalDependencies:
lightningcss-darwin-arm64: 1.29.1
lightningcss-darwin-x64: 1.29.1
lightningcss-freebsd-x64: 1.29.1
lightningcss-linux-arm-gnueabihf: 1.29.1
lightningcss-linux-arm64-gnu: 1.29.1
lightningcss-linux-arm64-musl: 1.29.1
lightningcss-linux-x64-gnu: 1.29.1
lightningcss-linux-x64-musl: 1.29.1
lightningcss-win32-arm64-msvc: 1.29.1
lightningcss-win32-x64-msvc: 1.29.1
optional: true
locate-path@6.0.0:
dependencies:
p-locate: 5.0.0
@ -1740,12 +1867,12 @@ snapshots:
dependencies:
prelude-ls: 1.2.1
typescript-eslint@8.20.0(eslint@9.18.0)(typescript@5.6.3):
typescript-eslint@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3):
dependencies:
'@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.18.0)(typescript@5.6.3))(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/parser': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.6.3)
eslint: 9.18.0
'@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3))(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
'@typescript-eslint/parser': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
'@typescript-eslint/utils': 8.20.0(eslint@9.18.0(jiti@2.4.2))(typescript@5.6.3)
eslint: 9.18.0(jiti@2.4.2)
typescript: 5.6.3
transitivePeerDependencies:
- supports-color
@ -1756,13 +1883,15 @@ snapshots:
dependencies:
punycode: 2.3.1
vite@6.0.9:
vite@6.0.9(jiti@2.4.2)(lightningcss@1.29.1):
dependencies:
esbuild: 0.24.2
postcss: 8.5.1
rollup: 4.31.0
optionalDependencies:
fsevents: 2.3.3
jiti: 2.4.2
lightningcss: 1.29.1
which@2.0.2:
dependencies:

21
src/App.tsx
View file

@ -3,6 +3,8 @@ import './minor.css'
import './content.css'
import './App.css'
import { format } from 'date-fns';
import { GalleryContent } from './Gallery';
import { GalleryTitleHeader } from './GalleryTitleHeader';
function getTimeFromNow(date: Date) {
@ -238,7 +240,24 @@ function GalleryTable() {
function App() {
return (
<GalleryTable />
<>
<div
style={{
width: "1160px",
margin: "20px auto 0",
}}
>
<GalleryTitleHeader />
<div
style={{
borderTop: "2px solid #29367c",
width: "1158px"
}}
/>
<GalleryContent />
</div>
<GalleryTable />
</>
)
}

533
src/Gallery.tsx Normal file
View file

@ -0,0 +1,533 @@
import { Separator } from "./Separator"
function GalleryContentHeader() {
return <header>
<div
style={{
marginTop: "16px",
marginBottom: "29px",
paddingBottom: "11px",
borderBottomWidth: "1px",
borderBottomStyle: "solid",
borderBottomColor: "rgb(238, 238, 238)"
}}
>
<h3
style={{
paddingRight: "2px",
paddingLeft: "2px",
marginBottom: "7px",
fontSize: "14px",
}}
>
<span> [일반] </span>
<span>
아 e글 유파들이 고도 왜 안올리는지 알았다
</span>
<span> </span>
</h3>
<div
style={{
position: "relative",
fontSize: "13px",
cursor: "pointer",
paddingRight: "2px",
paddingLeft: "2px",
}}
>
<div style={{ float: "left" }}>
<span>
<em> 썬갤러 </em>
</span>
<span
style={{
backgroundColor: "transparent",
fontFamily: "tahoma, sans-serif",
fontSize: "11px",
color: "rgb(153, 153, 153)"
}}
>
(110.15)
</span>
<span style={{ backgroundColor: "transparent", cursor: "default" }}>
<Separator />
2025.02.04 21:32:47
</span>
</div>
<div
style={{
float: "right",
paddingRight: "7px",
}}
>
<span style={{ cursor: "default" }}>
조회 65
</span>
<span style={{ cursor: "default" }}>
<Separator />
추천 0
</span>
<span style={{ cursor: "default" }}>
<Separator />
<a
style={{
backgroundColor: "rgb(238, 238, 238)",
color: "rgb(51, 51, 51)",
display: "inline-block",
height: "20px",
lineHeight: "20px",
padding: "0px 10px",
border: "1px solid rgb(204, 204, 204)",
borderRadius: "50px",
}}
>
댓글 13
</a>
</span>
</div>
<div style={{ clear: "both" }}></div>
</div>
</div>
</header>
}
function GalleryRecommendation() {
return <div
style={{
backgroundColor: "rgb(255, 255, 255)",
width: "auto",
height: "auto",
marginRight: "auto",
marginBottom: "36px",
marginLeft: "auto",
paddingTop: "19px",
border: "1px solid rgb(196, 196, 196)",
borderRadius: "2px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
clear: "both",
minWidth: "288px",
display: "table"
}}
>
<div
style={{
backgroundColor: "transparent",
textAlign: "center",
fontSize: "0px",
}}
>
<div
style={{
backgroundColor: "transparent",
overflow: "hidden",
width: "139px",
marginBottom: "2px",
display: "inline-block"
}}
>
<div
style={{
backgroundColor: "transparent",
float: "left",
width: "67px",
paddingTop: "10px",
paddingLeft: "11px",
textAlign: "center",
fontWeight: "bold",
color: "rgb(85, 85, 85)"
}}
>
<p
style={{
backgroundColor: "transparent",
color: "rgb(211, 25, 0)",
fontSize: "12px",
}}
>0</p>
<p style={{ backgroundColor: "transparent", lineHeight: "12px" }}>
<span>
<img
style={{
backgroundColor: "transparent",
verticalAlign: "middle"
}}
/>
</span>
<span
style={{
backgroundColor: "transparent",
color: "rgb(41, 54, 124)",
fontSize: "11px",
fontWeight: "normal"
}}
>
0
</span>
</p>
</div>
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "middle",
fontSize: "12px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
float: "right",
width: "56px",
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
backgroundPositionX: "0px",
backgroundPositionY: "-315px",
display: "inline-block",
width: "56px",
height: "56px",
}}
></em>
</button>
</div>
<div
style={{
backgroundColor: "transparent",
overflowX: "hidden",
overflowY: "hidden",
width: "139px",
marginBottom: "2px",
display: "inline-block",
marginLeft: "10px",
}}
>
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "middle",
fontSize: "12px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
float: "left",
width: "56px",
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("https://nstatic.dcinside.com/dc/w/images/sp/sp_img.png?1112")',
backgroundRepeat: "no-repeat",
backgroundPositionX: "0px",
backgroundPositionY: "-377px",
display: "inline-block",
width: "56px",
height: "56px",
}}
/>
</button>
<div
style={{
backgroundColor: "transparent",
float: "right",
width: "64px",
paddingTop: "17px",
paddingRight: "12px",
textAlign: "center",
fontWeight: "bold",
color: "rgb(85, 85, 85)",
fontSize: "16px",
}}
>
<p style={{ backgroundColor: "transparent" }}> 0 </p>
</div>
</div>
</div>
<div
style={{
backgroundColor: "transparent",
clear: "both",
position: "relative",
height: "36px",
borderTopWidth: "1px",
borderTopStyle: "solid",
borderTopColor: "rgb(196, 196, 196)"
}}
>
<button
style={{
backgroundColor: "rgb(249, 249, 249)",
cursor: "pointer",
verticalAlign: "middle",
float: "left",
width: "95px",
height: "36px",
marginLeft: "1px",
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: "rgb(196, 196, 196)",
color: "rgb(85, 85, 85)",
textShadow: "rgb(255, 255, 255) 0px 1px",
position: "relative"
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
width: "23px",
height: "23px",
backgroundPositionX: "-270px",
backgroundPositionY: "-983px",
marginRight: "3px",
marginTop: "2px",
verticalAlign: "-8px",
display: "inline-block"
}}
>
</em>
실베추
</button>
<button
style={{
backgroundColor: "rgb(249, 249, 249)",
cursor: "pointer",
verticalAlign: "middle",
width: "96px",
float: "left",
height: "36px",
marginLeft: "1px",
borderRightWidth: "1px",
borderRightStyle: "solid",
borderRightColor: "rgb(196, 196, 196)",
color: "rgb(85, 85, 85)",
textShadow: "rgb(255, 255, 255) 0px 1px",
position: "relative"
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
width: "17px",
height: "20px",
backgroundPositionX: "-74px",
backgroundPositionY: "-262px",
marginRight: "6px",
verticalAlign: "-4px",
display: "inline-block"
}}
>
</em>
공유
</button>
<button
style={{
backgroundColor: "rgb(249, 249, 249)",
cursor: "pointer",
verticalAlign: "middle",
fontSize: "12px",
float: "left",
width: "95px",
height: "36px",
marginLeft: "1px",
color: "rgb(85, 85, 85)",
textShadow: "rgb(255, 255, 255) 0px 1px",
position: "relative"
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
width: "18px",
height: "20px",
backgroundPositionX: "-74px",
backgroundPositionY: "-241px",
marginRight: "6px",
verticalAlign: "-4px",
display: "inline-block"
}}
>
</em>
신고
</button>
<div
style={{ clear: "both" }}
></div>
</div>
</div>
}
function GalleryNFTPublishButton() {
return <div
style={{
backgroundColor: "transparent",
position: "absolute",
left: "0px",
top: "0px",
fontSize: "0px",
}}
>
<button
style={{
backgroundColor: "rgb(59, 72, 144)",
cursor: "pointer",
verticalAlign: "middle",
fontSize: "12px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
textShadow: "rgb(29, 39, 97) 0px -1px",
color: "rgb(255, 255, 255)",
overflow: "hidden",
width: "auto",
paddingRight: "12px",
paddingLeft: "11px",
height: "31px",
lineHeight: "29px",
marginLeft: "3px",
border: "1px solid rgb(41, 54, 124)",
borderRadius: "2px",
fontWeight: "bold"
}}
>
NFT 발행하기
</button>
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "middle",
fontSize: "12px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
backgroundImage:
'url("https://nstatic.dcinside.com/dc/w/images/sp/sp_image.png")',
backgroundRepeat: "no-repeat",
display: "inline-block",
width: "17px",
height: "17px",
backgroundPositionX: "-1px",
backgroundPositionY: "-1px",
lineHeight: "0px",
marginLeft: "5px",
}}
>
<span
style={{
backgroundColor: "transparent",
position: "absolute",
overflowX: "hidden",
overflowY: "hidden",
visibility: "hidden",
marginTop: "-1px",
marginRight: "-1px",
marginBottom: "-1px",
marginLeft: "-1px",
width: "0px",
top: "-9999px",
fontSize: "0px",
}}
>
엔에프티 안내
</span>
</button>
</div>
}
export function GalleryContent() {
return <div
style={{
backgroundColor: "transparent",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, 굴림, Gulim, sans-serif',
fontSize: "13px",
color: "rgb(51, 51, 51)"
}}
>
<GalleryContentHeader />
<div style={{ lineHeight: "22px" }}>
<div style={{ backgroundColor: "transparent", marginBottom: "50px" }}>
<div
style={{
overflow: "hidden",
position: "relative"
}}
>
<div>
<span style={{ backgroundColor: "transparent", marginLeft: "10px" }}>
<img
style={{
backgroundColor: "transparent",
maxWidth: "100%",
width: "550px",
height: "350px",
}}
/>
</span>
</div>
<pre />
<div
style={{
backgroundColor: "transparent",
overflow: "hidden",
width: "900px",
}}
>
<p>
s텀 라주르같은걸로 트리밀고 탑젯 처음타니까 고도 올려야한단건
모르는거임 이거말곤 ㄹㅇ 뭐가 없을듯
</p>
<p>
그냥 진짜 몰라서 안올리는게 아닐까 싶음
</p>
</div>
</div>
</div>
<div style={{ backgroundColor: "transparent", position: "relative" }}>
<GalleryNFTPublishButton />
<GalleryRecommendation />
</div>
<div
style={{
backgroundColor: "transparent",
width: "100%",
overflow: "hidden",
textAlign: "center",
marginTop: "10px",
}}
/>
<div
style={{
backgroundColor: "transparent",
width: "728px",
marginTop: "20px",
marginRight: "auto",
marginLeft: "auto"
}}
>
</div>
</div>
</div>
}

183
src/GalleryTitleHeader.tsx Normal file
View file

@ -0,0 +1,183 @@
import { Separator } from "./Separator";
export function GalleryTitleHeader() {
return <header>
<div
style={{
backgroundColor: "transparent",
height: "37px",
marginBottom: "3px",
paddingTop: "4px",
}}
>
<div style={{ float: "left" }}>
<h2
style={{
backgroundColor: "transparent",
marginTop: "-2px",
marginRight: "6px",
marginLeft: "2px",
float: "left",
fontSize: "24px",
maxWidth: "420px",
fontFamily: "'Nanum Gothic', sans-serif",
letterSpacing: "-1px",
margin: "2px 8px 0 3px",
"textOverflow": "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
color: "#29367c",
}}
>
<a style={{ color: "rgb(41, 54, 124)" }}>
워썬더 갤러리
<div
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
display: "inline-block",
verticalAlign: "top",
marginLeft: "4px",
width: "22px",
height: "22px",
backgroundPositionX: "-195px",
backgroundPositionY: "-844px",
marginTop: "3px",
}}
>
</div>
</a>
</h2>
<div style={{ clear: "both" }}></div>
</div>
<div style={{ backgroundColor: "transparent", float: "right", paddingTop: "12px" }}>
<div style={{
backgroundColor: "transparent",
position: "relative",
display: "inline-block"
}}>
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "top",
fontSize: "12px",
color: "rgb(51, 51, 51)",
position: "relative"
}}
>
설정
</button>
<span style={{ backgroundColor: "transparent", marginRight: "2px" }}>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
display: "inline-block",
width: "6px",
height: "6px",
marginLeft: "4px",
verticalAlign: "4px",
lineHeight: "30px",
backgroundPositionX: "-70px",
backgroundPositionY: "-59px"
}}
>
</em>
</span>
</div>
<Separator />
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "top",
fontSize: "12px",
fontFamily:
'-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", arial, Dotum, 돋움, sans-serif',
color: "rgb(51, 51, 51)"
}}
>
연관 갤러리(2/8)
<span
style={{
backgroundColor: "transparent",
marginRight: "2px",
marginLeft: "2px",
display: "none"
}}
>
</span>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
display: "inline-block",
width: "9px",
height: "5px",
backgroundPositionX: "-115px",
backgroundPositionY: "-43px",
verticalAlign: "1px",
marginLeft: "2px",
}}
>
</em>
</button>
<Separator />
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "top",
fontSize: "12px",
color: "rgb(51, 51, 51)"
}}
>
갤주소 복사
</button>
<Separator />
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "top",
fontSize: "12px",
color: "rgb(51, 51, 51)"
}}
>이용안내</button>
<Separator />
<button
style={{
backgroundColor: "transparent",
cursor: "pointer",
verticalAlign: "top",
fontSize: "12px",
color: "rgb(51, 51, 51)"
}}
>
<em
style={{
backgroundColor: "transparent",
backgroundImage:
'url("/sp_image.png")',
backgroundRepeat: "no-repeat",
display: "inline-block",
width: "15px",
height: "15px",
backgroundPositionX: "-56px",
backgroundPositionY: "-168px",
marginTop: "1px",
}}
>
</em>
</button>
</div>
</div>
</header >
}

11
src/Separator.tsx Normal file
View file

@ -0,0 +1,11 @@
export function Separator() {
return <div style={{
content: "",
display: "inline-block",
width: "1px",
height: "12px",
background: "#ccc",
margin: "0 10px 0 6px",
verticalAlign: "-1px",
}} />;
}

5
vite.config.ts
View file

@ -1,7 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
],
})