Skip to content

[VISION] Vision 분석 페이지 인증 fetch 함수 누락 및 JS 로그인 체크 로직 개선#54

Merged
usn757 merged 1 commit into
PETTY-HUB:mainfrom
23MinL:feat/vision-config
Jun 1, 2025
Merged

[VISION] Vision 분석 페이지 인증 fetch 함수 누락 및 JS 로그인 체크 로직 개선#54
usn757 merged 1 commit into
PETTY-HUB:mainfrom
23MinL:feat/vision-config

Conversation

@23MinL
Copy link
Copy Markdown
Contributor

@23MinL 23MinL commented Jun 1, 2025

📜 PR 내용 요약

Vision 분석(동물 이미지 업로드) 페이지에서 인증이 필요한 fetch 요청 시 authenticatedFetch 함수 미정의로 발생하던 오류를 해결하고, 로그인 상태를 올바르게 전달·비교하도록 JS 로직을 개선했습니다. 이를 통해 로그인 유저의 정상적인 분석 기능 사용과 인증 기반 API 요청이 가능해졌습니다.

⚒️ 작업 및 변경 내용(상세하게)

image
image

  • visionUpload.html
    • 인증 fetch 함수(authenticatedFetch) 정의 및 추가→ 모든 fetch 요청에 credentials: 'include' 적용, JWT 쿠키 항상 포함
    • 기존 JS의 로그인 상태 전달 방식을
      • ${isLoggedIn} 등 Boolean 값을 'true'/'false' 문자열로 바인딩하도록 개선
      • JS에서 isLoggedIn !== 'true' 식으로 비교, 실질적인 인증 유저만 분석 가능하도록 수정
    • UI submit 이벤트 및 인증 오류 팝업 정상 동작
  • 버그 재현/수정 사항
    • authenticatedFetch 함수 미정의(ReferenceError)로 인한 이미지 분석 불가 문제 해결
    • 로그인 유저임에도 JS에서 항상 비로그인으로 인식되는 오류 해결

📚 기타 참고 사항

  • 만약 여러 페이지에서 인증 fetch가 필요하다면 별도의 공통 JS 파일로 분리할 수 있습니다.
  • 추후 사용자 인증/권한 관리가 추가될 경우, 이 패턴으로 확장/재사용 가능
  • QA 체크포인트: 로그인 상태에서 분석이 정상 동작하는지, 비로그인/사용량 초과 시 안내 팝업이 잘 동작하는지 반드시 확인 요망

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 1, 2025

Summary by CodeRabbit

  • 신규 기능

    • 비전 분석 기능에 일일 사용량 제한이 도입되었습니다. 로그인한 사용자는 남은 일일 분석 횟수를 확인할 수 있으며, 제한을 초과하면 분석이 차단됩니다.
    • 사용자는 자신의 일일 사용 현황을 JSON 데이터로 확인할 수 있습니다.
  • 버그 수정

    • 인증되지 않은 사용자는 비전 분석 페이지 접근 시 로그인 페이지로 리디렉션됩니다.
  • UI/UX 개선

    • 비전 업로드 페이지에 로그인 상태 및 남은 사용량 안내 박스가 추가되었습니다.
    • 사용량 초과 시 폼이 비활성화되고 안내 메시지가 표시됩니다.
    • 분석 요청 시 세션 만료 또는 사용량 초과에 대한 명확한 안내가 제공됩니다.
  • 보안

    • /vision 및 /flow 경로 접근 시 인증이 필수로 변경되었습니다.

Walkthrough

이 변경사항은 Vision 기능에 사용자 인증과 일일 사용량 제한을 도입합니다. VisionController와 관련 UI가 인증 상태와 사용량을 확인하여, 인증되지 않은 사용자는 로그인하도록 유도하고, 사용량을 초과한 경우 분석 기능을 제한합니다. Google Cloud Vision 의존성도 제거되었습니다.

Changes

파일/경로 변경 요약
build.gradle Google Cloud Vision 의존성 제거, 일부 주석의 이모지 삭제
src/main/java/io/github/petty/config/SecurityConfig.java /vision/**, /flow/** 경로에 인증 요구 추가
src/main/java/io/github/petty/vision/adapter/in/VisionController.java 인증 체크, 일일 사용량 제한 및 세션 기반 사용량 추적, 사용량 조회 API 추가, 로깅 개선
src/main/resources/templates/visionUpload.html 로그인/사용량 체크 UI 및 스크립트 추가, 인증/사용량 초과 시 폼 비활성화, 사용자 피드백 개선

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant VisionController
    participant Session

    User->>Browser: 페이지 접근 (/vision/upload)
    Browser->>VisionController: GET /vision/upload (with session)
    VisionController->>Session: 사용량/인증 상태 확인
    alt 인증 X
        VisionController-->>Browser: 로그인 페이지로 리다이렉트
    else 인증 O
        VisionController-->>Browser: 사용량 정보 포함 페이지 렌더링
    end

    User->>Browser: 이미지 업로드 및 분석 요청
    Browser->>VisionController: POST /vision/species (with session)
    VisionController->>Session: 인증 및 사용량 확인
    alt 인증 X
        VisionController-->>Browser: 401 Unauthorized
    else 사용량 초과
        VisionController-->>Browser: 429 Too Many Requests
    else 정상
        VisionController->>Session: 사용량 증가
        VisionController-->>Browser: 분석 결과 반환
    end
Loading

Possibly related PRs

Poem

🐰
로그인하고 분석해, 하루 한 번씩
사용량 넘으면 잠시만 쉬어가요
구글 클라우드 안녕, 의존성도 가벼워졌네
오늘은 토끼도, 사용량 지키며
이미지 분석 즐겁게!

(〃 ̄ᴗ ̄〃)ノ✨

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

@23MinL
Copy link
Copy Markdown
Contributor Author

23MinL commented Jun 1, 2025

@CodeRabbit review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 1, 2025

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
src/main/resources/templates/visionUpload.html (1)

430-436: authenticatedFetch 함수가 적절하게 구현되었습니다.

JWT 쿠키를 포함한 인증된 요청을 보내는 래퍼 함수가 잘 작성되었습니다.

향후 여러 페이지에서 재사용이 필요하다면, PR 설명에서 언급한 대로 공통 JS 파일로 이동하는 것을 고려해보세요.

src/main/java/io/github/petty/vision/adapter/in/VisionController.java (2)

36-41: 일일 사용량 제한 설정이 적절합니다.

하드코딩된 값(3회) 대신 설정 파일에서 관리하면 더 유연할 것 같습니다.

-    private static final int DAILY_LIMIT = 3;
+    @Value("${vision.daily-limit:3}")
+    private int DAILY_LIMIT;

application.yml에 다음과 같이 설정할 수 있습니다:

vision:
  daily-limit: 3

161-171: 세션 기반 사용량 추적이 구현되었습니다.

현재 구현은 단일 서버 환경에서는 잘 작동할 것입니다. 날짜가 변경되면 자동으로 카운트가 리셋되는 로직도 좋습니다.

향후 확장성을 고려한다면:

  • Redis나 DB를 활용한 영구 저장
  • 다중 서버 환경 지원
  • 사용량 이력 추적

등을 고려해볼 수 있습니다.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 4dbf360 and 4167669.

📒 Files selected for processing (4)
  • build.gradle (1 hunks)
  • src/main/java/io/github/petty/config/SecurityConfig.java (1 hunks)
  • src/main/java/io/github/petty/vision/adapter/in/VisionController.java (4 hunks)
  • src/main/resources/templates/visionUpload.html (6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/main/java/io/github/petty/vision/adapter/in/VisionController.java (3)
src/main/java/io/github/petty/pipeline/controller/UnifiedFlowController.java (1)
  • Slf4j (21-191)
src/main/java/io/github/petty/vision/helper/ImageValidator.java (1)
  • Slf4j (23-139)
src/main/resources/static/js/common/form.js (2)
  • petName (195-195)
  • result (243-243)
🔇 Additional comments (8)
build.gradle (1)

65-71: LGTM! Google Cloud Vision 의존성 제거가 적절합니다.

AWS Rekognition으로 전환하면서 더 이상 필요하지 않은 Google Cloud Vision 의존성을 제거한 것이 좋습니다. 주석의 이모지 제거도 일관성 있는 코드 스타일을 유지하는데 도움이 됩니다.

src/main/java/io/github/petty/config/SecurityConfig.java (1)

70-71: 보안 설정이 적절하게 구성되었습니다.

Vision과 Flow 관련 엔드포인트에 인증을 요구하도록 설정한 것이 좋습니다. 이는 사용량 제한과 사용자 추적을 위한 필수적인 변경사항입니다.

src/main/resources/templates/visionUpload.html (3)

197-216: 사용량 정보 표시 UI가 잘 구현되었습니다.

로그인한 사용자에게 남은 분석 횟수를 명확하게 보여주고, 비로그인 사용자에게는 로그인 안내를 제공하는 UI가 사용자 친화적입니다.


306-309: JavaScript 로그인 체크 로직이 개선되었습니다.

Thymeleaf의 Boolean 값 바인딩 문제를 문자열 리터럴 비교로 해결한 것이 좋습니다. 이제 로그인 상태를 정확하게 판별할 수 있습니다.

Also applies to: 314-319


359-363: HTTP 상태 코드 처리가 적절합니다.

401(인증 실패)과 429(사용량 초과) 상태에 대한 처리가 백엔드 응답과 일치하며, 사용자에게 명확한 피드백을 제공합니다.

Also applies to: 391-401

src/main/java/io/github/petty/vision/adapter/in/VisionController.java (3)

43-63: 페이지 렌더링 메서드가 잘 구현되었습니다.

인증 체크와 사용량 정보를 모델에 추가하는 로직이 적절합니다. 로깅도 사용자 추적에 도움이 될 것 같습니다.


96-133: 분석 엔드포인트의 사용량 제한이 잘 구현되었습니다.

  • 인증 체크 ✓
  • 사용량 제한 체크 ✓
  • 적절한 HTTP 상태 코드 반환 ✓
  • 사용자 친화적인 에러 메시지 ✓

모든 요구사항이 충족되었습니다.


150-154: 인증 체크 로직이 안전하게 구현되었습니다.

AnonymousAuthenticationToken 체크를 포함하여 익명 사용자를 확실하게 걸러내는 것이 좋습니다.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants