Skip to content

[Feat] 디자인 QA 반영 #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hummingbbird merged 2 commits into from
Jan 23, 2026
Merged

[Feat] 디자인 QA 반영 #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71e7d37
design: 스피너 이미지 수정 (#149)
hummingbbird Jan 23, 2026
7f85b8f
design: 디자인 QA 반영 (#149)
hummingbbird Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/features/experience-matching/ui/analyzing/analyzing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -40,12 +40,12 @@
},
}
);
}, [nextStep, setReportId, mutate]);

Check warning on line 43 in src/features/experience-matching/ui/analyzing/analyzing.tsx

View workflow job for this annotation

GitHub Actions / build-and-deploy 

React Hook useEffect has missing dependencies: 'company?.id', 'experience?.id', and 'jobDescription'. Either include them or remove the dependency array

return (
<>
<div className={styles.layout}>
<img className={styles.spinner} src={LOVE} alt="로딩 스피너" />
<img className={styles.spinner} src={CAT_SPINNER} alt="로딩 스피너" />
<div className={styles.titleBox}>
<div className={styles.title}>기업과 나의 경험을 분석하고 있어요</div>
<div className={styles.subTitle}>평균 15~30초 소요됩니다</div>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/experience-detail/experience-detail-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ const ExperienceDetailPage = ({ mode }: ExperiencePageProps) => {
<ExperienceAlertRenderer />
<ModalBasic
isOpen={isOpen}
onClose={confirmLeave}
onConfirm={cancelLeave}
onClose={cancelLeave}
onConfirm={confirmLeave}
title={`작성중인 내용이 있습니다.\n정말 나가시겠습니까?`}
subTitle="저장하지 않으면 내용이 사라져요."
closeText="나가기"
confirmText="이어서 작성하기"
closeText="이어서 작성"
confirmText="나가기"
/>
</>
);
Expand Down
24 changes: 21 additions & 3 deletions src/pages/home/major-company-section/major-company-section.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
6 changes: 5 additions & 1 deletion src/pages/home/major-company-section/major-company-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -40,7 +41,10 @@ const MajorCompanySection = () => {

<div className={styles.cardGrid}>
{isLoading || safeData.length < 3 ? (
<div className={styles.emptyWrapper}>로딩 중...</div>
<div className={styles.emptyWrapper}>
<img src={CAT_SPINNER} className={styles.spinner} alt="로딩중" />
<p className={styles.spinnerText}>기업 정보를 불러오고 있어요</p>
</div>
) : (
<>
<div className={styles.smallCards}>
Expand Down
5 changes: 4 additions & 1 deletion src/pages/login/login-page.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Comment on lines +14 to +21
Copy link

@coderabbitai coderabbitai bot Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

하드코딩된 border 색상은 디자인 토큰으로 교체 필요
Line 20의 "1px solid red"는 테마 토큰 규칙과 충돌합니다. 디버그 목적이 아니라면 제거하거나 themeVars 기반 색상으로 교체해주세요.

🛠️ 예시 수정 
-  border: "1px solid red",

코딩 가이드라인에 따라.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
paddingTop: `calc(${themeVars.height.header})`,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "8rem",
border: "1px solid red",
height: "100vh",
paddingTop: `calc(${themeVars.height.header})`,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "8rem",
height: "100vh",
🤖 Prompt for AI Agents 
In `@src/pages/login/login-page.css.ts` around lines 14 - 21, 현재 CSS 객체에서 하드코딩된
border 값 "1px solid red"를 제거하거나 디자인 토큰으로 교체하세요: locate the style block that uses
themeVars (the object containing paddingTop, display, etc.) and replace the
literal with an appropriate theme token such as themeVars.color.border (or
themeVars.palette.error if it was intended as a debug/error indicator) or remove
the border entirely if not needed; ensure you reference the same style object
where paddingTop: `calc(${themeVars.height.header})` is defined so the change
follows the project's theme token conventions.

});

export const section = style({
Expand Down
Binary file added src/shared/assets/gifs/cat_walk.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/shared/assets/gifs/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Loading