269 lines
7.5 KiB
TypeScript
269 lines
7.5 KiB
TypeScript
import './App.css'
|
|
import { AnnoymousNickNameProvider } from './AuthorData';
|
|
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, PostListControls, SubCommentData } from './Comment';
|
|
import CommentHeader from './CommentHeader';
|
|
import { Footer } from './Footer';
|
|
import { GalleryContent, GalleryContentHeader } from './Gallery';
|
|
import { GalleryTitleHeader } from './GalleryTitleHeader';
|
|
import { GlobalNavigationBar, Header, VisitHistory } from './Header';
|
|
import { LoginBox } from './Sidebar';
|
|
import { GalleryTable, TableRowData } from './table';
|
|
|
|
|
|
const tableData: TableRowData[] = [
|
|
{ // Survey Example
|
|
id: 2995,
|
|
category: "설문",
|
|
titleText: "어떤 상황이 와도 가족 안 굶길 것 같은 생활력 강해 보이는 스타는?",
|
|
variant: "icon_survey",
|
|
author: {
|
|
type: "operator",
|
|
},
|
|
date: "25.03.24",
|
|
views: "-",
|
|
recommendations: "-",
|
|
isAdOrSurvey: true,
|
|
},
|
|
{ // AD Example
|
|
id: 2996,
|
|
category: "AD",
|
|
titleText: "트릭컬 지금 접속 시 죠안 확정권 지급",
|
|
variant: "icon_ad",
|
|
author: {
|
|
type: "operator",
|
|
},
|
|
date: "25.03.28",
|
|
views: "-",
|
|
recommendations: "-",
|
|
isAdOrSurvey: true,
|
|
},
|
|
{ // Notice Example 1
|
|
id: 1012381,
|
|
category: "공지",
|
|
titleText: "3월 5주차 주던",
|
|
commentCount: 7,
|
|
variant: "icon_notice",
|
|
author: {
|
|
type: "nickname",
|
|
nickname: "보배단",
|
|
userType: "manager", // Optional, if applicable
|
|
},
|
|
date: "25.03.27",
|
|
views: 3178,
|
|
recommendations: 12,
|
|
isNotice: true,
|
|
},
|
|
{ // Notice Example 2
|
|
id: 784571,
|
|
category: "공지",
|
|
titleText: "인방 떡밥은 별도의 갤러리를 이용해주세요",
|
|
commentCount: 3,
|
|
variant: "icon_notice",
|
|
author: {
|
|
type: "nickname",
|
|
nickname: "ㅇㅇ",
|
|
userType: "submanager", // Optional, if applicable
|
|
},
|
|
date: "25.03.08",
|
|
views: 7018,
|
|
recommendations: 6,
|
|
isNotice: true,
|
|
},
|
|
{ // Normal Row Example 1
|
|
id: 1040045,
|
|
category: "일반",
|
|
titleText: "버서커 헬 졸업해도되는데 태초한번도 안떠서 계속 돌림",
|
|
variant: "icon_pic",
|
|
commentCount: 2,
|
|
author: {
|
|
type: "nickname",
|
|
nickname: "븜구리",
|
|
userType: "manager", // Optional, if applicable
|
|
},
|
|
date: "21:58",
|
|
views: 4,
|
|
recommendations: 0,
|
|
},
|
|
{ // Normal Row Example 2 (IP Author)
|
|
id: 1040043,
|
|
category: "일반",
|
|
titleText: "혹시 엘마가 진각무기압타 빗자루 쓸 수 있음?",
|
|
variant: "icon_txt",
|
|
author: {
|
|
type: "IP",
|
|
ip: "1.248",
|
|
},
|
|
date: "21:58",
|
|
views: 1,
|
|
recommendations: 0,
|
|
},
|
|
// ... Add all other rows from the original HTML here
|
|
{ // News Row Example
|
|
id: '', // No ID
|
|
category: "뉴스",
|
|
titleText: "'2025 조치원 봄꽃축제' 개최 소식 밝혀",
|
|
variant: "icon_dctrend",
|
|
date: "18:00",
|
|
views: "",
|
|
recommendations: "",
|
|
isNews: true,
|
|
},
|
|
];
|
|
|
|
|
|
// Sample data - replace with your actual data source/props
|
|
const comments: SubCommentData[] = [
|
|
{
|
|
id: 1,
|
|
author: { type: 'IP', ip: '222.116' }, // Assuming author is an object with type and name
|
|
text: '너 지금 상현이햄을 ■■라고',
|
|
timestamp: '03.31 17:44:25',
|
|
showDelete: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
|
|
author: { type: "IP", ip: "218.144" },
|
|
text: '미국인들도 저사람 얘기할때마다 동양인이 어쩌고랑 엮는데 왤케화남ㅋㅋ',
|
|
timestamp: '03.31 18:16:45',
|
|
showDelete: true,
|
|
},
|
|
{
|
|
id: 3,
|
|
|
|
author: { type: "IP", ip: "183.96" },
|
|
|
|
text: '다른 나라랑 다르게 미국에선 ~계 미국인이라는 정체성이 확고하고 사회적인 인식도 그럼',
|
|
timestamp: '03.31 18:18:40',
|
|
showDelete: true,
|
|
},
|
|
{
|
|
id: 4,
|
|
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
|
text: '이새낀 미국을 모르노 ㅋㅋㅋㅋ',
|
|
timestamp: '03.31 20:34:54',
|
|
showDelete: false, // No delete button in this example
|
|
},
|
|
{
|
|
id: 5,
|
|
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
|
text: '어어 내려놔라',
|
|
timestamp: '03.31 21:16:46',
|
|
showDelete: false,
|
|
},
|
|
{
|
|
id: 6,
|
|
author: { type: "nickname", nickname: '티르칸쟈카' },
|
|
text: '원종원종아...',
|
|
timestamp: '03.31 21:23:59',
|
|
showDelete: false,
|
|
},
|
|
// Add more comment objects as needed
|
|
];
|
|
|
|
|
|
function App() {
|
|
return (
|
|
<AnnoymousNickNameProvider value="썬갤러">
|
|
<div>
|
|
<Header />
|
|
<GlobalNavigationBar />
|
|
<VisitHistory recentVisits={[
|
|
{
|
|
id: 1,
|
|
name: "워썬더",
|
|
isMinor: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "배틀그라운드",
|
|
isMinor: false,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "리그오브레전드",
|
|
isMinor: false,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "발로란트",
|
|
isMinor: false,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "오버워치",
|
|
isMinor: true,
|
|
}
|
|
]} />
|
|
<div className='relative w-[1450px] mx-auto'>
|
|
<main
|
|
className='w-[1160px] m-[20px_auto_0]'
|
|
>
|
|
<section className='' >
|
|
<GalleryTitleHeader title='워썬더 갤러리' />
|
|
<div
|
|
className='border-custom-blue-dark border w-[1158px]'
|
|
/>
|
|
<GalleryContentHeader kind='일반'
|
|
title={'아 e글 유파들이 고도 왜 안올리는지 알았다'}
|
|
author={{
|
|
type: "IP",
|
|
ip: "183.96",
|
|
}}
|
|
date='2025.02.04 21:32:47'
|
|
views={1234}
|
|
recommendations={12}
|
|
commentCount={9}
|
|
/>
|
|
<GalleryContent />
|
|
<CommentHeader commentCount={9} />
|
|
<CommentListContainer>
|
|
<CommentItem comment={{
|
|
id: 1,
|
|
author: { type: "nickname", nickname: "동아리망했다" },
|
|
text: '너 지금 상현이햄을 ■■라고',
|
|
timestamp: '03.31 17:44:25',
|
|
showDelete: true,
|
|
}} />
|
|
<CommentItem comment={{
|
|
id: 2,
|
|
author: { type: "IP", ip: "218.144" },
|
|
text: '그냥 미국인인데 조센징들은 왜 조선계라고 못 넣어서 안달일까',
|
|
timestamp: '03.31 18:16:45',
|
|
showDelete: true,
|
|
subComments: comments,
|
|
}} />
|
|
<CommentItem comment={{
|
|
id: 3,
|
|
author: { type: "IP", ip: "123.245" },
|
|
text: 'aaa',
|
|
timestamp: '03.31 18:16:45',
|
|
showDelete: true,
|
|
}} />
|
|
</CommentListContainer>
|
|
<CommentPagination currentPage={1} maxPage={2} />
|
|
<CommentInput />
|
|
<PostListControls owner />
|
|
<div className='flex justify-between'>
|
|
<div style={{
|
|
width: "840px",
|
|
}}>
|
|
<GalleryTable data={tableData} />
|
|
<PostListControls />
|
|
</div>
|
|
<div style={{
|
|
width: "300px",
|
|
}}>
|
|
<LoginBox />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<Footer />
|
|
</div >
|
|
</AnnoymousNickNameProvider>
|
|
)
|
|
}
|
|
|
|
export default App
|