diff --git a/src/features/experience-matching/ui/analyzing/analyzing.tsx b/src/features/experience-matching/ui/analyzing/analyzing.tsx index f5f5524a..6c32a332 100644 --- a/src/features/experience-matching/ui/analyzing/analyzing.tsx +++ b/src/features/experience-matching/ui/analyzing/analyzing.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -import { LOVE } from "@/shared/assets/gifs"; +import { CAT_SPINNER } from "@/shared/assets/gifs"; import { Alert } from "@/shared/ui/alert"; import { useCreateReport } from "@features/experience-matching/index"; @@ -45,7 +45,7 @@ export const Analyzing = ({ nextStep }: { nextStep: () => void }) => { return ( <>
- 로딩 스피너 + 로딩 스피너
기업과 나의 경험을 분석하고 있어요
평균 15~30초 소요됩니다
diff --git a/src/pages/experience-detail/experience-detail-page.tsx b/src/pages/experience-detail/experience-detail-page.tsx index 1b916480..a0f2769f 100644 --- a/src/pages/experience-detail/experience-detail-page.tsx +++ b/src/pages/experience-detail/experience-detail-page.tsx @@ -71,12 +71,12 @@ const ExperienceDetailPage = ({ mode }: ExperiencePageProps) => { ); diff --git a/src/pages/home/major-company-section/major-company-section.css.ts b/src/pages/home/major-company-section/major-company-section.css.ts index dd27f83a..4061ce97 100644 --- a/src/pages/home/major-company-section/major-company-section.css.ts +++ b/src/pages/home/major-company-section/major-company-section.css.ts @@ -52,9 +52,27 @@ export const smallCards = style({ }); export const emptyWrapper = style({ - display: "grid", - gridTemplateColumns: "1fr 1fr", - gap: "2rem", + // 1. 부모 그리드에서 가로를 꽉 채우기 (2컬럼 기준) + gridColumn: "1 / -1", + + // 2. 내부 이미지 중앙 정렬을 위해 flex 사용 + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", // 부모 그리드 수직 중앙 정렬 (필요시) + width: "100%", minHeight: "45rem", }); + +export const spinner = style({ + width: "20rem", + aspectRatio: "1 / 1", + objectFit: "contain", +}); + +export const spinnerText = style({ + marginTop: "0.2rem", + ...themeVars.fontStyles.hline_m_18, + color: themeVars.color.gray600, +}); diff --git a/src/pages/home/major-company-section/major-company-section.tsx b/src/pages/home/major-company-section/major-company-section.tsx index def55735..2f7cd44c 100644 --- a/src/pages/home/major-company-section/major-company-section.tsx +++ b/src/pages/home/major-company-section/major-company-section.tsx @@ -3,6 +3,7 @@ import { useState } from "react"; import { useAuthStore } from "@/app/store"; import { useGetMajorCompanies } from "@/features/home/api/use-get-major-companies.query"; import { MajorCompanyCard } from "@/features/home/ui"; +import { CAT_SPINNER } from "@/shared/assets/gifs"; import { RefreshButton } from "@/widgets"; import * as styles from "./major-company-section.css"; @@ -40,7 +41,10 @@ const MajorCompanySection = () => {
{isLoading || safeData.length < 3 ? ( -
로딩 중...
+
+ 로딩중 +

기업 정보를 불러오고 있어요

+
) : ( <>
diff --git a/src/pages/login/login-page.css.ts b/src/pages/login/login-page.css.ts index 5e479070..728bc806 100644 --- a/src/pages/login/login-page.css.ts +++ b/src/pages/login/login-page.css.ts @@ -11,11 +11,14 @@ const AppleFont = fontFace({ export const container = style({ margin: `0 auto`, - paddingTop: `calc(${themeVars.height.header} + 28.4rem)`, + paddingTop: `calc(${themeVars.height.header})`, display: "flex", flexDirection: "column", alignItems: "center", + justifyContent: "center", gap: "8rem", + border: "1px solid red", + height: "100vh", }); export const section = style({ diff --git a/src/shared/assets/gifs/cat_walk.gif b/src/shared/assets/gifs/cat_walk.gif new file mode 100644 index 00000000..455ac205 Binary files /dev/null and b/src/shared/assets/gifs/cat_walk.gif differ diff --git a/src/shared/assets/gifs/index.ts b/src/shared/assets/gifs/index.ts index da3a815a..f7bb2dc7 100644 --- a/src/shared/assets/gifs/index.ts +++ b/src/shared/assets/gifs/index.ts @@ -1,3 +1,4 @@ export { default as LOADING } from "./spinner.gif"; export { default as LOVE } from "./love.gif"; export { default as KEY_SPINNER } from "./key-spinner.gif"; +export { default as CAT_SPINNER } from "./cat_walk.gif";