Merge branch 'develop' into feature/#19

Qfeed-Dev · Aug 19, 2023 · ff192ab · ff192ab
2 parents 9111c77 + 39f22cd
commit ff192ab
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 46 deletions.
diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -35,8 +35,21 @@ qFeedAxios.interceptors.response.use(
             }
             case 502:
             case 503:
-            // window.location.href = "/";
+                // window.location.href = "/";
+                switch (
+                    err.response?.status
+                    // case 401: {
+                    //     if (getCookie()) {
+                    //         deleteCookie();
+                    //         window.location.href = "/account";
+                    //     }
+                    // }
+                    // case 502:
+                    // case 503:
+                    //     window.location.href = "/";
+                ) {
+                }
+                return Promise.reject(error);
         }
-        return Promise.reject(error);
     }
 );
diff --git a/src/apis/questions/index.ts b/src/apis/questions/index.ts
@@ -0,0 +1,7 @@
+import { qFeedAxios } from "../axios";
+
+export const getQuestions = async () =>
+    await qFeedAxios
+        .get("/questions")
+        .then(({ data }) => data)
+        .catch((err) => err.response);
diff --git a/src/hooks/home/useGetQuestions.ts b/src/hooks/home/useGetQuestions.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { getQuestions } from "src/apis/questions";
+
+export const useGetQuestions = () => {
+    const { data, isLoading, error, refetch } = useQuery(
+        [location],
+        async () => {
+            const params: any = {};
+            const result = await getQuestions();
+            return result;
+        },
+        {
+            staleTime: 1000 * 60 * 5,
+            cacheTime: 1000 * 60 * 30
+        }
+    );
+
+    return { data, isLoading, error, refetch };
+};
diff --git a/src/hooks/useDisplaySize.ts b/src/hooks/useDisplaySize.ts
@@ -4,9 +4,19 @@ export default function useDisplaySize() {
     const [width, setWidth] = useState<number>(0);
     const [height, setHeight] = useState<number>(0);
 
+    const handleResize = () => {
+        setWidth(window.innerWidth > 820 ? 820 : window.innerWidth);
+        setHeight(window.innerHeight);
+    };
+
     useEffect(() => {
-        setWidth(window.innerWidth > 600 ? 600 : window.innerWidth);
+        setWidth(window.innerWidth > 820 ? 820 : window.innerWidth);
         setHeight(window.innerHeight);
+
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
     }, []);
 
     return { width, height };

diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx
@@ -12,16 +12,8 @@ import { Route } from "src/constants/Route";
 import StackGrid from "react-stack-grid";
 import useDisplaySize from "src/hooks/useDisplaySize";
 import Icon from "src/components/Icon";
-
-const HomeDatas = [
-    { title: "기말고사에 솔직히 족보 봤다", answer: 0 },
-    { title: "기말고사에 솔직히 족보 봤다고 생각하는 사람", answer: 0 },
-    { title: "기말고사에 솔", answer: 100 },
-    { title: "기말고사에 솔직히 족보 봤다", answer: 100 },
-    { title: "기말고사에 솔", answer: 10 },
-    { title: "기말고사에 솔직히 족보 봤다고 생각하는 사람", answer: 100 },
-    { title: "기말고사에 솔", answer: 10 }
-];
+import { useGetQuestions } from "src/hooks/home/useGetQuestions";
+import { globalValue } from "src/constants/globalValue";
 
 export default function Home() {
     const router = useRouter();
@@ -33,14 +25,14 @@ export default function Home() {
     const handleClickBasicQuestion = () => {
         router.push(Route.QUESTION_FRIEND());
     };
-    const handleClickFrame = () => {
-        router.push(Route.QUESTION());
-    };
     const handleClickPlus = () => {
         router.push(Route.ADD_QUESTION());
     };
 
-    return (
+    const { data, isLoading } = useGetQuestions();
+    console.log(data);
+
+    return isLoading ? undefined : (
         <>
             <Spacing size={50} />
             <HomeTitle />
@@ -56,19 +48,12 @@ export default function Home() {
                 <Spacing size={14} />
 
                 <StackGrid
-                    columnWidth={(width - 45) / 2}
+                    columnWidth={Math.floor((width - 45) / 2)}
                     gutterWidth={12}
                     gutterHeight={14}
                 >
-                    {HomeDatas.map((data: any, idx: number) => {
-                        return (
-                            <QfeedFrame
-                                key={idx}
-                                idx={idx}
-                                data={data}
-                                onClick={handleClickFrame}
-                            />
-                        );
+                    {data.data.map((data: any, idx: number) => {
+                        return <QfeedFrame key={idx} idx={idx} data={data} />;
                     })}
                 </StackGrid>
 
@@ -86,7 +71,7 @@ export default function Home() {
 }
 
 const HomeWrapper = styled.div`
-    height: 100%;
+    height: calc(100% - ${globalValue.bottomSheetHeight});
     margin: 0 auto;
     padding: 0 16px;
     position: relative;

diff --git a/src/pages-edit/home/components/QfeedFrame.tsx b/src/pages-edit/home/components/QfeedFrame.tsx
@@ -1,35 +1,37 @@
 "use client";
+import { useRouter } from "next/navigation";
 import { Text } from "src/components/common/Text";
-import Image from "src/components/Image";
 import Spacing from "src/components/Spacing";
-import useDisplaySize from "src/hooks/useDisplaySize";
+import { Route } from "src/constants/Route";
 import styled from "styled-components";
 import { colors, repeatBackgroundColor, typo } from "styles/theme";
 
 interface Props {
     idx: number;
     data: any;
-    onClick: () => void;
 }
 
-const QfeedFrame = ({ idx, data, onClick }: Props) => {
-    const { width } = useDisplaySize();
-    const imageUrl = "https://i.ibb.co/0Z6FNN7/60pt.png";
-    // const imageUrl = null;
+const QfeedFrame = ({ idx, data }: Props) => {
+    const router = useRouter();
+    const imageUrl = data.backgroundImage;
+
+    const writeDay = new Date(data.updatedAt);
+    const today = new Date();
+    const pastTime =
+        (today.getDate() - writeDay.getDate()) * 24 +
+        today.getHours() -
+        writeDay.getHours();
+
+    const handleClickFrame = () => {
+        router.push(`${Route.QUESTION()}?id=${data.id}`);
+    };
 
     return (
         <QfeedFrameWrapper
-            onClick={onClick}
+            onClick={handleClickFrame}
             repeatBackgroundColor={repeatBackgroundColor[idx]}
         >
             <div style={{ padding: 3, overflow: "hidden" }}>
-                {/* <ImageWrapper>
-                    <Image
-                        type="home"
-                        src="https://i.ibb.co/0Z6FNN7/60pt.png"
-                        // height={"100%"}
-                    />
-                </ImageWrapper> */}
                 <QfeedFrameInner
                     imageUrl={imageUrl}
                     backgroundColor={repeatBackgroundColor[idx]}
@@ -45,7 +47,7 @@ const QfeedFrame = ({ idx, data, onClick }: Props) => {
                         typo="Caption1r"
                         color={imageUrl ? "light_qwhite" : "light_qblack"}
                     >
-                        {data.title}
+                        {pastTime}시간 전
                     </Text>
                     <Spacing size={27} />
                     <CountWrapper>
@@ -56,7 +58,7 @@ const QfeedFrame = ({ idx, data, onClick }: Props) => {
                                     imageUrl ? "light_qwhite" : "light_qblack"
                                 }
                             >
-                                {data.answer}명 응답
+                                {0}명 응답
                             </Text>
                         </div>
                     </CountWrapper>
@@ -68,7 +70,6 @@ const QfeedFrame = ({ idx, data, onClick }: Props) => {
 
 const QfeedFrameWrapper = styled.div<{ repeatBackgroundColor: any }>`
     height: calc(100% + 20px);
-    // position: relative;
     border-radius: 10px;
     background-color: ${({ repeatBackgroundColor }) => repeatBackgroundColor};
 `;