Dev #169
Dev #169
Conversation
- next.config.mjs, tsconfig, svgr.d.ts 를 추가 혹은 수정하여 svgr 관련 설정 추가
- squoosh 를 사용하여 svg 형식을 사용할 필요가 없는 이미지 파일에 대해 webp 로 변환
Refector/zod 스키마 모듈화
- Next.js Image 컴포넌트의 priority 속성 추가하여 이미지 로딩 성능 개선
Feature/158 팀페이지 이미지 최적화
WalkthroughThe changes update the Next.js configuration to enhance SVG file handling through a new webpack function and disable certain ESLint TypeScript checks. An external file is introduced to centralize form validation schemas using Zod, which replaces local schema definitions in several pages. Additionally, image source fallbacks have been updated from SVG to WebP format, and TypeScript declarations for SVG imports have been added with the corresponding adjustments in tsconfig.json. A new development dependency for @svgr/webpack is now included. Changes
Sequence Diagram(s)sequenceDiagram
participant WF as Webpack Function
participant Loader as File Loader
participant SVGR as @svgr/webpack
Note over WF: Processing an SVG file
alt File has "?url" query
WF->>Loader: Forward SVG with ?url
else File without "?url"
WF->>SVGR: Process SVG as a React component
end
Suggested labels
Suggested reviewers
Poem
✨ 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:
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 (
|
✅ Deploy Preview for coworkers-colla ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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 comments (1)
src/components/Team/Members.tsx (1)
129-129:⚠️ Potential issueMissing WebP conversion for dialog image
While other Member icons have been converted to WebP format, this instance still uses SVG. For consistency and to fully realize the optimization benefits, this should also be converted to WebP.
- src={member.userImage ? member.userImage : '/icons/Member.svg'} + src={member.userImage ? member.userImage : '/icons/Member.webp'}
🧹 Nitpick comments (2)
next.config.mjs (2)
1-3: Consider if all ESLint disables are necessary.These directives disable important TypeScript safety checks across the entire file. Consider scoping them more narrowly to just the webpack configuration function if possible.
19-43: Good implementation of dual SVG handling.This webpack configuration enhances SVG file handling by:
- Treating SVGs with
?urlquery as simple image URLs- Converting other SVGs into React components with
@svgr/webpackThis approach gives developers flexibility to use SVGs both ways, which aligns with the PR objectives.
Consider translating the Korean comments to English for better maintainability if this is an international team.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/assets/images/Thumbnail_team.svgis excluded by!**/*.svg
📒 Files selected for processing (10)
next.config.mjs(2 hunks)package.json(1 hunks)src/components/Team/Members.tsx(2 hunks)src/constants/formSchemas/teamSchema.ts(1 hunks)src/pages/[id]/editteam/index.tsx(1 hunks)src/pages/[id]/index.tsx(2 hunks)src/pages/addteam/index.tsx(1 hunks)src/pages/attendteam/index.tsx(3 hunks)svgr.d.ts(1 hunks)tsconfig.json(1 hunks)
🔇 Additional comments (11)
package.json (1)
53-53: Added SVGR webpack dependency for improved SVG handling.The addition of
@svgr/webpackaligns perfectly with the PR objective to enhance SVG file handling by allowing SVGs to be treated either as React components or as image URLs.svgr.d.ts (2)
1-6: Well-designed TypeScript definition for SVG as React components.This module declaration properly types SVG imports as React functional components, enabling TypeScript to understand when SVGs are used as components. This supports the enhanced SVG handling capabilities mentioned in the PR objectives.
8-11: TypeScript definition added for URL-based SVG imports.This declaration supports the dual-mode SVG handling approach by defining the type for SVG files imported with the
?urlquery parameter. This enables both component-based and URL-based SVG usage patterns as described in the PR objectives.tsconfig.json (1)
25-25: Added SVG type declarations to TypeScript compilation.Including
svgr.d.tsin the TypeScript configuration properly integrates the SVG type declarations with your project, ensuring TypeScript recognizes both SVG import patterns.src/pages/[id]/index.tsx (3)
139-145: Improved image handling for team profile icon.The changes made here accomplish two important performance optimizations:
- Converting the team profile icon from SVG to WebP format
- Adding the
priorityattribute to preload this imageThese changes directly support the PR objectives of converting SVG icons to WebP for better performance and optimizing image loading with the priority attribute to improve Largest Contentful Paint metrics.
149-155: Converted thumbnail image from SVG to WebP format.The image source has been updated from SVG to WebP, aligning with the PR's goal of optimizing image loading and reducing file sizes.
162-167: Converted gear icon from SVG to WebP format.The settings icon has been updated from SVG to WebP format, consistent with the PR's initiative to optimize image delivery.
src/components/Team/Members.tsx (1)
75-75: Update to WebP format improves performanceThe fallback images have been changed from SVG to WebP format, which aligns with the PR objective of optimizing image loading.
Also applies to: 103-103
src/pages/[id]/editteam/index.tsx (1)
13-13: Good use of centralized schema validationImporting the schema from a centralized location rather than defining it locally improves code organization and maintainability.
src/pages/attendteam/index.tsx (1)
11-11: Good refactoring to use centralized schema definitionsImporting schemas from a central location and updating type definitions accordingly improves maintainability and ensures consistency across the application.
Also applies to: 22-22, 36-36
src/constants/formSchemas/teamSchema.ts (1)
1-14: Well-structured centralized validation schemasThe new file properly centralizes form validation schemas, which is a good practice for maintainability. The schemas provide appropriate validation rules with clear error messages.
I particularly like the error messages that provide clear guidance to users about the validation requirements.
| } from '@/components/common/Button/Button'; | ||
| import Input from '@/components/common/Input'; | ||
| import ProfileInput from '@/components/Team/ProfileInput'; | ||
| import { teamSchema } from '@/constants/formSchemas/teamSchema'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Good centralization of the validation schema.
Moving the teamSchema to a centralized location improves maintainability and consistency across the application.
Verify that the imported schema maintains the same validation rules as the previous local definition, particularly checking that:
nameis a non-empty stringimageis a non-empty string that is not equal to the default value ('/icons/BaseTeam_Icon.svg')
🏁 Script executed:
#!/bin/bash
# Check if the centralized schema maintains the same validation as before
cat src/constants/formSchemas/teamSchema.tsLength of output: 474
Attention: Update Required for Image Validation Rule
Good centralization of the schema has been achieved, and the validation for the name field (non-empty and limited to 30 characters) is intact. However, the current implementation for the image field only checks that it is a non-empty string. It does not enforce that the image value must not be equal to the default ('/icons/BaseTeam_Icon.svg'). Please update the teamSchema in src/constants/formSchemas/teamSchema.ts to add an explicit check (e.g., using .refine(...)) so that the default icon value is disallowed.
- File:
src/constants/formSchemas/teamSchema.ts - Action: Add validation to ensure
image !== '/icons/BaseTeam_Icon.svg'
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/teams/[id]/editteam/index.tsx (1)
13-13: Great refactoring to centralize schema definitions!Moving the schema definition to a centralized location is a solid architectural improvement. This approach:
- Improves maintainability by having validation rules defined in one place
- Ensures consistency across components
- Promotes reusability throughout the application
This change aligns with DRY principles and makes future schema updates more manageable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.json(1 hunks)src/pages/teams/[id]/editteam/index.tsx(1 hunks)src/pages/teams/[id]/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🔇 Additional comments (3)
src/pages/teams/[id]/index.tsx (3)
134-138: Good performance optimization with WebP and priority loading!Converting from SVG to WebP format for the team profile image fallback and adding the
priorityattribute are excellent optimizations. The WebP format provides better compression than SVG for photographic content, and thepriorityattribute will help improve Largest Contentful Paint (LCP) metrics by informing Next.js to preload this image.
144-148: Appropriate format conversion for thumbnail imageConverting the thumbnail image from SVG to WebP aligns with the overall optimization strategy. WebP typically offers better compression for complex images like thumbnails.
157-161: Good consistency in image format standardizationConverting the gear icon to WebP maintains consistency with the other image format changes and contributes to overall performance improvements on the page.
Dev
작업 내용
SVGR/webpack 설정 개선
기존 SVG 파일 로더 설정을 개선하여, 파일 사용 방식에 따라 두 가지로 분리하여 처리하도록 했습니다.
단순 이미지 URL로 사용됩니다. 예를 들어,
<img src={iconUrl} alt="icon" />처럼 CSS 배경 이미지나<img>태그에 직접 사용할 수 있습니다.@svgr/webpack로더를 통해 React 컴포넌트로 변환됩니다. 이를 통해 SVG 내부 속성을 조작하거나 동적으로 스타일 및 이벤트를 적용할 수 있습니다.팀페이지 불필요한 SVG 형식을 WebP로 변경
팀페이지에서 사용되던 일부 SVG 아이콘(예: BaseTeam_Icon, Gear, Member 등)을 WebP 포맷으로 변환하여 파일 크기를 줄이고 로딩 속도를 개선했습니다.
팀 페이지 이미지 로딩 최적화
Next.js의
next/image컴포넌트에priority속성을 적용하여, 주요 LCP 이미지가 프리로드되도록 개선했습니다.관련 이슈
Summary by CodeRabbit