Merge pull request #21 from Qfeed-Dev/api

[Fix] Api 연결 및 퍼블리싱
Qfeed-Dev · Aug 20, 2023 · 277e703 · 277e703
2 parents 39f22cd + a8e180d
commit 277e703
Show file tree

Hide file tree

Showing 19 changed files with 631 additions and 87 deletions.
diff --git a/src/apis/questions/index.ts b/src/apis/questions/index.ts
@@ -5,3 +5,15 @@ export const getQuestions = async () =>
         .get("/questions")
         .then(({ data }) => data)
         .catch((err) => err.response);
+
+export const getQuestionsId = async (id: number) =>
+    await qFeedAxios
+        .get(`/questions/${id}`)
+        .then(({ data }) => data)
+        .catch((err) => err.response);
+
+export const getQuestionsIdChoices = async (id: number) =>
+    await qFeedAxios
+        .get(`/questions/${id}/choices`)
+        .then(({ data }) => data)
+        .catch((err) => err.response);
diff --git a/src/app/question/page.tsx b/src/app/question/page.tsx
@@ -3,19 +3,26 @@ import styled from "styled-components";
 import VoteButton from "src/components/Button/VoteButton";
 import ProfileTitle from "src/pages-edit/question/ProfileTitle";
 import Question from "src/pages-edit/question/Question";
-import SlideLine from "src/components/SlideLine";
 import Spacing from "src/components/Spacing";
 import BackTitle from "src/components/Title/BackTitle";
 import { useState } from "react";
 import Image from "src/components/Image";
+import { useGetQuestionsId } from "src/hooks/home/useGetQuestionId";
+import { useSearchParams } from "next/navigation";
 
 export default function Page() {
-    const [selected, setSelected] = useState<number>(-1);
-    const [type, setType] = useState<string>("default");
-    // const imageUrl = "https://i.ibb.co/0Z6FNN7/60pt.png";
+    const searchParams = useSearchParams();
+    const id = searchParams.get("id");
+
+    const { data, isLoading } = useGetQuestionsId({ id });
+    console.log(data);
     const imageUrl = null;
+    // data?.backgroundImage;
+
+    const [selected, setSelected] = useState<number>(-1);
+    const [type, setType] = useState<string>(imageUrl ? "primary" : "default");
 
-    return (
+    return isLoading ? undefined : (
         <>
             {imageUrl && (
                 <ImageWrapper>
@@ -27,18 +34,13 @@ export default function Page() {
                 <BackTitle type="profile" reportType="report">
                     <ProfileTitle />
                 </BackTitle>
-
-                {/* <SlideLine /> */}
-                <Spacing size={4} />
-
-                <Spacing size={50} />
-
+                <Spacing size={54} />
                 <Question />
             </QuestionWrapper>
 
             <BottomButton>
                 <BottomInner>
-                    {["", "", ""].map((data: any, idx: number) => {
+                    {data?.info?.choiceList?.map((d: any, idx: number) => {
                         return (
                             <VoteButton
                                 key={idx}

diff --git a/src/components/Button/VoteButton.tsx b/src/components/Button/VoteButton.tsx
@@ -2,6 +2,7 @@
 import { forwardRef } from "react";
 import styled from "styled-components";
 import { colors, repeatQuestionColor } from "styles/theme";
+import { match } from "ts-pattern";
 
 interface Props {
     idx: number;
@@ -18,35 +19,41 @@ const VoteButton = forwardRef(function Button(
         <VoteButtonWrapper
             onClick={onClick}
             color={
-                props.top && !(type === "default")
-                    ? action
-                        ? colors.light_qblack
-                        : colors.light_qwhite
-                    : idx === props.selected
-                    ? colors.light_qblack
-                    : action
-                    ? colors.light_qwhite
-                    : colors.light_qwhite
+                match(type)
+                    .with("primary", () => colors.light_qblack)
+                    .with("default", () => colors.light_qblack)
+                    .otherwise(() => colors.light_qblack)
+                // "light_qblack"
+                // props.top && !(type === "default")
+                //     ? action
+                //         ? colors.light_qblack
+                //         : colors.light_qwhite
+                //     : idx === props.selected
+                //     ? colors.light_qblack
+                //     : action
+                //     ? colors.light_qwhite
+                //     : colors.light_qwhite
             }
             backgroundColor={
-                props.top && !(type === "default")
-                    ? action
-                        ? repeatQuestionColor[idx % 6]
-                        : colors.line_white_70
-                    : idx === props.selected
-                    ? action
-                        ? colors.line_white_70
-                        : repeatQuestionColor[idx % 6]
-                    : action
-                    ? colors.line_black_50
-                    : colors.light_gray2
+                match(type)
+                    .with("primary", () => colors.line_white_70)
+                    .with("default", () => repeatQuestionColor[idx % 6])
+                    .otherwise(() => colors.line_white_70)
+                // props.top && !(type === "default")
+                //     ? action
+                //         ? repeatQuestionColor[idx % 6]
+                //         : colors.line_white_70
+                //     : idx === props.selected
+                //     ? action
+                //         ? colors.line_white_70
+                //         : repeatQuestionColor[idx % 6]
+                //     : action
+                //     ? colors.line_black_50
+                //     : colors.light_gray2
             }
         >
             <VoteButtonInner>
                 <TextWrapper>{children}</TextWrapper>
-                {/* {type === "secondary" && idx === props.selected && (
-                    <CheckWrapper>svg</CheckWrapper>
-                )} */}
                 {type !== "primary" && idx === props.selected && (
                     <CheckWrapper>svg</CheckWrapper>
                 )}

diff --git a/src/components/Icon/icons/RightArrow.tsx b/src/components/Icon/icons/RightArrow.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+const RightArrow = () => {
+    return (
+        <svg
+            width="6"
+            height="10"
+            viewBox="0 0 6 10"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M1 0.466797L4.5 4.80013L1 9.13346" stroke="#131313" />
+        </svg>
+    );
+};
+
+export default RightArrow;
diff --git a/src/components/Icon/icons/images/AngelImage.tsx b/src/components/Icon/icons/images/AngelImage.tsx
diff --git a/src/components/Icon/icons/images/QFeedImage.tsx b/src/components/Icon/icons/images/QFeedImage.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const QFeedImage = () => {
+    return (
+        <svg
+            width="65"
+            height="36"
+            viewBox="0 0 65 36"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                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"
+            />
+        </svg>
+    );
+};
+
+export default QFeedImage;
diff --git a/src/components/Icon/icons/images/QFeedImage2.tsx b/src/components/Icon/icons/images/QFeedImage2.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+const QFeedImage2 = () => {
+    return (
+        <svg
+            width="77"
+            height="36"
+            viewBox="0 0 77 36"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M49.1916 29.6331C66.8342 22.2431 78.9548 11.044 76.2636 4.61923C73.5724 -1.80554 57.0886 -1.02305 39.446 6.36698C21.8034 13.757 9.68284 24.9561 12.374 31.3809C15.0652 37.8057 31.549 37.0232 49.1916 29.6331ZM64.1615 5.36672C64.7047 5.12482 65.3102 5.10915 65.8663 5.32255L65.8651 5.31987L70.3171 7.02853L68.6084 11.4806C68.3959 12.0362 67.9783 12.4762 67.435 12.7181C66.8918 12.96 66.2863 12.9756 65.7302 12.7622C64.7508 12.3863 64.1905 11.3894 64.3216 10.392L59.7362 12.4339C59.8539 12.8371 59.902 13.2255 59.8769 13.6005C59.8399 14.1548 59.6532 14.651 59.3164 15.088C58.9795 15.525 58.5086 15.8788 57.903 16.1485L55.7141 17.1232L54.6374 14.7054L51.0067 16.3222L51.5722 17.5921L54.3106 16.3727L54.8222 17.5215L50.6785 19.3666L49.6019 16.9489L45.9712 18.5656L46.5367 19.8355L49.275 18.6161L49.7866 19.7649L45.643 21.6101L44.5663 19.1923L41.1912 20.6952L42.2678 23.113L40.8635 23.7384L39.7868 21.3206L38.9105 21.7108C39.0376 22.1376 39.0882 22.5483 39.0584 22.9415C39.0323 23.2903 38.9533 23.6137 38.8234 23.9116L40.1874 24.6093L38.9068 25.1795L38.1827 24.8212C37.9128 25.0801 37.592 25.2944 37.2162 25.4618C36.673 25.7037 36.1328 25.7991 35.5957 25.748C35.0574 25.6964 34.5632 25.4949 34.1103 25.1417C33.7996 24.8991 33.5285 24.5876 33.2975 24.2103L29.1058 26.0769L27.3075 29.2253L22.1184 31.5361L24.5726 27.2365L24.5298 27.2555L19.8518 25.9356L24.9603 23.8177L28.6962 24.872L32.7811 23.053C32.6569 22.6302 32.6057 22.223 32.6333 21.8319C32.6733 21.2581 32.8542 20.756 33.1777 20.3249C33.5011 19.8939 33.9329 19.5575 34.4761 19.3156C35.0194 19.0737 35.5591 18.9774 36.095 19.0258C36.6309 19.0742 37.1269 19.2749 37.581 19.6286C37.891 19.8694 38.1613 20.1791 38.3924 20.5543L39.2704 20.1633L38.1989 17.7571L42.2553 15.9508L42.7668 17.0996L40.1148 18.2805L40.6748 19.5379L44.0499 18.035L42.9784 15.6288L47.122 13.7836L47.6336 14.9324L44.8952 16.1518L45.4552 17.4092L49.0858 15.7924L48.0144 13.3862L52.158 11.5411L52.6696 12.6898L49.9312 13.9093L50.4911 15.1667L54.1218 13.5499L53.0503 11.1437L55.2392 10.169C55.8448 9.89931 56.4221 9.78418 56.971 9.82358C57.52 9.86298 58.0136 10.0561 58.4516 10.4021C58.7445 10.6334 59.0002 10.9272 59.2201 11.2796L63.8072 9.23698C62.9783 8.66705 62.6121 7.58369 62.9881 6.60421C63.2006 6.04859 63.6182 5.60862 64.1615 5.36672ZM35.0558 23.9363C35.2895 24.1567 35.543 24.2924 35.8162 24.3426L35.817 24.3422C36.0902 24.3924 36.3729 24.354 36.6662 24.2266C36.7486 24.1888 36.8247 24.1464 36.8953 24.1011L35.7368 23.4623L36.8847 22.9512L37.4906 23.2694C37.522 23.1337 37.5363 22.9886 37.5324 22.8335C37.5231 22.5132 37.4309 22.1552 37.2556 21.7616C37.0804 21.368 36.8756 21.059 36.6421 20.8343C36.409 20.6105 36.1542 20.4742 35.8792 20.427C35.6042 20.3798 35.3204 20.4208 35.0283 20.5509C34.7362 20.6809 34.5177 20.8636 34.3715 21.0984C34.2253 21.3332 34.1565 21.6125 34.1655 21.9371C34.1746 22.2617 34.2672 22.6207 34.4425 23.0143C34.6177 23.4079 34.8218 23.7151 35.0558 23.9363ZM58.1131 14.3988C58.2933 14.1734 58.3844 13.9034 58.388 13.588C58.3917 13.2727 58.2979 12.9015 58.1079 12.4749C57.918 12.0484 57.7036 11.7298 57.4647 11.5192C57.2258 11.3087 56.9615 11.1969 56.6737 11.1832C56.3862 11.1703 56.064 11.2423 55.7087 11.4005L54.99 11.7206L56.583 15.2978L57.3141 14.9722C57.6668 14.8152 57.9328 14.6242 58.1131 14.3988Z"
+                fill="white"
+            />
+            <path
+                d="M65.5516 4.97097C64.995 4.75753 64.3889 4.77336 63.8453 5.01561C63.3016 5.25786 62.8837 5.69832 62.6711 6.25449C62.2951 7.23492 62.6618 8.31915 63.4917 8.88937L58.901 10.935C58.6808 10.5823 58.4249 10.2883 58.1316 10.0569C57.6932 9.71068 57.1991 9.51748 56.6496 9.47819C56.1001 9.43889 55.5224 9.55427 54.9164 9.82431L52.7257 10.8005L53.7988 13.2085L50.1653 14.8276L49.6045 13.5692L52.345 12.348L51.8327 11.1984L47.6859 13.0462L48.7589 15.4543L45.1254 17.0734L44.5647 15.815L47.3052 14.5938L46.7929 13.4441L42.646 15.292L43.7191 17.7L40.3414 19.2051L39.7806 17.9467L42.4347 16.7641L41.9224 15.6144L37.8629 17.4233L38.9359 19.8314L38.0572 20.223C37.8258 19.8475 37.5552 19.5376 37.2449 19.2967C36.7903 18.9428 36.2938 18.7421 35.7574 18.6937C35.221 18.6454 34.6808 18.7419 34.1372 18.9842C33.5935 19.2264 33.1614 19.5632 32.8378 19.9947C32.5142 20.4263 32.3333 20.9288 32.2933 21.5031C32.2658 21.8946 32.3172 22.3022 32.4416 22.7253L28.3536 24.5469L24.6141 23.4926L19.5016 25.6137L24.1841 26.9336L24.2268 26.9145L21.7716 31.2185L26.9647 28.9044L28.7638 25.7528L32.9587 23.8835C33.19 24.2611 33.4614 24.5728 33.7725 24.8155C34.2259 25.1689 34.7205 25.3705 35.2594 25.4219C35.797 25.4729 36.3376 25.3773 36.8812 25.1351C37.2573 24.9675 37.5783 24.7529 37.8484 24.4937L38.5732 24.8522L39.8548 24.2811L38.4895 23.5831C38.6194 23.2849 38.6984 22.9613 38.7244 22.6121C38.7541 22.2186 38.7034 21.8075 38.5761 21.3804L39.4531 20.9896L40.5313 23.4093L41.9367 22.783L40.8585 20.3633L44.2362 18.8582L45.3144 21.2779L49.4613 19.4301L48.949 18.2804L46.2085 19.5015L45.6422 18.2307L49.2757 16.6116L50.3539 19.0312L54.5007 17.1834L53.9884 16.0337L51.2479 17.2549L50.6816 15.984L54.3151 14.3649L55.3933 16.7846L57.584 15.8085C58.19 15.5384 58.6613 15.1842 58.9983 14.7467C59.3353 14.3092 59.5221 13.8126 59.559 13.2578C59.584 12.8824 59.5358 12.4937 59.4179 12.0901L64.0068 10.0453C63.8759 11.0436 64.4368 12.0413 65.4173 12.4173C65.9738 12.6307 66.5799 12.6149 67.1236 12.3726C67.6672 12.1304 68.0851 11.6899 68.2977 11.1338L70.0068 6.67736L65.5504 4.9683L65.5516 4.97097ZM35.4796 24.0153C35.2063 23.9651 34.9524 23.8293 34.7185 23.6088C34.4842 23.3875 34.2799 23.0801 34.1044 22.6861C33.9289 22.2922 33.8361 21.933 33.827 21.6081C33.8178 21.2831 33.8866 21.0036 34.0329 20.7686C34.1792 20.5335 34.3979 20.3506 34.6902 20.2204C34.9825 20.0901 35.2665 20.049 35.5417 20.0962C35.817 20.1434 36.0721 20.2797 36.3054 20.5036C36.5392 20.7285 36.7442 21.0377 36.9198 21.4316C37.0953 21.8255 37.1877 22.1839 37.197 22.5044C37.201 22.6597 37.1867 22.8049 37.1553 22.9407L36.5488 22.6224L35.4 23.1343L36.5596 23.7733C36.489 23.8186 36.4129 23.8611 36.3304 23.8989C36.0369 24.0265 35.7539 24.065 35.4805 24.0149L35.4796 24.0153ZM58.0688 13.2456C58.0652 13.5613 57.9742 13.8315 57.7938 14.0571C57.6134 14.2828 57.3472 14.4741 56.9943 14.6313L56.2626 14.9574L54.6673 11.3773L55.3865 11.0568C55.7421 10.8984 56.0646 10.8263 56.3523 10.8391C56.6404 10.8527 56.9049 10.9645 57.1441 11.1752C57.3832 11.3859 57.5979 11.7047 57.7882 12.1316C57.9784 12.5585 58.0724 12.93 58.0688 13.2456Z"
+                fill="#131313"
+            />
+        </svg>
+    );
+};
+
+export default QFeedImage2;