관리자 공지사항 페이지, 컴포넌트 분리 (#issue 331) #332
Conversation
Walkthrough관리자 공지사항 페이지의 컴포넌트 구조가 분리 및 리팩토링되었습니다. 스타일 파일과 주요 컴포넌트가 새로운 경로로 이동되었으며, 공지사항 목록, 작성, 상세 페이지가 각각 별도의 페이지 컴포넌트로 분리되었습니다. 일부 스타일 컴포넌트와 prop이 확장 및 개선되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant AdminNoticePage
participant CommonAdminPage
participant AdminTitle
participant Outlet
AdminNoticePage->>CommonAdminPage: title='공지사항' 전달
CommonAdminPage->>AdminTitle: title 전달
CommonAdminPage->>Outlet: 중첩 라우트 렌더링
sequenceDiagram
participant AdminNoticeDetail
participant useAuthStore
participant NoticeDetailBundle
AdminNoticeDetail->>useAuthStore: 사용자 정보 조회
useAuthStore-->>AdminNoticeDetail: isAdmin 여부 반환
AdminNoticeDetail->>NoticeDetailBundle: $isAdmin prop 전달
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(해당 사항 없음) Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
src/components/admin/adminNotice/AdminNoticeList.styled.ts(1 hunks)src/components/admin/adminNotice/AdminNoticeList.tsx(1 hunks)src/components/admin/adminNotice/AdminNoticeWrite.styled.ts(1 hunks)src/components/admin/adminNotice/AdminNoticeWrite.tsx(1 hunks)src/components/common/admin/searchBar/SearchBar.tsx(1 hunks)src/components/user/customerService/noticeDetail/NoticeDetailBundle.tsx(2 hunks)src/components/user/mypage/Spinner.styled.ts(1 hunks)src/pages/admin/CommonAdminPage.styled.ts(1 hunks)src/pages/admin/CommonAdminPage.tsx(1 hunks)src/pages/admin/adminNotice/AdminNotice.tsx(1 hunks)src/pages/admin/adminNotice/adminNoticeList/AdminNoticeList.styled.ts(0 hunks)src/pages/admin/adminNotice/adminNoticeList/AdminNoticeListPage.tsx(1 hunks)src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWritePage.tsx(1 hunks)src/pages/admin/adminNoticeDetail/AdminNoticeDetail.tsx(1 hunks)src/routes/AdminRoutes.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/pages/admin/adminNotice/adminNoticeList/AdminNoticeList.styled.ts
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/pages/admin/adminNotice/adminNoticeList/AdminNoticeListPage.tsx (1)
src/components/admin/adminNotice/AdminNoticeList.tsx (1)
AdminNoticeList(11-66)
src/pages/admin/CommonAdminPage.tsx (1)
src/components/common/admin/title/AdminTitle.tsx (1)
AdminTitle(8-17)
src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWritePage.tsx (1)
src/components/admin/adminNotice/AdminNoticeWrite.tsx (1)
AdminNoticeWrite(12-125)
src/pages/admin/adminNotice/AdminNotice.tsx (1)
src/pages/admin/CommonAdminPage.tsx (1)
CommonAdminPage(9-16)
src/components/admin/adminNotice/AdminNoticeList.styled.ts (3)
src/components/admin/adminNotice/AdminNoticeWrite.styled.ts (1)
SpinnerWrapper(15-15)src/pages/admin/CommonAdminPage.styled.ts (2)
SpinnerWrapper(4-4)NoticeItemWrapper(8-11)src/components/user/mypage/Spinner.styled.ts (1)
SpinnerWrapperStyled(29-35)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (18)
src/components/user/mypage/Spinner.styled.ts (1)
29-30: 컴포넌트 재사용성 개선이 잘 구현되었습니다.
$isAdminprop을 통해 관리자와 사용자 컨텍스트에서 적절한 너비 설정이 가능하도록 개선되었습니다. 기본값 설정으로 하위 호환성도 유지됩니다.src/components/admin/adminNotice/AdminNoticeWrite.styled.ts (1)
12-13:Details
✅ Verification successful
import 경로 변경사항을 확인해주세요.
디렉토리 구조 변경에 따른 import 경로 업데이트로 보입니다. 변경된 경로가 올바른지 확인이 필요합니다.
다음 스크립트로 import 경로의 유효성을 검증해주세요:
🏁 Script executed:
#!/bin/bash # 변경된 import 경로들이 유효한지 확인 echo "Checking import paths..." # Inquiry.styled 파일 존재 확인 fd -t f "Inquiry.styled.ts" | head -5 # Spinner.styled 파일 존재 확인 fd -t f "Spinner.styled.ts" | head -5 # AdminNoticeWrite.styled.ts에서 상대 경로 계산 확인 echo "Current file: src/components/admin/adminNotice/AdminNoticeWrite.styled.ts" echo "Expected Inquiry.styled path: src/components/user/customerService/inquiry/Inquiry.styled.ts" echo "Expected Spinner.styled path: src/components/user/mypage/Spinner.styled.ts"Length of output: 887
import 경로 검증 완료
src/components/user/customerService/inquiry/Inquiry.styled.ts와
src/components/user/mypage/Spinner.styled.ts파일이 모두 존재하며,
AdminNoticeWrite.styled.ts(src/components/admin/adminNotice/AdminNoticeWrite.styled.ts) 에서 사용된 상대 경로(../../../components/...) 역시 정확합니다.
추가 수정이 필요 없습니다.src/pages/admin/CommonAdminPage.styled.ts (1)
2-2:Details
✅ Verification successful
import 경로 변경의 일관성을 확인해주세요.
다른 파일들과 일관되게 import 경로가 단축되었습니다. 디렉토리 구조 변경에 따른 것으로 보이니 경로가 올바른지 확인이 필요합니다.
현재 파일 위치에서 Spinner.styled.ts까지의 상대 경로가 올바른지 확인해주세요:
🏁 Script executed:
#!/bin/bash # CommonAdminPage.styled.ts의 import 경로 검증 echo "Current file: src/pages/admin/CommonAdminPage.styled.ts" echo "Target file should be at: src/components/user/mypage/Spinner.styled.ts" # 실제 파일 위치 확인 fd -t f "Spinner.styled.ts" src/components/user/mypage/Length of output: 372
Import 경로 확인 완료
src/pages/admin/CommonAdminPage.styled.ts에서src/components/user/mypage/Spinner.styled.ts로의 상대 경로가 올바른 것으로 확인되었습니다. 추가 수정은 필요 없습니다.src/components/common/admin/searchBar/SearchBar.tsx (1)
2-8:Details
✅ Verification successful
다수의 import 경로 변경사항을 검증해주세요.
여러 import 경로가 변경되었으며, 특히 Modal 컴포넌트의 경로에서 'common' 폴더가 제거되었습니다. 모든 import가 올바르게 해결되는지 확인이 필요합니다.
변경된 모든 import 경로의 유효성을 확인해주세요:
🏁 Script executed:
#!/bin/bash # SearchBar.tsx의 모든 import 경로 검증 echo "Verifying import paths for SearchBar.tsx..." # 현재 파일 위치 echo "Current file: src/components/common/admin/searchBar/SearchBar.tsx" # 각 import 대상 파일들 존재 확인 echo "Checking customerService constants..." fd -t f -p "constants.*customerService" | head -3 echo "Checking useModal hook..." fd -t f "useModal" | head -3 echo "Checking Modal component..." fd -t f "Modal.tsx" src/components | head -5 echo "Checking routes constants..." fd -t f -p "constants.*routes" | head -3Length of output: 858
검증 완료: SearchBar.tsx의 모든 import 경로가 올바르게 해결됩니다.
- src/constants/user/customerService.ts
- src/hooks/useModal.ts
- src/components/common/modal/Modal.tsx
- src/constants/routes.ts
위 대상 파일들이 모두 존재하며 상대 경로가 정확합니다.
src/routes/AdminRoutes.tsx (1)
12-16: 라우팅 구조 개선이 잘 적용되었습니다.컴포넌트를 페이지 래퍼로 감싸는 패턴으로 변경하여 관심사를 명확히 분리했습니다. 이는 향후 페이지별 로직 추가나 유지보수에 유리한 구조입니다.
src/components/admin/adminNotice/AdminNoticeWrite.tsx (1)
1-10: import 경로 정리가 적절히 수행되었습니다.상대 경로가 일관되게 단축되어 프로젝트 구조 변경에 맞게 올바르게 조정되었습니다. 컴포넌트의 기능적 로직은 변경되지 않아 안전한 리팩토링입니다.
src/components/admin/adminNotice/AdminNoticeList.tsx (1)
2-9: import 경로 업데이트가 올바르게 적용되었습니다.모든 의존성 import가 새로운 프로젝트 구조에 맞게 일관되게 조정되었습니다. 컴포넌트의 핵심 기능은 그대로 유지되어 안정적인 리팩토링입니다.
src/pages/admin/adminNotice/adminNoticeList/AdminNoticeListPage.tsx (1)
1-5: 페이지 래퍼 컴포넌트가 깔끔하게 구현되었습니다.AdminNoticeList 컴포넌트를 감싸는 단순하고 명확한 페이지 래퍼입니다. 이런 패턴은 페이지 레벨과 컴포넌트 레벨의 관심사를 효과적으로 분리하여 코드 구조를 개선합니다.
src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWritePage.tsx (1)
1-5: 컴포넌트 분리 패턴이 올바르게 적용되었습니다.페이지 레벨 컴포넌트와 기능 컴포넌트를 명확히 분리하는 패턴이 잘 구현되어 있습니다. 이는 라우팅과 UI 로직의 관심사 분리에 도움이 됩니다.
src/pages/admin/adminNotice/AdminNotice.tsx (1)
1-5: 공통 레이아웃 컴포넌트를 활용한 효과적인 리팩토링입니다.기존의 반복적인 레이아웃 코드를
CommonAdminPage로 추상화하여 코드 중복을 제거하고 관리자 페이지의 일관성을 향상시켰습니다. 이는 유지보수성과 재사용성을 높이는 좋은 패턴입니다.src/pages/admin/CommonAdminPage.tsx (2)
5-7: 명확한 타입 정의로 컴포넌트 인터페이스가 잘 설계되었습니다.
CommonAdminPageProps인터페이스가 간결하고 명확하게 정의되어 있어 컴포넌트의 사용법을 쉽게 이해할 수 있습니다.
9-16: 재사용 가능한 레이아웃 컴포넌트가 효과적으로 구현되었습니다.관리자 페이지의 공통 레이아웃을 담당하는 컴포넌트로서 단일 책임 원칙을 잘 따르고 있습니다.
AdminTitle과Outlet을 적절히 조합하여 일관된 페이지 구조를 제공합니다.src/components/user/customerService/noticeDetail/NoticeDetailBundle.tsx (2)
12-12: 옵셔널 prop 추가로 기능 확장성이 향상되었습니다.
$isAdmin옵셔널 prop을 추가하여 관리자 상태에 따른 조건부 스타일링이 가능하도록 개선되었습니다.
17-17: 기본값 설정과 prop 전달이 올바르게 구현되었습니다.기본값을
false로 설정하여 하위 호환성을 유지하고, styled-component에 prop을 적절히 전달하고 있습니다. 기존 코드에 영향을 주지 않으면서 새로운 기능을 안전하게 추가했습니다.Also applies to: 29-29
src/pages/admin/adminNoticeDetail/AdminNoticeDetail.tsx (3)
2-2: 인증 스토어 통합이 적절합니다.
useAuthStore임포트가 관리자 상태 확인을 위해 올바르게 추가되었습니다.
5-5: 안전한 관리자 상태 추출 로직입니다.nullish coalescing 연산자(
??)를 사용하여userData가 없는 경우 안전하게false로 기본값을 설정했습니다.
7-7: 관리자 상태가 하위 컴포넌트로 올바르게 전달됩니다.
$isAdminprop을 통해 관리자 상태를NoticeDetailBundle에 전달하여 조건부 스타일링을 가능하게 합니다.src/components/admin/adminNotice/AdminNoticeList.styled.ts (1)
1-6: 관리자 페이지용 스피너 래퍼 구현이 적절합니다.
SpinnerWrapperStyled를 확장하여 관리자 페이지에 맞게 너비를 100%로 재정의한 것이 올바릅니다.
| export const NoticeItemWrapper = styled.section` | ||
| display: flex; | ||
| justify-content: center; | ||
| `; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
NoticeItemWrapper 중복 코드를 정리해주세요.
이 컴포넌트는 src/pages/admin/CommonAdminPage.styled.ts의 NoticeItemWrapper와 동일한 스타일을 가지고 있습니다.
코드 중복을 방지하기 위해 공통 컴포넌트를 사용하거나 하나의 위치로 통합하는 것을 고려해주세요.
-export const NoticeItemWrapper = styled.section`
- display: flex;
- justify-content: center;
-`;그리고 대신 공통 스타일 파일에서 임포트하여 사용하세요:
+import { NoticeItemWrapper } from '../../pages/admin/CommonAdminPage.styled';🤖 Prompt for AI Agents
In src/components/admin/adminNotice/AdminNoticeList.styled.ts lines 8 to 11, the
NoticeItemWrapper styled component duplicates the same styles as the
NoticeItemWrapper in src/pages/admin/CommonAdminPage.styled.ts. To fix this,
remove the duplicated NoticeItemWrapper definition here and instead import the
NoticeItemWrapper component from src/pages/admin/CommonAdminPage.styled.ts to
reuse the common style and avoid code duplication.
구현내용
관리자 공지사항 페이지, 컴포넌트 분리
연관이슈
close #331
Summary by CodeRabbit
신규 기능
기능 개선
스타일
기타