[FIX] 5차 QA 수정사항 반영

[choyeon2e]

ISSUE 🔗

close #357

What is this PR? 🔍

(root) css import 오류 수정

모든 css import문에 빨간줄로 가져오기 오류가 뜨던 문제를 해결했습니다.
homepage, recruit 두 app에 모두 발생하던 문제라서 homepage, recruit 내부 루트에 전역 타입 선언 파일인 global.d.ts 파일을 생성하고 그 안에 css, scss를 명시적으로 선언해두었어요!

(root) FormLink 컴포넌트 width 밖으로 텍스트가 넘어가는 문제 수정

5차 QA 프로젝트 페이지 확인 중 발견한 FormLink 컴포넌트의 텍스트가 컴포넌트 자체 width를 넘어가는 문제를 해결했습니다.
min-w-0을 추가해서 부모 컨테이너 내부에서만 텍스트가 표시되도록 수정했습니다.

프로젝트 추가/수정 페이지 datepicker portal 추가

프로젝트 추가/수정 페이지에서 사용되는 PeriodField 컴포넌트 내 datepicker에 datepicker-portal를 추가해서 기존에 HeroMainBanner 컴포넌트 하단으로 datepicker가 잘려보이는 문제를 수정했습니다.

기존에 z-index를 datepicker용으로 더 높게 설정해두어도 자꾸 HeroMainBanner 아래로 잘려보이는 문제가 발생했는데 그 이유를 알아보니 HeroMainBanner에 overflow:hidden 속성이 설정되어있어서 그렇다고합니다.

• 좀 더 구체적으로는 overflow: hidden이 해당 요소의 경계를 벗어나는 모든 자식 요소를 숨기는데, 그 속성 때문에 기존처럼 datepicker가 배너의 하단 경계선에 걸치게 되면 z-index와 상관없이 물리적으로 잘려 보이게 된다고하네요

그렇다고 HeroMainBanner의 overflow: hidden 속성을 없앨 수 없었기 때문에... 결론적으로 z-index만으로는 해결할 수 없는 문제였기에 최후의 방법으로 portal를 사용하게되었습니다. RootLayout와 PeriodField 내 datepicker에 portalId 설정해두었습니다.

출석하기 SessionCard 속 세션설명, 세션장소 스타일 수정

기기 너비에 따라 세션설명, 세션 장소 스타일이 깨져보여서 이를 수정했습니다. 세션 설명, 세션 장소를 묶어주는 div의 전체적인 구조를 반응형에 따라 50:50으로 조절되도록 수정하고 사이 gap은 디자인에 맞춰 11px로 설정했어요

Screenshot 📷

css문 import 오류 수정

기존	해결

FormLink 컴포넌트 수정

datepicker HeroMainBanner 위로 올라오도록 수정

SessionCard 스타일 수정

Test Checklist ✔

• css import 오류 수정 확인
• 프로젝트 추가/수정 페이지의 datepicker가 HeroMainBanner 위로 잘 올라오는지 확인
• 모바일 프로젝트 추가/수정 페이지에서 링크(FormLink)부분 텍스트가 컴포넌트 너비 안넘어가는지 확인
• 모바일 출석하기 페이지 세션카드 세션설명, 세션장소 안깨지는거 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cotato-fe-v2-homepage	Ready	Preview, Comment	Apr 15, 2026 3:37pm
cotato-fe-v2-recruit	Ready	Preview, Comment	Apr 15, 2026 3:37pm

[coderabbitai]

📝 Walkthrough

Walkthrough

홈페이지 및 채용 앱의 타입 선언 추가와 함께 드래이트피커 포탈 구현, 세션 카드 및 폼 링크의 레이아웃 조정 변경사항입니다. 주로 DOM 포탈 위치 지정과 폼 요소의 최소 너비 제약 추가가 포함됩니다.

Changes

Cohort / File(s)	Summary
TypeScript 모듈 타입 선언 apps/homepage/global.d.ts, apps/recruit/global.d.ts	CSS와 SCSS 파일 임포트에 대한 ambient 모듈 선언 추가로 타입 체크 지원
Datepicker 포탈 구현 apps/homepage/src/app/layout.tsx, apps/homepage/src/app/(with-header)/(with-footer)/project/add-project/_components/PeriodField.tsx	루트 레이아웃에 datepicker-portal div 추가 및 PeriodField의 DatePicker 컴포넌트에서 해당 포탈 ID 지정
레이아웃 및 폼 컴포넌트 조정 apps/homepage/src/app/(with-header)/mypage/attendance/_components/SessionCard.tsx, packages/ui/src/components/form/FormLink.tsx	세션 설명/장소 섹션의 flex 레이아웃 개선 및 텍스트 줄바꿈 처리, FormLink의 최소 너비 제약 추가

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [UI]: 디자인 시스템 빌드 구조 최적화 및 온보딩 프로세스 반응형 구현 #224: 동일한 RootLayout 파일 수정으로 레이아웃 기반 변경사항이 연관됨
• [FEAT]: 마이페이지 출석하기 모바일뷰 구현 #289: SessionCard 컴포넌트의 세션 설명/장소 영역 레이아웃 조정 변경이 겹침
• [UI]: 모바일 디자인 시스템 구축 및 지원서 조회 페이지 반응형 적용  #208: FormLink.tsx 컴포넌트의 클래스명 및 레이아웃 동작 변경이 연관됨

Suggested reviewers

• DandelionQZ
• JiiminHa
• kimminna

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 '5차 QA 수정사항 반영'이라는 관련 내용을 포함하고 있으며, 실제 변경사항(CSS import 오류 수정, FormLink 너비 문제, datepicker portal, SessionCard 스타일)과 일치합니다.
Linked Issues check	✅ Passed	변경사항이 연결된 이슈 #357의 모든 주요 요구사항을 충족합니다: CSS import 오류 수정(global.d.ts 추가), FormLink 텍스트 오버플로우 수정(min-w-0), datepicker portal을 통한 HeroMainBanner 클리핑 해결, SessionCard 레이아웃 수정.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #357의 범위 내에서 5차 QA 수정사항과 직접 관련되어 있으며, 범위를 벗어난 변경사항은 없습니다.
Description check	✅ Passed	PR 설명이 변경 사항과 명확하게 연관되어 있으며, 수정 대상, 구현 방법, 스크린샷, 테스트 체크리스트가 모두 포함되어 있습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/homepage/357-5th-qa-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/recruit/global.d.ts (1)

1-2: 선택사항: 중복 타입 선언 통합 고려

apps/homepage/global.d.ts에 동일한 선언이 존재합니다. 모노레포 구조에서 공통 타입 선언은 다음 방식으로 통합할 수 있습니다:

옵션 1: 루트 레벨에 types/global.d.ts 생성 후 각 앱의 tsconfig.json에서 참조
옵션 2: packages/typescript-config 패키지에 공통 타입 정의 추가

이렇게 하면 향후 추가 asset 타입(.svg, .png 등) 선언 시 한 곳에서만 관리할 수 있습니다.

📦 통합 예시: 루트 레벨 타입 선언

루트에 types/global.d.ts 생성:

declare module '*.css';
declare module '*.scss';
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';

각 앱의 tsconfig.json에서 참조:

{
  "extends": "../../packages/typescript-config/base.json",
+ "include": ["../../types/global.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

참고: TypeScript Handbook - Modules

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/recruit/global.d.ts` around lines 1 - 2, The duplicate ambient module
declarations (declare module '*.css'; declare module '*.scss';) should be
centralized: create a single shared type file (e.g., types/global.d.ts) or add
them to the packages/typescript-config common definitions, then remove the
per-app duplicates; update each app's tsconfig to include or reference the
shared declarations (via "typeRoots" or "include"/"references") so the unique
symbols (declare module '*.css' and declare module '*.scss') are provided from
one location and no longer re-declared in the app-level global.d.ts files.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@apps/homepage/src/app/`(with-header)/mypage/attendance/_components/SessionCard.tsx:
- Line 158: Replace the invalid Tailwind class "wrap-break-words" used in the
SessionCard component (instances in the paragraph elements around the body text)
with the correct Tailwind utility for overflow-wrap as suggested (use
"wrap-break-word"); update both occurrences (the class on the <p> in
SessionCard.tsx and the other occurrence nearby) so the text properly wraps and
long strings do not overflow.

---

Nitpick comments:
In `@apps/recruit/global.d.ts`:
- Around line 1-2: The duplicate ambient module declarations (declare module
'*.css'; declare module '*.scss';) should be centralized: create a single shared
type file (e.g., types/global.d.ts) or add them to the
packages/typescript-config common definitions, then remove the per-app
duplicates; update each app's tsconfig to include or reference the shared
declarations (via "typeRoots" or "include"/"references") so the unique symbols
(declare module '*.css' and declare module '*.scss') are provided from one
location and no longer re-declared in the app-level global.d.ts files.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bcd6753a-379c-4144-be0d-b69545f0a589

📥 Commits

Reviewing files that changed from the base of the PR and between 505caeb and 7c7d650.

📒 Files selected for processing (6)

• apps/homepage/global.d.ts
• apps/homepage/src/app/(with-header)/(with-footer)/project/add-project/_components/PeriodField.tsx
• apps/homepage/src/app/(with-header)/mypage/attendance/_components/SessionCard.tsx
• apps/homepage/src/app/layout.tsx
• apps/recruit/global.d.ts
• packages/ui/src/components/form/FormLink.tsx

[DandelionQZ]

확인했습니다 ~~ good good