Skip to content

[Feat] WTH-151: 어드민 레이아웃 구현#6

Merged
JIN921 merged 7 commits intomainfrom
WTH-151-어드민-레이아웃-구현
Feb 27, 2026

Hidden character warning

The head ref may contain hidden characters: "WTH-151-\uc5b4\ub4dc\ubbfc-\ub808\uc774\uc544\uc6c3-\uad6c\ud604"
Merged

[Feat] WTH-151: 어드민 레이아웃 구현#6
JIN921 merged 7 commits intomainfrom
WTH-151-어드민-레이아웃-구현

Conversation

@JIN921
Copy link
Collaborator

@JIN921 JIN921 commented Feb 24, 2026

✅ PR 유형

어떤 변경 사항이 있었나요?

  • 새로운 기능 추가
  • 버그 수정
  • 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
  • 코드 리팩토링
  • 주석 추가 및 수정
  • 문서 수정
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

📌 관련 이슈번호

  • Closed #151

✅ Key Changes

  • LNB 컴포넌트 구현: 사이드 네비게이션 바 추가
  • Header 컴포넌트 구현: 현재 경로(usePathname)를 기반으로 페이지 제목 및 설명을 동적으로 표시하는 상단 헤더 추가
  • 어드민 공통 레이아웃 구성: LNB와 Header를 조합해 2단 어드민 레이아웃 적용
  • SVG 아이콘을 CSS mask-image로 렌더링하는 NavIcon 컴포넌트 구현 — 활성 상태에 따라 아이콘 색상(bg-brand-primary / bg-text-alternative) 전환

📸 스크린샷 or 실행영상

  • 다크모드
image - 라이트 모드 image

🎸 기타 사항 or 추가 코멘트

  • 회비 관리는 현재 mvp에서 제외된 관계로 현재 주석 처리 했습니다!
  • NavIcon은 SVG를 <img>가 아닌 마스크 방식으로 처리하므로, 향후 다크모드 대응 시 색상 토큰 교체만으로 아이콘 색 변경 가능

Summary by CodeRabbit

새로운 기능

  • 좌측 네비게이션 바 추가 - 주 메뉴 항목과 외부 링크 섹션으로 구성
  • 현재 경로에 따라 페이지 제목과 설명을 동적으로 표시하는 헤더 추가
  • 관리자 화면에 로그아웃 기능 통합
  • 활성 네비게이션 항목 시각적 표시

@JIN921 JIN921 self-assigned this Feb 24, 2026
@JIN921 JIN921 added ✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링 labels Feb 24, 2026
@github-actions
Copy link

github-actions bot commented Feb 24, 2026

PR 검증 결과

TypeScript: 실패
ESLint: 통과
Prettier: 실패
Build: 통과

⚠️ 일부 검증에 실패했습니다. 확인 후 수정해주세요.

@coderabbitai
Copy link

coderabbitai bot commented Feb 24, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

관리자 영역을 위한 레이아웃 구조를 새로 구성합니다. 메인 레이아웃에 Header와 LNB(좌측 네비게이션 바) 컴포넌트를 추가하며, 현재 경로에 따라 페이지 메타데이터와 네비게이션 상태를 동적으로 표시합니다.

Changes

Cohort / File(s) Summary
Admin Layout 구조
src/app/(private)/admin/layout.tsx
레이아웃을 Header와 LNB 컴포넌트를 포함하는 Flex 구조로 재구성하고, 스크롤 동작을 위한 CSS 클래스 추가
Admin Header 컴포넌트
src/components/admin/layout/Header.tsx
현재 경로를 기반으로 페이지 제목과 설명을 동적으로 표시하고 로그아웃 버튼을 렌더링하는 새로운 클라이언트 컴포넌트
Admin LNB 컴포넌트
src/components/admin/layout/LNB.tsx
메인 네비게이션 항목과 이동 항목(외부 링크 포함)을 포함하는 좌측 네비게이션 바 컴포넌트, 활성 경로에 따른 스타일링

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 새로운 레이아웃의 정원을 가꾸니
헤더와 네비게이션이 손을 맞잡고
경로 따라 춤을 추는 컴포넌트들
관리자의 영역이 활짝 피어난다
우당탕탕, 코더의 발걸음! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 변경사항의 핵심을 명확히 반영하고 있습니다. 어드민 레이아웃 구현이라는 주요 변경사항을 정확하게 설명합니다.
Description check ✅ Passed PR 설명이 템플릿의 모든 필수 섹션을 포함하고 있으며, 변경사항을 상세히 기술하고 스크린샷도 첨부되어 있습니다.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch WTH-151-어드민-레이아웃-구현

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

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/app/`(private)/admin/layout.tsx:
- Around line 13-16: Replace the unauthorized background token class on the
admin layout's main element: in the JSX where <main
className="bg-container-neutral-alternative flex-1 overflow-auto"> is rendered
(the layout component that renders Header and {children}), swap out
bg-container-neutral-alternative for one of the approved design token classes
(e.g., bg-container-neutral or bg-container-neutral-interaction) to comply with
the style guide; ensure only the background token is changed and preserve the
remaining classes (flex-1 overflow-auto).

In `@src/components/admin/layout/Header.tsx`:
- Around line 43-44: Replace the disallowed background token on the Logout
button: in Header.tsx find the button with the class string containing
"hover:bg-button-neutral-interaction" and swap that token for an allowed design
token, e.g., "hover:bg-container-neutral-interaction" (keeping the rest of the
classes intact) so the class becomes "... bg-button-neutral
hover:bg-container-neutral-interaction ml-auto ...".

In `@src/components/admin/layout/LNB.tsx`:
- Line 63: The div in LNB.tsx using className "flex items-center gap-300 px-300
pt-[8px]" uses a hardcoded pt-[8px] value; replace that arbitrary pixel value
with the appropriate spacing design token (e.g., pt-100 or another p-100~500
value matching 8px) and ensure spacing tokens are used for gap (gap-100~400) and
padding (p-100~500); update the className on the same div element to remove
pt-[8px] and use the correct tokenized class.
- Around line 111-117: In the manual-link branch inside the LNB component (the
id === 'manual' block using navItemClass) avoid using window.open(path,
'_blank') alone; either render an anchor with target="_blank" and rel="noopener
noreferrer" or, if keeping window.open, call window.open(path, '_blank',
'noopener,noreferrer') or immediately null out the opener on the returned window
(const w = window.open(...); if (w) w.opener = null;) so the opened tab cannot
access the opener and prevent tab-napping.
- Around line 7-13: The build fails because the imported SVG modules (logoIcon,
userIcon, checkIcon, penaltyIcon, arrowIcon, manualIcon) cannot be resolved;
verify each import path/name in src/components/admin/layout/LNB.tsx matches the
actual files under assets/icons (fix typos or move/rename files), and if
TypeScript is blocking imports add a module declaration for SVGs (e.g., declare
module '*.svg') in your global d.ts or include SVG types in tsconfig so imports
of *.svg are recognized by the compiler; then re-run the build to confirm
resolution.
- Around line 34-42: The NavIcon component is using unapproved background
tokens; update the className logic inside NavIcon (function NavIcon) to replace
'bg-brand-primary' with the approved 'bg-button-primary' for the active state
and replace 'bg-text-alternative' with 'bg-container-neutral-interaction' for
the inactive state so the ternary in the cn call uses the approved tokens.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d9bc371 and 739ebb0.

⛔ Files ignored due to path filters (25)
  • src/assets/icons/admin/ic_admin_absence.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_attendance.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_backarrow.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_cardinal.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_change.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_check.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_checkbox.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_circle_check.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_close.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_column_meatball.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_due.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_manual.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_meatball.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_penalty.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_plus.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_receipt.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_search.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_service_transfer.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_uncheckbox.svg is excluded by !**/*.svg
  • src/assets/icons/admin/ic_admin_user.svg is excluded by !**/*.svg
  • src/assets/icons/logo/logo_full_Origin.svg is excluded by !**/*.svg
  • src/assets/icons/logo/logo_full_Spring.svg is excluded by !**/*.svg
  • src/assets/icons/logo/logo_full_Xmas.svg is excluded by !**/*.svg
  • src/assets/icons/logo/logo_initial_Origin.svg is excluded by !**/*.svg
  • src/assets/icons/logo/logo_initial_Xmas.svg is excluded by !**/*.svg
📒 Files selected for processing (3)
  • src/app/(private)/admin/layout.tsx
  • src/components/admin/layout/Header.tsx
  • src/components/admin/layout/LNB.tsx

Comment on lines +7 to +13
import logoIcon from '@/assets/icons/logo/logo_initial_Origin.svg';
import userIcon from '@/assets/icons/admin/ic_admin_user.svg';
import checkIcon from '@/assets/icons/admin/ic_admin_attendance.svg';
import penaltyIcon from '@/assets/icons/admin/ic_admin_penalty.svg';
// import dueIcon from '@/assets/icons/admin/ic_admin_due.svg';
import arrowIcon from '@/assets/icons/admin/ic_admin_service_transfer.svg';
import manualIcon from '@/assets/icons/admin/ic_admin_manual.svg';
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

SVG 아이콘 모듈 누락으로 빌드 실패

CI에서 해당 SVG 모듈을 찾지 못해 빌드가 실패하고 있습니다. 아이콘 파일 경로/이름을 확인하고, 필요 시 *.svg 모듈 선언을 추가해 주세요.

🧰 Tools
🪛 GitHub Actions: CI

[error] 7-7: TypeScript: Cannot find module '@/assets/icons/logo/logo_initial_Origin.svg' or its corresponding type declarations.

🪛 GitHub Check: Lint & Build

[failure] 13-13:
Cannot find module '@/assets/icons/admin/ic_admin_manual.svg' or its corresponding type declarations.


[failure] 12-12:
Cannot find module '@/assets/icons/admin/ic_admin_service_transfer.svg' or its corresponding type declarations.


[failure] 10-10:
Cannot find module '@/assets/icons/admin/ic_admin_penalty.svg' or its corresponding type declarations.


[failure] 9-9:
Cannot find module '@/assets/icons/admin/ic_admin_attendance.svg' or its corresponding type declarations.


[failure] 8-8:
Cannot find module '@/assets/icons/admin/ic_admin_user.svg' or its corresponding type declarations.


[failure] 7-7:
Cannot find module '@/assets/icons/logo/logo_initial_Origin.svg' or its corresponding type declarations.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/admin/layout/LNB.tsx` around lines 7 - 13, The build fails
because the imported SVG modules (logoIcon, userIcon, checkIcon, penaltyIcon,
arrowIcon, manualIcon) cannot be resolved; verify each import path/name in
src/components/admin/layout/LNB.tsx matches the actual files under assets/icons
(fix typos or move/rename files), and if TypeScript is blocking imports add a
module declaration for SVGs (e.g., declare module '*.svg') in your global d.ts
or include SVG types in tsconfig so imports of *.svg are recognized by the
compiler; then re-run the build to confirm resolution.

Copy link
Collaborator

@nabbang6 nabbang6 left a comment

Choose a reason for hiding this comment

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

확인했습니다~! 나중에 navItems 부분은 별도 파일로 분리해서 관리해도 좋을 것 같은데 지금 단계에선 쭉 진행해주셔도 될 것 같아용!! 👍👍 고생하셨습니닷 최고최고,,,

Copy link
Collaborator

@dalzzy dalzzy left a comment

Choose a reason for hiding this comment

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

수고하셨습니다!! 👍🏻👍🏻

Copy link
Collaborator

Choose a reason for hiding this comment

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

빌드 실패했는데 왜 여기는 성공했다고 뜨는걸까욤,,

Image

나영님 PR에도 "PR 검증 결과"에는 typescript, prettier 실패라고 뜨는데 github action 문제없는거보면,, 뭔가 안 맞는 게 있는 것 같은데 확인 한번 부탁드려도 될까용?? ㅠㅠ

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 이거 확인햇는데 프리티어 이그노어에 안 들어잇는 파일들이 잇어서.. 이번 이슈에서 해결햇는데 파일 체인지가 46개 추가 되어서 두 분 pr 확인 하시면 머지하려고 대기 중입니다!

Copy link
Member

@woneeeee woneeeee left a comment

Choose a reason for hiding this comment

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

수고하셨습니다!! 어드민 타이포는 그대로 사용해도 따로 잘 적용이 되던가욤...?!!ㅎㅎ

@JIN921 JIN921 merged commit 8ece984 into main Feb 27, 2026
2 checks passed
@JIN921 JIN921 deleted the WTH-151-어드민-레이아웃-구현 branch February 27, 2026 05:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants