[25.05.09 / TASK-183] Refactor - 모달 레이아웃 분리 #33
Conversation
next lint에서 린팅이 정상 동작하지 않던 오류 해결 및 린팅 규칙 적용
필요없는 파일 및 주석 제거
WalkthroughESLint 설정이 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NoticeModal
participant Modal (Layout)
participant useModal
User->>NoticeModal: 모달 열기
NoticeModal->>Modal (Layout): title, children 전달
Modal (Layout)->>useModal: close 함수 제공
User->>Modal (Layout): ESC 키 입력/닫기 버튼 클릭
Modal (Layout)->>useModal: close() 호출
useModal-->>Modal (Layout): 모달 닫힘
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 2
🧹 Nitpick comments (5)
src/apis/notice.request.ts (1)
5-5: 불필요한await제거 고려
export const notiList = async () => await instance<…>형태에서await를 제거하고async () => instance<…>로 사용하면 동일한 동작을 유지하면서 코드가 더 간결해집니다.src/apis/dashboard.request.ts (2)
17-17: 불필요한await제거 고려
단일 반환(return await instance(...)) 패턴 대신return instance(...)로도 동작이 동일해 가독성을 높일 수 있습니다.-export const postSummary = async () => await instance<null, PostSummaryDto>(PATHS.SUMMARY); +export const postSummary = () => instance<null, PostSummaryDto>(PATHS.SUMMARY);
19-20:postDetail에서도await를 제거해 간결화 가능
async와await가 불필요하므로 다음과 같이 간소화할 수 있습니다.-export const postDetail = async (path: string, start: string, end: string) => - await instance<null, PostDetailDto>(`${PATHS.DETAIL}/${path}?start=${start}&end=${end}`); +export const postDetail = (path: string, start: string, end: string) => + instance<null, PostDetailDto>(`${PATHS.DETAIL}/${path}?start=${start}&end=${end}`);src/components/Modal.tsx (1)
23-37: UI 구현이 깔끔하게 되었습니다.tailwind-merge를 활용하여 기본 스타일과 사용자 정의 스타일을 효과적으로 결합했습니다. 모달의 헤더와 콘텐츠 영역이 명확히 구분되어 있고, 닫기 아이콘도 직관적으로 배치되었습니다. 반응형 디자인(
max-MBI클래스)을 고려한 것도 좋습니다.다만, 한 가지 작은 오타가 있습니다:
- <h2 className="text-TEXT-MAIN items-cenetr gap-3 text-T3 max-MBI:text-T4">{title}</h2> + <h2 className="text-TEXT-MAIN items-center gap-3 text-T3 max-MBI:text-T4">{title}</h2>
items-cenetr를items-center로 수정해주세요..eslintrc.js (1)
32-32: import 경로 제한 패턴 검토현재 설정에서는
'../../*'패턴의 import를 경고하고 있습니다. 이는 깊은 상대 경로 사용을 줄이는 데 도움이 되지만, 프로젝트 구조에 따라 일부 상황에서는 필요할 수 있습니다. 다음과 같은 방법으로 더 개선할 수 있습니다:
- 절대 경로 import를 활성화하여 상대 경로 사용을 줄이기
- 특정 폴더 구조에 따라 예외 규칙 추가하기
- 'no-restricted-imports': ['warn', { patterns: ['../../*'] }], + 'no-restricted-imports': [ + 'warn', + { + patterns: ['../../*'], + paths: [ + { + name: 'some-specific-module', + message: '직접 import하지 말고 index.ts를 통해 import하세요.' + } + ] + } + ],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (34)
.eslintignore(1 hunks).eslintrc.js(1 hunks).eslintrc.json(0 hunks).npmrc(0 hunks).vscode/settings.json(1 hunks)eslint.config.mjs(0 hunks)next.config.mjs(1 hunks)package.json(3 hunks)src/__test__/login.test.tsx(1 hunks)src/__test__/main.test.tsx(1 hunks)src/apis/dashboard.request.ts(1 hunks)src/apis/instance.request.ts(1 hunks)src/apis/notice.request.ts(1 hunks)src/apis/user.request.ts(1 hunks)src/app/(auth-required)/components/notice/Modal.tsx(1 hunks)src/app/(auth-required)/main/components/Section/index.tsx(3 hunks)src/app/(auth-required)/main/components/Summary/BarContent.tsx(1 hunks)src/app/(auth-required)/main/components/Summary/SidebarContent.tsx(1 hunks)src/app/(auth-required)/main/components/Summary/index.tsx(2 hunks)src/app/global-error.tsx(1 hunks)src/app/layout.tsx(3 hunks)src/components/ArriveSoon.tsx(1 hunks)src/components/Check.tsx(1 hunks)src/components/Icon/SvgrMock.tsx(1 hunks)src/components/Icon/index.tsx(2 hunks)src/components/Input.tsx(2 hunks)src/components/Modal.tsx(1 hunks)src/components/Providers/ChannelTalkProvider.tsx(1 hunks)src/components/index.ts(1 hunks)src/constants/fonts.constant.ts(1 hunks)src/errors/fetch.error.ts(1 hunks)src/hooks/useSearchParam.ts(1 hunks)src/utils/cookieUtil.tsx(1 hunks)tsconfig.json(1 hunks)
💤 Files with no reviewable changes (3)
- .npmrc
- .eslintrc.json
- eslint.config.mjs
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/app/(auth-required)/main/components/Summary/index.tsx (2)
src/app/(auth-required)/main/components/Summary/SidebarContent.tsx (1)
SidebarContent(14-27)src/app/(auth-required)/main/components/Summary/BarContent.tsx (1)
BarContent(14-27)
src/apis/notice.request.ts (3)
src/apis/instance.request.ts (1)
instance(48-102)src/types/notice.type.ts (1)
NotiListDto(1-8)src/constants/paths.constant.ts (1)
PATHS(1-12)
src/apis/dashboard.request.ts (3)
src/apis/instance.request.ts (1)
instance(48-102)src/types/dashboard.type.ts (2)
PostSummaryDto(18-27)PostDetailDto(35-37)src/constants/paths.constant.ts (1)
PATHS(1-12)
src/app/(auth-required)/main/components/Section/index.tsx (4)
src/utils/queryUtil.ts (1)
getQueryClient(22-29)src/constants/paths.constant.ts (1)
PATHS(1-12)src/types/user.type.ts (1)
UserDto(6-13)src/utils/numberUtil.ts (1)
parseNumber(1-2)
src/apis/user.request.ts (3)
src/errors/fetch.error.ts (1)
NotFoundError(15-19)src/apis/instance.request.ts (1)
instance(48-102)src/constants/paths.constant.ts (1)
PATHS(1-12)
src/app/(auth-required)/components/notice/Modal.tsx (3)
src/components/Modal.tsx (1)
Modal(13-38)src/constants/paths.constant.ts (1)
PATHS(1-12)src/apis/notice.request.ts (1)
notiList(5-5)
🪛 Biome (1.9.4)
src/app/(auth-required)/components/notice/Modal.tsx
[error] 21-21: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🔇 Additional comments (47)
src/components/ArriveSoon.tsx (1)
4-5: JSX 라인 정리
두 개의<span>요소가 단일 라인으로 병합되어 가독성이 향상되었습니다. 기능 및 스타일에는 영향이 없으므로 승인합니다.src/components/Icon/SvgrMock.tsx (1)
3-5: 화살표 함수 간소화
forwardRef를 암시적 반환(implicit return) 형태로 리팩터링하여 코드가 더 간결해졌습니다. 동작이나 타입에는 아무런 변경이 없으므로 승인합니다.next.config.mjs (1)
45-45: 주석 설명 명확화
tunnelRoute주석이 이벤트 로깅 용도임을 명확히 설명하도록 수정되었습니다. 기능에는 영향이 없으므로 승인합니다.src/components/Input.tsx (2)
4-4: 인터페이스 선언 포맷 간소화
IProp인터페이스 선언부에서 줄바꿈이 제거되어 한눈에 보기 쉬워졌습니다. 타입 정의에는 변화가 없어 승인합니다.
15-15: 컴포넌트 JSX 간소화
forwardRef내부 파라미터 구조와 JSX가 단일 라인으로 정리되어 코드 일관성이 향상되었습니다. 기능상 문제 없으므로 승인합니다.src/components/Check.tsx (3)
8-8: 컴포넌트 선언 간소화
Check컴포넌트 함수 선언부가 한 줄로 정리되어 코드 일관성이 높아졌습니다. 동작에는 영향이 없으므로 승인합니다.
13-13: 조건부 렌더링 포맷 간소화
label조건부 렌더링<span>가 단일 라인으로 정리되어 가독성이 향상되었습니다. 기능 변화 없음으로 승인합니다.
18-18: input 요소 포맷 간소화
숨김 체크박스<input>이 한 줄로 정리되어 코드가 더욱 직관적으로 보입니다. 기능에 영향이 없으므로 승인합니다.src/apis/instance.request.ts (1)
63-65: 들여쓰기 변경만으로 로직 무결성 유지됨
init?.headers스프레드와Cookie헤더 추가 부분이headers객체 안에서 더 깊이 중첩되어 포맷팅되었습니다. 기능·흐름에는 전혀 영향을 주지 않으므로 변경사항을 승인합니다.src/hooks/useSearchParam.ts (1)
17-17: 포맷팅 간소화로 가독성 향상 (로직 변경 없음)
setSearchParams함수 선언이 한 줄로 병합되어 코드가 더 깔끔해졌습니다. 기능적 변경은 없습니다.src/utils/cookieUtil.tsx (1)
3-3: 함수 시그니처 포맷팅 변경만, 로직 동일
getCookieForAuth선언부가 한 줄로 통합되었으며, 동작에는 전혀 영향을 미치지 않습니다.src/constants/fonts.constant.ts (1)
1-1: 타입 선언 포맷팅 변경만, 내용 불변
FONTS의 제네릭 타입 선언이 한 줄로 축약되었으나, 타입 구조와 값에는 변경이 없습니다..eslintignore (1)
10-12: 적절한 ESLint ignore 항목 추가
.github,.eslintrc.js,node_modules디렉토리를 ESLint 검사 대상에서 제외하도록 잘 설정되었습니다..vscode/settings.json (1)
12-13: VSCode 저장 시 ESLint 자동 수정 및 유효성 검사 구성
editor.codeActionsOnSave와eslint.validate설정이 올바르게 추가되어 저장 시 ESLint가 자동으로 코드 스타일을 수정하고 검증하도록 구성되었습니다.src/app/(auth-required)/main/components/Summary/index.tsx (2)
31-31:SidebarContent호출 단일라인 리팩터링 확인
단일 라인으로 변경된SidebarContent호출은 기존 멀티라인과 로직 변경 없이 포맷팅만 일관성 있게 리팩터링되었습니다.
56-56:BarContent호출 단일라인 리팩터링 확인
BarContent역시 동일하게 단일 라인으로 잘 정리되었으며 기능에 영향이 없습니다.src/__test__/main.test.tsx (1)
71-72: 테스트 포맷팅 및 ESLint 지시자 추가 적절
waitFor내부 ESLint disable 주석과 싱글라인 어서션 변환은 테스트 로직에 영향 없이 lint 규칙을 우회하기 위한 적절한 조치입니다.src/components/index.ts (1)
7-7: Modal 컴포넌트 export 추가 확인
src/components/index.ts에Modal을 정상적으로 export했습니다. 다른 파일에서import { Modal }시 올바르게 동작하는지 확인 부탁드립니다.src/__test__/login.test.tsx (1)
14-15: 테스트 코드 포매팅 통일
getByPlaceholderText호출이 단일 라인으로 정리되어 가독성이 향상되었습니다.src/errors/fetch.error.ts (1)
23-23:EnvNotFoundError메시지 포맷 간소화
한 줄로 통합된 생성자 호출은 로직에 영향이 없으며 일관된 스타일을 유지합니다.src/components/Providers/ChannelTalkProvider.tsx (1)
12-12: ChannelTalkProvider 타입 선언 간결화 확인
{ children }: { children: React.ReactNode }형태로 단일 라인으로 정리되어 있으며, 기존 로직에 영향이 없습니다.src/apis/user.request.ts (3)
11-12: 404 에러 매핑NotFoundError생성 축약 리팩터링 승인
NotFoundError인스턴스를 한 줄로 작성하여 가독성을 높이는 형식 변경은 로직에 영향이 없으므로 적절합니다.
17-17:logout함수 싱글라인 리팩터링 승인
기존 함수 시그니처를 유지한 채 한 줄 표현으로 간결하게 변경되어 일관된 코드 스타일을 제공합니다.
19-19:sampleLogin함수 싱글라인 리팩터링 승인
명시적인POST요청을 한 줄로 표현하여 가독성을 개선하고 있습니다.src/components/Icon/index.tsx (2)
5-5:iconType타입 정의 싱글라인 리팩터링 승인
타입 선언을 한 줄로 통합하여 코드 간결성과 일관성을 확보했습니다.
21-21:Icon컴포넌트 파라미터 구조 분해 싱글라인 리팩터링 승인
기존 로직 유지하며 매개변수 디스트럭처링을 한 줄로 정리하여 가독성을 높였습니다.src/app/(auth-required)/main/components/Section/index.tsx (3)
14-14:username할당식 싱글라인 리팩터링 승인
multi-line 표현식을 한 줄로 줄여 코드 가독성을 개선했습니다.
37-37: 포스트 제목 줄임 로직 싱글라인 정리 승인
길이 기반 조건부 말줄임 로직을 한 줄로 표현하여 코드 스타일을 통일했습니다.
49-49: 뷰 카운트 표현식 템플릿 축약 승인
parseNumber(p.views)를 한 줄로 렌더링해 일관성을 유지하고 있습니다.src/app/(auth-required)/main/components/Summary/BarContent.tsx (1)
14-14:BarContent파라미터 디스트럭처링 싱글라인 리팩터링 승인
props 구조 분해를 한 줄로 통합해 코드 스타일 일관성을 확보했습니다.src/app/(auth-required)/main/components/Summary/SidebarContent.tsx (2)
14-14:SidebarContent파라미터 디스트럭처링 싱글라인 리팩터링 승인
멀티라인으로 선언되던 props 디스트럭처링을 한 줄로 정리해 가독성을 높였습니다.
17-17:titleJSX span 표현식 싱글라인 정리 승인
JSX 요소 내용을 한 줄로 축약해 스타일 가이드에 부합합니다.src/app/layout.tsx (3)
9-9: 모듈 임포트 통합이 잘 되었습니다.여러 컴포넌트를 하나의 import 문으로 통합하여 코드 가독성이 향상되었습니다.
ModalProvider를 다른 provider들과 함께 임포트함으로써 코드가 더 깔끔해졌습니다.
23-23: OpenGraph 설명 포맷이 통일되었습니다.메타데이터의 description과 동일한 형식으로 OpenGraph description이 통일되어 일관성이 향상되었습니다.
32-32: 함수 매개변수 선언이 간결해졌습니다.
RootLayout함수의 매개변수와 타입 선언을 한 줄로 통합하여 코드가 더 간결해졌습니다. Readonly 타입을 사용한 것도 좋은 선택입니다.src/app/global-error.tsx (1)
7-7: 함수 매개변수 선언이 간결해졌습니다.
GlobalError함수의 매개변수 구조와 타입 선언을 한 줄로 통합하여 코드가 더 간결해졌습니다. 이는 프로젝트 전체의 코드 스타일 일관성에 기여합니다.src/app/(auth-required)/components/notice/Modal.tsx (3)
6-6: 재사용 가능한 Modal 컴포넌트 활용이 잘 되었습니다.공통
Modal컴포넌트를Layout으로 가져와서 사용함으로써 코드 중복을 줄이고 일관된 모달 구현이 가능해졌습니다. 이는 refactoring 목표에 잘 부합합니다.
12-12: 모달 레이아웃 적용이 잘 되었습니다.기존 모달 UI 구현 코드를 제거하고 재사용 가능한
Layout컴포넌트로 대체함으로써 코드가 간결해졌습니다. 이를 통해 모달 UI 및 동작 로직이 중앙화되어 유지보수성이 향상되었습니다.Also applies to: 25-25
17-17: 날짜 표시 포맷이 개선되었습니다.ISO 날짜 문자열에서 필요한 부분만 추출하여 사용자에게 더 깔끔한 형식으로 표시하도록 개선되었습니다.
src/components/Modal.tsx (2)
1-12: 재사용 가능한 Modal 컴포넌트가 잘 설계되었습니다.'use client' 지시문 사용, 필요한 모듈 임포트, 그리고 명확한 인터페이스 정의가 잘 되어 있습니다. 특히 HTMLDivElement 속성을 확장하여 표준 HTML 속성을 모두 지원하면서도 필요한 추가 속성(title, children)을 정의한 것이 좋습니다.
13-21: 모달 닫기 기능 구현이 잘 되었습니다.useModal 훅을 통해 close 함수를 가져오고, Escape 키 이벤트 리스너를 설정하여 사용자 경험을 향상시켰습니다. 또한 컴포넌트 언마운트 시 이벤트 리스너를 제거하여 메모리 누수를 방지한 것이 좋습니다.
package.json (4)
23-23: 의존성 추가: @next/eslint-plugin-nextNext.js 린팅 플러그인을 의존성에 추가한 것은 PR의 목표인 "Next Lint가 제대로 작동하지 않는 문제 해결"에 적합합니다. 이 플러그인은 Next.js 프로젝트에 특화된 린팅 규칙을 제공합니다.
38-38: tailwind-merge 라이브러리 추가
tailwind-merge라이브러리 추가는 모달 컴포넌트 리팩토링과 관련이 있을 것으로 보입니다. 이 라이브러리는 Tailwind CSS 클래스를 효율적으로 병합하는 데 유용하며, 재사용 가능한 컴포넌트를 구현할 때 클래스 충돌 문제를 해결하는 데 도움이 됩니다.
42-42: ESLint 관련 개발 의존성 추가
@eslint/eslintrc와@typescript-eslint/eslint-plugin추가는 새로운.eslintrc.js설정 파일을 지원하기 위한 적절한 변경입니다. 이러한 패키지들은 TypeScript 프로젝트에서 ESLint를 효과적으로 구성하는 데 필수적입니다.Also applies to: 57-57
44-44: 패키지 재분류 및 버전 업데이트일부 패키지(
@sentry/webpack-plugin,@tanstack/react-query-devtools,@types/gtag.js,sharp)를 dependencies에서 devDependencies로 이동한 것은 좋은 실천 방법입니다. 이렇게 하면 프로덕션 빌드 크기가 줄어들고 런타임 성능이 향상됩니다. 또한sharp패키지의 버전 업데이트는 최신 기능과 보안 패치를 적용하는 데 도움이 됩니다.Also applies to: 46-46, 51-51, 78-78
.eslintrc.js (2)
1-44: ESLint 설정 통합 및 개선이전의
.eslintrc.json과eslint.config.mjs파일을 단일.eslintrc.js파일로 통합한 것은 좋은 리팩토링입니다. 이 새로운 설정은 다음과 같은 이점을 제공합니다:
- TypeScript, React, Jest 등 모든 환경에 대한 포괄적인 린팅 규칙 제공
- 코드 스타일의 일관성 보장
- 보다 쉬운 유지 관리
특히
printWidth: 100설정과 import 순서 규칙을 추가한 것은 코드 스타일 일관성에 도움이 됩니다. 또한 불필요한 상대 경로 import 패턴(../../*)에 대한 경고를 설정한 것은 코드 가독성 향상에 기여할 것입니다.
36-38: TypeScript 고급 규칙 활성화에 대한 피드백
@typescript-eslint/promise-function-async와@typescript-eslint/consistent-type-assertions를 에러로 설정한 것은 코드 품질을 높이는 좋은 방법입니다. 특히:
promise-function-async규칙은 Promise를 반환하는 함수가 항상 async로 선언되도록 하여 코드의 일관성을 유지합니다.consistent-type-assertions규칙은 타입 단언 방식을 일관되게 유지하여 가독성을 높입니다.이러한 규칙은 특히 여러 개발자가 협업하는 프로젝트에서 코드 스타일의 일관성을 유지하는 데 도움이 됩니다.
tsconfig.json
Outdated
| "src/__test__/main.test.tsx.ignore", | ||
| ".eslintrc.js", | ||
| "next.config.mjs" | ||
| ], |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
tsconfig.json의 include 항목 검토 요청
현재 "src/__test__/main.test.tsx.ignore", ".eslintrc.js", "next.config.mjs"가 포함되어 있습니다.
src/__test__/main.test.tsx.ignore파일이 실제로 존재하는지- ESLint 설정 파일 및 Next.js 설정 파일을 TS 컴파일 범위에 포함하는 의도가 맞는지
확인을 부탁드립니다.
🏁 Script executed:
#!/bin/bash
# tsconfig.json의 include에 정의된 파일이 실제로 존재하는지 검사
if [ ! -f "src/__test__/main.test.tsx.ignore" ]; then
echo "경고: 파일이 존재하지 않습니다: src/__test__/main.test.tsx.ignore"
exit 1
fi
echo "확인: 파일이 존재합니다."Length of output: 174
tsconfig.json의 include 항목 검토 및 수정 요청
다음 부분을 확인 후 조치 부탁드립니다:
src/__test__/main.test.tsx.ignore파일이 실제로 존재하지 않습니다. 잘못된 경로이므로 해당 include 항목을 삭제하거나 올바른 파일 경로로 수정해주세요..eslintrc.js및next.config.mjs를 TS 컴파일 범위에 포함하는 의도가 맞는지 확인 부탁드립니다. 불필요하다면 제거하고, 필요하다면 의도에 맞는 다른 설정 파일 경로(예:eslint.config.mjs)를 포함해야 할 수 있습니다.- (참고) 이전 학습된 내용에 따르면 ESLint 설정을
eslint.config.mjs로 관리 중이라면, tsconfig.json의include배열에 해당 파일을 추가해야 ESLint 관련 오류를 방지할 수 있습니다.
🤖 Prompt for AI Agents (early access)
In tsconfig.json around lines 38 to 41, the include array contains
"src/__test__/main.test.tsx.ignore", ".eslintrc.js", and "next.config.mjs".
First, remove or correct "src/__test__/main.test.tsx.ignore" since the file does
not exist. Next, verify if including ".eslintrc.js" and "next.config.mjs" in the
TypeScript compilation scope is intentional; if not, remove them. If ESLint
configuration is managed via "eslint.config.mjs", replace or add that file path
in the include array to prevent related errors.
| <div | ||
| className="text-TEXT-MAIN text-I4 prose" | ||
| dangerouslySetInnerHTML={{ __html: content }} | ||
| /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
보안 취약점 가능성이 있습니다.
dangerouslySetInnerHTML을 사용하면 XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다. 비록 현재 PR의 변경 사항은 아니지만, 향후 개선을 위해 콘텐츠를 안전하게 렌더링하는 방법을 고려해보세요.
다음 방법들을 고려해볼 수 있습니다:
- 신뢰할 수 있는 HTML 정제 라이브러리 사용 (DOMPurify 등)
- 마크다운 렌더러 사용 (react-markdown 등)
- 텍스트만 필요한 경우 HTML 태그 제거
🏁 Script executed:
#!/bin/bash
# content의 출처 확인 및 정제 방법 조사
echo "1. 내용 출처 확인"
rg -A 3 -B 3 "notiList" --type=ts
echo "2. 사용 가능한 HTML 정제 라이브러리 확인"
grep -r "DOMPurify\|sanitize\|xss" --include="*.json" .Length of output: 4119
보안 경고: XSS 취약점 방지 필요
서버에서 전달받은 HTML 문자열을 dangerouslySetInnerHTML로 그대로 렌더링하고 있으므로, 클라이언트 측에서 반드시 HTML 정제(sanitization) 로직을 추가해야 합니다.
수정이 필요한 위치:
- 파일:
src/app/(auth-required)/components/notice/Modal.tsx - 라인: 19–22
조치 방안 제안:
- DOMPurify, sanitize-html 등 신뢰할 수 있는 HTML 정제 라이브러리 적용
- 또는
react-markdown같은 안전한 마크다운 렌더러 사용 - 단순 텍스트만 필요한 경우 태그를 제거하여 순수 문자열로만 렌더링
- 가능하다면 서버 측에서도 입력 HTML 검증/정제 로직 추가
위 중 하나 이상의 방법을 도입해 XSS 공격을 예방하세요.
🧰 Tools
🪛 Biome (1.9.4)
[error] 21-21: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🤖 Prompt for AI Agents (early access)
In src/app/(auth-required)/components/notice/Modal.tsx around lines 19 to 22,
the use of dangerouslySetInnerHTML with untrusted HTML content poses an XSS
security risk. To fix this, integrate a trusted HTML sanitization library like
DOMPurify to clean the content before rendering, or switch to a safer rendering
method such as using react-markdown if the content is markdown. Alternatively,
if only plain text is needed, strip all HTML tags before rendering. Also
consider adding server-side validation and sanitization of the HTML input to
further enhance security.
six-standard
added
bug
six-standard
changed the title
six-standard
changed the title
🔥 변경 사항
원래 모달 제작시마다 만들어야 했던 요소들을 하나의 컴포넌트로 재활용할 수 있도록 리팩토링하였습니다. (레이아웃을 포함한 전체 동작 코드)
이외에 모달을 고치던 중 Next Lint가 동작하지 않는 걸 확인해서 고쳐뒀고, 이에 맞춰 린팅이 적용되지 않은 코드들에 린팅을 적용하였습니다.
이번 PR에 수정된 코드들 대부분이 이 경우이니, 파일명에 Modal이 들어가는 파일들을 제외하고는 집중해 보시지 않으셔도 무방합니다!
🏷 관련 이슈
#183📸 스크린샷 (UI 변경 시 필수)
X
📌 체크리스트
Summary by CodeRabbit
New Features
Refactor
Chores
Style