hotfix: 채널 없을 시 바로가기 버튼 추가

prgrms-fe-devcourse · Jan 11, 2024 · 4028e00 · 4028e00
1 parent 520c1f3
commit 4028e00
Showing 1 changed file with 51 additions and 14 deletions.
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import PostSimpleCard from "@/components/common/PostSimpleCard";
 import styled from "styled-components";
-
+import { useEffect, useState } from "react";
 import { _GET } from "@/api";
-import { _CHANNEL_POSTS } from "@/api/queries/channelPosts";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
-import PostSimpleCard from "@/components/common/PostSimpleCard";
+import { _CHANNEL_POSTS } from "@/api/queries/channelPosts";
+import { Button } from "@/components/common";
+import { useNavigate } from "react-router-dom";
 
 const Container = styled.div`
   box-sizing: border-box;
@@ -19,30 +20,66 @@ const Container = styled.div`
 `;
 
 const Home = () => {
+  const navigate = useNavigate();
   const [channel, _] = useLocalStorage("ViewChannelObj");
-  const [data, setData] = useState<any[]>([]);
+  const [data, setData] = useState<any[] | null>(null);
 
   const fetchData = async (query: string) => {
     const res = await _CHANNEL_POSTS(query);
     if (res) setData(res);
   };
 
+  const handleClick = () => {
+    navigate("/channels");
+  };
+
   useEffect(() => {
     if (channel) {
       const parsedData = JSON.parse(channel);
       fetchData(parsedData._id);
     }
   }, []);
 
-  return (
-    <>
-      <Container>
-        {data.map((value, index) => (
-          <PostSimpleCard key={index} postData={value} />
-        ))}
-      </Container>
-    </>
-  );
+  if (channel === null) {
+    return (
+      <>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            paddingTop: "3rem",
+            paddingBottom: "3rem",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <span style={{ fontSize: "2rem", marginBottom: "1rem" }}>
+            채널을 선택해보세요!
+          </span>
+          <Button
+            onClick={handleClick}
+            style={{ width: "50%" }}
+            variant="symbol"
+          >
+            바로 가기
+          </Button>
+        </div>
+      </>
+    );
+  }
+
+  if (data && data.length > 0) {
+    return (
+      <>
+        <Container>
+          {data.map((value, index) => (
+            <PostSimpleCard key={index} postData={value} />
+          ))}
+        </Container>
+      </>
+    );
+  }
 };
 
 export default Home;