diff --git a/src/apis/myActivity.ts b/src/apis/myActivity.ts index ab702be1..b264237e 100644 --- a/src/apis/myActivity.ts +++ b/src/apis/myActivity.ts @@ -1,9 +1,17 @@ -import { GetReceivedIngredientsResponse } from "@/types/myActivity.dto"; +import { + GetMySupportedTteokguksRespose, + GetReceivedIngredientsResponse, +} from "@/types/myActivity.dto"; import http from "./core"; const RECEIVED_INGREDIENTS_SIZE = 10; +export const getMySupportedTteokguks = (page: number) => + http.get( + `api/v1/support?page=${page}&size=${RECEIVED_INGREDIENTS_SIZE}`, + ); + export const getReceivedIngredients = (page: number) => http.get( `api/v1/support/ingredient?page=${page}&size=${RECEIVED_INGREDIENTS_SIZE}`, diff --git a/src/components/MyActivity/MySupportedTteokgukCardList.tsx b/src/components/MyActivity/MySupportedTteokgukCardList.tsx new file mode 100644 index 00000000..1ab2aa7f --- /dev/null +++ b/src/components/MyActivity/MySupportedTteokgukCardList.tsx @@ -0,0 +1,87 @@ +import { css } from "@styled-system/css"; + +import { MySupportedTteokguk } from "@/types/myActivity"; + +import TteokgukImage from "@/components/common/TteokgukImage"; +import { Link } from "@/routes/Link"; + +interface Props { + tteokguks: MySupportedTteokguk[]; +} + +const MySupportedTteokgukCardList = ({ tteokguks }: Props) => { + return ( + + ); +}; + +export default MySupportedTteokgukCardList; + +const styles = { + container: css({ + display: "flex", + flexFlow: "row wrap", + gap: "1.6rem", + }), + cardContainer: css({ + position: "relative", + maxWidth: "calc(50% - 1.6rem)", + width: "100%", + height: "20.5rem", + boxSizing: "border-box", + borderRadius: "1rem", + overflow: "hidden", + paddingBottom: "5.3rem", + }), + imageContainer: css({ + position: "relative", + display: "flex", + justifyContent: "center", + height: "15.2rem", + backgroundColor: "white", + overflow: "hidden", + }), + cardContent: css({ + width: "100%", + height: "5.3rem", + backgroundColor: "primary.80", + padding: "0.8rem 1rem 0", + }), + cardTitle: css({ + fontSize: "1.4rem", + fontWeight: 700, + }), + cardNickname: css({ + fontSize: "1.2rem", + }), +}; diff --git a/src/components/TteokgukCookingPage/Ingredient.tsx b/src/components/TteokgukCookingPage/Ingredient.tsx index 7028cd6b..efda464e 100644 --- a/src/components/TteokgukCookingPage/Ingredient.tsx +++ b/src/components/TteokgukCookingPage/Ingredient.tsx @@ -24,7 +24,7 @@ const Ingredient = ({ isDisabled, handleClickIngredient, }: Props) => { - const isInfiniteQuantity = stockQuantity === MAX_INGREDIENT_QUANTITY; + const isInfiniteQuantity = stockQuantity >= MAX_INGREDIENT_QUANTITY; const remainQuantity = isSelected ? stockQuantity - 1 : stockQuantity; const quantity = isInfiniteQuantity ? INFINITY : remainQuantity; diff --git a/src/components/common/BottomCTA.tsx b/src/components/common/BottomCTA.tsx index 85628180..7bf3bd7d 100644 --- a/src/components/common/BottomCTA.tsx +++ b/src/components/common/BottomCTA.tsx @@ -24,7 +24,7 @@ const styles = { bottom: 0, left: 0, width: "100%", - padding: "1rem 0 4rem 0", + padding: "1rem 0 9.1rem 0", transform: isVisible ? "translateY(0%)" : "translateY(100%)", transition: "transform 0.4s", zIndex: 100, diff --git a/src/components/common/ReceivedIngredientsList.tsx b/src/components/common/ReceivedIngredientsList.tsx index d8b7f5ac..709843a3 100644 --- a/src/components/common/ReceivedIngredientsList.tsx +++ b/src/components/common/ReceivedIngredientsList.tsx @@ -36,7 +36,7 @@ const ReceivedIngredientsList = ({ receivedIngredientList }: Props) => {
@{access ? nickname : ANONIMOUS_NICKNAME}
-
응원의 {INGREDIENT_NAME_BY_KEY[ingredient]}이 도착했어요!
+
응원의 {INGREDIENT_NAME_BY_KEY[ingredient]}(이/가) 도착했어요!
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 0a977ddc..33e66366 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -133,7 +133,6 @@ const styles = { position: "fixed", left: "50%", transform: "translateX(-50%)", - bottom: "3rem", width: "calc(100% - 4.8rem)", maxWidth: "45.2rem", }), diff --git a/src/pages/MyActivityPage.tsx b/src/pages/MyActivityPage.tsx index a034a0c3..a65815c2 100644 --- a/src/pages/MyActivityPage.tsx +++ b/src/pages/MyActivityPage.tsx @@ -10,27 +10,40 @@ import { css } from "@styled-system/css"; import Header from "@/components/common/Header"; import ReceivedIngredientsList from "@/components/common/ReceivedIngredientsList"; -import TteokgukWithCaptionList from "@/components/common/TteokgukWithCaptionList"; -import { $receivedIngredients } from "@/store/myActivity"; +import { $mySupportedTteokguks, $receivedIngredients } from "@/store/myActivity"; +import Loading from "@/components/common/Loading"; +import MySupportedTteokgukCardList from "@/components/MyActivity/MySupportedTteokgukCardList"; const MyActivityPage = () => { const [tabIndex, setTabIndex] = useState(0); const isSelectedTab = (index: number) => index === tabIndex; - + const { + mySupportedTteokguks, + isPending: isMySupportedTteokguksPending, + handleSupportedTtoekguksIntersect, + } = useAtomValue($mySupportedTteokguks); const fetchMoreRef = useRef(null); - const { receivedIngredientList, handleReceivedIngredeintIntersect } = - useAtomValue($receivedIngredients); + const { + receivedIngredientList, + handleReceivedIngredeintIntersect, + isPending: isReceivedTteokgukPending, + } = useAtomValue($receivedIngredients); useIntersectionObserver({ target: fetchMoreRef, - handleIntersect: () => handleReceivedIngredeintIntersect({ enabled: isSelectedTab(0) }), + handleIntersect: + tabIndex === 0 + ? () => handleReceivedIngredeintIntersect({ enabled: isSelectedTab(0) }) + : () => handleSupportedTtoekguksIntersect({ enabled: isSelectedTab(1) }), }); + console.log(mySupportedTteokguks); return (
활동 내역
+ {(isReceivedTteokgukPending || isMySupportedTteokguksPending) && } setTabIndex(index)}> @@ -40,11 +53,15 @@ const MyActivityPage = () => { 내가 응원한 떡국 - - + + {receivedIngredientList && ( + + )} - - + + {mySupportedTteokguks && ( + + )}
@@ -70,12 +87,6 @@ const styles = { marginBottom: "2rem", cursor: "pointer", }), - tabPanel: css({ - display: "flex", - flexFlow: "column wrap", - paddingX: "1.8rem", - width: "100%", - }), selectedTab: css({ position: "relative", outline: "none", @@ -90,6 +101,18 @@ const styles = { backgroundColor: "primary.100", }, }), + receivedTab: css({ + display: "flex", + flexFlow: "column wrap", + paddingX: "1.8rem", + width: "100%", + }), + mySupportedTab: css({ + display: "flex", + flexFlow: "column wrap", + alignItems: "center", + paddingLeft: "1.6rem", + }), tteokgukList: css({ display: "flex", flexFlow: "row wrap", diff --git a/src/pages/TteokgukPage.tsx b/src/pages/TteokgukPage.tsx index 5fe8beb1..5a501970 100644 --- a/src/pages/TteokgukPage.tsx +++ b/src/pages/TteokgukPage.tsx @@ -240,7 +240,7 @@ const styles = { height: "17.6rem", }), content: css({ - height: "7.1rem", + minHeight: "7.1rem", fontSize: "1.4rem", backgroundColor: "primary.100", padding: "1rem 1.6rem", diff --git a/src/store/myActivity.ts b/src/store/myActivity.ts index c46946c7..f20249f4 100644 --- a/src/store/myActivity.ts +++ b/src/store/myActivity.ts @@ -1,9 +1,9 @@ -import { atomWithSuspenseInfiniteQuery } from "jotai-tanstack-query"; +import { atomWithInfiniteQuery } from "jotai-tanstack-query"; import { atom } from "jotai"; -import { getReceivedIngredients } from "@/apis/myActivity"; +import { getReceivedIngredients, getMySupportedTteokguks } from "@/apis/myActivity"; -const $getReceivedIngredients = atomWithSuspenseInfiniteQuery(() => ({ +const $getReceivedIngredients = atomWithInfiniteQuery(() => ({ queryKey: ["receivedIngredients"], queryFn: async ({ pageParam }) => getReceivedIngredients(pageParam), getNextPageParam: (lastPage, _allPages, lastPageParam) => { @@ -15,13 +15,9 @@ const $getReceivedIngredients = atomWithSuspenseInfiniteQuery(() => ({ })); export const $receivedIngredients = atom(async (get) => { - const { - data: { pages }, - fetchNextPage, - hasNextPage, - isFetchingNextPage, - ...rest - } = await get($getReceivedIngredients); + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, ...rest } = await get( + $getReceivedIngredients, + ); const handleReceivedIngredeintIntersect = ({ enabled }: { enabled: boolean }) => { if (hasNextPage && !isFetchingNextPage && enabled) { @@ -30,7 +26,9 @@ export const $receivedIngredients = atom(async (get) => { }; return { - receivedIngredientList: pages.flatMap(({ data: receivedIngredients }) => receivedIngredients), + receivedIngredientList: data?.pages.flatMap( + ({ data: receivedIngredients }) => receivedIngredients, + ), fetchNextPage, hasNextPage, isFetchingNextPage, @@ -38,3 +36,33 @@ export const $receivedIngredients = atom(async (get) => { ...rest, }; }); + +const $getMySupportedTteokguks = atomWithInfiniteQuery(() => ({ + queryKey: ["supportedTteokguks"], + queryFn: async ({ pageParam }) => getMySupportedTteokguks(pageParam), + getNextPageParam: (lastPage, _allPages, lastPageParam) => { + if (!lastPage.data.length) return; + + return lastPageParam + 1; + }, + initialPageParam: 1, +})); + +export const $mySupportedTteokguks = atom((get) => { + const { data, hasNextPage, isFetchingNextPage, fetchNextPage, ...rest } = + get($getMySupportedTteokguks); + + const handleSupportedTtoekguksIntersect = ({ enabled }: { enabled: boolean }) => { + if (hasNextPage && !isFetchingNextPage && enabled) { + fetchNextPage(); + } + }; + + return { + mySupportedTteokguks: data?.pages.flatMap( + ({ data: mySupportedTteokguks }) => mySupportedTteokguks, + ), + handleSupportedTtoekguksIntersect, + ...rest, + }; +}); diff --git a/src/types/myActivity.dto.ts b/src/types/myActivity.dto.ts index eb797c7e..dd60497d 100644 --- a/src/types/myActivity.dto.ts +++ b/src/types/myActivity.dto.ts @@ -1,4 +1,4 @@ -import { ReceivedIngredient } from "./myActivity"; +import { MySupportedTteokguk, ReceivedIngredient } from "./myActivity"; export interface GetReceivedIngredientsResponse { data: ReceivedIngredient[]; @@ -7,3 +7,11 @@ export interface GetReceivedIngredientsResponse { size: number; }; } + +export interface GetMySupportedTteokguksRespose { + data: MySupportedTteokguk[]; + pageInfo: { + page: number; + size: number; + }; +} diff --git a/src/types/myActivity.ts b/src/types/myActivity.ts index 3b2ac579..3150d43e 100644 --- a/src/types/myActivity.ts +++ b/src/types/myActivity.ts @@ -8,3 +8,13 @@ export interface ReceivedIngredient { message: string; access: boolean; } + +export interface MySupportedTteokguk { + tteokgukId: number; + receiverNickname: string; + ingredients: IngredientKey[]; + completion: boolean; + frontGarnish: IngredientKey; + backGarnish: IngredientKey; + backgroundColor: "BLUE" | "GREEN" | "PINK" | "YELLOW"; +}