Merge pull request #54 from Qfeed-Dev/feature/#35

[Feat] Home 피드 분기처리
Qfeed-Dev · Sep 3, 2023 · 508d383 · 508d383
2 parents 6d1fca6 + ee00f1b
commit 508d383
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 21 deletions.
diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -57,6 +57,7 @@ qFeedAxios.interceptors.response.use(
                     window.location.href = "/account";
                 }
             }
+            case 500:
             case 502:
             case 503:
                 {

diff --git a/src/app/question/[id]/page.tsx b/src/app/question/[id]/page.tsx
@@ -149,7 +149,8 @@ export default function Page({ params }: { params: { id: number } }) {
 }
 
 const ImageWrapper = styled.div`
-    width: 100%;
+    width: 100vw;
+    max-width: 600px;
     height: 100%;
 
     opacity: 0.3;

diff --git a/src/components/GridWrapper/index.tsx b/src/components/GridWrapper/index.tsx
@@ -6,8 +6,20 @@ import Flex from "src/components/common/Flex";
 import QfeedFrame from "src/pages-edit/home/components/QfeedFrame";
 import { enterComponentVariants } from "src/constants/animation";
 import { Questions } from "src/models/questions";
+import { useEffect, useState } from "react";
+
+const QuestionGrid = ({
+    questions,
+    detail = false
+}: {
+    questions: Questions;
+    detail?: boolean;
+}) => {
+    const [sortedData, setSortedData] = useState(questions.data.reverse());
+    useEffect(() => {
+        setSortedData(questions.data.reverse());
+    }, [questions]);
 
-const QuestionGrid = (data: Questions) => {
     return (
         <GridWrapper
             variants={enterComponentVariants}
@@ -16,17 +28,29 @@ const QuestionGrid = (data: Questions) => {
             exit="exit"
         >
             <QFeedGridOdd direction="column" gap={12}>
-                {data.data
+                {sortedData
                     ?.filter((data: any, idx: number) => idx % 2 === 0)
                     .map((data: any, idx: number) => (
-                        <QfeedFrame key={idx} idx={data.id} data={data} />
+                        <QfeedFrame
+                            key={idx}
+                            idx={data.id}
+                            colorIdx={idx}
+                            data={data}
+                            detail={detail}
+                        />
                     ))}
             </QFeedGridOdd>
             <QFeedGridEven direction="column" gap={12}>
-                {data.data
+                {sortedData
                     ?.filter((data: any, idx: number) => idx % 2 === 1)
                     .map((data: any, idx: number) => (
-                        <QfeedFrame key={idx} idx={data.id} data={data} />
+                        <QfeedFrame
+                            key={idx}
+                            idx={data.id}
+                            colorIdx={idx + 4}
+                            data={data}
+                            detail={detail}
+                        />
                     ))}
             </QFeedGridEven>
         </GridWrapper>

diff --git a/src/components/Icon/icons/images/QFeedImage.tsx b/src/components/Icon/icons/images/QFeedImage.tsx
@@ -13,7 +13,7 @@ const QFeedImage = () => {
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M37.1916 29.633C54.8342 22.243 66.9548 11.0439 64.2636 4.61911C61.5724 -1.80566 45.0886 -1.02317 27.446 6.36685C9.80339 13.7569 -2.31716 24.956 0.374002 31.3808C3.06517 37.8055 19.549 37.023 37.1916 29.633ZM52.1615 5.3666C52.7047 5.1247 53.3102 5.10903 53.8663 5.32242L53.8651 5.31975L58.3171 7.02841L56.6084 11.4804C56.3959 12.0361 55.9783 12.476 55.435 12.7179C54.8918 12.9598 54.2863 12.9755 53.7302 12.7621C52.7508 12.3862 52.1905 11.3893 52.3216 10.3919L47.7362 12.4337C47.8539 12.837 47.902 13.2254 47.8769 13.6004C47.8399 14.1547 47.6532 14.6508 47.3164 15.0879C46.9795 15.5249 46.5086 15.8787 45.903 16.1484L43.7141 17.1231L42.6374 14.7053L39.0067 16.3221L39.5722 17.592L42.3106 16.3726L42.8222 17.5213L38.6785 19.3665L37.6019 16.9487L33.9712 18.5655L34.5367 19.8354L37.275 18.616L37.7866 19.7648L33.643 21.6099L32.5663 19.1921L29.1912 20.6951L30.2678 23.1129L28.8635 23.7383L27.7868 21.3205L26.9105 21.7107C27.0376 22.1375 27.0882 22.5482 27.0584 22.9414C27.0323 23.2902 26.9533 23.6135 26.8234 23.9115L28.1874 24.6092L26.9068 25.1794L26.1827 24.821C25.9128 25.08 25.592 25.2943 25.2162 25.4616C24.673 25.7035 24.1328 25.7989 23.5957 25.7479C23.0574 25.6963 22.5632 25.4948 22.1103 25.1416C21.7996 24.899 21.5285 24.5875 21.2975 24.2102L17.1058 26.0768L15.3075 29.2252L10.1184 31.5359L12.5726 27.2364L12.5298 27.2554L7.85181 25.9355L12.9603 23.8176L16.6962 24.8719L20.7811 23.0529C20.6569 22.6301 20.6057 22.2229 20.6333 21.8318C20.6733 21.258 20.8542 20.7559 21.1777 20.3248C21.5011 19.8937 21.9329 19.5574 22.4761 19.3155C23.0194 19.0736 23.5591 18.9773 24.095 19.0257C24.6309 19.0741 25.1269 19.2748 25.581 19.6285C25.891 19.8693 26.1613 20.179 26.3924 20.5542L27.2704 20.1632L26.1989 17.757L30.2553 15.9506L30.7668 17.0994L28.1148 18.2804L28.6748 19.5378L32.0499 18.0349L30.9784 15.6286L35.122 13.7835L35.6336 14.9322L32.8952 16.1517L33.4552 17.4091L37.0858 15.7923L36.0144 13.3861L40.158 11.5409L40.6696 12.6897L37.9312 13.9091L38.4911 15.1666L42.1218 13.5498L41.0503 11.1436L43.2392 10.1688C43.8448 9.89919 44.4221 9.78406 44.971 9.82346C45.52 9.86285 46.0136 10.056 46.4516 10.402C46.7445 10.6333 47.0002 10.9271 47.2201 11.2795L51.8072 9.23685C50.9783 8.66693 50.6121 7.58357 50.9881 6.60409C51.2006 6.04847 51.6182 5.6085 52.1615 5.3666ZM23.0558 23.9362C23.2895 24.1566 23.543 24.2923 23.8162 24.3425L23.817 24.3421C24.0902 24.3923 24.3729 24.3539 24.6662 24.2265C24.7486 24.1887 24.8247 24.1463 24.8953 24.101L23.7368 23.4622L24.8847 22.9511L25.4906 23.2692C25.522 23.1336 25.5363 22.9885 25.5324 22.8334C25.5231 22.5131 25.4309 22.1551 25.2556 21.7615C25.0804 21.3678 24.8756 21.0589 24.6421 20.8342C24.409 20.6103 24.1542 20.4741 23.8792 20.4269C23.6042 20.3797 23.3204 20.4207 23.0283 20.5507C22.7362 20.6808 22.5177 20.8635 22.3715 21.0983C22.2253 21.3331 22.1565 21.6123 22.1655 21.937C22.1746 22.2616 22.2672 22.6206 22.4425 23.0142C22.6177 23.4078 22.8218 23.715 23.0558 23.9362ZM46.1131 14.3987C46.2933 14.1733 46.3844 13.9033 46.388 13.5879C46.3917 13.2726 46.2979 12.9014 46.1079 12.4748C45.918 12.0482 45.7036 11.7297 45.4647 11.5191C45.2258 11.3086 44.9615 11.1968 44.6737 11.1831C44.3862 11.1702 44.064 11.2422 43.7087 11.4004L42.99 11.7204L44.583 15.2977L45.3141 14.9721C45.6668 14.8151 45.9328 14.6241 46.1131 14.3987Z"
-                fill="#FF5B5B"
+                fill="#484848"
             />
         </svg>
     );

diff --git a/src/hooks/questions/useGetQuestions.ts b/src/hooks/questions/useGetQuestions.ts
@@ -9,10 +9,6 @@ export const useGetQuestions = () => {
         async () => {
             const result = await getQuestions(1, 100);
             return result;
-        },
-        {
-            staleTime: 1000 * 60 * 5,
-            cacheTime: 1000 * 60 * 30
         }
     );
 

diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx
@@ -72,7 +72,7 @@ export default function Home() {
 
                 {/* <Filter isSort={isSort} setIsSort={setIsSort} /> */}
                 <Spacing size={14} />
-                {isLoading ? <></> : data && <QuestionGrid {...data} />}
+                {isLoading ? <></> : data && <QuestionGrid questions={data} />}
                 {isLoading ? (
                     <></>
                 ) : (

diff --git a/src/pages-edit/home/components/QfeedFrame.tsx b/src/pages-edit/home/components/QfeedFrame.tsx
@@ -4,16 +4,19 @@ import { Text } from "src/components/common/Text";
 import Icon from "src/components/Icon";
 import Spacing from "src/components/Spacing";
 import { Route } from "src/constants/Route";
+import { QuestionItem } from "src/models/questions";
 import { getAppStateColor } from "src/utils/colorGenerate";
 import styled from "styled-components";
 import { colors } from "styles/theme";
 
 interface Props {
     idx: number;
-    data: any;
+    colorIdx: number;
+    data: QuestionItem;
+    detail: boolean | undefined;
 }
 
-const QfeedFrame = ({ idx, data }: Props) => {
+const QfeedFrame = ({ idx, colorIdx, data, detail }: Props) => {
     const router = useRouter();
     const imageurl = data.backgroundImage;
 
@@ -32,12 +35,20 @@ const QfeedFrame = ({ idx, data }: Props) => {
     return (
         <QfeedFrameWrapper
             onClick={handleClickFrame}
-            repeatbackgroundcolor={colors[getAppStateColor(idx)]}
+            repeatbackgroundcolor={
+                data.isViewed && !detail
+                    ? colors.light_gray3
+                    : colors[getAppStateColor(colorIdx)]
+            }
         >
             <div style={{ padding: 3, overflow: "hidden" }}>
                 <QfeedFrameInner
                     imageurl={imageurl}
-                    backgroundcolor={colors[getAppStateColor(idx)]}
+                    backgroundcolor={
+                        data.isViewed && !detail
+                            ? colors.light_gray3
+                            : colors[getAppStateColor(colorIdx)]
+                    }
                 >
                     <Text
                         typo="Headline2b"
@@ -67,12 +78,17 @@ const QfeedFrame = ({ idx, data }: Props) => {
                     </CountWrapper>
                 </QfeedFrameInner>
             </div>
-            {data.isViewed ? undefined : (
+            {data.isChoiced ? undefined : (
                 <QFeedWrapper>
-                    {imageurl ? (
-                        <Icon icon="QFeedImage" fill={getAppStateColor(idx)} />
+                    {data.isViewed && !detail ? (
+                        <Icon icon="QFeedImage" fill={colors.light_gray3} />
+                    ) : imageurl ? (
+                        <Icon
+                            icon="QFeedImage"
+                            fill={getAppStateColor(colorIdx)}
+                        />
                     ) : (
-                        <Icon icon="QFeedImage2" />
+                        <Icon icon="QFeedImage2" fill={colors.light_qblack} />
                     )}
                 </QFeedWrapper>
             )}
@@ -113,6 +129,10 @@ const QfeedFrameInner = styled.div<{ imageurl: any; backgroundcolor: any }>`
         left: 3px;
         right: 3px;
         bottom: 3px;
+        filter: ${({ backgroundcolor }) =>
+            backgroundcolor === colors.light_gray3
+                ? "grayscale(100%)"
+                : "grayscale(0%)"};
     }
 
     div {

diff --git a/src/pages-edit/mypage/components/MakeList.tsx b/src/pages-edit/mypage/components/MakeList.tsx
@@ -17,7 +17,7 @@ export default function MakeList({ id }: { id: number }) {
     ) : (
         <GridWrapper>
             {questions.data.length ? (
-                <QuestionGrid {...questions} />
+                <QuestionGrid questions={questions} detail={true} />
             ) : (
                 <Text typo="Subtitle1r" style={{ textAlign: "center" }}>
                     아직 만든 큐피드가 없어요