PostListControls

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';
@@ -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>

src/Comment.tsx

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