[Refactor/#62] solve 서버챗 응답 수정 및 채팅 너비 수정

[hansoojeongsj]

📌 Related Issues

• close [Refactor] 새벽 qa2 #62

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 컨벤션을 지켰나요?

📄 Tasks

📷 Screenshot

🔔 ETC

Summary by CodeRabbit

• Bug Fixes

  • Image upload validation now enforces exact file count requirements with clearer, user-facing error messages and automatically resets input when validation fails for smoother retries.

• UI Improvements

  • Chat bubbles now size to content with responsive max widths for improved readability across devices.

• Workflow / UX

  • Clarified step prompts and error wording to better guide users through the upload and question-start flow.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Enforces exact image-count validation in the solve upload flow and updates chat-bubble styling to use content-driven, responsive widths; step comments and user-facing error messages were updated to match the new validation behavior.

Changes

Cohort / File(s)	Summary
Image upload validation src/pages/solve/Solve.tsx	Change file-count check from permissive (< expectedCount) to strict equality (files.length !== expectedCount); reset input on mismatch; update user-facing error messages to require the exact number (e.g., "1 이미지" or "1 문제 이미지 + 1 풀이 이미지"); renumber and adjust inline step/comments around upload, S3 completion, preloading, and finalization.
Chat bubble responsive styling src/pages/solve/solve.css.ts	Replace fixed maxWidth: 32rem with width: fit-content and maxWidth: min(80vw, 45rem) for chatBubbleLeft and chatBubbleRight, retaining padding/borderRadius/background to make bubbles content-driven and responsive.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as Solve UI
    participant S3
    participant Preloader
    participant Server

    rect rgb(220, 240, 255)
    User->>UI: Selects files (N)
    UI->>UI: Validate files.length !== expectedCount
    alt mismatch
        UI-->>User: Show exact-count error + reset input
    else match
        UI->>S3: Upload files
        S3-->>UI: Upload complete (URLs)
        UI->>Preloader: Preload images
        Preloader-->>UI: Preload complete
        UI->>Server: Finalize submit (with URLs)
        Server-->>UI: Response (success/error)
        UI-->>User: Show result
    end
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Pay attention to the exact equality condition and input-reset side effects in Solve.tsx.
• Verify user-facing messages/localization and step/comment alignment.
• Confirm CSS change does not introduce regressions in edge layouts (small visual check).

Possibly related PRs

• [Feat/#15] 전반적 퍼블리싱 코드 수정  #18 — Modifies the same Solve page files (Solve.tsx, solve.css.ts) and likely overlaps chat-bubble and upload logic.
• [Feat/#53] latex #54 — Alters image upload flow and expectedCount validation in src/pages/solve/Solve.tsx, directly related to this change.
• [Feat/#51] solve 포함 디자인 일부 수정 #52 — Touches both Solve.tsx and solve.css.ts, overlapping on upload/validation flow and bubble styling.

Poem

🐰 Hops in with a careful count,

One or two — exact, no doubt.
Bubbles shrink to snug embrace,
Uploads neat, each in its place.
I nibble bugs and dance about.

Pre-merge checks and finishing touches

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	The changes to solve.css.ts regarding chat bubble styling (width responsiveness and max-width adjustments) appear unrelated to the specific objective in linked issue #62, which focuses exclusively on fixing image upload validation behavior. While the PR title mentions "채팅 너비 수정" (chat width fix) and the broader PR objectives reference "solve 서버챗 응답 수정," the CSS styling modifications are separate from the image validation logic that issue #62 targets. The image upload fix in Solve.tsx is clearly in scope, but the CSS changes lack explicit justification linking them to the stated issue.	Clarify whether the chat bubble styling changes should be part of this PR or separated into a different PR. If the changes are intentional and related to the broader "solve" refinement, update the Tasks section to explicitly document this scope and link it to any additional objectives or issues. Alternatively, consider separating the CSS changes into a distinct PR focused solely on styling to keep the image validation fix isolated and focused.
Description Check	⚠️ Warning	The PR description follows the template structure with all required sections present (Related Issues, Checklist, Tasks, Screenshot, and ETC), and the Related Issues and Checklist sections are properly filled out with the linked issue #62 and all checkboxes marked as completed. However, the Tasks section, which is critical for describing what work was actually performed, remains empty with only the template comment preserved. This leaves readers without an explanation of what changes were made and why, which is essential information for code review.	Please fill out the Tasks section with a clear description of the work performed, explaining the changes to image upload validation and chat bubble styling. This section should detail what was modified and the rationale behind the changes, enabling reviewers to better understand the intent of the modifications.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "[Refactor/#62] solve 서버챗 응답 수정 및 채팅 너비 수정" accurately reflects the two main changes in the pull request: the server chat response fix (image upload validation enforcement) and the chat width adjustment (CSS styling changes). The title is specific, concise, and directly relates to the actual changeset modifications visible in both Solve.tsx and solve.css.ts files. It provides meaningful context that a teammate could use to understand the primary focus of the changes.
Linked Issues Check	✅ Passed	The changes in Solve.tsx directly address the objective specified in linked issue #62, which required fixing inconsistent behavior in image upload validation. The PR now enforces an exact file count match against expectedCount rather than just checking if the count is less than expected, and provides explicit error messaging (1 image for expectedCount=1, or "1 문제 이미지 + 1 풀이 이미지" for expectedCount=2). This resolves the reported inconsistency where the validation prompt appeared for single uploads but not for multiple uploads, ensuring consistent validation behavior across all scenarios.

---

📜 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 89ebf1f and 0400f4e.

📒 Files selected for processing (1)

• src/pages/solve/Solve.tsx (4 hunks)

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎩 빌드에 성공했습니다!

[github-actions]

🎩 빌드에 성공했습니다!