Skip to content

feat: 컴포넌트 내 알러지 처리 업데이트 및 관리 편의를 위한 AllergyType enum 추가 #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
choihooo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: 컴포넌트 내 알러지 처리 업데이트 및 관리 편의를 위한 AllergyType enum 추가 #67

choihooo wants to merge 1 commit into from
+72 −16

Conversation

@choihooo
Copy link
Contributor

@choihooo choihooo commented May 27, 2025 •
edited by coderabbitai bot
Loading

🧐 체크리스트

  • 코드 실행 확인: yarn build 또는 npm run build 실행 후 정상적으로 동작하는지 확인했나요?
  • 테스트 통과 여부: Jest 테스트를 실행했고 모든 테스트가 통과했나요? (yarn test)
  • ESLint & Prettier 검사: yarn lint 및 yarn prettify 실행 후 문제가 없나요?
  • PR 제목 확인: PR 제목이 feat:, fix:, chore: 등 커밋 컨벤션을 따르고 있나요?
  • 변경 사항 설명: PR 설명에 변경된 내용을 충분히 작성했나요?
  • 리뷰어가 이해하기 쉽게 작성: 코드 리뷰어가 쉽게 이해할 수 있도록 가독성 높은 코드를 작성했나요?
  • 문서 업데이트 필요 여부: 기능 추가/변경 사항이 있다면 README.md 또는 관련 문서를 업데이트했나요?

Summary by CodeRabbit

  • 신규 기능

    • 알레르기 정보를 사용자가 입력 및 저장할 수 있도록 알레르기 선택 기능이 추가되었습니다.

  • 개선 사항

    • 알레르기 정보가 사용자 데이터에 포함되어 건강 및 음식 관련 요청에 반영됩니다.
    • 알레르기 정보가 항상 올바른 형식(배열)으로 API에 전달되어 데이터 일관성이 향상되었습니다.

@choihooo choihooo linked an issue May 27, 2025 that may be closed by this pull request
[feat] api 리퀘스트 allergy 추가 #66
Open
@coderabbitai
Copy link

coderabbitai bot commented May 27, 2025 •
edited
Loading

Walkthrough

이 변경사항은 사용자 알레르기 정보를 일관성 있게 처리하도록 여러 컴포넌트와 백그라운드 스크립트를 수정합니다. 알레르기 데이터가 항상 배열 형태로 저장되고 API 요청에 포함되도록 하였으며, 알레르기 선택 폼에서는 알레르기 값을 enum으로 변환하여 저장하도록 변경되었습니다.

Changes

파일/경로 변경 요약
src/background/index.ts "FETCH_HEALTH_DATA" 메시지 핸들러에서 allergies 필드를 항상 배열로 기본값 처리하도록 수정
src/components/productComponents/foodComponent.tsx
src/components/productComponents/healthComponent.tsx		 chrome.storage.local에서 "Allergies" 값을 추가로 가져오고, API 요청 payload에 포함되도록 수정
src/tabs/myInfo/components/AllergySelectForm.tsx AllergyType enum 추가, 알레르기명을 enum으로 변환하여 저장, 불필요한 useTheme import 제거, JSX 클래스 순서 일부 조정

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AllergySelectForm
    participant chrome.storage.local
    participant FoodComponent
    participant HealthComponent
    participant BackgroundScript
    participant HealthFoodAPI

    User->>AllergySelectForm: 알레르기 선택
    AllergySelectForm->>chrome.storage.local: 알레르기 enum 배열로 저장

    User->>FoodComponent: 식품 정보 요청
    FoodComponent->>chrome.storage.local: "birthYear", "gender", "Allergies" 조회
    FoodComponent->>BackgroundScript: allergies 포함하여 데이터 요청
    BackgroundScript->>HealthFoodAPI: allergies 배열 포함 POST 요청

    User->>HealthComponent: 건강 정보 요청
    HealthComponent->>chrome.storage.local: "birthYear", "gender", "Allergies" 조회
    HealthComponent->>BackgroundScript: allergies 포함하여 데이터 요청
    BackgroundScript->>HealthFoodAPI: allergies 배열 포함 POST 요청
Loading

Possibly related PRs

Poem

🥕
알레르기 정보, 이제는 배열로
토끼 친구들 안심하고 먹어요
enum으로 변환해 꼼꼼히 저장
건강 데이터도 빠짐없이 전송
오늘도 API 향해 깡총깡총!
🐰✨

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/background/index.ts

Oops! Something went wrong! :(

ESLint: 9.27.0

Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it.
at /node_modules/eslint/lib/config/config-loader.js:142:9
at async loadTypeScriptConfigFileWithJiti (/node_modules/eslint/lib/config/config-loader.js:141:25)
at async loadConfigFile (/node_modules/eslint/lib/config/config-loader.js:259:11)
at async ConfigLoader.calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:578:23)
at async #calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:759:23)
at async /node_modules/eslint/lib/eslint/eslint.js:760:6
at async Promise.all (index 0)
at async ESLint.lintFiles (/node_modules/eslint/lib/eslint/eslint.js:757:19)
at async Object.execute (/node_modules/eslint/lib/cli.js:639:14)
at async main (/node_modules/eslint/bin/eslint.js:175:19)

src/components/productComponents/foodComponent.tsx

Oops! Something went wrong! :(

ESLint: 9.27.0

Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it.
at /node_modules/eslint/lib/config/config-loader.js:142:9
at async loadTypeScriptConfigFileWithJiti (/node_modules/eslint/lib/config/config-loader.js:141:25)
at async loadConfigFile (/node_modules/eslint/lib/config/config-loader.js:259:11)
at async ConfigLoader.calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:578:23)
at async #calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:759:23)
at async /node_modules/eslint/lib/eslint/eslint.js:760:6
at async Promise.all (index 0)
at async ESLint.lintFiles (/node_modules/eslint/lib/eslint/eslint.js:757:19)
at async Object.execute (/node_modules/eslint/lib/cli.js:639:14)
at async main (/node_modules/eslint/bin/eslint.js:175:19)

src/tabs/myInfo/components/AllergySelectForm.tsx

Oops! Something went wrong! :(

ESLint: 9.27.0

Error: The 'jiti' library is required for loading TypeScript configuration files. Make sure to install it.
at /node_modules/eslint/lib/config/config-loader.js:142:9
at async loadTypeScriptConfigFileWithJiti (/node_modules/eslint/lib/config/config-loader.js:141:25)
at async loadConfigFile (/node_modules/eslint/lib/config/config-loader.js:259:11)
at async ConfigLoader.calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:578:23)
at async #calculateConfigArray (/node_modules/eslint/lib/config/config-loader.js:759:23)
at async /node_modules/eslint/lib/eslint/eslint.js:760:6
at async Promise.all (index 0)
at async ESLint.lintFiles (/node_modules/eslint/lib/eslint/eslint.js:757:19)
at async Object.execute (/node_modules/eslint/lib/cli.js:639:14)
at async main (/node_modules/eslint/bin/eslint.js:175:19)

  • 1 others
📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 58ca95b and f705e05.

📒 Files selected for processing (4)
  • src/background/index.ts (1 hunks)
  • src/components/productComponents/foodComponent.tsx (2 hunks)
  • src/components/productComponents/healthComponent.tsx (2 hunks)
  • src/tabs/myInfo/components/AllergySelectForm.tsx (5 hunks)
🔇 Additional comments (10)
src/tabs/myInfo/components/AllergySelectForm.tsx (3)

10-30: AllergyType enum 정의가 잘 구성되어 있습니다.

영어 식별자와 한국어 주석을 포함한 포괄적인 알레르기 유형 정의가 잘 되어 있습니다. 식품 알레르기 표시 기준에 맞는 주요 알레르기 유발 요소들이 모두 포함되어 있습니다.

43-63: 알레르기 이름 매핑이 완전하고 정확합니다.

allergyNameToEnumMap 객체가 모든 enum 값과 정확히 매핑되어 있으며, 한국어 알레르기 이름을 영어 enum 값으로 변환하는 로직이 올바르게 구현되어 있습니다.

154-157:

Details

✅ Verification successful

알레르기 데이터 변환 로직을 검증해 주세요.

선택된 알레르기를 enum 배열로 변환하는 로직이 올바르게 구현되어 있습니다. filter(Boolean)을 사용하여 매핑되지 않은 값들을 제거하는 것도 좋은 방어 코드입니다.

다음 스크립트로 모든 알레르기 이름이 올바르게 매핑되는지 확인해 주세요:

🏁 Script executed:

#!/bin/bash
# 알레르기 데이터와 매핑 객체 간의 일관성 확인

# allergyData의 모든 알레르기 이름과 allergyNameToEnumMap의 키가 일치하는지 확인
ast-grep --pattern $'const allergyData = {
  $$$
} as const;'

ast-grep --pattern $'const allergyNameToEnumMap: Record<string, AllergyType> = {
  $$$
};'

Length of output: 2367

알레르기 이름 매핑 일치 확인 완료

allergyData에 정의된 모든 알레르기 항목이 allergyNameToEnumMap의 키로 정확히 매핑되는 것을 확인했습니다.
filter(Boolean)을 통한 방어 로직도 올바르게 작동하고 있으므로 추가 조치가 필요 없습니다.

src/background/index.ts (1)

276-276: 알레르기 데이터 기본값 처리가 적절합니다.

allergies: allergies || []로 알레르기 데이터가 falsy일 때 빈 배열로 기본값을 설정하는 것이 API 요청의 일관성을 보장합니다. 이는 다른 컴포넌트에서 전송하는 데이터 구조와도 일치합니다.

src/components/productComponents/foodComponent.tsx (3)

45-50: 알레르기 데이터 조회가 적절히 추가되었습니다.

사용자의 알레르기 정보를 chrome.storage.local에서 조회하는 로직이 기존 birthYear, gender와 함께 일관되게 추가되었습니다.

67-67: 페이로드에 알레르기 데이터 포함이 올바르게 구현되었습니다.

allergies: Allergies || []로 알레르기 데이터를 페이로드에 포함시키고, 데이터가 없을 경우 빈 배열로 기본값을 설정하는 것이 적절합니다. 이는 배경 스크립트의 처리 방식과도 일관됩니다.

70-70: 디버깅용 로그 추가가 도움이 됩니다.

API 요청 페이로드를 로그로 출력하는 것이 디버깅과 개발 과정에서 유용합니다.

src/components/productComponents/healthComponent.tsx (3)

27-32: 알레르기 데이터 조회 로직이 일관되게 적용되었습니다.

foodComponent.tsx와 동일한 패턴으로 알레르기 데이터를 조회하는 로직이 추가되어 컴포넌트 간 일관성이 유지됩니다.

33-37: 로그 출력이 개선되었습니다.

사용자 정보 로그에 알레르기 정보가 포함되어 디버깅 시 더 완전한 정보를 확인할 수 있습니다.

55-55: 건강 데이터 요청에 알레르기 정보가 적절히 포함되었습니다.

allergies: Allergies || []로 알레르기 데이터를 페이로드에 포함시키는 방식이 다른 컴포넌트와 일관되며, 배경 스크립트에서의 처리 방식과도 잘 연동됩니다.

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[feat] api 리퀘스트 allergy 추가

2 participants

@choihooo