From f8f7614650d2107a3c1f98d0447a535cf2f54e43 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 17 Mar 2023 01:46:40 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[=20refactor=20]=20=EB=A9=94=EB=93=A4?= =?UTF-8?q?=EB=A6=AC=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B9=BC=EB=9D=BC=20index=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainPage/Medley/MedleyCard/index.tsx | 2 +- .../MainPage/Medley/MedleyCard/style.ts | 4 +- src/@components/MainPage/Medley/index.tsx | 2 +- src/util/main/medleyGradation.ts | 52 ++++++------------- 4 files changed, 20 insertions(+), 40 deletions(-) diff --git a/src/@components/MainPage/Medley/MedleyCard/index.tsx b/src/@components/MainPage/Medley/MedleyCard/index.tsx index 1d1dd653..3a40692f 100644 --- a/src/@components/MainPage/Medley/MedleyCard/index.tsx +++ b/src/@components/MainPage/Medley/MedleyCard/index.tsx @@ -13,7 +13,7 @@ export default function MedleyCard(props: MedleyCardProps) { return ( <> - + {medleyCard.sticker} {medleyCard.coverTitle} diff --git a/src/@components/MainPage/Medley/MedleyCard/style.ts b/src/@components/MainPage/Medley/MedleyCard/style.ts index af9033f7..6931f6de 100644 --- a/src/@components/MainPage/Medley/MedleyCard/style.ts +++ b/src/@components/MainPage/Medley/MedleyCard/style.ts @@ -2,7 +2,7 @@ import styled from "styled-components"; import { medleyGradation } from "../../../../util/main/medleyGradation"; -const MedleyWrapper = styled.button<{ medleyId: string }>` +const MedleyWrapper = styled.button<{ bgcolorId: string }>` width: 14rem; height: 20rem; @@ -13,7 +13,7 @@ const MedleyWrapper = styled.button<{ medleyId: string }>` flex-direction: column; align-items: center; text-align: center; - background: ${({ medleyId }) => medleyGradation[medleyGradation.findIndex((card) => card.id === medleyId)].gradation}; + background: ${({ bgcolorId }) => medleyGradation[bgcolorId]}; `; const ContentTag = styled.p` diff --git a/src/@components/MainPage/Medley/index.tsx b/src/@components/MainPage/Medley/index.tsx index 60012430..e345f10a 100644 --- a/src/@components/MainPage/Medley/index.tsx +++ b/src/@components/MainPage/Medley/index.tsx @@ -13,7 +13,7 @@ export default function Medley() { return ( 👍 여러분을 위해 피클이 직접 뽑은 주제들! - + {randomMedleyLists && randomMedleyLists.map((medleyCard) => )} diff --git a/src/util/main/medleyGradation.ts b/src/util/main/medleyGradation.ts index d2b91833..be8bce5a 100644 --- a/src/util/main/medleyGradation.ts +++ b/src/util/main/medleyGradation.ts @@ -1,37 +1,17 @@ -export type MedleyGradation = { - id: string; - gradation: string; +export const medleyGradation: { [key: string]: string } = { + // 소개팅 가기 전 미리 보면 좋을대화주제 20선 + "6409d356bbaeffe1c2f5621b": + "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(255, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%, rgba(11, 0, 255, 0.102) 100%), linear-gradient(0deg, rgba(250, 255, 0, 0.37), rgba(250, 255, 0, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", + // 커플이 여행 가서 하기 좋은 대화주제 30선 + "6409d356bbaeffe1c2f5621d": + "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", + // 처음 보는 사람들과의 아이스브레이킹용 대화주제 20선 + "6409d356bbaeffe1c2f5621f": + "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 255, 133, 0.102) 100%), linear-gradient(0deg, rgba(157, 97, 255, 0.11), rgba(157, 97, 255, 0.11)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", + // 스스로에 대해 생각해보기 좋은 대화주제 20선 + "6409d356bbaeffe1c2f56221": + "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(0deg, rgba(0, 224, 255, 0.2), rgba(0, 224, 255, 0.2)), linear-gradient(180deg, #FFBF18 0%, #73BE56 67.59%, #19BE7E 100%);", + // 호불호 갈리는 밸런스게임 대화주제 20선 + "6409d356bbaeffe1c2f56223": + "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", }; - -export const medleyGradation: MedleyGradation[] = [ - { - // 소개팅 가기 전 미리 보면 좋을대화주제 20선 - id: "6409d356bbaeffe1c2f5621b", - gradation: - "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(255, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%, rgba(11, 0, 255, 0.102) 100%), linear-gradient(0deg, rgba(250, 255, 0, 0.37), rgba(250, 255, 0, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", - }, - { - // 커플이 여행 가서 하기 좋은 대화주제 30선 - id: "6409d356bbaeffe1c2f5621d", - gradation: - "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", - }, - { - // 처음 보는 사람들과의 아이스브레이킹용 대화주제 20선 - id: "6409d356bbaeffe1c2f5621f", - gradation: - "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 255, 133, 0.102) 100%), linear-gradient(0deg, rgba(157, 97, 255, 0.11), rgba(157, 97, 255, 0.11)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", - }, - { - // 스스로에 대해 생각해보기 좋은 대화주제 20선 - id: "6409d356bbaeffe1c2f56221", - gradation: - "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(0deg, rgba(0, 224, 255, 0.2), rgba(0, 224, 255, 0.2)), linear-gradient(180deg, #FFBF18 0%, #73BE56 67.59%, #19BE7E 100%);", - }, - { - // 호불호 갈리는 밸런스게임 대화주제 20선 - id: "6409d356bbaeffe1c2f56223", - gradation: - "linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(79, 72, 236, 0.102) 100%), linear-gradient(0deg, rgba(79, 72, 236, 0.37), rgba(79, 72, 236, 0.37)), linear-gradient(180deg, #00FF9C 0%, rgba(255, 255, 255, 0) 100%);", - }, -]; From d99796e3c6c77fbdafc3e9f2b0694afde817950b Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 17 Mar 2023 02:10:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[=20fix=20]=20=EB=93=9C=EB=9E=98=EA=B7=B8?= =?UTF-8?q?=20=EC=8B=9C=EC=97=90=20swr=20data=20=EA=B3=84=EC=86=8D?= =?UTF-8?q?=ED=95=B4=EC=84=9C=20revalidate=20=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@components/MainPage/Medley/index.tsx | 5 ++--- src/@components/MainPage/hooks/useMedleyLists.ts | 4 +++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/@components/MainPage/Medley/index.tsx b/src/@components/MainPage/Medley/index.tsx index e345f10a..6861f4bf 100644 --- a/src/@components/MainPage/Medley/index.tsx +++ b/src/@components/MainPage/Medley/index.tsx @@ -5,15 +5,14 @@ import MedleyCard from "./MedleyCard"; import St from "./style"; export default function Medley() { - const { randomMedleyLists, isLoading } = useMedleyLists(); const { scrollableContainerProps } = useScrollableContainer(); + const { randomMedleyLists, isLoading } = useMedleyLists(); if (isLoading) return ; - return ( 👍 여러분을 위해 피클이 직접 뽑은 주제들! - + {randomMedleyLists && randomMedleyLists.map((medleyCard) => )} diff --git a/src/@components/MainPage/hooks/useMedleyLists.ts b/src/@components/MainPage/hooks/useMedleyLists.ts index 93bcd3d6..de12b518 100644 --- a/src/@components/MainPage/hooks/useMedleyLists.ts +++ b/src/@components/MainPage/hooks/useMedleyLists.ts @@ -1,3 +1,4 @@ +import { useMemo } from "react"; import useSWR from "swr"; import { realReq } from "../../../core/api/common/axios"; @@ -7,9 +8,10 @@ import { PiickleSWRResponse } from "../../../types/remote/swr"; export function useMedleyLists() { const { data, error } = useSWR>(`${PATH.MEDLEY}`, realReq.GET_SWR); + const randomMedleyLists = useMemo(() => data?.data.data.sort(() => Math.random() - 0.5), [data]); return { - randomMedleyLists: data && [...data.data.data].sort(() => Math.random() - 0.5), + randomMedleyLists, isLoading: !error && !data, }; }