Feat/shortcut #79

choihooo · 2025-05-29T08:11:42Z

🧐 체크리스트

코드 실행 확인: 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

버그 수정
- iframe 토글 동작이 개선되어 Alt+A 단축키로 숨겨진 경우 iframe이 생성되지 않도록 조건이 추가되었습니다.
- iframe 제어 흐름이 정리되어, Alt+A로 숨김 상태일 때 동작이 더 명확해졌습니다.
스타일
- 리뷰 요약 로딩 메시지가 더 공손한 문장으로 변경되었습니다: "리뷰를 불러오는 중입니다. 잠시만 기다려주세요."
리팩터
- 사이드바에서 리뷰 요약 컴포넌트에 로딩 상태 prop이 명확하게 전달되도록 개선되었습니다.

…feat/shortcut

coderabbitai · 2025-05-29T08:11:48Z

Walkthrough

iframe 토글 및 모달 핸들러에서 iframe 표시 상태를 제어하는 로직이 개선되어, 새로운 상태 플래그(iframeHiddenByAltA)가 도입되었습니다. 사이드바에서 리뷰 요약 컴포넌트의 로딩 상태를 명확히 전달하도록 prop이 추가되었고, 로딩 메시지 문구가 더 공손하게 변경되었습니다.

Changes

파일/경로	변경 요약
src/background/listeners/iframeCommandHandler.ts	iframe 토글 시 `iframeHiddenByAltA` 플래그 도입 및 상태 갱신 로직 추가
src/background/listeners/modalCommandHandler.ts	Alt+A 상태 우선 체크 및 스토리지 조회 통합, 제어 흐름 단순화
src/components/productComponents/ReviewSummaryComponent.tsx	로딩 메시지 문구를 더 공손하게 변경
src/components/sidebar/component.tsx	ReviewSummaryComponent에 `isLoading` prop 추가

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Script
    participant Storage
    participant Iframe

    User->>Script: Alt+A 또는 Alt+V 토글 명령
    Script->>Storage: iframeInvisible, iframeHiddenByAltA, iframeHiddenByAltV 조회
    alt iframeHiddenByAltA가 true
        Script-->>User: 아무 동작 없음
    else iframe 없음 & iframeInvisible이 true
        Script->>Iframe: 새로운 iframe 생성 및 스타일 적용
        Script->>Storage: 상태 플래그 갱신 (visible, hiddenByAltV)
        Iframe-->>Script: load 이벤트 발생
        Script->>Iframe: toggle modal 메시지 전송
    else iframe 존재
        Script->>Iframe: toggle modal 메시지 전송
        alt iframeHiddenByAltV가 true
            Script->>Iframe: iframe 제거
            Script->>Storage: 상태 플래그 갱신 (invisible, hiddenByAltA/V false)
        end
    end

Poem

🐇
리뷰를 불러오는 동안
공손한 말로 인사해요
iframe 숨김도 똑똑하게
Alt+A, Alt+V 구분하며
사이드바엔 로딩 신호
깔끔한 코드 흐름 속에
토끼는 오늘도 뛰어요!

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/listeners/iframeCommandHandler.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/background/listeners/modalCommandHandler.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/ReviewSummaryComponent.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

✨ 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.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/sidebar/component.tsx (1)

157-157: 로딩 상태 로직이 올바르게 구현되었습니다.

isLoading={!reviewSummary}는 리뷰 데이터의 존재 여부에 따라 로딩 상태를 적절히 제어합니다.

기술적으로는 정확하지만, lines 149-156의 기본값 객체는 isLoading=true일 때 사용되지 않으므로 불필요합니다. 다음과 같이 단순화할 수 있습니다:

                    <ReviewSummaryComponent
-                        summary={
-                            reviewSummary || {
-                                totalCount: 0,
-                                averageRating: 0,
-                                positiveReviews: [],
-                                negativeReviews: [],
-                                keywords: [],
-                            }
-                        }
+                        summary={reviewSummary}
                        isLoading={!reviewSummary}
                    />

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 3530832 and 86b31b1.

📒 Files selected for processing (4)

src/background/listeners/iframeCommandHandler.ts (1 hunks)
src/background/listeners/modalCommandHandler.ts (6 hunks)
src/components/productComponents/ReviewSummaryComponent.tsx (1 hunks)
src/components/sidebar/component.tsx (1 hunks)

🧰 Additional context used

🪛 GitHub Check: lint-and-test

src/background/listeners/iframeCommandHandler.ts

[warning] 25-25:
'isInvisible' is assigned a value but never used. Allowed unused vars must match /^_/u

🔇 Additional comments (11)

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

14-14: 로딩 상태 관리를 위한 적절한 타입 정의입니다.

선택적 boolean prop으로 isLoading을 추가한 것은 컴포넌트의 로딩 상태를 명확하게 제어할 수 있게 해주는 좋은 개선사항입니다.

19-19: 기본값 설정이 적절합니다.

isLoading = false로 기본값을 설정하여 하위 호환성을 유지하면서도 명시적인 로딩 상태 제어가 가능합니다.

31-31: 사용자 경험 개선을 위한 좋은 메시지 변경입니다.

기존의 간단한 "불러오는중입니다..."에서 "리뷰를 불러오는 중입니다. 잠시만 기다려주세요."로 변경하여 더 정중하고 구체적인 안내를 제공합니다.

src/background/listeners/iframeCommandHandler.ts (3)

27-28: 새로운 상태 플래그 도입이 적절합니다.

iframeHiddenByAltA 플래그를 추가하여 Alt+A 단축키로 숨겨진 상태를 별도로 관리하는 것은 좋은 접근입니다. 이는 다른 단축키와의 충돌을 방지하고 더 정확한 상태 관리를 가능하게 합니다.

34-37: 조건부 iframe 생성 로직이 올바릅니다.

hiddenByAltA 플래그가 true일 때 iframe 생성을 방지하는 로직이 추가되어, Alt+A로 숨겨진 상태에서는 토글이 동작하지 않도록 하는 것이 적절합니다. 이는 사용자 의도에 부합하는 동작입니다.

95-96: 일관된 상태 관리가 잘 구현되었습니다.

iframe 생성 시 두 플래그를 모두 false로 설정하여 상태를 초기화하는 것이 적절합니다. 이는 modalCommandHandler.ts와 일관된 상태 관리를 보장합니다.

src/background/listeners/modalCommandHandler.ts (5)

16-29: 효율적인 조기 반환 로직이 구현되었습니다.

모든 스토리지 플래그를 먼저 가져오고 hiddenByAltA가 true일 때 조기 반환하는 로직이 매우 효율적입니다. 이는 불필요한 처리를 방지하고 Alt+A로 숨겨진 상태에서는 모달 토글이 동작하지 않도록 하는 명확한 제어를 제공합니다.

31-33: 조건부 iframe 생성 로직이 개선되었습니다.

코멘트를 통해 Alt+V로 숨겨진 상태일 때만 iframe을 생성한다는 의도가 명확하게 표현되었고, 이는 사용자의 다양한 단축키 사용 패턴에 대응하는 좋은 설계입니다.

59-61: 코드 스타일 개선이 적절합니다.

불필요한 중괄호를 제거하여 코드를 더 간결하게 만든 것은 좋은 개선입니다. 일관된 코딩 스타일을 유지하는 것이 중요합니다.

82-86: 상태 플래그 관리가 체계적입니다.

세 개의 상태 플래그(iframeInvisible, iframeHiddenByAltA, iframeHiddenByAltV)를 체계적으로 관리하여 각각의 단축키 동작을 정확히 추적할 수 있도록 구현된 것이 훌륭합니다. 이는 iframeCommandHandler.ts와의 일관된 상태 관리를 보장합니다.

97-116: 모달 토글 로직이 잘 구조화되었습니다.

기존 iframe이 존재할 때의 처리 로직이 명확하게 분리되어 있고, hiddenByAltV 상태에 따른 iframe 제거와 상태 업데이트가 적절하게 구현되었습니다. 두 핸들러 간의 협조적 동작을 보장하는 좋은 설계입니다.

coderabbitai · 2025-05-29T08:14:12Z

src/background/listeners/iframeCommandHandler.ts

                                const isInvisible =
                                    result.iframeInvisible ?? false;


⚠️ Potential issue

사용되지 않는 변수를 제거하세요.

정적 분석 도구에서 지적한 대로 isInvisible 변수가 할당되었지만 사용되지 않고 있습니다. 이 변수는 제거하거나 실제로 사용되어야 합니다.

- const isInvisible = - result.iframeInvisible ?? false;

📝 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.

Suggested change

const isInvisible =

result.iframeInvisible ?? false;

// before: retrieved iframeHiddenByAltA flag

const hiddenByAltA =

result.iframeHiddenByAltA ?? false;

// (removed unused `isInvisible` assignment)

if (hiddenByAltA) {

// …rest of your logic here

}

🧰 Tools

🪛 GitHub Check: lint-and-test

[warning] 25-25:
'isInvisible' is assigned a value but never used. Allowed unused vars must match /^_/u

🤖 Prompt for AI Agents

In src/background/listeners/iframeCommandHandler.ts around lines 25 to 26, the variable isInvisible is assigned but never used. Remove the declaration and assignment of isInvisible to clean up unused code, or if it is intended to be used later, integrate it properly where needed.

choihooo added 3 commits May 29, 2025 17:01

feat: iframe 및 모달 처리 로직 개선 및 상태 관리 최적화

7a499c3

feat: 리뷰 로딩 메시지 개선 및 사이드바 로딩 상태 추가

cdef766

Merge branch 'main' of https://github.com/TEAM-WEBEYE/EXTENSION into …

86b31b1

…feat/shortcut

coderabbitai bot reviewed May 29, 2025

View reviewed changes

choihooo merged commit 523d5f6 into main May 29, 2025
1 of 2 checks passed

coderabbitai bot mentioned this pull request May 29, 2025

feat: 단축키 및 익스텐션 아이콘 클릭 명령어 수정 #82

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/shortcut #79

Feat/shortcut #79

Uh oh!

choihooo commented May 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented May 29, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot May 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-                                const isInvisible =
-                                    result.iframeInvisible ?? false;
+                                // before: retrieved iframeHiddenByAltA flag
+                                const hiddenByAltA =
+                                    result.iframeHiddenByAltA ?? false;
+                                // (removed unused `isInvisible` assignment)
+                                if (hiddenByAltA) {
+                                    // …rest of your logic here
+                                }

Feat/shortcut #79

Feat/shortcut #79

Uh oh!

Conversation

choihooo commented May 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧐 체크리스트

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

choihooo commented May 29, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented May 29, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)