기업과 나의 경험을 분석하고 있어요
평균 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";