Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hotfix/#218 메들리 기능 이슈 해결 #231

Merged
merged 2 commits into from
Mar 16, 2023
Merged

Hotfix/#218 메들리 기능 이슈 해결 #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8f7614
[ refactor ] 메들리 그라데이션 칼라 index 수정
joohaem Mar 16, 2023
d99796e
[ fix ] 드래그 시에 swr data 계속해서 revalidate 되는 이슈 해결
joohaem Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/@components/MainPage/Medley/MedleyCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function MedleyCard(props: MedleyCardProps) {

return (
<>
<St.MedleyWrapper medleyId={medleyCard._id} onClick={toggleModal}>
<St.MedleyWrapper bgcolorId={medleyCard._id} onClick={toggleModal}>
<St.ContentTag>{medleyCard.sticker}</St.ContentTag>
<St.ContentTitle>{medleyCard.coverTitle}</St.ContentTitle>
</St.MedleyWrapper>
Expand Down
4 changes: 2 additions & 2 deletions src/@components/MainPage/Medley/MedleyCard/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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]};
joohaem marked this conversation as resolved.
Show resolved Hide resolved
`;

const ContentTag = styled.p`
Expand Down
3 changes: 1 addition & 2 deletions src/@components/MainPage/Medley/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ 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 <Loading backgroundColor="white" />;

return (
<St.Container>
<St.Title>👍 여러분을 위해 피클이 직접 뽑은 주제들!</St.Title>
Expand Down
4 changes: 3 additions & 1 deletion src/@components/MainPage/hooks/useMedleyLists.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useMemo } from "react";
import useSWR from "swr";

import { realReq } from "../../../core/api/common/axios";
Expand All @@ -7,9 +8,10 @@ import { PiickleSWRResponse } from "../../../types/remote/swr";

export function useMedleyLists() {
const { data, error } = useSWR<PiickleSWRResponse<MedleyCard[]>>(`${PATH.MEDLEY}`, realReq.GET_SWR);
const randomMedleyLists = useMemo(() => data?.data.data.sort(() => Math.random() - 0.5), [data]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

궁금한게 있어요😵 이 코드는 data가 변할 때마다, 랜덤함수를 반환하라는 거죠?!
새로고침할 때랑, 카드뷰 들어갔다 나오면 메들리 순서가 변경되는데
data는 구롬 언제 바뀌는지에 대한 코드가 어디있는지 아시나용?-?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NYeonK
swr에서 언제 데이터가 revalidate 되는지 살펴보면 될 것 같아요!
살펴보고 저도 알려주세요 !!


return {
randomMedleyLists: data && [...data.data.data].sort(() => Math.random() - 0.5),
randomMedleyLists,
isLoading: !error && !data,
};
}
52 changes: 16 additions & 36 deletions src/util/main/medleyGradation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,17 @@
export type MedleyGradation = {
id: string;
gradation: string;
export const medleyGradation: { [key: string]: string } = {
joohaem marked this conversation as resolved.
Show resolved Hide resolved
// 소개팅 가기 전 미리 보면 좋을대화주제 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%);",
},
];