feat: 메인 탭 기능 구현

hyundai-autoever-first-project-team3 · Oct 23, 2024 · 19c3a9e · 19c3a9e
1 parent 94426c9
commit 19c3a9e
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 40 deletions.
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/components/common/Header.jsx b/src/components/common/Header.jsx
@@ -10,10 +10,14 @@ import {
 const Header = () => {
   const [modal, setModal] = React.useState(false);
 
-  const handleKakaoLogin = () => {
-    window.location.href =
-      "https://codingcare.site/api/oauth2/authorization/kakao";
-  };
+  // const handleKakaoLogin = () => {
+  //   window.location.href =
+  //     "https://codingcare.site/api/oauth2/authorization/kakao";
+  // };
+  // const handleGithubLogin = () => {
+  //   window.location.href =
+  //     "https://codingcare.site/api/oauth2/authorization/github";
+  // };
   const handleOpenModal = () => {
     setModal(true);
   };
@@ -51,7 +55,8 @@ const Header = () => {
             width: 400,
             bgcolor: "background.paper",
             boxShadow: 24,
-            p: 4,
+            paddingY: 3,
+            paddingX: 4,
             borderRadius: "8px",
           }}
         >
@@ -62,11 +67,16 @@ const Header = () => {
           >
             <FontAwesomeIcon icon={faX} />
           </IconButton>
-          <div className="flex flex-col ">
-            <div className="text-lg font-semibold">로그인 모달</div>
-            <div className="text-base">소셜 계정으로 로그인</div>
-            <div>
-              <button onClick={handleKakaoLogin}>카카오</button>
+          <div className="flex flex-col">
+            <div className="text-xl font-semibold">로그인</div>
+            <div className="text-lg mb-5">소셜 계정으로 로그인</div>
+            <div className="flex flex-col gap-3">
+              <button className="bg-yellow-400 text-yellow-950 rounded-md py-3">
+                카카오 계정으로 로그인
+              </button>
+              <button className="bg-black text-white rounded-md py-3">
+                GitHub 계정으로 로그인
+              </button>
             </div>
           </div>
         </Box>

diff --git a/src/components/common/TabBar.jsx b/src/components/common/TabBar.jsx
@@ -7,12 +7,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-const TabBar = () => {
-  const [value, setValue] = React.useState("total");
+const TabBar = ({ value, handleChange }) => {
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
 
   return (
     <div className="flex flex-row justify-start items-center py-3 px-2">

diff --git a/src/components/mypage/SubTabBar.jsx b/src/components/mypage/SubTabBar.jsx
@@ -7,7 +7,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-const SubTabBar = ({ value, handleChange, tabData }) => {
+const SubTabBar = ({ value, handleChange }) => {
   return (
     <div className="flex flex-row justify-center items-center py-3 px-2">
       <Tabs

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -1,50 +1,60 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import PageContainer from "../components/common/PageContainer";
 import Header from "../components/common/Header";
 import TabBar from "../components/common/TabBar";
 import Card from "../components/common/Card";
 import ChallengeCard from "../components/challenge/ChallengeCard";
 import { setCookie } from "../api/cookie";
 import { getTIL } from "../api/main";
+import { useNavigate } from "react-router-dom";
 
 const MainPage = () => {
-  const [token, setToken] = React.useState("");
+  const [selectedTab, setSelectedTab] = useState("total");
+
   const [posts, setPosts] = React.useState(null);
 
-  console.log(posts);
+  const navigate = useNavigate();
+
+  const handleTabChange = (event, newValue) => {
+    setSelectedTab(newValue);
+  };
 
   useEffect(() => {
     setCookie(
       "accessToken",
       "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoi7J207Zqo7JuQIiwic29jaWFsIjoia2FrYW8iLCJlbWFpbCI6InltajA3MTY4QG5hdmVyLmNvbSIsInByb2ZpbGVJbWFnZSI6Imh0dHA6Ly9rLmtha2FvY2RuLm5ldC9kbi9kZkFXemcvYnRzSm43bVlmZm8vYzdhZ3Frb2NZTjQ1Zjd4SEIyMXN2Sy9pbWdfNjQweDY0MC5qcGciLCJyb2xlIjoiTUVNQkVSIiwiaWF0IjoxNzI5NjgwMDIwLCJleHAiOjE3Mjk2ODM2MjB9.u2lfSAabfwXrCeuMH-lr0FAGVq4ZNM2PlqAe6qwBZ1o"
     );
-
     getTIL({ pageNumber: 0 }).then((res) => setPosts(res.data.content));
   }, []);
   return (
     <PageContainer>
       <Header />
-      <TabBar />
-      <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.id}
-            title={item.title}
-            content={item.content}
-            thumbnail={item.thumbnail}
-            likeCount={item.likeCount}
-            createdAt={item.createdAt}
-            writerNickname={item.writerNickname}
-          />
-        ))}
-      </div>
-      <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 />
+      <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>
+        </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 />
+            ))}
+        </div>
+      )}
     </PageContainer>
   );
 };