feat: 글 카드 onClick 추가

hyundai-autoever-first-project-team3 · Oct 24, 2024 · f17b6f8 · f17b6f8
1 parent 786b8f8
commit f17b6f8
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/common/Card.jsx b/src/components/common/Card.jsx
@@ -10,6 +10,7 @@ const Card = ({
   createdAt,
   writerNickname,
   likeCount = 0,
+  onClick,
 }) => {
   // 날짜 가공
   const formattedDate = new Date(createdAt).toLocaleDateString("ko-KR", {
@@ -22,6 +23,7 @@ const Card = ({
     <div
       id={id}
       className="flex flex-col w-full h-full px-2 min-w-[320px] max-w-[720px] shadow-md border hover:bg-gray-100 hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1"
+      onClick={onClick}
     >
       <img
         src="https://velog.velcdn.com/images/k-svelte-master/post/43c86caf-fed8-4ab2-a98a-990b565efe0a/image.gif

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -10,9 +10,7 @@ import { useNavigate } from "react-router-dom";
 
 const MainPage = () => {
   const [selectedTab, setSelectedTab] = useState("total");
-
   const [posts, setPosts] = React.useState(null);
-
   const navigate = useNavigate();
 
   const handleTabChange = (event, newValue) => {
@@ -27,35 +25,41 @@ const MainPage = () => {
     getTIL({ pageNumber: 0 }).then((res) => setPosts(res.data.content));
   }, []);
   return (
-    <PageContainer>
+    <>
       <Header />
-      <TabBar value={selectedTab} handleChange={handleTabChange} />
-      {selectedTab === "total" && (
-        <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-3 px-2">
-          {posts?.map((item) => (
-            <Card
-              id={item.tilId}
-              title={item.title}
-              content={item.content}
-              thumbnail={item.thumbnail}
-              likeCount={item.likeCount}
-              createdAt={item.createdAt}
-              writerNickname={item.writerNickname}
-              onClick={() => navigate(`posts/${item.tilId}`)}
-            />
-          ))}
-        </div>
-      )}
-      {selectedTab === "challenge" && (
-        <div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-2 px-2">
-          {Array(9)
-            .fill(0)
-            .map((item) => (
-              <ChallengeCard />
+      <PageContainer>
+        <TabBar value={selectedTab} handleChange={handleTabChange} />
+        {selectedTab === "total" && (
+          <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-3 px-2">
+            {posts?.map((item) => (
+              <Card
+                key={item.tilId}
+                id={item.tilId}
+                title={item.title}
+                content={item.content}
+                thumbnail={item.thumbnail}
+                likeCount={item.likeCount}
+                createdAt={item.createdAt}
+                writerNickname={item.writerNickname}
+                onClick={() => {
+                  console.log("dd");
+                  navigate(`/posts/${item.tilId}`);
+                }}
+              />
             ))}
-        </div>
-      )}
-    </PageContainer>
+          </div>
+        )}
+        {selectedTab === "challenge" && (
+          <div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-2 px-2">
+            {Array(9)
+              .fill(0)
+              .map((item, index) => (
+                <ChallengeCard key={index} />
+              ))}
+          </div>
+        )}
+      </PageContainer>
+    </>
   );
 };
 

diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
@@ -37,6 +37,15 @@ const MyPage = () => {
             ))}
         </div>
       )}
+      {selectedTab === "like" && (
+        <div className="flex flex-col gap-3">
+          {Array(9)
+            .fill(0)
+            .map((item) => (
+              <MyCard />
+            ))}
+        </div>
+      )}
       {selectedTab === "statistic" && (
         <div className="flex flex-col w-full gap-5 px-2">
           <div className="flex flex-row items-center w-full gap-3">

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -22,7 +22,7 @@ const PostDetailPage = () => {
   }, [postId]);
 
   return (
-    <div>
+    <>
       <Header />
       <PageContainer className="xl:px-[250px] lg:px-[100px] md:px-5 sm:px-3">
         <h1 className="text-5xl font-extrabold mb-8 mt-10 lg:mt-20">
@@ -60,7 +60,7 @@ const PostDetailPage = () => {
           <Pagination count={10} color="success" />
         </div>
       </PageContainer>
-    </div>
+    </>
   );
 };