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

PostListControls

Browse source
This commit is contained in:
monoid 2025-04-01 01:46:09 +09:00
parent 76007a46c7
commit 6996ea7a0e
2 changed files with 149 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -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';
@ -200,10 +200,12 @@ function App() {
</CommentListContainer>
<CommentPagination currentPage={1} maxPage={2} />
<CommentInput />
<PostListControls owner />
<div style={{
width: "840px",
}}>
<GalleryTable data={tableData} />
<PostListControls />
</div>
</section>
</main>

60
src/Comment.tsx
View file

@ -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>
);
}