-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #130 from YAPP-Github/feature/DEV-53
[ Feature/dev 53 ] 워크북 card list 불러오기 mock api 연결 및 테스트
- Loading branch information
Showing
50 changed files
with
1,018 additions
and
263 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { toast } from "@shared/components/ui/use-toast"; | ||
| import { SUBSCRIBE_USER_ACTIONS } from "@subscription/constants/subscribe"; | ||
| import { subscribeWorkbookOptions } from "@subscription/remotes/postSubscriptionQueryOptions"; | ||
| import { useMutation } from "@tanstack/react-query"; | ||
|
|
||
| export default function useSusbscribeWorkbook() { | ||
| const { mutate: subscribeWorkbook } = useMutation(subscribeWorkbookOptions()); | ||
| const postSubscribeWorkbook = ({ | ||
| workbookId, | ||
| handleSucess, | ||
| }: { | ||
| workbookId: string; | ||
| handleSucess?: () => void; | ||
| }) => { | ||
| try { | ||
| subscribeWorkbook( | ||
| { workbookId }, | ||
| { | ||
| onSuccess: () => { | ||
| toast({ | ||
| title: SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_SUCCESS, | ||
| }); | ||
| if (handleSucess) handleSucess(); | ||
| }, | ||
| onError: (error) => { | ||
| let errorMessage = SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_FAIL; | ||
| if (error && error.data && error.data.message) { | ||
| errorMessage = error.data.message || errorMessage; | ||
| } | ||
| toast({ | ||
| title: errorMessage, | ||
| }); | ||
| }, | ||
| }, | ||
| ); | ||
| } catch (error) { | ||
| console.error("catch error", error); | ||
|
|
||
| toast({ | ||
| title: SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_FAIL, | ||
| }); | ||
| } | ||
| }; | ||
| return { postSubscribeWorkbook }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| export type CategoryInfo = { | ||
| export type CategoryServerInfo = { | ||
| code: number; | ||
| name: string; | ||
| }; | ||
|
|
||
| export type CategoryInfoList = { | ||
| categories: CategoryInfo[]; | ||
| export type CategoryClientInfo = { | ||
| code: number; | ||
| name: string; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { Skeleton } from "@shared/components/ui/skeleton"; | ||
| import SkeletonFewLogo from "public/assets/icon/skeletonFewLogo.svg"; | ||
| const WriterProfileSkeleton = () => { | ||
| return <Skeleton className="h-[30px] w-[30px] rounded-full" />; | ||
| }; | ||
| const ViewCountSkeleton = () => { | ||
| return ( | ||
| <div className="flex items-center gap-[5px]"> | ||
| <Skeleton className="h-[9px] w-[40px]" /> | ||
| </div> | ||
| ); | ||
| }; | ||
| const CategoryTagSkeleton = () => { | ||
| return <Skeleton className="mb-[8px] h-[18px] w-[20%] py-[2px]" />; | ||
| }; | ||
| const TitleSkeleton = () => { | ||
| return <Skeleton className="mb-[4px] h-[27px] w-[30%] bg-text-gray3" />; | ||
| }; | ||
|
|
||
| const DescriptionSkeleton = () => { | ||
| const skeletonItems = new Array(4).fill(null); | ||
| return ( | ||
| <div className="mb-[20px] flex flex-col gap-[3px]"> | ||
| {skeletonItems.map((_, index) => ( | ||
| <Skeleton key={index} className="h-[23px] w-full bg-text-gray3" /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const ThumbnailSkeleton = () => { | ||
| return ( | ||
| <Skeleton className="flex h-[170px] w-full items-center justify-center rounded bg-[#C4C4C4]"> | ||
| <SkeletonFewLogo width={93} height={93} /> | ||
| </Skeleton> | ||
| ); | ||
| }; | ||
|
|
||
| const ArticleCardDetailSkeleton = { | ||
| WriterProfileSkeleton, | ||
| ViewCountSkeleton, | ||
| CategoryTagSkeleton, | ||
| TitleSkeleton, | ||
| DescriptionSkeleton, | ||
| ThumbnailSkeleton, | ||
| }; | ||
| export default ArticleCardDetailSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,40 @@ | ||
| import { CategoryInfo } from "@common/types/category"; | ||
| import ArticleCardModel from "@main/models/ArticleCardModel"; | ||
| import { ArticleServerInfo } from "@main/types/article"; | ||
| import { CategoryClientInfo } from "@common/types/category"; | ||
| import { ENTIRE_CATEGORY } from "@main/constants"; | ||
| import { getArticlesWithCategoryInfiniteQueryOptions } from "@main/remotes/getArticlesWithCategoryInfiniteQueryOptions"; | ||
| import { useInfiniteQuery } from "@tanstack/react-query"; | ||
| import { useEffect } from "react"; | ||
| import { useInView } from "react-intersection-observer"; | ||
| import ArticleCard from "../ArticleCard"; | ||
| import ArticleCardListSkeleton from "../ArticleCardListSkeleton"; | ||
| export default function ArticleCardList({ code }: Partial<CategoryClientInfo>) { | ||
| const { data, fetchNextPage, isLoading } = useInfiniteQuery({ | ||
| ...getArticlesWithCategoryInfiniteQueryOptions({ | ||
| code: code !== undefined ? code : ENTIRE_CATEGORY, | ||
| }), | ||
| }); | ||
| const { ref, inView } = useInView(); | ||
|
|
||
| const data: ArticleServerInfo[] = [ | ||
| { | ||
| id: 1, | ||
| writer: { | ||
| id: 1, | ||
| name: "안나포", | ||
| url: "https://storage.mrblog.net/files/dosi_draw/a3NgiDGW2H3NhsYp1Qp3RuWNzUx9sg8L2yyooYqF.jpg", | ||
| }, | ||
| title: "ETF(상장 지수 펀드)란? 모르면 손해라고?", | ||
| content: | ||
| "오늘날 전동 킥보드의 인기는 누가 뭐래도 전동 킥보드 공유 서비스가 등장하면서부터입니다. 공유 서비스가 등장하기 이전 전동 킥보드는 주로 레저용으로 사용되다가 공유형 전동킥보드 서비스가 등장하면서 이동 수단으로 사용되기 시작합니다.Y", | ||
| problemIds: [1, 2, 3], | ||
| category: "경제", | ||
| createdAt: "2024-07-25T14:32:27.310368", | ||
| views: 1, | ||
| mainImageUrl: | ||
| "https://storage.mrblog.net/files/dosi_draw/a3NgiDGW2H3NhsYp1Qp3RuWNzUx9sg8L2yyooYqF.jpg", | ||
|
|
||
| includedWorkbooks: [ | ||
| { | ||
| id: 1, | ||
| title: "사소한 것들의 역사", | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "인모스트 경제레터", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 2, | ||
| writer: { | ||
| id: 1, | ||
| name: "몰티즈", | ||
| url: "https://storage.mrblog.net/files/dosi_draw/a3NgiDGW2H3NhsYp1Qp3RuWNzUx9sg8L2yyooYqF.jpg", | ||
| useEffect( | ||
| function fetchNextArticles() { | ||
| if (inView && !data?.isLast) { | ||
| fetchNextPage(); | ||
| } | ||
| }, | ||
| mainImageUrl: | ||
| "https://storage.mrblog.net/files/dosi_draw/a3NgiDGW2H3NhsYp1Qp3RuWNzUx9sg8L2yyooYqF.jpg", | ||
| title: "ETF(상장 지수 펀드)란? 모르면 손해라고?", | ||
| content: "ECONOMY", | ||
| problemIds: [1, 2, 3], | ||
| category: "경제", | ||
| createdAt: "2024-07-25T14:32:27.310368", | ||
| views: 1, | ||
| includedWorkbooks: [ | ||
| { | ||
| id: 1, | ||
| title: "사소한 것들의 역사", | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "인모스트 경제레터", | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ArticleCardList({ code, name }: CategoryInfo) { | ||
| const articleCardModel = new ArticleCardModel({ | ||
| initArticleCardServerList: data, | ||
| }); | ||
| [inView], | ||
| ); | ||
| if (isLoading || !data?.articles) { | ||
| return <ArticleCardListSkeleton />; | ||
| } | ||
|
|
||
| const lastIdx = data?.articles.length - 1; | ||
| return ( | ||
| <> | ||
| {articleCardModel.articleCardList().map((data, idx) => ( | ||
| <ArticleCard {...data} key={`article-card-${idx}`} /> | ||
| <section> | ||
| {data?.articles.map((data, idx) => ( | ||
| <div key={`article-card-${idx}`}> | ||
| {idx === lastIdx && <div ref={ref} className="h-[2px]" />} | ||
| <ArticleCard {...data} /> | ||
| </div> | ||
| ))} | ||
| </> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import ArticleCardDetail from "../ArticleCardDetail"; | ||
| import ArticleCardDetailSkeleton from "../ArticleCardDetailSkeleton"; | ||
|
|
||
| export default function ArticleCardListSkeleton() { | ||
| return ( | ||
| <> | ||
| {new Array(2).fill(null).map((_, idx) => ( | ||
| <ArticleCardDetail.RootComponentWrapper | ||
| key={`article-card-skeleton-${idx}`} | ||
| > | ||
| <ArticleCardDetail.TopComponentWrapper> | ||
| <ArticleCardDetailSkeleton.WriterProfileSkeleton /> | ||
| <ArticleCardDetailSkeleton.ViewCountSkeleton /> | ||
| </ArticleCardDetail.TopComponentWrapper> | ||
| <ArticleCardDetailSkeleton.CategoryTagSkeleton /> | ||
| <ArticleCardDetailSkeleton.TitleSkeleton /> | ||
| <ArticleCardDetailSkeleton.DescriptionSkeleton /> | ||
| <ArticleCardDetailSkeleton.ThumbnailSkeleton /> | ||
| </ArticleCardDetail.RootComponentWrapper> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.