Skip to content

fix : 문제 이미지 누락된 코드 수정 #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chat26666 merged 1 commit into from
Jul 7, 2025
Merged

fix : 문제 이미지 누락된 코드 수정 #158

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion src/main/resources/templates/test-submit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@
/* 비활성 상태의 밑줄 */
color: #ccc;
/* 기본 글자색 */
font-size: 20px;
font-size: 20px;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
Expand Down Expand Up @@ -816,6 +816,10 @@
<div id="discussion-pagination"></div>
</div>

<div id="prob-image-wrapper">
<img id="prob-image" src="" alt="문제 이미지" style="max-width: 100%; height: auto;" />
</div>

Comment on lines +819 to +822
Copy link

@coderabbitai coderabbitai bot Jul 7, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

문제 이미지가 토글 탭 외부에 위치하여 항상 표시되는 문제

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.

</div>
<div class="right">
<div class="section">
Expand Down Expand Up @@ -932,6 +936,13 @@ <h3>채점 결과</h3>
probTimeEl.textContent = data.timeLimit ?? '--';
probMemEl.textContent = data.memoryLimit ?? '--';
probCatsEl.textContent = Array.isArray(data.categories) ? data.categories.join(', ') : '';

if (data.imageUrl) {
probImageEl.src = data.imageUrl;
probImageEl.style.display = 'block';
} else {
probImageEl.style.display = 'none';
}
Comment on lines +940 to +945
Copy link

@coderabbitai coderabbitai bot Jul 7, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

이미지 표시/숨김 로직 보완 제안

  1. src를 조건부로 설정하지 않으면 직전 문제의 이미지가 캐시된 채 남아있을 수 있습니다.
  2. 래퍼(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.

} catch (err) {
console.error(err);
probTitleEl.textContent = '네트워크 오류';
Expand Down