From 4a4336a129005f3f833306fe5c04520e68ea95bd Mon Sep 17 00:00:00 2001 From: cyeju Date: Sun, 20 Aug 2023 03:46:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20home=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/questions/index.ts | 12 + src/app/question/page.tsx | 26 +- src/components/Button/VoteButton.tsx | 53 +-- src/components/Icon/icons/RightArrow.tsx | 17 + .../Icon/icons/images/AngelImage.tsx | 328 ++++++++++++++++++ .../Icon/icons/images/QFeedImage.tsx | 22 ++ .../Icon/icons/images/QFeedImage2.tsx | 26 ++ .../Icon/icons/images/WaveImage.tsx | 37 ++ src/components/Icon/icons/index.ts | 7 + src/components/Title/BackTitle.tsx | 4 +- src/hooks/home/useGetQuestionId.ts | 21 ++ src/hooks/home/useGetQuestions.ts | 2 +- src/pages-edit/home/Home.tsx | 17 +- .../home/components/BasicQuestion.tsx | 36 +- src/pages-edit/home/components/Filter.tsx | 31 +- src/pages-edit/home/components/QfeedFrame.tsx | 35 +- src/pages-edit/question/Question.tsx | 3 + styles/theme/colors.tsx | 36 +- 18 files changed, 630 insertions(+), 83 deletions(-) create mode 100644 src/components/Icon/icons/RightArrow.tsx create mode 100644 src/components/Icon/icons/images/AngelImage.tsx create mode 100644 src/components/Icon/icons/images/QFeedImage.tsx create mode 100644 src/components/Icon/icons/images/QFeedImage2.tsx create mode 100644 src/components/Icon/icons/images/WaveImage.tsx create mode 100644 src/hooks/home/useGetQuestionId.ts diff --git a/src/apis/questions/index.ts b/src/apis/questions/index.ts index d764b5c..85f1302 100644 --- 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 index a8b11de..b6d42e3 100644 --- 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(-1); - const [type, setType] = useState("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(-1); + const [type, setType] = useState(imageUrl ? "primary" : "default"); - return ( + return isLoading ? undefined : ( <> {imageUrl && ( @@ -27,18 +34,13 @@ export default function Page() { - - {/* */} - - - - + - {["", "", ""].map((data: any, idx: number) => { + {data?.info?.choiceList?.map((d: any, idx: number) => { return ( 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 } > {children} - {/* {type === "secondary" && idx === props.selected && ( - svg - )} */} {type !== "primary" && idx === props.selected && ( svg )} diff --git a/src/components/Icon/icons/RightArrow.tsx b/src/components/Icon/icons/RightArrow.tsx new file mode 100644 index 0000000..f16afd2 --- /dev/null +++ b/src/components/Icon/icons/RightArrow.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +const RightArrow = () => { + return ( + + + + ); +}; + +export default RightArrow; diff --git a/src/components/Icon/icons/images/AngelImage.tsx b/src/components/Icon/icons/images/AngelImage.tsx new file mode 100644 index 0000000..798511f --- /dev/null +++ b/src/components/Icon/icons/images/AngelImage.tsx @@ -0,0 +1,328 @@ +import React from "react"; + +const Angel = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Angel; diff --git a/src/components/Icon/icons/images/QFeedImage.tsx b/src/components/Icon/icons/images/QFeedImage.tsx new file mode 100644 index 0000000..92140e9 --- /dev/null +++ b/src/components/Icon/icons/images/QFeedImage.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const QFeedImage = () => { + return ( + + + + ); +}; + +export default QFeedImage; diff --git a/src/components/Icon/icons/images/QFeedImage2.tsx b/src/components/Icon/icons/images/QFeedImage2.tsx new file mode 100644 index 0000000..700f6f7 --- /dev/null +++ b/src/components/Icon/icons/images/QFeedImage2.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +const QFeedImage2 = () => { + return ( + + + + + ); +}; + +export default QFeedImage2; diff --git a/src/components/Icon/icons/images/WaveImage.tsx b/src/components/Icon/icons/images/WaveImage.tsx new file mode 100644 index 0000000..5c5a42b --- /dev/null +++ b/src/components/Icon/icons/images/WaveImage.tsx @@ -0,0 +1,37 @@ +import React from "react"; + +const WaveImage = () => { + return ( + + + + + + + + + ); +}; + +export default WaveImage; diff --git a/src/components/Icon/icons/index.ts b/src/components/Icon/icons/index.ts index 4703ed0..33cbb72 100644 --- a/src/components/Icon/icons/index.ts +++ b/src/components/Icon/icons/index.ts @@ -1,5 +1,6 @@ export { default as Alarm } from "./Alarm"; export { default as LeftArrow } from "./LeftArrow"; +export { default as RightArrow } from "./RightArrow"; export { default as HomePlus } from "./HomePlus"; export { default as Message } from "./Message"; export { default as Dots } from "./Dots"; @@ -7,6 +8,12 @@ export { default as AddChat } from "./AddChat"; export { default as CoinChat } from "./CoinChat"; export { default as HeartArrow } from "./HeartArrow"; +// images +export { default as AngelImage } from "./images/AngelImage"; +export { default as QFeedImage } from "./images/QFeedImage"; +export { default as QFeedImage2 } from "./images/QFeedImage2"; +export { default as WaveImage } from "./images/WaveImage"; + // bottom navigation export { default as Home } from "./bottomNavigation/Home"; export { default as Chat } from "./bottomNavigation/Chat"; diff --git a/src/components/Title/BackTitle.tsx b/src/components/Title/BackTitle.tsx index 51f93eb..36e5fe9 100644 --- a/src/components/Title/BackTitle.tsx +++ b/src/components/Title/BackTitle.tsx @@ -44,9 +44,7 @@ const BackTitle = forwardRef(function Div( ) : ( -
+
{children}
)} diff --git a/src/hooks/home/useGetQuestionId.ts b/src/hooks/home/useGetQuestionId.ts new file mode 100644 index 0000000..53821ea --- /dev/null +++ b/src/hooks/home/useGetQuestionId.ts @@ -0,0 +1,21 @@ +import { useQuery } from "@tanstack/react-query"; +import { getQuestionsId, getQuestionsIdChoices } from "src/apis/questions"; + +export const useGetQuestionsId = ({ id }: any) => { + const { data, isLoading, error, refetch } = useQuery( + [], + async () => { + const params: any = {}; + const result = await getQuestionsId(id); + const choices = await getQuestionsIdChoices(id); + console.log("A"); + return { info: result, choices: choices }; + }, + { + staleTime: 1000 * 60 * 5, + cacheTime: 1000 * 60 * 30 + } + ); + + return { data, isLoading, error, refetch }; +}; diff --git a/src/hooks/home/useGetQuestions.ts b/src/hooks/home/useGetQuestions.ts index 34959de..dacc3f4 100644 --- a/src/hooks/home/useGetQuestions.ts +++ b/src/hooks/home/useGetQuestions.ts @@ -3,7 +3,7 @@ import { getQuestions } from "src/apis/questions"; export const useGetQuestions = () => { const { data, isLoading, error, refetch } = useQuery( - [location], + [], async () => { const params: any = {}; const result = await getQuestions(); diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx index 9e0034d..741f069 100644 --- a/src/pages-edit/home/Home.tsx +++ b/src/pages-edit/home/Home.tsx @@ -14,10 +14,12 @@ import useDisplaySize from "src/hooks/useDisplaySize"; import Icon from "src/components/Icon"; import { useGetQuestions } from "src/hooks/home/useGetQuestions"; import { globalValue } from "src/constants/globalValue"; +import { useState } from "react"; export default function Home() { const router = useRouter(); const { width } = useDisplaySize(); + const [isSort, setIsSort] = useState(true); const handleClickPickMe = () => { router.push(Route.MYPAGE()); @@ -37,14 +39,19 @@ export default function Home() { - + - + - {data.data.map((data: any, idx: number) => { + {data?.data?.map((data: any, idx: number) => { return ; })} - + @@ -94,7 +101,7 @@ const PlusButton = styled.div` padding-top: 16px; position: absolute; - right: 0; + right: 17px; bottom: 64px; border-radius: 50%; diff --git a/src/pages-edit/home/components/BasicQuestion.tsx b/src/pages-edit/home/components/BasicQuestion.tsx index 929ee35..834593f 100644 --- a/src/pages-edit/home/components/BasicQuestion.tsx +++ b/src/pages-edit/home/components/BasicQuestion.tsx @@ -4,13 +4,14 @@ import { colors } from "styles/theme"; import styled, { css } from "styled-components"; import { match } from "ts-pattern"; import Text from "src/components/common/Text"; +import Icon from "src/components/Icon"; interface Props { type: "pick-me" | "question"; onClick?: () => void; } -const BasicQuestion = ({ type = "pick-me", ...props }: Props) => { +const BasicQuestion = ({ type = "pick-me", ...props }: any) => { return ( <> @@ -23,11 +24,15 @@ const BasicQuestion = ({ type = "pick-me", ...props }: Props) => { > - 가장 더위를 잘 탈 것 같은 사람은? + {type === "pick-me" + ? "나를 선택한 큐피드" + : "가장 더위를 잘 탈 것 같은 사람은?"} - 아직 9문제 남았어요! + {type === "pick-me" + ? `총 ${props.count}명이 나를 선택했어요!` + : `아직 ${props.count}문제 남았어요!`} {type === "question" && ( @@ -37,14 +42,29 @@ const BasicQuestion = ({ type = "pick-me", ...props }: Props) => { color="light_qblack" style={{ padding: "6px 16px", + display: "flex", borderRadius: 5, backgroundColor: colors.light_qwhite }} > - 계속하기 + 계속하기 + + + )} + + + {type === "pick-me" ? ( + + ) : ( + // <> + + )} + @@ -61,6 +81,8 @@ const BasicQuestionWrapper = styled.div<{ color: any }>` const BasicQuestionInner = styled.div` padding: 20px; + position: relative; + display: flex; flex-direction: column; gap: 4px; @@ -70,4 +92,10 @@ const BottomButton = styled.div` display: flex; `; +const ImageWrapper = styled.div` + position: absolute; + bottom: 0; + right: 0; +`; + export default BasicQuestion; diff --git a/src/pages-edit/home/components/Filter.tsx b/src/pages-edit/home/components/Filter.tsx index 25a847d..c2a67e9 100644 --- a/src/pages-edit/home/components/Filter.tsx +++ b/src/pages-edit/home/components/Filter.tsx @@ -1,26 +1,35 @@ "use client"; -import { Text } from "src/components/common/Text"; -import Hr from "src/components/Hr"; -import { colors } from "styles/theme"; import styled from "styled-components"; -import { match } from "ts-pattern"; +import { colors } from "styles/theme"; +import Hr from "src/components/Hr"; +import { Text } from "src/components/common/Text"; interface Props {} -const Filter = ({}: Props) => { +const Filter = ({ isSort, setIsSort }: any) => { return ( - - 최신순 - +
setIsSort(true)}> + + 최신순 + +
- - 인기순 - +
setIsSort(false)}> + + 인기순 + +
); }; diff --git a/src/pages-edit/home/components/QfeedFrame.tsx b/src/pages-edit/home/components/QfeedFrame.tsx index 1d55c0c..edf0881 100644 --- a/src/pages-edit/home/components/QfeedFrame.tsx +++ b/src/pages-edit/home/components/QfeedFrame.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; 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 styled from "styled-components"; @@ -15,7 +16,7 @@ const QfeedFrame = ({ idx, data }: Props) => { const router = useRouter(); const imageUrl = data.backgroundImage; - const writeDay = new Date(data.updatedAt); + const writeDay = new Date(data.createdAt); const today = new Date(); const pastTime = (today.getDate() - writeDay.getDate()) * 24 + @@ -29,12 +30,12 @@ const QfeedFrame = ({ idx, data }: Props) => { return (
{ - {0}명 응답 + {data.choiceCount}명 응답
+ {data.isViewed ? undefined : ( + + {imageUrl ? ( + + ) : ( + + )} + + )} ); }; const QfeedFrameWrapper = styled.div<{ repeatBackgroundColor: any }>` height: calc(100% + 20px); + position: relative; border-radius: 10px; background-color: ${({ repeatBackgroundColor }) => repeatBackgroundColor}; `; @@ -110,14 +125,10 @@ const CountWrapper = styled.div` display: flex; `; -const Background = styled.div` - width: 100%; - height: 100%; - margin-right: 6px; - - opacity: 0.5; +const QFeedWrapper = styled.div` position: absolute; - background-color: ${colors.light_qwhite}; + right: 12px; + bottom: 28px; `; export default QfeedFrame; diff --git a/src/pages-edit/question/Question.tsx b/src/pages-edit/question/Question.tsx index b9fb948..eaf681e 100644 --- a/src/pages-edit/question/Question.tsx +++ b/src/pages-edit/question/Question.tsx @@ -2,8 +2,11 @@ import { Text } from "src/components/common/Text"; import { colors } from "styles/theme"; import styled from "styled-components"; +import { useSearchParams } from "next/navigation"; export default function Question() { + const searchParams = useSearchParams(); + return ( diff --git a/styles/theme/colors.tsx b/styles/theme/colors.tsx index dcc2e82..8a26a15 100644 --- a/styles/theme/colors.tsx +++ b/styles/theme/colors.tsx @@ -33,18 +33,30 @@ export const colors: any = { // 12 개 export const repeatBackgroundColor = [ - colors.primary_qpink, - colors.primary_qorange, - colors.primary_qblue, - colors.primary_qyellow, - colors.primary_qyellow, - colors.primary_qgreen, - colors.primary_qpink, - colors.primary_qred, - colors.primary_qorange, - colors.primary_qblue, - colors.primary_qred, - colors.primary_qgreen + // colors.primary_qpink, + // colors.primary_qorange, + // colors.primary_qblue, + // colors.primary_qyellow, + // colors.primary_qyellow, + // colors.primary_qgreen, + // colors.primary_qpink, + // colors.primary_qred, + // colors.primary_qorange, + // colors.primary_qblue, + // colors.primary_qred, + // colors.primary_qgreen + + "primary_qpink", + "primary_qorange", + "primary_qblue", + "primary_qyellow", + "primary_qgreen", + "primary_qpink", + "primary_qred", + "primary_qorange", + "primary_qblue", + "primary_qred", + "primary_qgreen" ]; export const repeatQuestionColor = [ From a8e180d388065778a3a44fddd9f599a863aac796 Mon Sep 17 00:00:00 2001 From: cyeju Date: Sun, 20 Aug 2023 15:59:30 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20homeTitle=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/home/useGetQuestionId.ts | 4 +--- src/pages-edit/home/Home.tsx | 5 ++--- src/pages-edit/home/components/HomeTitle.tsx | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/hooks/home/useGetQuestionId.ts b/src/hooks/home/useGetQuestionId.ts index 53821ea..3dd5f1d 100644 --- a/src/hooks/home/useGetQuestionId.ts +++ b/src/hooks/home/useGetQuestionId.ts @@ -7,9 +7,7 @@ export const useGetQuestionsId = ({ id }: any) => { async () => { const params: any = {}; const result = await getQuestionsId(id); - const choices = await getQuestionsIdChoices(id); - console.log("A"); - return { info: result, choices: choices }; + return result; }, { staleTime: 1000 * 60 * 5, diff --git a/src/pages-edit/home/Home.tsx b/src/pages-edit/home/Home.tsx index 741f069..b0325b0 100644 --- a/src/pages-edit/home/Home.tsx +++ b/src/pages-edit/home/Home.tsx @@ -5,7 +5,7 @@ import BottomNavigation from "src/components/BottomNavigation"; import BasicQuestion from "src/pages-edit/home/components/BasicQuestion"; import Filter from "./components/Filter"; import HomeTitle from "src/pages-edit/home/components/HomeTitle"; -import QfeedFrame from "./components/QfeedFrame"; +import QFeedFrame from "./components/QfeedFrame"; import Spacing from "src/components/Spacing"; import { colors } from "styles/theme"; import { Route } from "src/constants/Route"; @@ -32,7 +32,6 @@ export default function Home() { }; const { data, isLoading } = useGetQuestions(); - console.log(data); return isLoading ? undefined : ( <> @@ -60,7 +59,7 @@ export default function Home() { gutterHeight={14} > {data?.data?.map((data: any, idx: number) => { - return ; + return ; })} diff --git a/src/pages-edit/home/components/HomeTitle.tsx b/src/pages-edit/home/components/HomeTitle.tsx index 4af9c59..f14037f 100644 --- a/src/pages-edit/home/components/HomeTitle.tsx +++ b/src/pages-edit/home/components/HomeTitle.tsx @@ -36,7 +36,7 @@ const HomeTitle = ({}: {}) => { /> -
+