PostListControls
This commit is contained in:
parent
76007a46c7
commit
6996ea7a0e
2 changed files with 149 additions and 87 deletions
176
src/App.tsx
176
src/App.tsx
|
|
@ -1,5 +1,5 @@
|
|||
import './App.css'
|
||||
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
||||
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, PostListControls, SubCommentData } from './Comment';
|
||||
import CommentHeader from './CommentHeader';
|
||||
import { Footer } from './Footer';
|
||||
import { GalleryContent } from './Gallery';
|
||||
|
|
@ -111,52 +111,52 @@ const tableData: TableRowData[] = [
|
|||
|
||||
// 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,
|
||||
{
|
||||
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: "218.144" },
|
||||
text: '미국인들도 저사람 얘기할때마다 동양인이 어쩌고랑 엮는데 왤케화남ㅋㅋ',
|
||||
timestamp: '03.31 18:16:45',
|
||||
showDelete: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
|
||||
author: { type: "IP", ip: "183.96" },
|
||||
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
|
||||
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
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -164,49 +164,51 @@ function App() {
|
|||
return (
|
||||
<div>
|
||||
<div className='relative w-[1450px] mx-auto'>
|
||||
<main
|
||||
className='w-[1160px] m-[20px_auto_0]'
|
||||
>
|
||||
<section className='' >
|
||||
<GalleryTitleHeader />
|
||||
<div
|
||||
className='border-custom-blue-dark border-2 w-[1158px]'
|
||||
/>
|
||||
<GalleryContent />
|
||||
<CommentHeader />
|
||||
<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 />
|
||||
<div style={{
|
||||
width: "840px",
|
||||
}}>
|
||||
<GalleryTable data={tableData} />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<main
|
||||
className='w-[1160px] m-[20px_auto_0]'
|
||||
>
|
||||
<section className='' >
|
||||
<GalleryTitleHeader />
|
||||
<div
|
||||
className='border-custom-blue-dark border-2 w-[1158px]'
|
||||
/>
|
||||
<GalleryContent />
|
||||
<CommentHeader />
|
||||
<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 style={{
|
||||
width: "840px",
|
||||
}}>
|
||||
<GalleryTable data={tableData} />
|
||||
<PostListControls />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -468,3 +468,63 @@ export function CommentInput() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function PostListControls({
|
||||
owner = false,
|
||||
}: {
|
||||
owner?: boolean; // Optional prop to determine if the user is the owner
|
||||
}) {
|
||||
// Base button styles - could be abstracted further if needed
|
||||
const baseButtonStyles = "w-[82px] h-[35px] border-t border-r border-l border-b-[3px] border-solid border-custom-blue-dark rounded-2 text-sm font-apple-dotum font-bold leading-[31px] pr-[2px] align-middle cursor-pointer";
|
||||
|
||||
return (
|
||||
// Main container using flex instead of floats
|
||||
<div className="mt-3 pb-5 flex justify-between items-center">
|
||||
|
||||
{/* Left button group */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(baseButtonStyles, `bg-white text-custom-blue-dark`)}
|
||||
>
|
||||
전체글
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(baseButtonStyles, `bg-custom-blue-hover text-white shadow-register-button`)}
|
||||
>
|
||||
개념글
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right button group */}
|
||||
<div className="flex gap-2">
|
||||
{owner && (<>
|
||||
<button
|
||||
type="button"
|
||||
// Can potentially link to a posting page, e.g., using React Router's <Link>
|
||||
className={cn(baseButtonStyles, `bg-[#666] text-white border-[#444] shadow-register-button`)}
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
// Can potentially link to a posting page, e.g., using React Router's <Link>
|
||||
className={cn(baseButtonStyles, `bg-[#666] text-white border-[#444] shadow-register-button`)}
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</>)}
|
||||
<button
|
||||
type="button"
|
||||
// Can potentially link to a posting page, e.g., using React Router's <Link>
|
||||
className={cn(baseButtonStyles, `bg-custom-blue-hover text-white shadow-register-button`)}
|
||||
>
|
||||
글쓰기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue