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

Feat: mystudy 페이지 빈 화면 문구 수정 및 스켈레톤 첫 렌딩시에만 보이게 수정 #369

Merged
merged 1 commit into from
May 31, 2024
Merged

Feat: mystudy 페이지 빈 화면 문구 수정 및 스켈레톤 첫 렌딩시에만 보이게 수정 #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 6 additions & 1 deletion co-kkiri/src/components/commons/Cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import DESIGN_TOKEN from "@/styles/tokens";
import useResponsiveSidebar from "@/hooks/useResponsiveSideBar";
import { Pages } from "@/types/pagesTypes";
import NoResultText from "./NoResultText";
import CardSkeleton from "./Skeleton/elements/CardSkeleton";
import useMyStudyStore from "@/stores/myStudyStore";
import { categoryStudyStatusFilter, categoryStudyStatusPhrase } from "@/constants/categoriesAndFilters";

interface CardsProps {
data: ListApiResponseDto["data"];
Expand All @@ -14,6 +15,8 @@ interface CardsProps {
}

export default function Cards({ data, page, className }: CardsProps) {
const { currentCategory } = useMyStudyStore();

const isSidebarOpenNarrow = useResponsiveSidebar();
return (
<Container className={className}>
Expand All @@ -25,6 +28,8 @@ export default function Cards({ data, page, className }: CardsProps) {
</div>
))}
</CardList>
) : page === "myStudy" ? (
<NoResultText text={categoryStudyStatusPhrase[currentCategory]} padding={120} color="black" />
) : (
<NoResultText text="검색 결과가 없어요." padding={120} color="black" />
)}
Expand Down
8 changes: 8 additions & 0 deletions co-kkiri/src/constants/categoriesAndFilters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ export const categoryStudyStatusFilter: { [key in CategoryStudyStatus]: string }
COMPLETED: "완료",
};

export const categoryStudyStatusPhrase: { [key in CategoryStudyStatus]: string } = {
APPLIED: "신청중인 스터디/프로젝트가 없습니다.",
RECRUITING: "모집중인 스터디/프로젝트가 없습니다.",
WAITING: "대기중인 스터디/프로젝트가 없습니다.",
ON_GOING: "진행중인 스터디/프로젝트가 없습니다.",
COMPLETED: "완료한 스터디/프로젝트가 없습니다.",
};

export const listPageInitialFilter = {
stacks: [],
position: "",
Expand Down
11 changes: 9 additions & 2 deletions co-kkiri/src/pages/MyStudy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import useMyStudyStore from "@/stores/myStudyStore";

import { useInfiniteQuery } from "@tanstack/react-query";
Expand All @@ -20,6 +20,7 @@ const { serverError, unauthorized } = TOAST;
export default function MyStudy() {
const { currentCategory, setCurrentCategory } = useMyStudyStore();
const isSidebarOpenNarrow = useResponsiveSidebar();
const [isFirstLoading, setIsFirstLoading] = useState(true);
const fetchListWithCategory = ({ pageParam = 1 }) => fetchList(currentCategory, { pageParam });
const pushToast = useToast();

Expand All @@ -37,7 +38,13 @@ export default function MyStudy() {
setCurrentCategory(filterKey as CategoryStudyStatus);
};

const isVisibleSkeleton = useSkeleton(isLoading);
useEffect(() => {
if (!isLoading) {
setIsFirstLoading(false);
}
}, [isLoading]);

const isVisibleSkeleton = useSkeleton(isFirstLoading);
const allCards = data?.pages.flatMap((page) => page.data) ?? [];

useEffect(() => {
Expand Down
Loading