PostListControls
This commit is contained in:
parent
76007a46c7
commit
6996ea7a0e
2 changed files with 149 additions and 87 deletions
|
@ -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';
|
||||||
|
@ -200,10 +200,12 @@ function App() {
|
||||||
</CommentListContainer>
|
</CommentListContainer>
|
||||||
<CommentPagination currentPage={1} maxPage={2} />
|
<CommentPagination currentPage={1} maxPage={2} />
|
||||||
<CommentInput />
|
<CommentInput />
|
||||||
|
<PostListControls owner />
|
||||||
<div style={{
|
<div style={{
|
||||||
width: "840px",
|
width: "840px",
|
||||||
}}>
|
}}>
|
||||||
<GalleryTable data={tableData} />
|
<GalleryTable data={tableData} />
|
||||||
|
<PostListControls />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -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