Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
47 changes: 24 additions & 23 deletions jobdri/src/app/credit/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
type CreditPlan,
} from "@/lib/api/credit";
import { Lnb } from "@/components/common/lnb";
import Header from "@/components/common/header/Header";
import PageHeader from "@/components/common/PageHeader";

function calcDiscountRate(plan: CreditPlan, basePricePerUnit: number): string {
Expand Down Expand Up @@ -44,28 +43,30 @@ export default function CreditPage() {
plans.find((p) => p.planCode === "ONE_TIME")?.price ?? 2500;

return (
<div className="flex min-h-screen w-full bg-[#F5F6F9] overflow-x-hidden ">
<Lnb />
<main className="flex-1 w-full max-w-[1320px] min-w-[1060px] px-18 pt-12 pb-60 mx-auto">
<PageHeader />
<section className="flex flex-row gap-4 w-full mt-8 mb-16 mx-auto">
{plans.map((plan) => (
<CreditCard
key={plan.planCode}
creditCount={plan.creditAmount}
price={plan.price.toLocaleString()}
planCode={plan.planCode}
discountRate={calcDiscountRate(plan, basePricePerUnit)}
discountLabel={
calcDiscountRate(plan, basePricePerUnit) ? "할인" : ""
}
/>
))}
</section>
<div className="min-w-265">
<Useage />
</div>
</main>
<div className="flex h-dvh w-full overflow-hidden bg-[#F5F6F9]">
<Lnb className="z-50 shrink-0" />
<div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
<main className="mx-auto w-full max-w-[1320px] min-w-[1060px] px-18 pt-12 pb-60">
Comment on lines +48 to +49

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Allow horizontal scrolling for the fixed-width content.

main remains min-w-[1060px], but its parent uses overflow-x-hidden. When the viewport is narrower than the LNB plus 1060px, the right side of the credit content is clipped and cannot be reached. Use overflow-x-auto or relax the minimum width at smaller breakpoints.

Proposed fix
-      <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
+      <div className="min-h-0 min-w-0 flex-1 overflow-x-auto overflow-y-auto">
📝 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
<div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
<main className="mx-auto w-full max-w-[1320px] min-w-[1060px] px-18 pt-12 pb-60">
<div className="min-h-0 min-w-0 flex-1 overflow-x-auto overflow-y-auto">
<main className="mx-auto w-full max-w-[1320px] min-w-[1060px] px-18 pt-12 pb-60">
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@jobdri/src/app/credit/page.tsx` around lines 48 - 49, Update the parent
content container’s overflow behavior near the fixed-width main element to allow
horizontal scrolling instead of clipping. Change the `overflow-x-hidden`
behavior on the surrounding `<div>` to `overflow-x-auto`, while preserving the
existing vertical scrolling and `main` width constraints.

<PageHeader />
<section className="mx-auto mt-8 mb-16 flex w-full flex-row gap-4">
{plans.map((plan) => (
<CreditCard
key={plan.planCode}
creditCount={plan.creditAmount}
price={plan.price.toLocaleString()}
planCode={plan.planCode}
discountRate={calcDiscountRate(plan, basePricePerUnit)}
discountLabel={
calcDiscountRate(plan, basePricePerUnit) ? "할인" : ""
}
/>
))}
</section>
<div className="min-w-265">
<Useage />
</div>
</main>
</div>
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ export default function MockApplicationJdReviewPage() {
{showBackConfirm && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-bg-lightbox-default">
<ModalNotice
type="confirmationModal"
type="confirmation"
title="공고 내용을 다시 업로드 하시겠습니까?"
description="기존 정보는 저장되지 않고 삭제됩니다."
onClose={closeBackConfirm}
Expand Down
Loading