From 6996ea7a0e045c37dfdf96697f21fca28b504dca Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Tue, 1 Apr 2025 01:46:09 +0900
Subject: [PATCH] PostListControls

---
 src/App.tsx     | 176 ++++++++++++++++++++++++------------------------
 src/Comment.tsx |  60 +++++++++++++++++
 2 files changed, 149 insertions(+), 87 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 64c3359..b1d60d3 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/Comment.tsx b/src/Comment.tsx
index c9a17b8..a82bfb6 100644
--- a/src/Comment.tsx
+++ b/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>
+    );
+}
\ No newline at end of file