diff --git a/src/pages/form/complete/UploadLoadingPage.module.css b/src/pages/form/complete/UploadLoadingPage.module.css index 7f1fd5d..a5dd6fc 100644 --- a/src/pages/form/complete/UploadLoadingPage.module.css +++ b/src/pages/form/complete/UploadLoadingPage.module.css @@ -30,4 +30,18 @@ font-weight: 500; font-size: 24px; } +} + +.InfoBoxTitle { + font-weight: 600; + font-size: 16px; + line-height: 16px; + margin-bottom: 8px; +} + +.InfoBoxContents { + font-weight: 500; + font-size: 14px; + line-height: 21px; + white-space: pre-line; } \ No newline at end of file diff --git a/src/pages/form/complete/UploadLoadingPage.stories.tsx b/src/pages/form/complete/UploadLoadingPage.stories.tsx index 49f1d3c..4b66512 100644 --- a/src/pages/form/complete/UploadLoadingPage.stories.tsx +++ b/src/pages/form/complete/UploadLoadingPage.stories.tsx @@ -1,21 +1,16 @@ import { Meta, StoryObj } from '@storybook/react'; -import { UploadLoadingPage } from 'src/pages/form/complete/UploadLoadingPage'; -import { MyProfileProvider } from 'src/entities/profile/model/myProfileStore'; -import { fullProfileMock } from 'src/entities/profile/api/__mock__/fullProfile.mock'; -import { IdealPartnerProvider } from 'src/entities/ideal_partner/model/idealPartnerStore'; -import { MockIdealPartner } from 'src/entities/ideal_partner/api/__mock__/idealPartner.mock'; +import { UploadLoadingPageView } from 'src/pages/form/complete/UploadLoadingPageView'; -const meta: Meta = { - component: UploadLoadingPage, +const meta: Meta = { + component: UploadLoadingPageView, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { - args: {}, - decorators: [ - (fn) => {fn()}, - (fn) => {fn()}, - ], + args: { + name: '예진', + progress: 0.33, + }, }; diff --git a/src/pages/form/complete/UploadLoadingPage.tsx b/src/pages/form/complete/UploadLoadingPage.tsx index 0ea2736..ff9ba0e 100644 --- a/src/pages/form/complete/UploadLoadingPage.tsx +++ b/src/pages/form/complete/UploadLoadingPage.tsx @@ -1,4 +1,3 @@ -import { InfoBox } from 'src/shared/ui/InfoBox/InfoBox'; import styles from './UploadLoadingPage.module.css'; import { useCallback, useEffect, useState } from 'react'; import { useActionData, useSubmit } from '@remix-run/react'; @@ -10,6 +9,7 @@ import { useIdealPartnerStore } from 'src/entities/ideal_partner/model/idealPart import { useMutation } from '@tanstack/react-query'; import { ImageDto, uploadImage } from 'src/types'; import { Button } from 'src/shared/ui/Button/Button'; +import { UploadLoadingPageView } from 'src/pages/form/complete/UploadLoadingPageView'; export const UploadLoadingPage = ({ name, @@ -90,24 +90,7 @@ export const UploadLoadingPage = ({ return (
{!error ? ( - <> -
-

{name}님의 정보를 업로드하고 있습니다.

-

- 업로드 중에 나가면 정보가 사라져요! -
- 잠시만 기다려주세요. -

-
-
- {'타자를 -

{(progress * 100).toFixed(0)}%

-
- -

막간 소개팅 꿀팁

-

꿀팁 들어갈 장소

-
- + ) : ( <>
diff --git a/src/pages/form/complete/UploadLoadingPageView.tsx b/src/pages/form/complete/UploadLoadingPageView.tsx new file mode 100644 index 0000000..8f76c60 --- /dev/null +++ b/src/pages/form/complete/UploadLoadingPageView.tsx @@ -0,0 +1,34 @@ +import styles from 'src/pages/form/complete/UploadLoadingPage.module.css'; +import { InfoBox } from 'src/shared/ui/InfoBox/InfoBox'; +import { TipContents } from 'src/pages/form/complete/_constants/tipContents'; +import { useEffect, useState } from 'react'; + +export const UploadLoadingPageView = ({ name, progress }: { name: string; progress: number }) => { + const [tipContentIdx, setTipContentIdx] = useState(0); + + useEffect(() => { + const interval = setInterval(() => setTipContentIdx((prev) => (prev + 1) % TipContents.length), 5000); + return () => clearInterval(interval); + }, []); + + return ( + <> +
+

{name}님의 정보를 업로드하고 있습니다.

+

+ 업로드 중에 나가면 정보가 사라져요! +
+ 잠시만 기다려주세요. +

+
+
+ {'타자를 +

{(progress * 100).toFixed(0)}%

+
+ +

💡성공적인 만남을 위한 Tip💡

+

{TipContents[tipContentIdx]}

+
+ + ); +}; diff --git a/src/pages/form/complete/_constants/tipContents.ts b/src/pages/form/complete/_constants/tipContents.ts new file mode 100644 index 0000000..8b60d9c --- /dev/null +++ b/src/pages/form/complete/_constants/tipContents.ts @@ -0,0 +1,8 @@ +export const TipContents = [ + '약속 시간에 딱 맞춰 도착하면 점수 UP!\n조금 일찍 도착해서 준비하는 건 어떨까요? ⏰', + '서로 좋아하는 것에 대해 이야기해보세요.\n공통의 관심사를 찾으면 더 할 나위 없이 좋겠죠? 🎨🎶', + '만났을 때 문을 열어주거나 핸드폰을 잠시 멀리해보세요.\n작은 배려가 상대방에게 좋은 인상을 남길 수 있어요😎', + '가장 이상적인 첫 만남 시간은 2시간 27분이라고 해요.\n다음 만남을 위해 아쉬움을 남겨두는 건 어떨까요?⌛', + '진심어린 반응을 하는 것만으로도 호감을 줄 수 있어요.\n아 진짜요?는 잠시 넣어두세요!🙊', + '너무 꾸미려 하지 말고, 평소처럼 행동하세요.\n자연스러운 모습이 가장 매력적인 법! 💁‍️💁‍♀️', +];