Skip to content

[PIPELINE] 페이지 분할 + 디자인#35

Merged
usn757 merged 3 commits intoPETTY-HUB:mainfrom
Juyoung8563:main
May 23, 2025
Merged

[PIPELINE] 페이지 분할 + 디자인#35
usn757 merged 3 commits intoPETTY-HUB:mainfrom
Juyoung8563:main

Conversation

@Juyoung8563
Copy link
Contributor

📜 PR 내용 요약

  • 페이지 분할 및 디자인 작업

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

  • 기존 unifiedFlow.html 파일을 분할하여 점진적 페이지 전환을 하도록 수정했습니다.
  • 헤더 & 네비게이션바 프래그먼트를 추가하였습니다.

스크린샷 2025-05-24 001334
스크린샷 2025-05-24 001354
스크린샷 2025-05-24 001415
스크린샷 2025-05-24 001422 스크린샷 2025-05-24 001449
스크린샷 2025-05-24 001511

📚 기타 참고 사항

  • 디자인 부분 피드백을 적극적으로 보내주세요!
  • 페이지 전환 부분에서 원하시는 추가 페이지가 있으시면 말씀해주세요!

@coderabbitai
Copy link

coderabbitai bot commented May 23, 2025

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

  • 신규 기능

    • 반려동물 분석 및 여행지 추천을 위한 다단계 플로우 도입: 분석 시작, 중간 로딩, 최종 리포트, 추천 요청, 추천 로딩, 결과 확인 페이지가 순차적으로 제공됩니다.
    • 반려동물 이름 입력 및 이미지 업로드, 분석 결과 확인, 여행지 추천 요청 등 사용자가 직접 참여할 수 있는 폼과 결과 화면 추가.
    • 중간 및 추천 결과 로딩 시 스피너 애니메이션과 자동 페이지 전환 기능 제공.
    • 추천 여행지 결과 및 오류 메시지 별도 표시.
  • 스타일

    • 공통, 헤더, 네비게이션, 로딩 등 다양한 CSS 스타일 추가로 일관된 UI 및 반응형 디자인 적용.
    • 입력창, 버튼, 드롭다운, 푸터 등 주요 요소에 테마 색상, 그림자, 애니메이션 등 시각적 효과 강화.
  • UI/UX 개선

    • 헤더, 사이드 메뉴, 푸터 등 재사용 가능한 프래그먼트 도입으로 페이지 구조 개선.
    • 사이드 메뉴 토글 및 외부 클릭 시 자동 닫힘 기능 추가.
    • 위치 입력 시 자동완성 드롭다운 지원.
  • 문서화

    • 분석, 중간 로딩, 리포트, 추천 로딩, 추천 결과 등 신규 HTML 템플릿 다수 추가.

Walkthrough

이 변경 사항은 PETTY 웹 애플리케이션의 반려동물 분석 및 여행 추천 기능을 다단계 플로우로 리팩토링합니다. 컨트롤러는 각 단계별로 별도의 엔드포인트와 세션/플래시 속성 관리를 도입하였고, 이에 맞는 HTML 템플릿, CSS, JS 파일 및 프래그먼트가 새로 추가되었습니다.

Changes

파일/경로 요약 변경 내용 요약
src/main/java/io/github/petty/pipeline/controller/UnifiedFlowController.java 컨트롤러를 다단계 플로우로 리팩토링: 분석, 로딩, 결과, 추천 요청, 추천 로딩, 추천 결과 등 각 단계별 엔드포인트 및 세션/플래시 속성 관리 도입. 기존 단일 플로우를 여러 단계로 분리.
src/main/resources/static/css/common.css, header.css, navbar.css, loading.css 공통, 헤더, 네비게이션, 로딩 등 각 UI 구성요소별 CSS 신규 추가. 일관된 테마 변수, 폰트, 레이아웃, 반응형 스타일 정의.
src/main/resources/static/js/flow.js 사이드 메뉴 토글, 메뉴 외부 클릭 시 닫기, 위치 입력 자동완성 드롭다운 등 UI 인터랙션 JS 신규 추가.
src/main/resources/templates/analyze.html, interim_loading.html, vision_report.html, recommend_loading.html, recommendation_result.html 분석, 중간 로딩, 비전 리포트, 추천 로딩, 추천 결과 등 각 단계별 신규 템플릿 추가. Thymeleaf 프래그먼트 및 동적 데이터 바인딩, 자동 리다이렉트, 타이핑 효과 등 구현.
src/main/resources/templates/fragments/header.html, navbar.html 헤더 및 사이드 메뉴 Thymeleaf 프래그먼트 신규 추가. 로고, 메뉴 아이콘, 로그인/회원가입, 주요 네비게이션 링크 포함.
src/main/resources/templates/unifiedFlow.html 기존 템플릿 구조 개선: lang 속성 추가, 외부 CSS/JS 분리, 헤더/네비바 프래그먼트 적용, 메인/푸터 구조화, 메뉴 토글 JS 추가.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UnifiedFlowController
    participant VisionUseCase
    participant VisionService
    participant RecommendationService
    participant Session

    User->>UnifiedFlowController: GET /flow/analyze
    UnifiedFlowController-->>User: 분석 입력 폼 렌더링

    User->>UnifiedFlowController: POST /flow/analyze (이미지, 이름)
    UnifiedFlowController->>VisionUseCase: interim(이미지, 이름)
    UnifiedFlowController->>VisionService: analyze(이미지, 이름)
    UnifiedFlowController->>Session: 비전 리포트 저장
    UnifiedFlowController-->>User: Redirect /flow/showInterimLoading (플래시 interim 등)

    User->>UnifiedFlowController: GET /flow/showInterimLoading
    UnifiedFlowController-->>User: interim_loading.html (중간 결과, 자동 리다이렉트)

    User->>UnifiedFlowController: GET /flow/showVisionReport
    UnifiedFlowController->>Session: 비전 리포트 조회
    UnifiedFlowController-->>User: vision_report.html (최종 분석 결과, 추천 폼)

    User->>UnifiedFlowController: POST /flow/report (여행지 요청)
    UnifiedFlowController->>Session: 비전 리포트 조회
    UnifiedFlowController->>RecommendationService: 추천 생성
    UnifiedFlowController->>Session: 추천 결과 저장
    UnifiedFlowController-->>User: Redirect /flow/showRecommendLoading (플래시)

    User->>UnifiedFlowController: GET /flow/showRecommendLoading
    UnifiedFlowController-->>User: recommend_loading.html (자동 리다이렉트)

    User->>UnifiedFlowController: GET /flow/showRecommendationResult
    UnifiedFlowController->>Session: 추천 결과 조회 및 세션 정리
    UnifiedFlowController-->>User: recommendation_result.html
Loading

Possibly related PRs

  • PETTY-HUB/PETTY-BACK#27: UnifiedFlowController의 초기 단일 플로우 버전 도입. 현재 PR의 다단계 플로우 리팩토링과 직접적으로 관련됨.
  • PETTY-HUB/PETTY-BACK#29: 분석 및 추천 메서드 분리, 세션 처리 및 info 파라미터 도입 등 현재 PR의 구조적 변경과 연관됨.

Suggested reviewers

  • Juyoung8563

Poem

🐰
새로워진 플로우, 토끼도 깡총!
분석도, 추천도 한 걸음씩
로딩 스피너 빙글빙글
중간 결과 톡톡 튀고
귀여운 발자국 따라
여행지 추천까지
PETTY와 함께라면 봄날처럼 싱그럽죠!
🐾

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.


📜 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 48d4bbb and 14cd411.

⛔ Files ignored due to path filters (1)
  • src/main/resources/static/assets/logo.png is excluded by !**/*.png
📒 Files selected for processing (14)
  • src/main/java/io/github/petty/pipeline/controller/UnifiedFlowController.java (2 hunks)
  • src/main/resources/static/css/common.css (1 hunks)
  • src/main/resources/static/css/header.css (1 hunks)
  • src/main/resources/static/css/loading.css (1 hunks)
  • src/main/resources/static/css/navbar.css (1 hunks)
  • src/main/resources/static/js/flow.js (1 hunks)
  • src/main/resources/templates/analyze.html (1 hunks)
  • src/main/resources/templates/fragments/header.html (1 hunks)
  • src/main/resources/templates/fragments/navbar.html (1 hunks)
  • src/main/resources/templates/interim_loading.html (1 hunks)
  • src/main/resources/templates/recommend_loading.html (1 hunks)
  • src/main/resources/templates/recommendation_result.html (1 hunks)
  • src/main/resources/templates/unifiedFlow.html (3 hunks)
  • src/main/resources/templates/vision_report.html (1 hunks)
✨ 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.

@usn757 usn757 merged commit cf1a15b into PETTY-HUB:main May 23, 2025
2 checks passed
@Juyoung8563 Juyoung8563 changed the title [feat] 페이지 분할 + 디자인 [PIPELINE] 페이지 분할 + 디자인 May 23, 2025
@taehyun32
Copy link
Member

@CodeRabbit review

@coderabbitai
Copy link

coderabbitai bot commented May 23, 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.

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.

3 participants