feat: add tip contents in loading

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;
 }

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<typeof UploadLoadingPage> = {
-  component: UploadLoadingPage,
+const meta: Meta<typeof UploadLoadingPageView> = {
+  component: UploadLoadingPageView,
 };
 
 export default meta;
-type Story = StoryObj<typeof UploadLoadingPage>;
+type Story = StoryObj<typeof UploadLoadingPageView>;
 
 export const Default: Story = {
-  args: {},
-  decorators: [
-    (fn) => <MyProfileProvider initialState={fullProfileMock}>{fn()}</MyProfileProvider>,
-    (fn) => <IdealPartnerProvider initialState={MockIdealPartner}>{fn()}</IdealPartnerProvider>,
-  ],
+  args: {
+    name: '예진',
+    progress: 0.33,
+  },
 };

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 (
     <div className={styles.Wrapper}>
       {!error ? (
-        <>
-          <div className={styles.TitleSection}>
-            <h2>{name}님의 정보를 업로드하고 있습니다.</h2>
-            <p>
-              업로드 중에 나가면 정보가 사라져요!
-              <br />
-              잠시만 기다려주세요.
-            </p>
-          </div>
-          <div className={styles.ImageSection}>
-            <img src={'/images/loading.gif'} alt={'타자를 치는 구구'} />
-            <p>{(progress * 100).toFixed(0)}%</p>
-          </div>
-          <InfoBox radiusSize="S">
-            <h3>막간 소개팅 꿀팁</h3>
-            <p>꿀팁 들어갈 장소</p>
-          </InfoBox>
-        </>
+        <UploadLoadingPageView name={name} progress={progress} />
       ) : (
         <>
           <div className={styles.TitleSection}>

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 (
+    <>
+      <div className={styles.TitleSection}>
+        <h2>{name}님의 정보를 업로드하고 있습니다.</h2>
+        <p>
+          업로드 중에 나가면 정보가 사라져요!
+          <br />
+          잠시만 기다려주세요.
+        </p>
+      </div>
+      <div className={styles.ImageSection}>
+        <img src={'/images/loading.gif'} alt={'타자를 치는 구구'} />
+        <p>{(progress * 100).toFixed(0)}%</p>
+      </div>
+      <InfoBox radiusSize="S">
+        <h3 className={styles.InfoBoxTitle}>💡성공적인 만남을 위한 Tip💡</h3>
+        <p className={styles.InfoBoxContents}>{TipContents[tipContentIdx]}</p>
+      </InfoBox>
+    </>
+  );
+};

src/pages/form/complete/_constants/tipContents.ts

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