fix : 문제 이미지 누락된 코드 수정 #158
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough문제 설명 영역에 문제 이미지를 동적으로 표시할 수 있도록 HTML 요소가 추가되고, JavaScript의 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Server
User->>Browser: 페이지 로드 또는 문제 선택
Browser->>Server: 문제 데이터 요청
Server-->>Browser: 문제 데이터 응답 (imageUrl 포함 가능)
Browser->>Browser: loadProblem(data)
alt imageUrl 존재
Browser->>Browser: 이미지 요소 src 설정 및 표시
else imageUrl 없음
Browser->>Browser: 이미지 요소 숨김
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Kimminu7
approved these changes
Jul 7, 2025
chat26666
approved these changes
Jul 7, 2025
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/main/resources/templates/test-submit.html(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/main/resources/templates/test-submit.html (1)
Learnt from: thezz9
PR: ezcode-my/backend#73
File: src/main/resources/templates/submit-test.html:135-135
Timestamp: 2025-06-18T11:41:58.457Z
Learning: src/main/resources/templates/submit-test.html 파일은 테스트용 파일로, isCorrect 값의 하드코딩은 의도적이며 사용자가 UI 요소를 통해 정답/오답 상태를 선택할 수 있도록 개선 예정입니다.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
Comment on lines
+940
to
+945
| if (data.imageUrl) { | ||
| probImageEl.src = data.imageUrl; | ||
| probImageEl.style.display = 'block'; | ||
| } else { | ||
| probImageEl.style.display = 'none'; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
이미지 표시/숨김 로직 보완 제안
src를 조건부로 설정하지 않으면 직전 문제의 이미지가 캐시된 채 남아있을 수 있습니다.- 래퍼(
prob-image-wrapper)도 함께 토글해야 레이아웃 공백이 사라집니다.
-if (data.imageUrl) {
- probImageEl.src = data.imageUrl;
- probImageEl.style.display = 'block';
-} else {
- probImageEl.style.display = 'none';
-}
+if (data.imageUrl) {
+ probImageEl.src = data.imageUrl;
+ probImageEl.alt = `${data.title} 이미지`;
+ probImageEl.parentElement.style.display = 'block';
+} else {
+ probImageEl.removeAttribute('src');
+ probImageEl.parentElement.style.display = 'none';
+}📝 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
| if (data.imageUrl) { | |
| probImageEl.src = data.imageUrl; | |
| probImageEl.style.display = 'block'; | |
| } else { | |
| probImageEl.style.display = 'none'; | |
| } | |
| if (data.imageUrl) { | |
| probImageEl.src = data.imageUrl; | |
| probImageEl.alt = `${data.title} 이미지`; | |
| probImageEl.parentElement.style.display = 'block'; | |
| } else { | |
| probImageEl.removeAttribute('src'); | |
| probImageEl.parentElement.style.display = 'none'; | |
| } |
🤖 Prompt for AI Agents
In src/main/resources/templates/test-submit.html around lines 940 to 945, the
current logic only toggles the image element's display but does not clear the
src attribute when no imageUrl is present, which can cause the previous image to
remain cached and visible. Also, the wrapper element with class
'prob-image-wrapper' is not toggled, leaving unwanted layout space. To fix this,
clear the probImageEl.src when data.imageUrl is absent and toggle the display
style of both probImageEl and its wrapper element accordingly to fully hide or
show the image and remove layout gaps.
Comment on lines
+819
to
+822
| <div id="prob-image-wrapper"> | ||
| <img id="prob-image" src="" alt="문제 이미지" style="max-width: 100%; height: auto;" /> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
문제 이미지가 토글 탭 외부에 위치하여 항상 표시되는 문제
prob-image-wrapper가 description-content div 밖에 배치되어 있어, 사용자가 토론글 탭으로 전환해도 이미지가 계속 노출됩니다. 의도대로라면 문제 설명과 함께 숨겨져야 합니다.
- </div> <!-- #discussion-content 종료 -->
-
- <div id="prob-image-wrapper">
- <img id="prob-image" src="" alt="문제 이미지" style="max-width: 100%; height: auto;" />
- </div>
+ </div> <!-- #discussion-content 종료 -->
+
+ <!-- description-content 내부로 이동 -->
+ <div id="prob-image-wrapper" class="left-content active" style="margin-top:12px;">
+ <img id="prob-image" src="" alt="문제 이미지" style="max-width:100%;height:auto;display:none;" />
+ </div>이렇게 옮기면 탭 전환 로직(.left-content.active)에 따라 이미지도 자연스럽게 토글됩니다.
추가로 display:none을 초기값으로 주어 첫 로드 시 깜빡임을 방지할 수 있습니다.
🤖 Prompt for AI Agents
In src/main/resources/templates/test-submit.html around lines 819 to 822, the
prob-image-wrapper div is placed outside the description-content div, causing
the problem image to always be visible even when switching to the discussion
tab. Move the prob-image-wrapper div inside the description-content div so that
it toggles visibility along with the problem description. Also, set its initial
CSS display property to none to prevent flickering on page load.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit