feat: 진단 결과 생성 로딩 화면 UI 개발

app/layout.tsx

@@ -8,8 +8,6 @@ import { HomeLandingRender } from "@/src/shared/ui/globalRender/globalRender";
 import { FrameBottomNav } from "@/src/shared/ui/bottomNavigation/frameBottomNavigation";
 import { ClientOnly } from "@/src/shared/ui/clientOnly/clientOnly";
 
-
-
 export const metadata: Metadata = {
   title: "pinhouse",
   description: "pinhosue-fe",
@@ -43,9 +41,7 @@ export default function RootLayout({
                   </ClientOnly>
                 }
               >
-                <ClientOnly>
-                  <div>{children}</div>
-                </ClientOnly>
+                <ClientOnly>{children}</ClientOnly>
               </HomeLandingRender>
             </div>
           </div>

app/test/page.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-export default function DefaultTest() {
+import EligibilityLoadingState from "@/src/features/eligibility/ui/common/eligibilityLoadingState";
 
+export default function DefaultTest() {
   return (
-    <div className="flex flex-col gap-4 px-4 py-10">
-    </div>
+    <main className="flex h-full flex-col">
+      <EligibilityLoadingState />
+    </main>
   );
 }

src/assets/images/eligibility/eligibilityLoadingImg.tsx

@@ -0,0 +1,145 @@
+import { SVGProps } from "react";
+
+export const EligibilityLoadingImg = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="220"
+      height="220"
+      viewBox="0 0 220 220"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_10635_91516)">
+        <path
+          d="M103.556 186.826L113.811 161.876L94.7695 159.538L98.6837 186.227C99.0608 188.793 102.568 189.223 103.554 186.826L103.556 186.826Z"
+          fill="url(#paint0_linear_10635_91516)"
+        />
+        <path
+          d="M157.725 108.613C160.06 102.941 166.892 100.604 172.468 103.172C178.043 105.739 180.483 112.337 177.914 117.907C175.345 123.477 168.743 125.914 163.168 123.346C157.593 120.778 155.071 115.066 157.725 108.613Z"
+          fill="url(#paint1_linear_10635_91516)"
+        />
+        <path
+          d="M41.5807 129.185C43.915 123.512 50.7479 121.176 56.3232 123.743C61.8985 126.311 64.338 132.908 61.7694 138.479C59.2007 144.049 52.5989 146.485 47.0237 143.918C41.4484 141.35 38.9263 135.637 41.5807 129.185Z"
+          fill="url(#paint2_linear_10635_91516)"
+        />
+        <path
+          d="M158.332 59.427L76.3588 49.362C70.4731 48.6394 65.5188 53.7497 66.4037 59.633L74.9928 116.768C75.516 120.246 75.0567 123.802 73.6697 127.034L63.4909 150.726C62.1924 153.749 64.2191 157.162 67.5544 157.572L140.696 166.552C144.031 166.962 146.824 164.14 146.295 160.893L142.15 135.442C141.585 131.97 142.001 128.409 143.35 125.161L165.506 71.8012C167.788 66.3068 164.217 60.1497 158.332 59.427Z"
+          fill="url(#paint3_linear_10635_91516)"
+        />
+        <path
+          d="M112.996 90.3521C115.252 90.6291 117.306 89.0247 117.583 86.7685C117.86 84.5124 116.255 82.4588 113.999 82.1818C111.743 81.9047 109.689 83.5092 109.412 85.7654C109.135 88.0215 110.74 90.0751 112.996 90.3521Z"
+          fill="url(#paint4_linear_10635_91516)"
+        />
+        <path
+          d="M126.871 85.421C129.127 85.698 131.181 84.0936 131.458 81.8374C131.735 79.5812 130.13 77.5276 127.874 77.2506C125.618 76.9736 123.564 78.578 123.287 80.8342C123.01 83.0904 124.615 85.1439 126.871 85.421Z"
+          fill="#2E293D"
+        />
+        <path
+          d="M99.9101 82.1104C102.166 82.3874 104.22 80.783 104.497 78.5268C104.774 76.2707 103.169 74.2171 100.913 73.9401C98.6571 73.663 96.6036 75.2675 96.3265 77.5236C96.0495 79.7798 97.6539 81.8334 99.9101 82.1104Z"
+          fill="#2E293D"
+        />
+        <path
+          d="M120.608 94.1323C121.671 92.949 123.493 92.8517 124.676 93.915C125.86 94.9786 125.957 96.8004 124.893 97.984C121.616 101.631 116.585 103.642 111.281 102.991C105.978 102.34 101.581 99.1728 99.2836 94.8387C98.5383 93.4329 99.0736 91.6894 100.479 90.944C101.885 90.1988 103.629 90.734 104.374 92.1398C105.796 94.8225 108.562 96.8518 111.983 97.2719C115.404 97.6918 118.579 96.3905 120.608 94.1323Z"
+          fill="#2E293D"
+        />
+      </g>
+      <path
+        d="M181.46 21.1791C181.902 22.1345 182.648 22.8923 183.632 23.3206L187.739 25.0997C188.961 25.6598 188.961 27.3401 187.739 27.9002L183.666 29.6794C182.682 30.1077 181.902 30.8655 181.494 31.8209L178.27 39.1351C177.693 40.2883 175.962 40.2883 175.385 39.1351L172.161 31.8209C171.72 30.8655 170.973 30.1077 169.989 29.6794L165.916 27.9002C164.695 27.3401 164.695 25.6598 165.916 25.0997L169.989 23.3206C170.973 22.8923 171.754 22.1345 172.161 21.1791L175.385 13.8649C175.962 12.7117 177.693 12.7117 178.27 13.8649L181.46 21.1791Z"
+        fill="#FFD95B"
+      />
+      <path
+        d="M191.868 166.755C191.181 166.424 190.638 165.872 190.312 165.137L187.997 159.662C187.563 158.779 186.332 158.779 185.934 159.662L183.619 165.137C183.329 165.836 182.751 166.424 182.063 166.755L179.169 168.078C178.3 168.519 178.3 169.768 179.169 170.172L182.063 171.495C182.751 171.826 183.293 172.378 183.619 173.113L185.934 178.588C186.369 179.471 187.599 179.471 187.997 178.588L190.312 173.113C190.602 172.414 191.181 171.826 191.868 171.495L194.763 170.172C195.631 169.731 195.631 168.482 194.763 168.078L191.868 166.755Z"
+        fill="#FFE993"
+      />
+      <path
+        d="M171.759 182.625C171.759 184.489 170.246 186 168.379 186C166.513 186 165 184.489 165 182.625C165 180.761 166.513 179.25 168.379 179.25C170.246 179.25 171.759 180.761 171.759 182.625Z"
+        fill="#FFE993"
+      />
+      <path
+        d="M195.759 59.375C195.759 61.2389 194.246 62.75 192.379 62.75C190.513 62.75 189 61.2389 189 59.375C189 57.511 190.513 56 192.379 56C194.246 56 195.759 57.511 195.759 59.375Z"
+        fill="#FFF2BE"
+      />
+      <path
+        d="M38.3187 39.0965C37.6154 38.8008 37.0879 38.2751 36.7714 37.618L34.4857 32.5914C34.0637 31.8029 32.833 31.8029 32.411 32.5914L30.1253 37.618C29.844 38.2751 29.2813 38.8008 28.578 39.0965L25.6593 40.3121C24.7802 40.7063 24.7802 41.8562 25.6593 42.2504L28.578 43.4661C29.2813 43.7617 29.8088 44.2874 30.1253 44.9445L32.411 49.9711C32.833 50.7596 34.0637 50.7596 34.4857 49.9711L36.7714 44.9445C37.0527 44.2874 37.6154 43.7617 38.3187 43.4661L41.2373 42.2504C42.1164 41.8562 42.1164 40.7063 41.2373 40.3121L38.3187 39.0965Z"
+        fill="#FFD95B"
+      />
+      <path
+        d="M27.3793 69.75C29.2457 69.75 30.7587 68.239 30.7587 66.375C30.7587 64.511 29.2457 63 27.3793 63C25.513 63 24 64.511 24 66.375C24 68.239 25.513 69.75 27.3793 69.75Z"
+        fill="#FFE993"
+      />
+      <path
+        d="M55.3794 26.75C57.2457 26.75 58.7587 25.239 58.7587 23.375C58.7587 21.511 57.2457 20 55.3794 20C53.513 20 52 21.511 52 23.375C52 25.239 53.513 26.75 55.3794 26.75Z"
+        fill="#FFF2BE"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_10635_91516"
+          x1="104.29"
+          y1="160.707"
+          x2="100.891"
+          y2="188.388"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFBA18" />
+          <stop offset="1" stopColor="#FFE17F" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_10635_91516"
+          x1="169.178"
+          y1="102.226"
+          x2="166.47"
+          y2="124.286"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFBA18" />
+          <stop offset="1" stopColor="#FFE17F" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_10635_91516"
+          x1="53.0339"
+          y1="122.798"
+          x2="50.3253"
+          y2="144.858"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFBA18" />
+          <stop offset="1" stopColor="#FFE17F" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_10635_91516"
+          x1="117.345"
+          y1="54.3945"
+          x2="104.125"
+          y2="162.062"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#618EFF" />
+          <stop offset="0.0569536" stopColor="#306FFF" />
+          <stop offset="0.629808" stopColor="#6E97FF" />
+          <stop offset="1" stopColor="#ACC0FF" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_10635_91516"
+          x1="113.999"
+          y1="82.1818"
+          x2="112.996"
+          y2="90.3521"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFDA6B" />
+          <stop offset="1" stopColor="#FFF4D7" />
+        </linearGradient>
+        <clipPath id="clip0_10635_91516">
+          <rect
+            width="135"
+            height="135"
+            fill="white"
+            transform="translate(51.2305 46.2769) rotate(7)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default EligibilityLoadingImg;

src/features/eligibility/model/eligibilityConstants.ts

@@ -0,0 +1,4 @@
+/** 자격 진단 로딩 화면 문구 */
+export const ELIGIBILITY_LOADING_TITLE = "맞춤 보고서를 작성 중이에요!";
+export const ELIGIBILITY_LOADING_SUBTITLE_LINE1 = "모두의 꿈인 내 집 마련";
+export const ELIGIBILITY_LOADING_SUBTITLE_LINE2 = "나에게 맞는 추천 집은?";

src/features/eligibility/model/index.ts

@@ -1,2 +1,7 @@
 export { eligibilityContentMap, ELIGIBILITY_STEPS } from "./eligibilityContentMap";
+export {
+  ELIGIBILITY_LOADING_SUBTITLE_LINE1,
+  ELIGIBILITY_LOADING_SUBTITLE_LINE2,
+  ELIGIBILITY_LOADING_TITLE,
+} from "./eligibilityConstants";
 export type { EligibilityStepContent } from "./eligibilityContentMap";

src/features/eligibility/ui/common/eligibilityLoadingState.tsx

@@ -0,0 +1,28 @@
+import EligibilityLoadingImg from "@/src/assets/images/eligibility/eligibilityLoadingImg";
+import {
+  ELIGIBILITY_LOADING_SUBTITLE_LINE1,
+  ELIGIBILITY_LOADING_SUBTITLE_LINE2,
+  ELIGIBILITY_LOADING_TITLE,
+} from "@/src/features/eligibility/model/eligibilityConstants";
+
+const EligibilityLoadingState = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-5">
+        <EligibilityLoadingImg />
+        <div className="flex flex-col items-center gap-2.5 text-center">
+          <h2 className="text-xl font-bold leading-[140%] tracking-[-0.02em] text-greyscale-grey-900">
+            {ELIGIBILITY_LOADING_TITLE}
+          </h2>
+          <p className="text-xs-12 font-medium leading-[140%] text-greyscale-grey-500">
+            {ELIGIBILITY_LOADING_SUBTITLE_LINE1}
+            <br />
+            {ELIGIBILITY_LOADING_SUBTITLE_LINE2}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EligibilityLoadingState;