[YS-336] Emotion 제거 및 불필요 파일 삭제 #80
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough이번 PR은 Emotion 기반의 스타일링 설정을 제거하고, 관련 종속성과 타입 선언들을 정리하는 작업을 진행했습니다. 또한 기존의 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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: 2
🔭 Outside diff range comments (1)
src/components/Icon/icons/Flag.tsx (1)
5-24:⚠️ Potential issue파일명과 컴포넌트명 불일치 오류
이 파일의 이름은
Flag.tsx이지만 내부 컴포넌트는Bell로 명명되어 있습니다. 이는 혼란을 초래할 수 있는 불일치 오류입니다.파일명과 컴포넌트명을 일치시키거나, 올바른 아이콘 컴포넌트로 내용을 수정해야 합니다. 파일 내용이 실제로 Flag 아이콘을 표현하고 있다면:
-function Bell(props: SVGProps<SVGSVGElement>) { +function Flag(props: SVGProps<SVGSVGElement>) {그리고:
-export default Bell; +export default Flag;
🧹 Nitpick comments (1)
src/styles/global.css (1)
13-27: date picker 스타일 변수 위치 개선이 필요합니다.date picker(.rdp-root)의 CSS 변수들이 html 선택자 내부에 정의되어 있는데, 이는 일반적인 패턴과 다릅니다. 이러한 컴포넌트별 변수는 :root 레벨에 정의하는 것이 더 적절합니다.
:root { --font-family: 'Pretendard', 'Inter', sans-serif; --primary-mint: #26b5be; --primary-tinted: #dff9fa; + + /* Date picker variables */ + --rdp-cell-size: 4rem; + --rdp-day-height: 4rem; + --rdp-day-width: 4rem; + --rdp-day_button-height: 4rem; + --rdp-day_button-width: 4rem; + --rdp-accent-color: var(--primary-mint); + --rdp-accent-background-color: var(--primary-tinted); + --rdp-background-color: var(--primary-tinted); + --rdp-outline: 2px solid var(--rdp-accent-color); + --rdp-outline-selected: 0.1rem solid var(--primary-tinted); } html { background-color: #ffffff; color: #3c3f44; line-height: 1.4; font-size: 62.5%; /* 1rem = 10px */ - - .rdp-root { - --rdp-cell-size: 4rem; - - --rdp-day-height: 4rem; - --rdp-day-width: 4rem; - --rdp-day_button-height: 4rem; - --rdp-day_button-width: 4rem; - - --rdp-accent-color: var(--primary-mint); - - --rdp-accent-background-color: var(--primary-tinted); - --rdp-background-color: var(--primary-tinted); - --rdp-outline: 2px solid var(--rdp-accent-color); - --rdp-outline-selected: 0.1rem solid var(--primary-tinted); - } }
📜 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 (102)
next.config.mjs(0 hunks)package.json(0 hunks)src/app/edit/[post_id]/layout.tsx(0 hunks)src/app/example/example.css.ts(0 hunks)src/app/example/page.tsx(0 hunks)src/app/home/components/Banner/Banner.css.ts(0 hunks)src/app/home/components/Banner/Banner.tsx(1 hunks)src/app/home/hooks/useUserInfo.ts(1 hunks)src/app/join/JoinPage.styles.ts(0 hunks)src/app/join/components/EmailToast/EmailToast.css.ts(3 hunks)src/app/join/components/EmailToast/EmailToast.tsx(2 hunks)src/app/join/components/JoinCheckboxContainer/JoinCheckbox/JoinCheckbox.tsx(2 hunks)src/app/join/components/Researcher/JoinEmailStep/UnivAuthInput/AuthCodeInput/AuthCodeInput.styles.ts(0 hunks)src/app/layout.tsx(2 hunks)src/app/login/components/LoginCard/LoginCard.tsx(2 hunks)src/app/my-posts/components/Pagination/Pagination.tsx(1 hunks)src/app/my-posts/components/Table/Table.tsx(0 hunks)src/app/my-posts/layout.tsx(0 hunks)src/app/post/[post_id]/layout.tsx(0 hunks)src/app/providers.tsx(1 hunks)src/app/upload/components/DatePickerForm/DatePickerForm.css.ts(2 hunks)src/app/upload/layout.tsx(0 hunks)src/app/user/profile/components/UserInfoHeader/UserInfoHeader.tsx(3 hunks)src/components/Button/BackToTopButton/BackToTopButton.tsx(1 hunks)src/components/Footer/Footer.tsx(0 hunks)src/components/Header/Header.tsx(1 hunks)src/components/Header/Menu.tsx(0 hunks)src/components/Icon/icons/Airplane.tsx(2 hunks)src/components/Icon/icons/All.tsx(2 hunks)src/components/Icon/icons/AllEmpty.tsx(2 hunks)src/components/Icon/icons/Archive.tsx(2 hunks)src/components/Icon/icons/ArrowSorting.tsx(2 hunks)src/components/Icon/icons/BackToTopGroup.tsx(2 hunks)src/components/Icon/icons/BangRound.tsx(2 hunks)src/components/Icon/icons/Bell.tsx(2 hunks)src/components/Icon/icons/Building.tsx(2 hunks)src/components/Icon/icons/Bulb.tsx(2 hunks)src/components/Icon/icons/Calendar.tsx(2 hunks)src/components/Icon/icons/Category.tsx(2 hunks)src/components/Icon/icons/CheckRound.tsx(2 hunks)src/components/Icon/icons/CheckSquareEmpty.tsx(2 hunks)src/components/Icon/icons/CheckSquareFill.tsx(2 hunks)src/components/Icon/icons/CheckStar.tsx(2 hunks)src/components/Icon/icons/Chevron.tsx(2 hunks)src/components/Icon/icons/ChevronRound.tsx(2 hunks)src/components/Icon/icons/ChevronSquare.tsx(2 hunks)src/components/Icon/icons/CloseRound.tsx(2 hunks)src/components/Icon/icons/Copy.tsx(2 hunks)src/components/Icon/icons/Cup.tsx(2 hunks)src/components/Icon/icons/Dislike.tsx(2 hunks)src/components/Icon/icons/Export.tsx(2 hunks)src/components/Icon/icons/Eye.tsx(2 hunks)src/components/Icon/icons/EyeTwo.tsx(2 hunks)src/components/Icon/icons/Filter.tsx(2 hunks)src/components/Icon/icons/FilterSquare.tsx(2 hunks)src/components/Icon/icons/FilterThree.tsx(2 hunks)src/components/Icon/icons/FilterTwo.tsx(2 hunks)src/components/Icon/icons/Flag.tsx(2 hunks)src/components/Icon/icons/Heart.tsx(2 hunks)src/components/Icon/icons/Home.tsx(2 hunks)src/components/Icon/icons/Image.tsx(2 hunks)src/components/Icon/icons/ImageAdd.tsx(2 hunks)src/components/Icon/icons/Information.tsx(3 hunks)src/components/Icon/icons/Like.tsx(2 hunks)src/components/Icon/icons/Link.tsx(2 hunks)src/components/Icon/icons/ListSquare.tsx(2 hunks)src/components/Icon/icons/Maximize.tsx(2 hunks)src/components/Icon/icons/MenuDots.tsx(2 hunks)src/components/Icon/icons/Minimize.tsx(2 hunks)src/components/Icon/icons/MinusRound.tsx(2 hunks)src/components/Icon/icons/MoreRound.tsx(2 hunks)src/components/Icon/icons/My.tsx(2 hunks)src/components/Icon/icons/MyRound.tsx(2 hunks)src/components/Icon/icons/Path.tsx(2 hunks)src/components/Icon/icons/Pen.tsx(2 hunks)src/components/Icon/icons/PenSquare.tsx(2 hunks)src/components/Icon/icons/PlusRound.tsx(2 hunks)src/components/Icon/icons/Reset.tsx(2 hunks)src/components/Icon/icons/SearchRound.tsx(2 hunks)src/components/Icon/icons/SearchVersionTwo.tsx(2 hunks)src/components/Icon/icons/Time.tsx(2 hunks)src/components/Icon/icons/Timer.tsx(2 hunks)src/components/Icon/icons/ToggleOff.tsx(2 hunks)src/components/Icon/icons/ToggleOn.tsx(2 hunks)src/components/Icon/icons/Trash.tsx(2 hunks)src/components/Icon/icons/TriangleArrow.tsx(2 hunks)src/components/Icon/icons/X.tsx(2 hunks)src/components/Icon/index.tsx(0 hunks)src/components/Modal/ConfirmModal/ConfirmModal.tsx(0 hunks)src/components/layout/DefaultLayout/DefaultLayout.tsx(0 hunks)src/components/layout/UserLayout/UserLayout.tsx(0 hunks)src/fonts/local-font.ts(1 hunks)src/hooks/useSessionStorage.ts(1 hunks)src/styles/emotion.d.ts(0 hunks)src/styles/fonts.ts(0 hunks)src/styles/global.css(1 hunks)src/styles/global.ts(0 hunks)src/styles/layers.css.ts(1 hunks)src/styles/reset.css.ts(1 hunks)src/styles/reset.ts(0 hunks)src/styles/theme.ts(0 hunks)tsconfig.json(0 hunks)
💤 Files with no reviewable changes (24)
- src/app/upload/layout.tsx
- src/components/layout/DefaultLayout/DefaultLayout.tsx
- src/components/Modal/ConfirmModal/ConfirmModal.tsx
- src/app/edit/[post_id]/layout.tsx
- tsconfig.json
- src/components/Footer/Footer.tsx
- src/components/Icon/index.tsx
- src/components/Header/Menu.tsx
- src/components/layout/UserLayout/UserLayout.tsx
- src/app/post/[post_id]/layout.tsx
- next.config.mjs
- src/app/home/components/Banner/Banner.css.ts
- src/styles/theme.ts
- src/styles/global.ts
- src/app/my-posts/components/Table/Table.tsx
- src/app/example/page.tsx
- src/styles/reset.ts
- src/app/join/components/Researcher/JoinEmailStep/UnivAuthInput/AuthCodeInput/AuthCodeInput.styles.ts
- src/styles/fonts.ts
- src/app/example/example.css.ts
- src/app/join/JoinPage.styles.ts
- package.json
- src/app/my-posts/layout.tsx
- src/styles/emotion.d.ts
✅ Files skipped from review due to trivial changes (3)
- src/hooks/useSessionStorage.ts
- src/app/home/hooks/useUserInfo.ts
- src/components/Button/BackToTopButton/BackToTopButton.tsx
🔇 Additional comments (129)
src/app/my-posts/components/Pagination/Pagination.tsx (1)
1-1: 'use client' 디렉티브 제거에 대한 검토 필요'use client' 디렉티브를 주석 처리하면 이 컴포넌트가 서버 사이드에서 렌더링될 수 있습니다. 이 변경이 의도적인지 확인하고, 다음 사항을 고려해 주세요:
- 이 컴포넌트가 클라이언트 측 기능(예: 이벤트 핸들러, useState, useEffect 등)에 의존하지 않는지 확인
- 서버 컴포넌트로 변경했을 때 발생할 수 있는 부작용 검토
- 관련된 다른 파일들(src/app/my-posts/layout.tsx 등)에서도 일관된 방식으로 변경되었는지 확인
PR 목표에 따르면 이것은 의도적인 변경으로 보이지만, 렌더링 동작에 영향을 미치므로 주의가 필요합니다.
src/styles/layers.css.ts (1)
1-3: 새로운 스타일링 시스템의 기초 설정vanilla-extract의 layer 기능을 활용하여 'reset' 레이어를 정의한 코드가 잘 구성되어 있습니다. 이는 Emotion 제거 후 새로운 스타일링 시스템의 기반을 제공합니다.
src/fonts/local-font.ts (1)
36-36: 폰트 로딩 최적화 적용
display: 'swap'속성 추가는 사용자 경험을 개선하는 좋은 최적화입니다. 이 설정으로 사용자 지정 폰트가 로드되는 동안 대체 폰트가 표시되므로 텍스트가 보이지 않거나 깜빡이는 현상을 방지할 수 있습니다.src/components/Icon/icons/X.tsx (1)
3-3: Emotion에서 vanilla-extract로의 마이그레이션theme 모듈에서 colors 모듈로 변경하여 Emotion 의존성을 제거하는 적절한 리팩토링입니다. 기존 기능은 유지하면서 props.color 우선 적용 로직도 정상적으로 보존되었습니다.
Also applies to: 17-17
src/components/Icon/icons/Reset.tsx (1)
3-3: Emotion에서 vanilla-extract로의 마이그레이션theme 모듈에서 colors 모듈로 변경하여 Emotion 의존성을 제거하는 적절한 리팩토링입니다. 다른 아이콘 컴포넌트들과 일관된 패턴으로 변경되었으며, props.color 우선 적용 로직이 올바르게 유지되었습니다.
Also applies to: 17-17
src/components/Icon/icons/My.tsx (2)
3-3: Emotion 라이브러리 제거에 따른 import 변경
theme대신colors모듈을 직접 가져오는 방식으로 변경되었습니다. 이는 PR 목표에 부합하는 변경사항입니다.
17-17: 색상 참조 방식 변경이 적절히 적용됨
theme.colors.icon03에서colors.icon03으로 변경되어 스타일 시스템이 일관되게 업데이트되었습니다.Also applies to: 24-24
src/components/Icon/icons/ToggleOn.tsx (2)
3-3: Emotion 라이브러리 제거에 따른 import 변경
theme대신colors모듈을 직접 가져오는 방식으로 변경되었습니다. 이는 PR 목표에 부합하는 변경사항입니다.
17-17: 색상 참조 방식 변경이 적절히 적용됨
theme.colors.primaryMint에서colors.primaryMint으로 변경되어 스타일 시스템이 일관되게 업데이트되었습니다.src/components/Icon/icons/Time.tsx (2)
3-3: Emotion 라이브러리 제거에 따른 import 변경
theme대신colors모듈을 직접 가져오는 방식으로 변경되었습니다. 이는 PR 목표에 부합하는 변경사항입니다.
17-17: 색상 참조 방식 변경이 적절히 적용됨
theme.colors.icon03에서colors.icon03으로 변경되어 스타일 시스템이 일관되게 업데이트되었습니다.src/components/Icon/icons/Timer.tsx (2)
3-3: Emotion 라이브러리 제거에 따른 import 변경
theme대신colors모듈을 직접 가져오는 방식으로 변경되었습니다. 이는 PR 목표에 부합하는 변경사항입니다.
17-17: 색상 참조 방식 변경이 적절히 적용됨
theme.colors.icon03에서colors.icon03으로 변경되어 스타일 시스템이 일관되게 업데이트되었습니다.src/components/Icon/icons/Airplane.tsx (1)
3-3: Emotion 제거를 위한 테마 모듈 대체이 변경은 PR의 목표에 부합하며, Emotion의 테마 시스템을 제거하고 직접적인 colors 모듈로 교체하는 접근법이 일관성 있게 적용되었습니다. 색상 참조 방식이
theme.colors.icon03에서colors.icon03으로 변경되었습니다.Also applies to: 17-17
src/components/Icon/icons/ChevronRound.tsx (1)
3-3: 테마 모듈 대체 승인Emotion 라이브러리 제거 작업의 일환으로
theme모듈에서colors모듈로의 전환이 일관되게 이루어졌습니다. 이 접근 방식은 PR 목표에 잘 부합하며 코드베이스의 일관성을 유지합니다.Also applies to: 17-17
src/components/Icon/icons/Chevron.tsx (1)
3-3: 일관된 테마 모듈 교체 패턴다른 아이콘 컴포넌트들과 마찬가지로
theme모듈에서colors모듈로의 전환이 적절하게 이루어졌습니다. 이 변경은 Emotion 제거 작업의 일부로서 일관된 색상 관리 방식을 확립하는 데 기여합니다.Also applies to: 17-17
src/app/home/components/Banner/Banner.tsx (1)
94-96: 이미지 컴포넌트 속성 추가이미지 컴포넌트에 명시적인 width, height 속성과 스타일이 추가되었습니다. 이는 관련 CSS 파일(Banner.css.ts)에서 제거된 width: '100%', height: 'auto' 스타일 속성을 대체하는 것으로 보입니다. 이러한 변경은 Emotion 스타일링을 제거하면서 이미지 렌더링이 일관되게 유지되도록 합니다.
그러나 다음 사항을 확인해 주세요:
- width: 1000과 height: 80이 원래 의도했던 이미지 비율과 일치하는지 확인
- 모바일 환경에서도 이 설정이 적절한지 테스트
Also applies to: 103-105, 112-114, 121-123
src/components/Icon/icons/MoreRound.tsx (2)
3-3: theme에서 colors로의 임포트 변경이 잘 이루어졌습니다.Emotion 제거 작업의 일환으로
theme에서colors로 임포트를 변경한 것이 적절합니다.
17-17: colors 모듈 참조로 변경되었습니다.
theme.colors.icon03에서colors.icon03로 변경되어 색상 참조 방식이 단순화되었습니다.src/components/Icon/icons/Export.tsx (2)
3-3: theme에서 colors로의 임포트 변경이 잘 이루어졌습니다.Emotion 제거 작업의 일환으로
theme에서colors로 임포트를 변경한 것이 적절합니다.
17-17: colors 모듈 참조로 변경되었습니다.
theme.colors.icon03에서colors.icon03로 변경되어 색상 참조 방식이 단순화되었습니다.src/components/Icon/icons/CheckSquareFill.tsx (2)
3-3: theme에서 colors로의 임포트 변경이 잘 이루어졌습니다.Emotion 제거 작업의 일환으로
theme에서colors로 임포트를 변경한 것이 적절합니다.
17-17: colors 모듈 참조로 변경되었습니다.
theme.colors.icon03에서colors.icon03로 변경되어 색상 참조 방식이 단순화되었습니다.src/app/upload/components/DatePickerForm/DatePickerForm.css.ts (2)
205-209: rdp-range_middle에 대한 스타일이 잘 추가되었습니다.날짜 선택 범위의 중간 부분에 대한 스타일링이 적절하게 추가되었습니다. 너비와 높이가 일관되게 설정되었고, 배경색이
colors.primaryTinted로 설정되어 시각적 일관성을 유지합니다.
224-227: rdp-range_end에 대한 스타일이 잘 추가되었습니다.날짜 선택 범위의 끝 부분에 대한 스타일링이 적절하게 추가되었습니다.
rdp-range_start와 일관되게 동일한 배경색과 텍스트 색상을 사용하여 시각적 통일성을 제공합니다.src/components/Icon/icons/Archive.tsx (1)
3-3: 테마 기반 스타일에서 직접적인 색상 참조로 전환되었습니다.Emotion 라이브러리의 테마 기능 사용을 제거하고
@/styles/colors에서 직접 색상을 가져오는 방식으로 변경되었습니다. 이는 PR 목표에 부합하는 변경사항입니다.Also applies to: 17-17
src/components/Icon/icons/TriangleArrow.tsx (1)
3-3: 테마 기반 색상 참조가 직접적인 색상 모듈 참조로 변경되었습니다.Emotion 테마 시스템에서 별도의 색상 모듈로 전환되어,
stroke와fill속성 모두 일관되게 수정되었습니다. 이는 PR 목표인 Emotion 제거 작업의 일부입니다.Also applies to: 17-18
src/components/Icon/icons/Maximize.tsx (1)
3-3: 테마에서 색상 모듈로 변경되었습니다.Emotion의 테마 시스템 대신 직접 색상 모듈에서 값을 가져오도록 변경되었습니다. 이는 프로젝트 전반에 걸쳐 일관된 변경 패턴을 따르고 있습니다.
Also applies to: 20-20
src/components/Icon/icons/Flag.tsx (1)
3-3: 테마 대신 색상 모듈을 사용하도록 변경되었습니다.Emotion 테마 시스템에서 직접 색상 모듈로 변경되었습니다. 이는 PR 목표에 맞게 정확히 수정되었습니다.
Also applies to: 17-17
src/app/join/components/EmailToast/EmailToast.tsx (1)
8-8: 색상 참조 방식 변경이 잘 되었습니다!Emotion의 theme에서 직접 colors 모듈로 변경한 것이 PR의 목적에 잘 맞습니다. 색상 참조 방식을 일관되게 변경하여 코드의 일관성을 유지했습니다.
Also applies to: 28-30
src/components/Icon/icons/PlusRound.tsx (1)
3-3: 색상 참조 방식이 일관되게 변경되었습니다.Emotion의 theme 대신 colors 모듈을 사용하는 방식으로 일관성 있게 변경되었습니다. 아이콘 컴포넌트에서도 동일한 패턴을 적용해 코드베이스 전체의 일관성을 유지한 좋은 접근법입니다.
Also applies to: 17-17
src/components/Header/Header.tsx (1)
19-27: Image 컴포넌트 개선이 잘 되었습니다.로고 이미지에 다음과 같은 좋은 개선 사항이 적용되었습니다:
priority속성을 추가하여 로고가 우선적으로 로드되도록 했습니다.- style 속성을 통해
width: 'auto', height: 'auto'를 설정하여 반응형 동작을 개선했습니다.- 컴포넌트를 여러 줄로 나누어 가독성을 높였습니다.
이러한 변경은 사용자 경험을 향상시키는 좋은 개선입니다.
src/app/providers.tsx (1)
29-30: Emotion Provider 제거가 성공적으로 이루어졌습니다.Emotion의 ThemeProvider와 Global 컴포넌트를 제거하여 프로바이더 구조가 간소화되었습니다. 이는 PR의 주요 목적인 Emotion 제거에 핵심적인 변경사항입니다.
구조가 단순해져서 코드의 가독성이 향상되었고, PR 설명에 언급된 vanilla-extract와 global.css로의 전환을 위한 중요한 단계입니다.
src/components/Icon/icons/CloseRound.tsx (2)
3-3: theme 대신 colors를 가져오는 방식으로 변경되었습니다.Emotion 라이브러리를 제거하는 PR 목표에 맞게
@/styles/theme에서theme을 가져오는 대신@/styles/colors에서colors를 직접 가져오는 방식으로 변경되었습니다.
17-17: 색상 참조 방식이 개선되었습니다.기존
theme.colors.icon03및theme.colors.field01대신colors.icon03및colors.field01로 직접 색상을 참조하도록 변경되었습니다. 이 변경은 Emotion 의존성을 제거하면서도 동일한 기능을 유지합니다.Also applies to: 24-24
src/components/Icon/icons/AllEmpty.tsx (2)
3-3: theme 대신 colors 모듈을 사용하도록 변경되었습니다.Emotion 라이브러리 제거 작업의 일환으로
@/styles/theme에서theme을 가져오는 대신@/styles/colors에서colors를 직접 가져오는 방식으로 변경되었습니다.
19-19: 색상 참조 방식이 개선되었습니다.기존
theme.colors.icon03대신colors.icon03로 직접 색상을 참조하도록 변경되었습니다. 이 변경으로 Emotion 의존성을 제거하면서도 동일한 시각적 결과를 유지합니다.src/components/Icon/icons/ChevronSquare.tsx (2)
3-3: theme 대신 colors 모듈을 사용하도록 변경되었습니다.Emotion 라이브러리 제거 작업의 일환으로
@/styles/theme에서theme을 가져오는 대신@/styles/colors에서colors를 직접 가져오는 방식으로 변경되었습니다.
17-18: 색상 참조 방식이 개선되었습니다.SVG 요소의 stroke 및 fill 속성에서 사용되는 색상 참조가 개선되었습니다:
theme.colors.icon03→colors.icon03theme.colors.icon01→colors.icon01이 변경은 Emotion 의존성을 제거하면서도 동일한 시각적 결과를 유지합니다.
Also applies to: 25-25
src/components/Icon/icons/BackToTopGroup.tsx (2)
3-3: theme 대신 colors 모듈을 사용하도록 변경되었습니다.Emotion 라이브러리 제거 작업의 일환으로
@/styles/theme에서theme을 가져오는 대신@/styles/colors에서colors를 직접 가져오는 방식으로 변경되었습니다.
17-17: 색상 참조 방식이 개선되었습니다.SVG path 요소의 stroke 속성에서 사용되는 색상 참조가 개선되었습니다:
theme.colors.icon03→colors.icon03이 변경으로 Emotion 의존성을 제거하면서도 동일한 시각적 결과를 유지합니다.
Also applies to: 24-24
src/components/Icon/icons/PenSquare.tsx (1)
3-3: 테마에서 색상 모듈로 변경한 접근 방식이 일관적입니다.Emotion 라이브러리 제거 목표에 맞게
theme대신colors모듈을 사용하도록 변경되었습니다. 이제 아이콘 색상이 중앙 집중식 색상 관리 시스템을 통해 제공되며, 동일한 시각적 결과를 유지하면서 코드 의존성이 단순화되었습니다.Also applies to: 17-17
src/components/Icon/icons/Heart.tsx (1)
3-3: 일관된 색상 관리 접근 방식으로 변경되었습니다.
theme객체에서colors모듈로의 변경은 Emotion 라이브러리 제거 목표에 부합합니다. 이 변경으로 색상 참조가 더 직접적이고 독립적으로 이루어지며, 스타일링 시스템의 전반적인 단순화가 이루어졌습니다.Also applies to: 17-17
src/components/Icon/icons/CheckRound.tsx (1)
3-3: 테마 의존성이 제거되고 색상 모듈로 전환되었습니다.Emotion 기반 테마에서 독립적인 색상 모듈로 전환한 변경사항입니다. 이는 PR 목표에 부합하며, 아이콘 컴포넌트 전반에 걸쳐 일관된 색상 관리 방식을 도입했습니다. 시각적 결과는 동일하게 유지되면서 코드 구조가 개선되었습니다.
Also applies to: 17-17
src/components/Icon/icons/Home.tsx (1)
3-3: 색상 참조 방식의 일관된 변경이 이루어졌습니다.다른 아이콘 컴포넌트와 마찬가지로, Emotion의
theme객체에서colors모듈로 변경되었습니다. 이러한 일관된 변경은 코드베이스 전반의 스타일링 시스템을 단순화하고, 색상 관리를 중앙화하는 데 기여합니다. 기능적으로 동일하게 유지되면서 의존성이 줄어들었습니다.Also applies to: 17-17
src/components/Icon/icons/Copy.tsx (2)
3-3: 테마에서 색상 모듈로의 변경이 잘 이루어졌습니다.Emotion 제거 작업의 일환으로 theme 대신 colors 모듈을 직접 가져오도록 변경한 것이 적절합니다. 이로써 스타일링 종속성이 줄어들었습니다.
17-17: 색상 참조 방식의 변경이 올바르게 적용되었습니다.theme.colors.icon03에서 colors.icon03으로 변경하여 새로운 스타일링 접근 방식과 일관성을 유지했습니다.
src/components/Icon/icons/Trash.tsx (2)
3-3: 테마에서 색상 모듈로의 변경이 잘 이루어졌습니다.Emotion 제거 작업에 맞게 theme 대신 colors 모듈을 직접 가져오도록 변경되었습니다. 이는 PR 목표에 잘 부합합니다.
17-17: 색상 참조 방식이 일관되게 업데이트되었습니다.SVG 경로의 fill 속성에서 theme.colors.icon03에서 colors.icon03으로 변경된 부분이 두 곳 모두 정확하게 적용되었습니다.
Also applies to: 24-24
src/components/Icon/icons/ListSquare.tsx (2)
3-3: 테마에서 색상 모듈로의 변경이 올바르게 적용되었습니다.PR 목표에 따라 테마 기반 스타일링에서 직접적인 색상 모듈 임포트로 전환하는 작업이 잘 이루어졌습니다.
17-17: 색상 참조 방식의 일관된 업데이트가 확인됩니다.fill 속성에서 theme.colors.icon03에서 colors.icon03으로 변경한 것이 다른 아이콘 컴포넌트들과 일관성을 유지하고 있습니다.
src/components/Icon/icons/CheckStar.tsx (2)
3-3: 테마 임포트에서 색상 모듈로의 변경이 성공적으로 이루어졌습니다.다른 아이콘 컴포넌트들과 마찬가지로 Emotion 기반 테마에서 독립된 색상 모듈로의 전환이 일관되게 적용되었습니다.
17-17: 색상 참조 방식의 변경이 정확하게 적용되었습니다.SVG 경로의 fill 속성에서 theme.colors.icon03 참조를 colors.icon03으로 대체하여 새로운 스타일링 방식을 성공적으로 적용했습니다.
src/components/Icon/icons/EyeTwo.tsx (1)
3-3: Emotion 라이브러리에서 직접 색상 모듈로 변경한 것이 좋습니다.
theme대신colors를 직접 가져와서 사용하는 방식으로 변경되었습니다. 이 변경은 Emotion 라이브러리를 제거하고 색상 관리를 단순화하는 PR의 목적에 부합합니다.Also applies to: 17-17
src/components/Icon/icons/MinusRound.tsx (1)
3-3: 테마 기반 스타일링에서 직접 색상 참조로 잘 전환되었습니다.
theme.colors.icon03에서colors.icon03으로 변경하여 Emotion 의존성을 제거하였습니다. 이 변경은 일관된 색상 관리 방식으로의 전환을 잘 보여줍니다.Also applies to: 17-17
src/components/Icon/icons/Calendar.tsx (1)
3-3: 모든 색상 참조가 일관되게 업데이트되었습니다.Calendar 컴포넌트에서 여러 SVG 요소(stroke, fill)의 색상 참조를 모두
theme.colors에서colors로 변경했습니다. 이러한 일관된 변경은 코드베이스의 스타일 시스템을 간소화하는 데 도움이 됩니다.Also applies to: 17-19, 23-24, 29-30, 37-38, 42-43
src/components/Icon/icons/Like.tsx (1)
3-3: 아이콘 색상 참조 방식의 일관성 있는 변경이 이루어졌습니다.여러 path 요소의 fill 속성을
theme.colors.icon03에서colors.icon03으로 일관되게 변경했습니다. 이러한 변경은 Emotion 라이브러리 제거 작업의 일환으로 적절히 수행되었습니다.Also applies to: 17-17, 24-24
src/app/join/components/EmailToast/EmailToast.css.ts (2)
5-5: 적절한 zIndex 모듈 임포트 추가Emotion 제거 작업의 일환으로 theme 객체 대신 개별 스타일 모듈을 사용하는 방식으로 잘 전환되었습니다.
18-18: theme 참조에서 직접 zIndex 모듈 참조로 전환 완료기존 theme.zIndex 참조 방식에서 직접 zIndex 모듈을 참조하는 방식으로 일관성 있게 수정되었습니다. 이는 PR 목표인 Emotion 제거와 일치하며, vanilla-extract 기반 스타일링 시스템으로의 마이그레이션을 잘 완료했습니다.
Also applies to: 36-36
src/components/Icon/icons/FilterSquare.tsx (2)
3-3: theme에서 colors 모듈로 임포트 변경Emotion 제거 작업에 따라 theme 객체 대신 colors 모듈을 직접 임포트하는 방식으로 적절하게 변경되었습니다.
17-17: 아이콘 색상 참조 방식 업데이트
theme.colors.icon03에서colors.icon03으로 색상 참조 방식이 일관되게 변경되었습니다. 이는 Emotion 제거 작업의 목표와 일치하며, 다른 아이콘 컴포넌트들과의 일관성을 유지합니다.src/components/Icon/icons/SearchVersionTwo.tsx (2)
3-3: theme에서 colors 모듈로 임포트 변경Emotion 제거 작업에 따라 theme 객체 대신 colors 모듈을 직접 임포트하는 방식으로 적절하게 변경되었습니다.
17-17: 아이콘 색상 참조 방식 업데이트
theme.colors.icon03에서colors.icon03으로 색상 참조 방식이 일관되게 변경되었습니다. 두 path 요소 모두에서 동일한 패턴으로 수정되어 일관성이 유지되었습니다.Also applies to: 24-24
src/components/Icon/icons/CheckSquareEmpty.tsx (2)
3-3: theme에서 colors 모듈로 임포트 변경Emotion 제거 작업에 따라 theme 객체 대신 colors 모듈을 직접 임포트하는 방식으로 적절하게 변경되었습니다.
24-24: 아이콘 색상 참조 방식 업데이트
theme.colors.icon03에서colors.icon03으로 색상 참조 방식이 일관되게 변경되었습니다. 이는 다른 아이콘 컴포넌트들과 동일한 패턴으로 수정되어 코드베이스 전반의 일관성을 유지합니다.src/components/Icon/icons/ToggleOff.tsx (2)
3-3: color 모듈로 스타일링이 전환되었습니다.Emotion을 제거하는 과정에서 theme 대신 colors 모듈을 사용하도록 변경되었습니다. 이는 PR 목표와 일치하며 스타일링을 더욱 명확하게 관리할 수 있게 해줍니다.
17-17: colors 모듈 참조 방식으로 업데이트되었습니다.
theme.colors.field05에서colors.field05로 변경되어 일관된 스타일 관리가 가능해졌습니다. props.color를 우선적으로 사용하는 로직은 그대로 유지되어 컴포넌트의 유연성도 보존되었습니다.src/components/Icon/icons/Information.tsx (2)
3-3: theme에서 colors 모듈로 전환되었습니다.Emotion 라이브러리 제거 작업의 일환으로 theme 대신 colors 모듈을 직접 임포트하도록 변경되었습니다. 이는 스타일 관리 방식의 일관성을 높이는 변경사항입니다.
15-15: 아이콘 색상 참조 방식이 업데이트되었습니다.SVG 엘리먼트의 stroke와 fill 속성이
theme.colors.icon03에서colors.icon03로 변경되었습니다. 모든 색상 참조가 일관되게 업데이트되어 SVG 렌더링에 문제가 없을 것으로 보입니다.Also applies to: 18-18, 28-28
src/components/Icon/icons/SearchRound.tsx (2)
3-3: theme에서 colors 모듈로 임포트 변경되었습니다.Emotion 제거 작업에 맞춰 theme 대신 colors 모듈을 직접 사용하도록 변경되었습니다. 이는 스타일 시스템을 단순화하고 일관성을 유지하는 데 도움이 됩니다.
17-17: SVG 경로의 색상 참조가 업데이트되었습니다.두 개의 path 엘리먼트에서
theme.colors.icon03에서colors.icon03로 fill 속성이 변경되었습니다. props.color를 우선적으로 사용하는 패턴이 유지되어 컴포넌트의 유연성도 보존되었습니다.Also applies to: 24-24
src/components/Icon/icons/Bell.tsx (2)
3-3: 스타일 모듈 참조 방식이 변경되었습니다.Emotion 제거 과정에서 theme 대신 colors 모듈을 직접 임포트하도록 변경되었습니다. 이는 다른 아이콘 컴포넌트들과 일관된 방식으로 처리되어 있습니다.
17-17: SVG 경로의 색상 참조가 업데이트되었습니다.두 개의 path 엘리먼트에서 fill 속성이
theme.colors.icon03에서colors.icon03로 변경되었습니다. 모든 아이콘 컴포넌트에서 동일한 패턴으로 변경되어 있어 일관성이 유지되고 있습니다.Also applies to: 24-24
src/components/Icon/icons/Minimize.tsx (2)
3-3: theme import에서 colors import로 변경했습니다.Emotion 라이브러리 제거에 따라 theme에서 직접 colors를 import하는 방식으로 변경되었습니다. 이는 PR 목표에 맞게 잘 변경되었습니다.
18-18: SVG 경로의 fill 속성이 올바르게, colors.icon03으로 변경됨.theme.colors.icon03에서 colors.icon03으로 참조를 변경한 것은 잘 되었습니다. props.color를 우선적으로 확인하는 논리는 유지되어 컴포넌트의 유연성도 잘 보존되었습니다.
src/components/Icon/icons/Filter.tsx (2)
3-3: theme import에서 colors import로 변경했습니다.Emotion 라이브러리 제거에 따라 theme에서 직접 colors를 import하는 방식으로 변경되었습니다. 이는 PR 목표에 맞게 잘 변경되었습니다.
17-17: 여러 SVG 경로의 fill 속성이 일관되게 colors.icon03으로 변경됨.모든 SVG 경로에서 theme.colors.icon03에서 colors.icon03으로 참조를 변경한 것은 잘 되었습니다. 모든 경로에 대해 일관성 있게 변경되었고, props.color를 우선적으로 확인하는 논리도 유지되어 컴포넌트의 유연성이 보존되었습니다.
Also applies to: 24-24, 31-31, 38-38, 45-45, 52-52
src/app/login/components/LoginCard/LoginCard.tsx (2)
18-18: theme import에서 colors import로 변경했습니다.Emotion 라이브러리 제거에 따라 theme에서 직접 colors를 import하는 방식으로 변경되었습니다. 이는 PR 목표에 맞게 잘 변경되었습니다.
56-58: 인라인 스타일 변수 할당이 적절하게 colors로 업데이트됨.vanilla-extract의
assignInlineVars를 사용하는 부분에서 theme.colors 대신 직접 colors를 참조하도록 변경되었습니다. 조건부 로직도 그대로 유지되어 기능상 차이 없이 잘 마이그레이션되었습니다.src/components/Icon/icons/MenuDots.tsx (2)
3-3: theme import에서 colors import로 변경했습니다.Emotion 라이브러리 제거에 따라 theme에서 직접 colors를 import하는 방식으로 변경되었습니다. 이는 PR 목표에 맞게 잘 변경되었습니다.
19-19: SVG 경로의 fill 속성이 일관되게 colors.text03으로 변경됨.모든 SVG 경로에서 theme.colors.text03에서 colors.text03으로 참조를 변경한 것은 잘 되었습니다. 모든 경로에 대해 일관성 있게 변경되었고, props.color를 우선적으로 확인하는 논리도 유지되어 컴포넌트의 유연성이 보존되었습니다.
Also applies to: 23-23, 27-27
src/components/Icon/icons/FilterTwo.tsx (2)
3-3: Import 변경이 올바르게 처리되었습니다.Emotion 제거 작업의 일환으로
theme대신colors를 직접 가져오도록 변경했습니다. 이는 PR 목표와 일치합니다.
17-17: 색상 참조 변경이 올바르게 적용되었습니다.
theme.colors.icon03에서colors.icon03로 변경하여 새로운 색상 모듈 구조에 맞게 조정되었습니다.src/components/Icon/icons/Pen.tsx (2)
3-3: Import 변경이 올바르게 처리되었습니다.Emotion 의존성 제거를 위해
theme대신colors를 직접 가져오도록 변경되었습니다.
17-17: 세 개의 SVG path에서 색상 참조가 일관되게 변경되었습니다.모든 SVG path 요소에서
theme.colors.icon03을colors.icon03으로 변경하여 새로운 색상 구조에 맞게 조정했습니다. 일관된 변경이 이루어졌습니다.Also applies to: 24-24, 31-31
src/components/Icon/icons/Path.tsx (2)
3-3: Import 변경이 올바르게 처리되었습니다.Emotion 제거 작업의 일환으로
theme대신colors를 직접 가져오도록 변경했습니다.
17-17: SVG path 요소의 색상 참조가 적절히 변경되었습니다.두 개의 path 요소에서
theme.colors.icon03을colors.icon03으로 변경하여 새로운 색상 참조 방식을 일관되게 적용했습니다.Also applies to: 24-24
src/app/join/components/JoinCheckboxContainer/JoinCheckbox/JoinCheckbox.tsx (2)
13-13: Import 변경이 올바르게 처리되었습니다.Emotion 의존성 제거를 위해
theme대신colors를 직접 가져오도록 변경했습니다.
44-44: 체크박스 아이콘의 색상 참조가 적절히 변경되었습니다.
theme.colors.primaryMint에서colors.primaryMint로 변경하여 새로운 색상 모듈 구조에 맞게 조정되었습니다.src/components/Icon/icons/Dislike.tsx (2)
3-3: 임포트 변경이 올바르게 수행되었습니다.
theme대신colors를 직접 가져오는 방식으로 변경하여 Emotion 종속성 제거 목표에 부합합니다.
17-17: 색상 참조 방식이 일관되게 업데이트되었습니다.
theme.colors.icon03대신colors.icon03을 사용하도록 수정되어, 스타일링 접근 방식이 단순화되었습니다.Also applies to: 24-24
src/components/Icon/icons/Image.tsx (2)
3-3: 적절한 임포트 변경이 이루어졌습니다.Emotion 제거 작업의 일환으로
theme대신colors모듈에서 직접 색상을 가져오도록 변경되었습니다.
17-17: 색상 참조 방식이 모든 경로에서 일관되게 업데이트되었습니다.SVG의 모든 path 요소에서
theme.colors.icon03대신colors.icon03을 사용하도록 변경되었습니다. 이러한 일관된 접근은 코드 가독성과 유지보수성을 향상시킵니다.Also applies to: 24-24, 31-31
src/components/Icon/icons/Eye.tsx (2)
3-3: 임포트 구문이 적절히 업데이트되었습니다.
theme임포트를 제거하고colors로 대체하여 Emotion 종속성 제거 작업이 일관되게 진행되었습니다.
17-17: 색상 참조가 올바르게 변경되었습니다.모든 SVG path 요소에서 색상 참조가
theme.colors.icon03에서colors.icon03으로 변경되어 일관성 있는 스타일링 방식이 적용되었습니다.Also applies to: 24-24
src/components/Icon/icons/ImageAdd.tsx (2)
3-3: 임포트 변경이 올바르게 이루어졌습니다.
theme에서colors로의 임포트 변경은 PR의 목표인 Emotion 관련 구성 제거에 부합합니다.
17-17: 모든 색상 참조가 일관되게 업데이트되었습니다.복잡한 SVG 구조에서 모든 path 요소의 색상 참조가
theme.colors.icon03에서colors.icon03으로 올바르게 변경되었습니다. 이러한 일관된 접근은 스타일링 시스템을 단순화하고 유지보수성을 향상시킵니다.Also applies to: 24-24, 31-31
src/components/Icon/icons/ArrowSorting.tsx (2)
3-3: theme에서 colors로 가져오기 변경이 적절히 완료되었습니다.Emotion 라이브러리 제거에 따른 스타일링 방식의 변경이 잘 이루어졌습니다.
theme객체 대신colors를 직접 불러오는 방식으로 전환되었습니다.
17-17: stroke 속성의 색상 참조가 올바르게 업데이트되었습니다.
theme.colors.icon03에서colors.icon03로 색상 참조 방식이 일관되게 변경되었습니다. props.color를 우선 사용하는 폴백 패턴도 유지되어 있어 이전 기능과 동일하게 동작할 것입니다.Also applies to: 24-24
src/components/Icon/icons/Building.tsx (2)
3-3: theme에서 colors로 가져오기 변경이 적절히 완료되었습니다.Emotion 라이브러리 제거에 따른 스타일링 방식의 변경이 잘 이루어졌습니다.
theme객체 대신colors를 직접 불러오는 방식으로 전환되었습니다.
17-17: fill 속성의 색상 참조가 올바르게 업데이트되었습니다.두 SVG path 요소에서
theme.colors.icon03에서colors.icon03로 색상 참조 방식이 일관되게 변경되었습니다. props.color를 우선 사용하는 폴백 패턴도 유지되어 있어 이전 기능과 동일하게 동작할 것입니다.Also applies to: 24-24
src/components/Icon/icons/All.tsx (2)
3-3: theme에서 colors로 가져오기 변경이 적절히 완료되었습니다.Emotion 라이브러리 제거에 따른 스타일링 방식의 변경이 잘 이루어졌습니다.
theme객체 대신colors를 직접 불러오는 방식으로 전환되었습니다.
17-17: fill 속성의 색상 참조가 올바르게 업데이트되었습니다.SVG path 요소에서
theme.colors.icon03에서colors.icon03로 색상 참조 방식이 일관되게 변경되었습니다. props.color를 우선 사용하는 폴백 패턴도 유지되어 있어 이전 기능과 동일하게 동작할 것입니다.src/components/Icon/icons/Link.tsx (2)
3-3: theme에서 colors로 가져오기 변경이 적절히 완료되었습니다.Emotion 라이브러리 제거에 따른 스타일링 방식의 변경이 잘 이루어졌습니다.
theme객체 대신colors를 직접 불러오는 방식으로 전환되었습니다.
17-17: fill 속성의 색상 참조가 올바르게 업데이트되었습니다.두 SVG path 요소에서
theme.colors.icon03에서colors.icon03로 색상 참조 방식이 일관되게 변경되었습니다. props.color를 우선 사용하는 폴백 패턴도 유지되어 있어 이전 기능과 동일하게 동작할 것입니다.Also applies to: 24-24
src/app/layout.tsx (3)
2-2:next/head사용이 적절합니다.
Head컴포넌트를 임포트하여 폰트 프리로딩을 구현한 것은 좋은 접근법입니다.
10-11: CSS 파일 임포트 구조가 명확합니다.Emotion 제거 후
reset.css와global.css를 별도로 분리한 것은 스타일 관리 측면에서 좋은 구조입니다. reset 레이어와 글로벌 스타일을 명확히 구분했습니다.
27-56:❓ Verification inconclusive
폰트 프리로딩 설정이 최적화되었습니다.
다양한 Pretendard 폰트 파일들을 프리로드하여 성능을 개선했습니다. 웹사이트 렌더링 속도와 사용자 경험 향상에 도움이 될 것입니다.
다만, 한 가지 확인이 필요합니다:
Next.js 13 이상에서는
next/head대신 메타데이터 API를 사용하는 것이 권장됩니다. 현재 프로젝트에서 metadata 객체를 이미 사용하고 있으므로, 폰트 프리로딩도 metadata API를 통해 구현할 수 있는지 확인해보세요.
🌐 Web query:
Next.js 13+ App Router에서 폰트 프리로딩 방법💡 Result:
Next.js 13+의 App Router에서는
next/font모듈을 통해 폰트 프리로딩을 자동화합니다. 이 시스템은 성능 최적화와 레이아웃 이동(layout shift) 방지를 위해 다음과 같은 방식을 사용합니다:핵심 작동 원리
자동 최적화
- 폰트 파일을 빌드 시점에 다운로드하여 로컬 서버에 호스팅[1][5]
- 외부 네트워크 요청 제거로 로딩 속도 향상[2][8]
- CSS
size-adjust속성을 활용한 폴백 폰트 자동 조정[2][7]프리로딩 메커니즘
// app/layout.tsx 예시 import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); export default function RootLayout({ children }) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> ); }
- 레이아웃 파일에서 폰트 초기화 시 모든 경로에 자동 프리로드[3][5]
<head>에preconnect및preload태그 자동 주입[5][7]로컬 폰트 설정 방법
// app/layout.tsx import localFont from 'next/font/local'; const pretendard = localFont({ src: [ { path: './fonts/Pretendard-Regular.woff2', weight: '400' }, { path: './fonts/Pretendard-Bold.woff2', weight: '700' } ], display: 'swap', }); export default function RootLayout({ children }) { return ( <html lang="ko" className={pretendard.className}> <body>{children}</body> </html> ); }
- 다중 폰트 파일 지원: 배열 형식으로 다양한 웨이트/스타일 지정[4][7]
- 변수 폰트 권장: 단일 파일로 다양한 스타일 관리[1][4]
고급 설정 옵션
const customFont = localFont({ variable: '--font-custom', // CSS 변수 이름 지정 adjustFontFallback: true, // 폴백 폰트 크기 자동 조정 preload: true, // 기본값 true (명시적 설정 가능) });
- Tailwind 연동:
tailwind.config.js에서 CSS 변수 매핑[7][9]- 조건적 프리로딩: 동적 라우팅 시 사용되는 경로에만 적용[3][5]
이 시스템은 FOIT(Flash of Invisible Text)와 FOUT(Flash of Unstyled Text) 문제를 동시에 해결하며, Lighthouse 점수에서 100% 성능 점수를 달성할 수 있도록 설계되었습니다[2][5].
Citations:
- 1: https://choi-hyunho.com/nextjs-fonts
- 2: https://dev-boku.tistory.com/entry/Nextjs-13%EC%97%90%EC%84%9C-%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94
- 3: https://velog.io/@hwisaac/NextJS-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94
- 4: https://d-dual.tistory.com/87
- 5: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
- 6: https://prismic.io/blog/nextjs-fonts
- 7: https://youth-dev-log.vercel.app/blog/font-optimization-in-nextjs
- 8: https://nextjs-ko.org/docs/pages/building-your-application/optimizing/fonts
- 9: https://dev.to/algoorgoal/nextjs-tailwindcsse-pretendard-ponteu-jeogyonghagi-1g87
- 10: https://tech.wonderwall.kr/articles/nextjs-13/
검토 - 폰트 프리로딩 최적화와 Next.js 13+ 설정 검토 필요
현재
<Head>내에서 Pretendard 폰트 파일들을 preload 처리하여 렌더링 및 사용자 경험 최적화에 기여하고 있습니다. 다만, Next.js 13 이상의 App Router 환경에서는next/head대신,next/font모듈을 통한 폰트 프리로딩 자동화가 권장됩니다. 이에 따라 다음 사항을 확인해 주세요:
- 현재 상태:
src/app/layout.tsx파일에서<Head>를 사용하여 폰트를 preload 하고 있음.- 개선 제안:
- 프로젝트가 Next.js 13+의 App Router 및 metadata API를 이미 사용 중이라면,
next/font/local(또는next/font/google) 모듈을 통해 폰트 프리로딩을 자동화하는 방식을 적용하는 것을 고려해 보세요.- 이 방법은 빌드 시에 폰트 최적화와 자동 preload 설정을 제공하여, 추가적인 성능 향상을 기대할 수 있습니다.
예시 코드:
// app/layout.tsx 예시 import localFont from 'next/font/local'; const pretendard = localFont({ src: [ { path: './fonts/Pretendard-Regular.woff2', weight: '400' }, { path: './fonts/Pretendard-Medium.woff2', weight: '500' }, { path: './fonts/Pretendard-SemiBold.woff2', weight: '600' }, { path: './fonts/Pretendard-Bold.woff2', weight: '700' } ], display: 'swap', }); export default function RootLayout({ children }) { return ( <html lang="ko" className={pretendard.className}> <body>{children}</body> </html> ); }위와 같이 전환할 경우, Next.js 13+의 최적화 기능을 온전히 활용할 수 있으므로 검토 후 필요한 조정을 진행해 주세요.
src/components/Icon/icons/Bulb.tsx (2)
3-3: 색상 관리 방식 개선이 적절합니다.
theme객체 대신colors모듈을 직접 임포트하도록 변경한 것은 Emotion 제거 과정에서 색상 관리를 더 간결하게 만드는 좋은 접근법입니다.
17-17: 아이콘 색상 참조 방식이 일관되게 변경되었습니다.
theme.colors.icon03에서colors.icon03로 변경한 것은 색상 관리를 더 직관적으로 만들어줍니다. 이는 코드의 일관성과 유지보수성을 향상시킵니다.Also applies to: 24-24
src/components/Icon/icons/MyRound.tsx (2)
3-3: 색상 관리 방식 개선이 적절합니다.
theme객체 대신colors모듈을 직접 임포트하도록 변경한 것은 Emotion 제거 과정에서 색상 관리를 더 간결하게 만드는 좋은 접근법입니다.
17-17: 아이콘 색상 참조 방식이 일관되게 변경되었습니다.
theme.colors.icon03에서colors.icon03로 변경한 것은 색상 관리를 더 직관적으로 만들어줍니다. 이는 코드의 일관성과 유지보수성을 향상시킵니다.Also applies to: 24-24
src/components/Icon/icons/Category.tsx (2)
3-3: 색상 관리 방식 개선이 적절합니다.
theme객체 대신colors모듈을 직접 임포트하도록 변경한 것은 Emotion 제거 과정에서 색상 관리를 더 간결하게 만드는 좋은 접근법입니다.
17-17: 아이콘 색상 참조 방식이 일관되게 변경되었습니다.
theme.colors.icon03에서colors.icon03로 모든 경로의 fill 속성을 변경한 것은 색상 관리를 더 직관적으로 만들어줍니다. 여러 경로에 일관되게 적용되어 코드의 유지보수성을 향상시킵니다.Also applies to: 24-24, 31-31, 38-38
src/components/Icon/icons/Cup.tsx (2)
3-3: 테마 임포트를 색상 모듈로 대체하는 변경이 잘 이루어졌습니다.Emotion 라이브러리 종속성을 제거하고 색상 관리를
@/styles/colors로 이동하는 이 변경은 PR의 목표와 일치합니다.
17-17: 색상 참조 변경이 올바르게 적용되었습니다.
theme.colors.icon03대신colors.icon03를 사용하도록 업데이트되어 색상 모듈 변경 사항과 일관성을 유지합니다.Also applies to: 24-24
src/components/Icon/icons/FilterThree.tsx (2)
3-3: 테마 임포트를 색상 모듈로 대체하는 변경이 잘 이루어졌습니다.Emotion 종속성을 제거하는 이번 PR의 목표에 맞게
theme에서colors로 임포트를 변경하였습니다.
17-17: 여러 SVG 경로의 색상 참조가 올바르게 업데이트되었습니다.모든 SVG 경로에서
theme.colors.icon03이colors.icon03로 일관되게 변경되었습니다. 이런 통일된 접근 방식은 코드베이스 전체의 일관성을 유지하는 데 중요합니다.Also applies to: 24-24, 31-31, 38-38, 45-45
src/components/Icon/icons/BangRound.tsx (2)
3-3: 테마 임포트를 색상 모듈로 대체하는 변경이 잘 이루어졌습니다.이 변경은 Emotion 라이브러리 제거라는 PR 목표와 일치하며, 색상 관리 접근 방식을 통합합니다.
17-17: 메인 색상과 서브 색상 참조가 올바르게 업데이트되었습니다.
theme.colors.icon01,theme.colors.icon03에서colors.icon01,colors.icon03로의 변경이 제대로 이루어졌습니다. props의 color와 subcolor 옵션이 유지되어 컴포넌트의 유연성을 확보했습니다.Also applies to: 21-21, 25-25
src/app/user/profile/components/UserInfoHeader/UserInfoHeader.tsx (2)
14-14: 테마 임포트를 색상 모듈로 대체하는 변경이 잘 이루어졌습니다.아이콘 컴포넌트 외에도 사용자 프로필 헤더에서도 임포트 변경이 일관되게 적용되었습니다.
33-35: 인라인 스타일 변수의 색상 참조가 올바르게 업데이트되었습니다.참여자와 연구자 배지에 대한 색상 변수 할당이
theme.colors에서colors로 적절하게 변경되었습니다. 이는 vanilla-extract의assignInlineVars함수와 함께 잘 작동하며, Emotion 제거 후에도 동일한 스타일이 유지됩니다.Also applies to: 61-63
src/styles/global.css (2)
1-5: 색상 변수 설정이 잘 되어 있습니다.변수명이 의미를 잘 전달하고 있으며, 전역에서 일관성 있게 색상을 사용할 수 있도록 설정되었습니다.
7-12: HTML 기본 스타일 설정이 적절합니다.font-size를 62.5%로 설정하여 1rem = 10px로 만든 접근은 rem 단위 계산을 간편하게 해주는 좋은 방식입니다.
src/styles/reset.css.ts (5)
1-4: Vanilla Extract로의 마이그레이션이 잘 이루어졌습니다.Emotion에서 Vanilla Extract로의 전환이 적절하게 이루어졌으며, layers.css.ts 모듈을 가져와 레이어 시스템을 잘 활용하고 있습니다.
8-22: 포괄적인 CSS 리셋 접근 방식이 좋습니다.다양한 HTML 요소에 대한 포괄적인 리셋이 잘 구현되어 있으며, 레이어 시스템을 활용해 스타일 충돌을 방지하고 있습니다.
92-115: 자동 채우기 스타일 처리가 세심하게 구현되었습니다.브라우저마다 다르게 보일 수 있는 자동 채우기(autofill) 상태에 대한 스타일을 세심하게 처리하여 일관된 사용자 경험을 제공할 수 있게 해주었습니다.
1-256: 레이어 시스템을 사용한 접근 방식이 적절합니다.layers.css.ts 모듈에서 정의된 레이어 시스템을 일관되게 사용하여 스타일 우선순위를 관리하고 있습니다. 이는 스타일 충돌을 방지하고 유지보수성을 높이는 좋은 접근 방식입니다.
215-227:✅ Verification successful
글로벌 스타일이 global.css와 일관성 있게 통합되었는지 확인이 필요합니다.
여기서 설정한
fontFamily: 'var(--font-family)'가 global.css에서 정의한 변수를 제대로 참조하고 있는지 확인해 주세요. 현재 구현은 올바르지만, 두 파일 간의 의존성이 명확해야 합니다.
🏁 Script executed:
#!/bin/bash # global.css에서 --font-family 변수가 정의되어 있는지 확인 grep -n "\-\-font-family" src/styles/global.css # 전역 스타일 변수가 실제로 layout.tsx에서 import되어 사용되는지 확인 grep -n "global.css" src/app/layout.tsx || echo "global.css가 layout.tsx에서 임포트되지 않았습니다" grep -n "reset.css" src/app/layout.tsx || echo "reset.css가 layout.tsx에서 임포트되지 않았습니다"Length of output: 247
검증 결과:
global.css에서--font-family가 올바르게 정의되어 있으며, layout.tsx에서 global.css와 reset.css가 모두 import되고 있어 두 파일 간의 의존성이 명확하게 구성된 것을 확인했습니다. 현재 구현은 의도한 대로 작동하고 있으므로 추가 수정 없이 진행해도 좋겠습니다.
| :root { | ||
| --font-family: 'Pretendard', 'Inter', sans-serif; | ||
| --primary-mint: #26b5be; | ||
| --primary-tinted: #dff9fa; | ||
| } | ||
|
|
||
| html { | ||
| background-color: #ffffff; | ||
| color: #3c3f44; | ||
| line-height: 1.4; | ||
| font-size: 62.5%; /* 1rem = 10px */ | ||
|
|
||
| .rdp-root { | ||
| --rdp-cell-size: 4rem; | ||
|
|
||
| --rdp-day-height: 4rem; | ||
| --rdp-day-width: 4rem; | ||
| --rdp-day_button-height: 4rem; | ||
| --rdp-day_button-width: 4rem; | ||
|
|
||
| --rdp-accent-color: var(--primary-mint); | ||
|
|
||
| --rdp-accent-background-color: var(--primary-tinted); | ||
| --rdp-background-color: var(--primary-tinted); | ||
| --rdp-outline: 2px solid var(--rdp-accent-color); | ||
| --rdp-outline-selected: 0.1rem solid var(--primary-tinted); | ||
| } | ||
| } |
There was a problem hiding this comment.
누락된 CSS 변수 --field-02가 필요합니다.
reset.css.ts 파일 (249-253줄)에서 --field-02 변수를 비활성화된 입력 필드에 사용하고 있는데, 이 변수가 global.css에 정의되어 있지 않습니다. 이 변수를 추가해야 합니다.
:root {
--font-family: 'Pretendard', 'Inter', sans-serif;
--primary-mint: #26b5be;
--primary-tinted: #dff9fa;
+ --field-02: #f5f5f5; /* 비활성화된 입력 필드에 사용할 색상 */
}📝 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.
| :root { | |
| --font-family: 'Pretendard', 'Inter', sans-serif; | |
| --primary-mint: #26b5be; | |
| --primary-tinted: #dff9fa; | |
| } | |
| html { | |
| background-color: #ffffff; | |
| color: #3c3f44; | |
| line-height: 1.4; | |
| font-size: 62.5%; /* 1rem = 10px */ | |
| .rdp-root { | |
| --rdp-cell-size: 4rem; | |
| --rdp-day-height: 4rem; | |
| --rdp-day-width: 4rem; | |
| --rdp-day_button-height: 4rem; | |
| --rdp-day_button-width: 4rem; | |
| --rdp-accent-color: var(--primary-mint); | |
| --rdp-accent-background-color: var(--primary-tinted); | |
| --rdp-background-color: var(--primary-tinted); | |
| --rdp-outline: 2px solid var(--rdp-accent-color); | |
| --rdp-outline-selected: 0.1rem solid var(--primary-tinted); | |
| } | |
| } | |
| :root { | |
| --font-family: 'Pretendard', 'Inter', sans-serif; | |
| --primary-mint: #26b5be; | |
| --primary-tinted: #dff9fa; | |
| --field-02: #f5f5f5; /* 비활성화된 입력 필드에 사용할 색상 */ | |
| } | |
| html { | |
| background-color: #ffffff; | |
| color: #3c3f44; | |
| line-height: 1.4; | |
| font-size: 62.5%; /* 1rem = 10px */ | |
| .rdp-root { | |
| --rdp-cell-size: 4rem; | |
| --rdp-day-height: 4rem; | |
| --rdp-day-width: 4rem; | |
| --rdp-day_button-height: 4rem; | |
| --rdp-day_button-width: 4rem; | |
| --rdp-accent-color: var(--primary-mint); | |
| --rdp-accent-background-color: var(--primary-tinted); | |
| --rdp-background-color: var(--primary-tinted); | |
| --rdp-outline: 2px solid var(--rdp-accent-color); | |
| --rdp-outline-selected: 0.1rem solid var(--primary-tinted); | |
| } | |
| } |
| globalStyle('input:disabled', { | ||
| '@layer': { | ||
| [layers.reset]: { | ||
| backgroundColor: 'var(--field-02)', | ||
| cursor: 'not-allowed', | ||
| }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
--field-02 변수 참조 문제가 있습니다.
비활성화된 입력 필드에 사용되는 --field-02 변수가 global.css에 정의되어 있지 않습니다. 이 변수를 global.css 파일에 추가해야 합니다.
현재 이 스타일은 backgroundColor: 'var(--field-02)'를 참조하고 있으나, 이 변수가 정의되어 있지 않아 스타일이 적용되지 않을 수 있습니다.
Issue Number
close #68
As-Is
emotion 제거 x
emotion 관련 설정 제거 x
To-Be
emotion 관련 설정 및 패키지 제거
vanilla extract 기반 reset.css 설정 및 별도 global.css 설정 추가
Check List
Test Screenshot
(Optional) Additional Description
진작 했어야 하는데 너무 늦게 들어갔네요..🥲 emotion 관련 설정 및 패키지 제거하였고,
theme파일도 제거하면서 새로 global, reset 스타일 설정하였습니다.vanilla-extract의 layer를 사용하였습니다.
reset 레이어를 만들어 해당 레이어에 스타일을 적용하였습니다. 각 레이어는 독립적으로 스타일 그룹을 관리하고, 충돌을 방지하며 스타일 우선 순위 설정에 효과적이라고 합니다. reset 레이어에 스타일을 적용한 후 globalStyle 함수로 전역에 적용하였습니다.
레이어를 사용하면 스타일 시트 내에서 스타일 그룹 순서를 정할 수 있다는데,, 의문인 점은 reset 외에 별도의 컴포넌트 레이어를 만들어서 나머지 스타일들에 적용해줘야 순서가 보장되는건가..? 싶었습니다. 하지만 reset 레이어만 만들어 적용해도 모든 컴포넌트에서 리셋이 우선으로 적용이 되는 거 같아 별도 컴포넌트 레이어는 만들지 않았습니다.
global.css.ts를 만들어 사용하려 했으나react-date-picker의 css 변수를 수정하지 못하여global.css에 정의하였습니다.emotion을 제거하면서 제거할 수 있는
use client;는 제거하였습니다. 각자 작업하면서 SSR을 진행할 수 있는 부분은 SSR로 개선할 수 있으면 좋을 것 같습니다!저는 우선 공고 상세 페이지에 대해 SSR로 개선 가능한지 고민해볼 예정입니다. 👀
+이전 emotion 스타일링 파일이 (
styles.ts) 일부 남아 있어 제거하였습니다.Summary by CodeRabbit
새로운 기능
리팩토링
스타일
작업