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 './App.css'
|
||||||
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, PostListControls, SubCommentData } from './Comment';
|
||||||
import CommentHeader from './CommentHeader';
|
import CommentHeader from './CommentHeader';
|
||||||
import { Footer } from './Footer';
|
import { Footer } from './Footer';
|
||||||
import { GalleryContent } from './Gallery';
|
import { GalleryContent } from './Gallery';
|
||||||
|
|
@ -111,52 +111,52 @@ const tableData: TableRowData[] = [
|
||||||
|
|
||||||
// Sample data - replace with your actual data source/props
|
// Sample data - replace with your actual data source/props
|
||||||
const comments: SubCommentData[] = [
|
const comments: SubCommentData[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
author: { type: 'IP', ip: '222.116' }, // Assuming author is an object with type and name
|
author: { type: 'IP', ip: '222.116' }, // Assuming author is an object with type and name
|
||||||
text: '너 지금 상현이햄을 ■■라고',
|
text: '너 지금 상현이햄을 ■■라고',
|
||||||
timestamp: '03.31 17:44:25',
|
timestamp: '03.31 17:44:25',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
|
|
||||||
author: { type: "IP", ip: "218.144" },
|
author: { type: "IP", ip: "218.144" },
|
||||||
text: '미국인들도 저사람 얘기할때마다 동양인이 어쩌고랑 엮는데 왤케화남ㅋㅋ',
|
text: '미국인들도 저사람 얘기할때마다 동양인이 어쩌고랑 엮는데 왤케화남ㅋㅋ',
|
||||||
timestamp: '03.31 18:16:45',
|
timestamp: '03.31 18:16:45',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
|
||||||
author: { type: "IP", ip: "183.96" },
|
author: { type: "IP", ip: "183.96" },
|
||||||
|
|
||||||
text: '다른 나라랑 다르게 미국에선 ~계 미국인이라는 정체성이 확고하고 사회적인 인식도 그럼',
|
text: '다른 나라랑 다르게 미국에선 ~계 미국인이라는 정체성이 확고하고 사회적인 인식도 그럼',
|
||||||
timestamp: '03.31 18:18:40',
|
timestamp: '03.31 18:18:40',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
||||||
text: '이새낀 미국을 모르노 ㅋㅋㅋㅋ',
|
text: '이새낀 미국을 모르노 ㅋㅋㅋㅋ',
|
||||||
timestamp: '03.31 20:34:54',
|
timestamp: '03.31 20:34:54',
|
||||||
showDelete: false, // No delete button in this example
|
showDelete: false, // No delete button in this example
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
author: { type: "semi-nickname", nickname: "ㅇㅇ" },
|
||||||
text: '어어 내려놔라',
|
text: '어어 내려놔라',
|
||||||
timestamp: '03.31 21:16:46',
|
timestamp: '03.31 21:16:46',
|
||||||
showDelete: false,
|
showDelete: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
author: { type: "nickname", nickname: '티르칸쟈카' },
|
author: { type: "nickname", nickname: '티르칸쟈카' },
|
||||||
text: '원종원종아...',
|
text: '원종원종아...',
|
||||||
timestamp: '03.31 21:23:59',
|
timestamp: '03.31 21:23:59',
|
||||||
showDelete: false,
|
showDelete: false,
|
||||||
},
|
},
|
||||||
// Add more comment objects as needed
|
// Add more comment objects as needed
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -164,49 +164,51 @@ function App() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className='relative w-[1450px] mx-auto'>
|
<div className='relative w-[1450px] mx-auto'>
|
||||||
<main
|
<main
|
||||||
className='w-[1160px] m-[20px_auto_0]'
|
className='w-[1160px] m-[20px_auto_0]'
|
||||||
>
|
>
|
||||||
<section className='' >
|
<section className='' >
|
||||||
<GalleryTitleHeader />
|
<GalleryTitleHeader />
|
||||||
<div
|
<div
|
||||||
className='border-custom-blue-dark border-2 w-[1158px]'
|
className='border-custom-blue-dark border-2 w-[1158px]'
|
||||||
/>
|
/>
|
||||||
<GalleryContent />
|
<GalleryContent />
|
||||||
<CommentHeader />
|
<CommentHeader />
|
||||||
<CommentListContainer>
|
<CommentListContainer>
|
||||||
<CommentItem comment={{
|
<CommentItem comment={{
|
||||||
id: 1,
|
id: 1,
|
||||||
author: { type: "nickname", nickname: "동아리망했다" },
|
author: { type: "nickname", nickname: "동아리망했다" },
|
||||||
text: '너 지금 상현이햄을 ■■라고',
|
text: '너 지금 상현이햄을 ■■라고',
|
||||||
timestamp: '03.31 17:44:25',
|
timestamp: '03.31 17:44:25',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
}} />
|
}} />
|
||||||
<CommentItem comment={{
|
<CommentItem comment={{
|
||||||
id: 2,
|
id: 2,
|
||||||
author: { type: "IP", ip: "218.144" },
|
author: { type: "IP", ip: "218.144" },
|
||||||
text: '그냥 미국인인데 조센징들은 왜 조선계라고 못 넣어서 안달일까',
|
text: '그냥 미국인인데 조센징들은 왜 조선계라고 못 넣어서 안달일까',
|
||||||
timestamp: '03.31 18:16:45',
|
timestamp: '03.31 18:16:45',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
subComments: comments,
|
subComments: comments,
|
||||||
}} />
|
}} />
|
||||||
<CommentItem comment={{
|
<CommentItem comment={{
|
||||||
id: 3,
|
id: 3,
|
||||||
author: { type: "IP", ip: "123.245" },
|
author: { type: "IP", ip: "123.245" },
|
||||||
text: 'aaa',
|
text: 'aaa',
|
||||||
timestamp: '03.31 18:16:45',
|
timestamp: '03.31 18:16:45',
|
||||||
showDelete: true,
|
showDelete: true,
|
||||||
}} />
|
}} />
|
||||||
</CommentListContainer>
|
</CommentListContainer>
|
||||||
<CommentPagination currentPage={1} maxPage={2} />
|
<CommentPagination currentPage={1} maxPage={2} />
|
||||||
<CommentInput />
|
<CommentInput />
|
||||||
<div style={{
|
<PostListControls owner />
|
||||||
width: "840px",
|
<div style={{
|
||||||
}}>
|
width: "840px",
|
||||||
<GalleryTable data={tableData} />
|
}}>
|
||||||
</div>
|
<GalleryTable data={tableData} />
|
||||||
</section>
|
<PostListControls />
|
||||||
</main>
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -468,3 +468,63 @@ export function CommentInput() {
|
||||||
</div>
|
</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