refactor: rename 404 to NotFound and unify export style #68
Conversation
WalkthroughNotFound 컴포넌트를 Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![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
🧹 Nitpick comments (1)
src/pages/notFound/index.tsx (1)
6-6: 변수명 컨벤션을 준수해주세요.
useNavigate()훅의 반환값을router로 명명하는 것보다navigate로 명명하는 것이 React Router의 일반적인 컨벤션입니다.다음 diff를 적용하여 변수명을 수정하세요:
- const router = useNavigate(); + const navigate = useNavigate(); return ( <Container> <h1>404 Not Found</h1> - <Button width="100" onClick={() => router("/main")}> + <Button width="100" onClick={() => navigate("/main")}> 메인으로 가기 </Button> </Container>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to data retention organization setting
📒 Files selected for processing (3)
src/404.tsx(0 hunks)src/pages/notFound/index.tsx(1 hunks)src/router/router.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/404.tsx
🔇 Additional comments (2)
src/router/router.tsx (1)
1-1: LGTM!import 경로와 export 스타일이 올바르게 업데이트되었습니다. 다른 페이지 컴포넌트들과 동일한 패턴을 따르고 있어 일관성이 유지됩니다.
src/pages/notFound/index.tsx (1)
1-26: 폴더명 케이싱은 일관성 있게 유지되고 있습니다.프로젝트의
src/pages디렉토리 분석 결과:
- 단어 폴더명: lowercase (bug, login, main, meals, attendance)
- 복합어 폴더명: camelCase (moveClassRoom, notFound, outAccept, outList, preList, selfStudy)
notFound는 복합어 폴더명으로서moveClassRoom,outAccept,preList,selfStudy등과 동일한 camelCase 패턴을 따르고 있으므로 기존 컨벤션과 일치합니다. PR 설명에서 "NotFound"로 표기한 것은 문서상 표기일 뿐, 실제 폴더 구조는 올바르게 유지되고 있습니다.
| return ( | ||
| <Container> | ||
| <h1>404 Not Found</h1> | ||
| <Button width="100" onClick={() => router("/main")}> |
There was a problem hiding this comment.
🧩 Analysis chain
Button의 width 속성값을 확인해주세요.
width="100"에서 단위가 명시되지 않았습니다. Button 컴포넌트의 API에 따라 "100%" 또는 "100px" 등의 명시적인 단위가 필요할 수 있습니다.
다음 스크립트를 실행하여 Button 컴포넌트의 width prop 타입을 확인하세요:
🏁 Script executed:
#!/bin/bash
# Description: Button 컴포넌트의 width prop 타입 정의 확인
# Button 컴포넌트 파일 찾기 및 props 타입 확인
fd -e tsx -e ts "button" src/components | xargs cat | rg -A 10 -B 2 "width"Length of output: 2690
Button 컴포넌트의 width prop에 CSS 단위 명시 필요
Button 컴포넌트의 width prop은 string 타입으로 정의되어 있으며, 이 값이 styled-components를 통해 CSS width 속성으로 직접 적용됩니다. CSS는 0이 아닌 길이 값에 단위를 요구하므로, width="100"은 유효하지 않은 CSS입니다.
스토리의 예시에서 확인할 수 있듯이 width: "100px"처럼 명시적인 단위를 포함해야 합니다. 현재 코드를 width="100px" 또는 width="100%" 등으로 수정하세요.
🤖 Prompt for AI Agents
In src/pages/notFound/index.tsx around line 10, the Button is passed width="100"
which lacks CSS units; update the prop to include units such as width="100px" or
width="100%" so the styled-component receives a valid CSS length string (e.g.,
change width="100" to width="100px").
1 participant
변경 내용
src/404.tsx파일을src/pages/NotFound/index.tsx로 이동 및 이름 변경했습니다.src/router/router.tsx내 import 경로를 수정했습니다.export const NotFound = () =>형태를const NotFound = ... export default NotFound로 변경하여 다른 페이지 컴포넌트와 동일한 export 형식으로 맞췄습니다.변경 이유
폴더 구조 및 컴포넌트 네이밍의 일관성을 유지하고 유지보수성을 향상시키기 위해 구조와 export 방식을 통일했습니다.
Summary by CodeRabbit
릴리스 노트
주의: 본 변경사항은 내부 코드 구조 개선이며, 사용자가 인지할 수 있는 기능상 변화는 없습니다. 404 페이지의 모든 기능은 동일하게 작동합니다.