feat: 테마 적용 및 스타일 개선 #87
Conversation
Walkthrough이 변경사항은 여러 제품 관련 컴포넌트에서 테마 컨텍스트를 도입하여 다크 모드 및 라이트 모드에 따라 동적으로 스타일을 적용하도록 리팩터링합니다. 기존의 인라인 스타일을 제거하고, 테마 및 폰트 클래스 기반의 조건부 CSS 클래스(Tailwind 유틸리티 등)로 대체하였습니다. 또한 쿠폰 컴포넌트가 삭제되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProductComponent
participant ThemeContext
User->>ProductComponent: 컴포넌트 렌더링
ProductComponent->>ThemeContext: useTheme() 호출
ThemeContext-->>ProductComponent: fontClasses, theme 반환
ProductComponent->>ProductComponent: isDarkMode 등 테마 상태 결정
ProductComponent->>ProductComponent: 조건부 CSS 클래스 적용하여 UI 렌더링
Possibly related PRs
Poem
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/components/productComponents/cosmeticComponent.tsxOops! Something went wrong! :( ESLint: 9.27.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. src/components/productComponents/foodComponent.tsxOops! Something went wrong! :( ESLint: 9.27.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. src/components/productComponents/healthComponent.tsxOops! Something went wrong! :( ESLint: 9.27.0 Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it. ✨ 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:
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: 0
🧹 Nitpick comments (2)
src/components/productComponents/foodComponent.tsx (1)
58-71: 사용되지 않는 인라인 스타일 객체를 제거하세요.commonTextStyle과 commonTextStyle24 인라인 스타일 객체들이 정의되어 있지만 더 이상 사용되지 않습니다. 테마 기반 클래스로 대체되었으므로 이들을 제거하여 코드를 정리하는 것이 좋습니다.
다음과 같이 사용되지 않는 스타일 객체들을 제거하세요:
- const commonTextStyle: React.CSSProperties = { - fontFamily: "KoddiUD OnGothic", - fontSize: "28px", - fontWeight: 700, - lineHeight: "150%", - textAlign: "left", - }; - const commonTextStyle24: React.CSSProperties = { - fontFamily: "KoddiUD OnGothic", - fontSize: "24px", - fontWeight: 700, - lineHeight: "150%", - textAlign: "left", - };src/components/productComponents/healthComponent.tsx (1)
46-59: 사용하지 않는 인라인 스타일 객체를 제거하세요.commonTextStyle과 commonTextStyle24가 정의되어 있지만 테마 기반 클래스로 대체되어 더 이상 사용되지 않습니다.
다음과 같이 사용되지 않는 스타일 객체들을 제거하세요:
- const commonTextStyle: React.CSSProperties = { - fontFamily: "KoddiUD OnGothic", - fontSize: "28px", - fontWeight: 700, - lineHeight: "150%", - textAlign: "left", - }; - const commonTextStyle24: React.CSSProperties = { - fontFamily: "KoddiUD OnGothic", - fontSize: "24px", - fontWeight: 700, - lineHeight: "150%", - textAlign: "left", - };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/productComponents/cosmeticComponent.tsx(4 hunks)src/components/productComponents/couponComponent.tsx(0 hunks)src/components/productComponents/foodComponent.tsx(4 hunks)src/components/productComponents/healthComponent.tsx(4 hunks)
💤 Files with no reviewable changes (1)
- src/components/productComponents/couponComponent.tsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/components/productComponents/healthComponent.tsx (2)
src/contexts/ThemeContext.tsx (1)
useTheme(96-102)src/components/Loading/component.tsx (1)
Loading(5-14)
src/components/productComponents/foodComponent.tsx (2)
src/contexts/ThemeContext.tsx (1)
useTheme(96-102)src/components/Loading/component.tsx (1)
Loading(5-14)
src/components/productComponents/cosmeticComponent.tsx (2)
src/contexts/ThemeContext.tsx (1)
useTheme(96-102)src/components/Loading/component.tsx (1)
Loading(5-14)
🔇 Additional comments (14)
src/components/productComponents/foodComponent.tsx (6)
4-4: 테마 컨텍스트 도입을 승인합니다.테마 기반 스타일링을 위한 useTheme 훅 import가 적절히 추가되었습니다.
49-50: 테마 상태 관리 구현이 올바릅니다.테마 컨텍스트에서 fontClasses와 theme를 추출하고 isDarkMode 계산이 정확히 구현되었습니다.
181-198: 로딩 상태의 테마 스타일링이 잘 구현되었습니다.로딩 컨테이너와 텍스트에 테마 기반 조건부 클래스가 적절히 적용되었습니다. fontClasses와 isDarkMode를 활용한 동적 스타일링이 올바릅니다.
201-211: 메인 컨테이너의 테마 적응이 훌륭합니다.배경색과 텍스트 색상이 테마에 따라 적절히 변경되도록 구현되었고, 제목에 fontHeading 클래스가 올바르게 적용되었습니다.
220-252: 영양성분 섹션의 테마 구현이 완벽합니다.배경색, 텍스트 색상, 구분선 등이 모두 테마에 따라 동적으로 변경되도록 구현되었습니다. 특히 구분선의 색상이 테마별로 적절히 설정되었습니다.
262-291: 알레르기 섹션의 테마 적용이 일관성 있게 구현되었습니다.영양성분 섹션과 동일한 패턴으로 테마 기반 스타일링이 적용되어 UI 일관성이 잘 유지되었습니다.
src/components/productComponents/healthComponent.tsx (4)
4-4: 테마 컨텍스트 import가 적절합니다.다른 컴포넌트들과 일관되게 useTheme 훅을 import하여 테마 기능을 도입했습니다.
42-43: 테마 상태 관리가 올바르게 구현되었습니다.fontClasses와 theme 추출, isDarkMode 계산이 다른 컴포넌트들과 일관된 패턴으로 구현되었습니다.
145-158: 로딩 상태 테마 적용이 완벽합니다.로딩 컴포넌트와 텍스트에 테마 기반 색상 클래스가 올바르게 적용되었습니다.
160-196: 건강 효능 섹션의 테마 구현이 우수합니다.메인 컨테이너, 제목, 효능 목록 등 모든 요소에 테마 기반 스타일링이 일관되게 적용되었습니다. 구분선의 조건부 렌더링과 색상 설정이 특히 잘 구현되었습니다.
src/components/productComponents/cosmeticComponent.tsx (4)
4-4: 테마 컨텍스트 import가 일관되게 적용되었습니다.다른 제품 컴포넌트들과 동일한 방식으로 useTheme 훅을 import했습니다.
31-32: 테마 상태 관리가 완벽하게 구현되었습니다.fontClasses와 theme 추출, isDarkMode 계산이 일관된 패턴으로 정확히 구현되었습니다.
105-118: 로딩 상태의 테마 적용이 훌륭합니다.로딩 컨테이너와 안내 텍스트에 테마 기반 색상 클래스가 올바르게 적용되었습니다.
121-157: 화장품 성분 섹션의 테마 구현이 완벽합니다.메인 컨테이너, 제목, 성분 목록, 구분선 등 모든 UI 요소에 테마 기반 스타일링이 일관되고 올바르게 적용되었습니다. 다른 컴포넌트들과 동일한 패턴을 사용하여 UI 일관성이 잘 유지되었습니다.
🧐 체크리스트
yarn build또는npm run build실행 후 정상적으로 동작하는지 확인했나요?yarn test)yarn lint및yarn prettify실행 후 문제가 없나요?feat:,fix:,chore:등 커밋 컨벤션을 따르고 있나요?README.md또는 관련 문서를 업데이트했나요?Summary by CodeRabbit