✨ Feat: Not Found 추가 #145
✨ Feat: Not Found 추가 #145
Conversation
yulrang
requested review from
ChoYenii,
HaeJungg,
User850413 and
minkyung5x5
Walkthrough이번 변경 사항은 새로운 React 컴포넌트 Changes
Suggested reviewers
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
src/app/not-found.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't determine the plugin "react-hooks" uniquely.
Please remove the "plugins" setting from either config or remove either plugin installation. If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
🧹 Outside diff range and nitpick comments (2)
src/app/not-found.tsx (1)
59-69: 접근성 개선이 필요합니다.사용자 경험과 접근성을 높이기 위한 몇 가지 개선사항을 제안드립니다:
- 스크린 리더 사용자를 위한 aria-label 추가
- 키보드 네비게이션을 위한 포커스 스타일 추가
다음과 같이 개선해보세요:
<Link href="/" - className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold" + className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold focus:ring-2 focus:ring-blue-500 focus:outline-none" + aria-label="메인 페이지로 이동" >또한 페이지 전체에 대한 설명을 추가하는 것이 좋습니다:
- <div className="flex h-screen items-center justify-center"> + <div className="flex h-screen items-center justify-center" role="main" aria-label="404 페이지를 찾을 수 없습니다">tailwind.config.ts (1)
132-135: 웨이브 애니메이션 개선 제안현재 구현된 웨이브 애니메이션에 대해 다음과 같은 개선사항을 제안드립니다:
- 자연스러운 움직임을 위해
linear대신ease-in-out타이밍 함수 사용- 애니메이션 속도를 좀 더 부드럽게 조정 (0.8s → 1.5s)
- 성능 최적화를 위해
will-change: transform속성 추가다음과 같이 수정해보시는 것을 추천드립니다:
keyframes: { wave: { '0%': { transform: 'translate(0)' }, '100%': { transform: 'translate(-30%)' }, }, }, animation: { - wave: 'wave 0.8s linear infinite', + wave: 'wave 1.5s ease-in-out infinite', },추가로 wave 애니메이션이 적용되는 요소에 다음 클래스를 추가하시면 좋습니다:
.wave-container { will-change: transform; }Also applies to: 139-139
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/app/not-found.tsx(1 hunks)tailwind.config.ts(2 hunks)
🔇 Additional comments (2)
src/app/not-found.tsx (1)
1-3: 컴포넌트 선언이 잘 되어있습니다!
Next.js의 Link 컴포넌트를 적절히 사용하고 있으며, 컴포넌트 선언도 모범 사례를 따르고 있습니다.
tailwind.config.ts (1)
85-85: 404 폰트 사이즈 검토 필요
18.75rem(300px)의 큰 폰트 사이즈가 모바일 환경에서 적절한지 확인이 필요합니다.
다음 스크립트로 반응형 처리 여부를 확인해보시기 바랍니다:
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlnsXlink="http://www.w3.org/1999/xlink" | ||
| width="567" | ||
| height="300" | ||
| className="w-full" | ||
| viewBox="0 0 567 300" | ||
| > | ||
| <defs> | ||
| <path | ||
| id="wave" | ||
| d="m-115,50q38-30 75,0t75,0 75,0 75,0 | ||
| 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 75,0 | ||
| v20 h-1540 v-20" | ||
| className="translate-y-[110px]" | ||
| /> | ||
| <clipPath id="wave-clip-front"> | ||
| <use className="animate-wave" href="#wave" /> | ||
| <rect x="0" y="0" width="100%" height="180" /> | ||
| </clipPath> | ||
| <clipPath id="wave-clip-middle"> | ||
| <use className="animate-wave" href="#wave" /> | ||
| <rect x="0" y="180" width="100%" height="150" /> | ||
| </clipPath> | ||
| <linearGradient id="grad-front" x1="-22%" y1="0" x2="122%" y2="100%"> | ||
| <stop offset="0%" stop-color="#60A5FA" stop-opacity="1" /> | ||
| <stop offset="100%" stop-color="#3388FF" stop-opacity="1" /> | ||
| </linearGradient> | ||
| <text | ||
| id="clipped-wave" | ||
| x="0" | ||
| y="260" | ||
| font-family="Helvetica" | ||
| font-weight="bold" | ||
| font-size="18.75rem" | ||
| > | ||
| 404 | ||
| </text> | ||
| </defs> | ||
| <use | ||
| href="#clipped-wave" | ||
| clip-path="url(#wave-clip-middle)" | ||
| fill="url(#grad-front)" | ||
| fill-opacity="0.88" | ||
| /> | ||
| <use | ||
| href="#clipped-wave" | ||
| clip-path="url(#wave-clip-front)" | ||
| fill="url(#grad-front)" | ||
| fill-opacity="0.77" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
SVG 반응형 처리 개선이 필요합니다.
현재 구현에서 몇 가지 개선이 필요한 부분이 있습니다:
- SVG 크기가 고정값으로 설정되어 있어 작은 화면에서 문제가 될 수 있습니다.
- 폰트 크기가 하드코딩되어 있어 반응형 처리가 어렵습니다.
다음과 같이 개선해보시는 것은 어떨까요?
- width="567"
- height="300"
+ width="100%"
+ height="100%"
+ preserveAspectRatio="xMidYMid meet"- font-size="18.75rem"
+ className="text-[18.75rem] md:text-[12rem] sm:text-[8rem]"Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/app/not-found.tsx (1)
7-8: 테마 브레이크포인트 상수화 제안브레이크포인트 값을 상수로 분리하면 유지보수성이 향상될 것 같습니다.
다음과 같이 변경해보시는 것은 어떨까요?
+const MOBILE_BREAKPOINT = theme.breakpoints.md; export default function NotFound() { - const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.md})`); + const isMobile = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/app/not-found.tsx(1 hunks)
🔇 Additional comments (3)
src/app/not-found.tsx (3)
1-5: 의존성 및 클라이언트 설정이 적절합니다.
클라이언트 사이드 렌더링과 필요한 의존성들이 올바르게 설정되어 있습니다.
11-12: 레이아웃 구조가 잘 구현되어 있습니다.
반응형 디자인과 중앙 정렬이 적절하게 구현되어 있습니다.
13-64: 이전 리뷰의 SVG 반응형 관련 의견이 여전히 유효합니다.
SVG의 반응형 처리에 대한 이전 리뷰 코멘트가 아직 반영되지 않았습니다.
| <div className="flex w-full flex-col items-center gap-9 pb-10 md:absolute md:-bottom-10 md:translate-y-full"> | ||
| <p className="text-2xl font-semibold text-gray-900"> | ||
| "페이지를 찾을 수 없습니다. 😢" | ||
| </p> | ||
| <Link | ||
| href="/" | ||
| className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold" | ||
| > | ||
| 홈으로 가기 | ||
| </Link> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 개선이 필요합니다.
스크린 리더 사용자를 위한 접근성 개선이 필요합니다.
다음과 같이 개선해보시는 것은 어떨까요?
- <p className="text-2xl font-semibold text-gray-900">
+ <p className="text-2xl font-semibold text-gray-900" role="alert">
"페이지를 찾을 수 없습니다. 😢"
</p>
<Link
href="/"
className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold"
+ aria-label="홈페이지로 이동"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex w-full flex-col items-center gap-9 pb-10 md:absolute md:-bottom-10 md:translate-y-full"> | |
| <p className="text-2xl font-semibold text-gray-900"> | |
| "페이지를 찾을 수 없습니다. 😢" | |
| </p> | |
| <Link | |
| href="/" | |
| className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold" | |
| > | |
| 홈으로 가기 | |
| </Link> | |
| <div className="flex w-full flex-col items-center gap-9 pb-10 md:absolute md:-bottom-10 md:translate-y-full"> | |
| <p className="text-2xl font-semibold text-gray-900" role="alert"> | |
| "페이지를 찾을 수 없습니다. 😢" | |
| </p> | |
| <Link | |
| href="/" | |
| className="btn-filled flex h-11 items-center rounded-xl px-16 text-base font-semibold" | |
| aria-label="홈페이지로 이동" | |
| > | |
| 홈으로 가기 | |
| </Link> |
🔖 Issue Ticket
#135
✍️ Description
물결치는 404입니다....ㅠ
✅ Checklist
PR
Test
Summary by CodeRabbit
404를 추가했습니다.wave를 추가하여 페이지에 동적인 효과를 부여했습니다.