diff --git a/apps/bottle/src/app/bottles/Bottles.tsx b/apps/bottle/src/app/bottles/Bottles.tsx index 2df2971..05d1056 100644 --- a/apps/bottle/src/app/bottles/Bottles.tsx +++ b/apps/bottle/src/app/bottles/Bottles.tsx @@ -1,6 +1,6 @@ 'use client'; -import NO_BOTTLE_IMAGE from '@/assets/no-bottle.webp'; +import NO_BOTTLE_IMAGE from '@/assets/images/no-bottle.webp'; import { Control } from '@/components/common/control'; import { Header } from '@/components/common/header'; import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge'; diff --git a/apps/bottle/src/app/bottles/recommendations/Recommendations.tsx b/apps/bottle/src/app/bottles/recommendations/Recommendations.tsx index a26f377..f3bbd79 100644 --- a/apps/bottle/src/app/bottles/recommendations/Recommendations.tsx +++ b/apps/bottle/src/app/bottles/recommendations/Recommendations.tsx @@ -1,6 +1,8 @@ 'use client'; +import TelescopeImage from '@/assets/images/telescope.webp'; import { BottleCard } from '@/components/common/bottle-card'; +import { Fallback } from '@/components/common/fallback'; import { ProfileLayout } from '@/components/profile/layout'; import { useRecommendationBottlesQuery } from '@/store/query/useRecommendationBottlesQuery'; import { useUserInfoQuery } from '@/store/query/useUserInfoQuery'; @@ -9,25 +11,37 @@ import { pick } from 'es-toolkit'; export function Recommendations() { const { data: currentUser } = useUserInfoQuery(); - const { data: recommendationBottles } = useRecommendationBottlesQuery(); + const { + data: { randomBottles }, + } = useRecommendationBottlesQuery(); return ( <> - {`${currentUser.name}님에게\n추천하는 분들이에요!`} - - 시간이 지나면 새로운 분들을 추천해 드려요 - -
- {recommendationBottles.randomBottles.map(bottle => ( - - {bottle.expiredAt} - {bottle.introduction[0]?.answer} - - - ))} -
+ {randomBottles.length > 0 ? ( + <> + {`${currentUser.name}님에게\n추천하는 분들이에요!`} + + 시간이 지나면 새로운 분들을 추천해 드려요 + +
+ {randomBottles.map(bottle => ( + + {bottle.expiredAt} + {bottle.introduction[0]?.answer} + + + ))} +
+ + ) : ( + + + 꼭 맞는 상대를 찾는 중이에요 + {`보틀은 ${currentUser.name}님과 케미가 통하는\n상대를 엄선해 추천드리고 있어요`} + + )} ); } diff --git a/apps/bottle/src/app/bottles/sents/HeaderArea.tsx b/apps/bottle/src/app/bottles/sents/HeaderArea.tsx deleted file mode 100644 index eec5e62..0000000 --- a/apps/bottle/src/app/bottles/sents/HeaderArea.tsx +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; - -import { Header } from '@/components/common/header'; -import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge'; - -export function HeaderArea() { - const { send } = useAppBridge(); - - return ( -
{ - send({ type: AppBridgeMessageType.WEB_VIEW_CLOSE }); - }} - /> - ); -} diff --git a/apps/bottle/src/app/bottles/sents/Sents.tsx b/apps/bottle/src/app/bottles/sents/Sents.tsx index 04e7d43..681a2b3 100644 --- a/apps/bottle/src/app/bottles/sents/Sents.tsx +++ b/apps/bottle/src/app/bottles/sents/Sents.tsx @@ -1,6 +1,8 @@ 'use client'; +import CoconutImage from '@/assets/images/coconut.webp'; import { BottleCard } from '@/components/common/bottle-card'; +import { Fallback } from '@/components/common/fallback'; import { ProfileLayout } from '@/components/profile/layout'; import { useSentBottlesQuery } from '@/store/query/useSentBottlesQuery'; import { useUserInfoQuery } from '@/store/query/useUserInfoQuery'; @@ -9,27 +11,37 @@ import { pick } from 'es-toolkit'; export function Sents() { const { data: currentUser } = useUserInfoQuery(); - const { data: sentBottlesData } = useSentBottlesQuery(); - - console.log('DATA', sentBottlesData.sentBottles); + const { + data: { sentBottles }, + } = useSentBottlesQuery(); return ( <> - {`${currentUser.name}님을 마음에\n들어한 분들이에요`} - - 시간 내에 보틀을 열지 않으면 사라져요 - -
- {sentBottlesData.sentBottles.map(bottle => ( - - {bottle.expiredAt} - {bottle.introduction[0]?.answer} - - - ))} -
+ {sentBottles.length > 0 ? ( + <> + {`${currentUser.name}님을 마음에\n들어한 분들이에요`} + + 시간 내에 보틀을 열지 않으면 사라져요 + +
+ {sentBottles.map(bottle => ( + + {bottle.expiredAt} + {bottle.introduction[0]?.answer} + + + ))} +
+ + ) : ( + + + 조금만 기다려 볼까요? + 나를 마음에 들어할 상대는 누굴까요 👀 + + )} ); } diff --git a/apps/bottle/src/app/bottles/sents/page.tsx b/apps/bottle/src/app/bottles/sents/page.tsx index 7241abb..41db611 100644 --- a/apps/bottle/src/app/bottles/sents/page.tsx +++ b/apps/bottle/src/app/bottles/sents/page.tsx @@ -1,10 +1,10 @@ +import { Header } from '@/components/common/header'; import { ProfileLayout } from '@/components/profile/layout'; import { getServerSideTokens } from '@/features/server/serverSideTokens'; import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; import { sentBottlesQueryOptions } from '@/store/query/useSentBottlesQuery'; import { userInfoQueryOptions } from '@/store/query/useUserInfoQuery'; import { Suspense } from 'react'; -import { HeaderArea } from './HeaderArea'; import { Sents } from './Sents'; export default function SentBottlesPage() { @@ -13,7 +13,7 @@ export default function SentBottlesPage() { return ( - +
diff --git a/apps/bottle/src/app/error.tsx b/apps/bottle/src/app/error.tsx index 0f12e77..9a6f3b5 100644 --- a/apps/bottle/src/app/error.tsx +++ b/apps/bottle/src/app/error.tsx @@ -1,6 +1,6 @@ 'use client'; -import BasketImage from '@/assets/basket.webp'; +import BasketImage from '@/assets/images/basket.webp'; import { Header } from '@/components/common/header'; import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge'; import { Asset, Button, Paragraph, spacings } from '@bottlesteam/ui'; diff --git a/apps/bottle/src/app/not-found.tsx b/apps/bottle/src/app/not-found.tsx index aa2e934..4029a6e 100644 --- a/apps/bottle/src/app/not-found.tsx +++ b/apps/bottle/src/app/not-found.tsx @@ -1,6 +1,6 @@ 'use client'; -import BasketImage from '@/assets/basket.webp'; +import BasketImage from '@/assets/images/basket.webp'; import { Header } from '@/components/common/header'; import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge'; import { Asset, Button, Paragraph, spacings } from '@bottlesteam/ui'; diff --git a/apps/bottle/src/assets/basket.webp b/apps/bottle/src/assets/images/basket.webp similarity index 100% rename from apps/bottle/src/assets/basket.webp rename to apps/bottle/src/assets/images/basket.webp diff --git a/apps/bottle/src/assets/images/coconut.webp b/apps/bottle/src/assets/images/coconut.webp new file mode 100644 index 0000000..5106261 Binary files /dev/null and b/apps/bottle/src/assets/images/coconut.webp differ diff --git a/apps/bottle/src/assets/no-bottle.webp b/apps/bottle/src/assets/images/no-bottle.webp similarity index 100% rename from apps/bottle/src/assets/no-bottle.webp rename to apps/bottle/src/assets/images/no-bottle.webp diff --git a/apps/bottle/src/assets/images/telescope.webp b/apps/bottle/src/assets/images/telescope.webp new file mode 100644 index 0000000..2da8a0c Binary files /dev/null and b/apps/bottle/src/assets/images/telescope.webp differ diff --git a/apps/bottle/src/components/common/bottle-card/UserInformationArea.tsx b/apps/bottle/src/components/common/bottle-card/UserInformationArea.tsx index 0a5b09f..6ed9430 100644 --- a/apps/bottle/src/components/common/bottle-card/UserInformationArea.tsx +++ b/apps/bottle/src/components/common/bottle-card/UserInformationArea.tsx @@ -13,7 +13,6 @@ type Props = | Pick; export function UserInformationArea({ userName, userImageUrl, age, mbti, lastActivatedAt, ...rest }: Props) { - console.log('????', rest.likeEmoji, rest); return (
@@ -36,7 +35,7 @@ export function UserInformationArea({ userName, userImageUrl, age, mbti, lastAct
- {lastActivatedAt} + {lastActivatedAt} 접속
@@ -46,7 +45,6 @@ export function UserInformationArea({ userName, userImageUrl, age, mbti, lastAct {Object.hasOwn(rest, 'likeEmoji') && ( {(rest as any).likeEmoji as string} - {/* {'😘'} */} )}
diff --git a/apps/bottle/src/components/common/fallback/Image.tsx b/apps/bottle/src/components/common/fallback/Image.tsx new file mode 100644 index 0000000..a585ddc --- /dev/null +++ b/apps/bottle/src/components/common/fallback/Image.tsx @@ -0,0 +1,5 @@ +import NextImage, { ImageProps as NextImageProps } from 'next/image'; + +export function Image(props: Omit) { + return ; +} diff --git a/apps/bottle/src/components/common/fallback/Subtitle.tsx b/apps/bottle/src/components/common/fallback/Subtitle.tsx new file mode 100644 index 0000000..fe82bd3 --- /dev/null +++ b/apps/bottle/src/components/common/fallback/Subtitle.tsx @@ -0,0 +1,10 @@ +import { Paragraph, spacings } from '@bottlesteam/ui'; +import type { ReactNode } from 'react'; + +export function Subtitle({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/apps/bottle/src/components/common/fallback/Title.tsx b/apps/bottle/src/components/common/fallback/Title.tsx new file mode 100644 index 0000000..5df318c --- /dev/null +++ b/apps/bottle/src/components/common/fallback/Title.tsx @@ -0,0 +1,10 @@ +import { Paragraph, spacings } from '@bottlesteam/ui'; +import type { ReactNode } from 'react'; + +export function Title({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/apps/bottle/src/components/common/fallback/fallbackStyle.css.ts b/apps/bottle/src/components/common/fallback/fallbackStyle.css.ts new file mode 100644 index 0000000..819e204 --- /dev/null +++ b/apps/bottle/src/components/common/fallback/fallbackStyle.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; + +export const fallbackContainerStyle = style({ + width: '100%', + height: 'auto', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', +}); diff --git a/apps/bottle/src/components/common/fallback/index.tsx b/apps/bottle/src/components/common/fallback/index.tsx new file mode 100644 index 0000000..abac153 --- /dev/null +++ b/apps/bottle/src/components/common/fallback/index.tsx @@ -0,0 +1,24 @@ +import type { ReactNode } from 'react'; +import { Image } from './Image'; +import { Subtitle } from './Subtitle'; +import { Title } from './Title'; +import { fallbackContainerStyle } from './fallbackStyle.css'; + +interface FallbackProps { + marginTop?: number; + children: ReactNode; +} + +function FallbackContainer({ children, marginTop = 0 }: FallbackProps) { + return ( +
+ {children} +
+ ); +} + +export const Fallback = Object.assign(FallbackContainer, { + Image, + Title, + Subtitle, +}); diff --git a/apps/bottle/src/store/query/useRecommendationBottlesQuery.ts b/apps/bottle/src/store/query/useRecommendationBottlesQuery.ts index 3e79c9f..e90d8d8 100644 --- a/apps/bottle/src/store/query/useRecommendationBottlesQuery.ts +++ b/apps/bottle/src/store/query/useRecommendationBottlesQuery.ts @@ -13,6 +13,7 @@ export const recommendationBottlesQueryOptions = (tokens: Tokens): UseSuspenseQu queryKey: ['bottles', 'recommendation'], // NOTE: should ALWAYS be stale queryFn: () => GET(`/api/v2/bottles/random`, tokens, createInit(tokens.accessToken)), + staleTime: 0, }); export function useRecommendationBottlesQuery() {