Skip to content

Feature/#64 component feat #65

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
yiyoonseo merged 9 commits into from
May 22, 2026
Merged

Feature/#64 component feat #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7bb8bcf
Feat: #64 LNB μ• λ‹ˆλ©”μ΄μ…˜ μΆ”κ°€
yiyoonseo May 22, 2026
2fd43b7
Feat: #64 ν¬λ ˆλ”§ λΌμš°νŒ… 연동
yiyoonseo May 22, 2026
bd01a07
Mod: Toast shadow λ³€κ²½ to cardshadow
yiyoonseo May 22, 2026
4b4a671
Feat: #64 LNB 우츑 보더 μΆ”κ°€
yiyoonseo May 22, 2026
49cb37b
Feat: #64 이메일 μ•„μ΄μ½˜ μΆ”κ°€ 및 적용
yiyoonseo May 22, 2026
06a39f8
Mod: #64 μ‚­μ œ μ»΄ν¬λ„ŒνŠΈ μˆ˜μ •
yiyoonseo May 22, 2026
1d3e048
Feat: #64 CLOSE_S μΆ”κ°€
yiyoonseo May 22, 2026
3624daa
Mod: #64 Business Footer μˆ˜μ •
yiyoonseo May 22, 2026
dd24f6f
Mod: #64 헀더, ν‘Έν„° μˆ˜μ • 및 였λ₯˜ 볡ꡬ
yiyoonseo May 22, 2026
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
1 change: 1 addition & 0 deletions jobdri/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ export default function Home() {
<div className="flex items-center gap-6">
<IconOnlyButton tone="light" />
<IconOnlyButton tone="dark" />
<IconOnlyButton tone="light" size="small" />
</div>
</Section>
<Section title="CTA">
Expand Down
4 changes: 4 additions & 0 deletions jobdri/src/assets/ic_Close_S.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions jobdri/src/assets/ic_Email.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions jobdri/src/assets/ic_LOGO_minimum.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions jobdri/src/assets/ic_LOGO_minimum_favi.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion jobdri/src/components/common/buttons/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ type IconButtonDirection = "left" | "right";
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
direction: IconButtonDirection;
active?: boolean;
size?: "default" | "small";
}

const directionIconType: Record<IconButtonDirection, "ARROW_L" | "ARROW_R"> = {
Expand All @@ -18,6 +19,7 @@ export default function IconButton({
direction,
active = false,
className,
size = "default",
type = "button",
...buttonProps
}: IconButtonProps) {
Expand All @@ -26,10 +28,11 @@ export default function IconButton({
type={type}
aria-label={direction === "left" ? "이전" : "λ‹€μŒ"}
className={clsx(
"flex h-12 w-12 items-center justify-center gap-2.5 rounded-icon-round bg-bg-white p-2.5",
"flex items-center justify-center gap-2.5 rounded-icon-round bg-bg-white p-2.5",
buttonProps.disabled ? "cursor-not-allowed" : "cursor-pointer",
active ? "text-icon-neutral-heavy" : "text-icon-neutral-assistive",
className,
size === "small" ? "h-6 w-6" : "h-10 w-10",
Comment on lines +31 to +35
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚑ Quick win

Small variant sizing is internally inconsistent.

Line 31 keeps fixed p-2.5 and Line 41 keeps a fixed h-6 w-6 icon, while Line 35 can shrink the button to h-6 w-6. The small button ends up with no real content room, so icon rendering/layout is unstable.

Proposed fix 
       className={clsx(
-        "flex items-center justify-center gap-2.5 rounded-icon-round bg-bg-white p-2.5",
+        "flex items-center justify-center gap-2.5 rounded-icon-round bg-bg-white",
         buttonProps.disabled ? "cursor-not-allowed" : "cursor-pointer",
         active ? "text-icon-neutral-heavy" : "text-icon-neutral-assistive",
         className,
-        size === "small" ? "h-6 w-6" : "h-10 w-10",
+        size === "small" ? "h-6 w-6 p-1" : "h-10 w-10 p-2",
       )}
       {...buttonProps}
     >
       <Icon
         type={directionIconType[direction]}
-        className="aspect-square h-6 w-6 shrink-0"
+        className={clsx(
+          "aspect-square shrink-0",
+          size === "small" ? "h-4 w-4" : "h-6 w-6",
+        )}
       />

Also applies to: 39-41

πŸ€– 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/components/common/buttons/IconButton.tsx` around lines 31 - 35,
The small variant of IconButton produces inconsistent/insufficient interior
space because padding remains fixed (p-2.5) while the container and icon classes
shrink to h-6 w-6; update IconButton to compute size-aware spacing: when
props.size === "small" set a smaller padding (e.g., p-1 or p-1.5) or
alternatively enforce a minimum container dimension that accommodates the small
icon (adjust the size branch that currently outputs "h-6 w-6"), and ensure the
icon element(s) use a matching small icon class rather than a fixed large icon
size; modify the conditional class list in the IconButton component (the
expression that uses size, className, active, and buttonProps.disabled) so small
uses consistent paired container (height/width) and padding values to prevent
layout collapse.

)}
{...buttonProps}
>
Expand Down
11 changes: 10 additions & 1 deletion jobdri/src/components/common/buttons/IconOnlyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ type IconOnlyButtonTone = "light" | "dark";
interface IconOnlyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
iconType?: IconType;
tone?: IconOnlyButtonTone;
size?: "default" | "small";
}

const toneStyles: Record<IconOnlyButtonTone, string> = {
Expand All @@ -20,8 +21,10 @@ export default function IconOnlyButton({
tone = "light",
className,
type = "button",
size = "default",
...buttonProps
}: IconOnlyButtonProps) {
const closeIconType = size === "small" ? "CLOSE_S" : "CLOSE_M";
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚑ Quick win

iconType is ignored after this change.

Line 42 always renders closeIconType, so callers passing iconType get overridden. This is a behavior regression for a public prop.

Proposed fix 
-  const closeIconType = size === "small" ? "CLOSE_S" : "CLOSE_M";
+  const resolvedIconType =
+    size === "small" && iconType === "CLOSE_M" ? "CLOSE_S" : iconType;
@@
-      <Icon
-        type={closeIconType}
-        className={
-          (clsx("shrink-0 "), size === "small" ? "h-5 w-5" : "h-6 w-6")
-        }
-      />
+      <Icon
+        type={resolvedIconType}
+        className={clsx("shrink-0", size === "small" ? "h-5 w-5" : "h-6 w-6")}
+      />

Also applies to: 41-45

πŸ€– 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/components/common/buttons/IconOnlyButton.tsx` at line 27, The
component IconOnlyButton currently computes closeIconType but always passes
closeIconType to the rendered icon (overriding the public prop iconType); update
the render to prefer the prop iconType when provided and fall back to
closeIconType otherwise (e.g., use iconType if truthy, else closeIconType) so
callers' iconType values are respected; look for the computed constant
closeIconType and the prop iconType in the IconOnlyButton component and change
the value used in the JSX where the icon is rendered.

return (
<button
type={type}
Expand All @@ -31,10 +34,16 @@ export default function IconOnlyButton({
buttonProps.disabled ? "cursor-not-allowed" : "cursor-pointer",
toneStyles[tone],
className,
size === "small" ? "h-6 w-6" : "h-10 w-10",
)}
{...buttonProps}
>
<Icon type={iconType} className="h-6 w-6 shrink-0" />
<Icon
type={closeIconType}
className={
(clsx("shrink-0 "), size === "small" ? "h-5 w-5" : "h-6 w-6")
}
/>
</button>
);
}
13 changes: 6 additions & 7 deletions jobdri/src/components/common/footer/BusinessFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { HTMLAttributes } from "react";
import clsx from "clsx";
import Logo from "@/assets/ic_LOGO_minimum.svg";

export default function BusinessFooter({
className,
Expand All @@ -10,12 +11,10 @@ export default function BusinessFooter({
className={clsx("flex self-stretch flex-col", className)}
{...footerProps}
>
<div className="flex items-start justify-between self-stretch bg-bg-default px-10 py-7">
<div className="flex items-start justify-between self-stretch bg-bg-default mx-16 my-7">
<div className="flex w-full min-w-0 flex-1 items-start gap-3">
<div className="flex w-[150px] flex-col items-start gap-[34px]">
<strong className="flex h-6 w-[54.545px] items-center justify-center pr-[2.545px] text-[14px] font-bold leading-[140%] text-text-neutral-title">
JobDri
</strong>
<Logo />
</div>

<div className="flex min-w-0 flex-1 flex-col items-start gap-6">
Expand Down Expand Up @@ -53,9 +52,9 @@ export default function BusinessFooter({
</div>

<p className="self-stretch text-[11px] font-medium leading-[160%] tracking-[-0.22px] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]">
λ³Έ μ›Ήμ‚¬μ΄νŠΈμ— λͺ…μ‹œλœ λͺ¨λ“  κΈ°μ—…μ˜ 둜고 및 μƒν‘œμ— λŒ€ν•œ κΆŒλ¦¬λŠ” 각 ν•΄λ‹Ή
μƒν‘œκΆŒμžμ—κ²Œ κ·€μ†λ©λ‹ˆλ‹€. ν•΄λ‹Ή λ‘œκ³ λŠ” ν•©κ²©μž μ·¨μ—… ν˜„ν™© λ“± λ‹¨μˆœ 정보
제곡의 λͺ©μ μœΌλ‘œλ§Œ μ‚¬μš©λ˜λ©°, μƒν‘œκΆŒ μΉ¨ν•΄ μ˜λ„λŠ” μ—†μŠ΅λ‹ˆλ‹€.
λ³Έ μ›Ήμ‚¬μ΄νŠΈμ— λͺ…μ‹œλœ λͺ¨λ“  κΈ°μ—…μ˜ 둜고 및 μƒν‘œμ— λŒ€ν•œ κΆŒλ¦¬λŠ” 각
ν•΄λ‹Ή μƒν‘œκΆŒμžμ—κ²Œ κ·€μ†λ©λ‹ˆλ‹€. ν•΄λ‹Ή λ‘œκ³ λŠ” ν•©κ²©μž μ·¨μ—… ν˜„ν™© λ“± λ‹¨μˆœ
정보 제곡의 λͺ©μ μœΌλ‘œλ§Œ μ‚¬μš©λ˜λ©°, μƒν‘œκΆŒ μΉ¨ν•΄ μ˜λ„λŠ” μ—†μŠ΅λ‹ˆλ‹€.
</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion jobdri/src/components/common/footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function Footer({
return (
<footer
className={clsx(
"relative left-1/2 flex w-screen shrink-0 -translate-x-1/2 items-center justify-center gap-8 border-t border-line-neutral-default bg-bg-contents-assistive pt-4 pb-8",
"relative left-1/2 flex w-screen shrink-0 -translate-x-1/2 items-center justify-center gap-8 border-t border-line-neutral-default bg-bg-contents-default pt-4 pb-8",
className,
)}
>
Expand Down
19 changes: 9 additions & 10 deletions jobdri/src/components/common/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function HeaderAction({
return (
<Button
label={label}
styleType="quaternary"
styleType="tertiary"
size="small"
iconType={iconType}
className={className}
Expand All @@ -57,7 +57,7 @@ function HeaderAction({

export default function Header({
title = "λͺ¨μ˜ μ„œλ₯˜ 지원",
leftAction = { label: "λŒμ•„κ°€κΈ°", iconType: "HOME_S" },
leftAction = { label: "λ©”μΈμœΌλ‘œ", iconType: "HOME_S" },
rightAction = { label: "μ €μž₯ν•˜κΈ°" },
currentStep = 1,
steps = defaultSteps,
Expand All @@ -66,15 +66,14 @@ export default function Header({
const rightActionDisabled = currentStep <= 2 || rightAction.disabled;
const { onClick: leftActionOnClick, ...leftButtonProps } = leftAction;

const handleLeftActionClick: ButtonHTMLAttributes<
HTMLButtonElement
>["onClick"] = (event) => {
leftActionOnClick?.(event);
const handleLeftActionClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"] =
(event) => {
leftActionOnClick?.(event);

if (!event.defaultPrevented) {
router.push(MOCK_APPLICATION_HOME_PATH);
}
};
if (!event.defaultPrevented) {
router.push(MOCK_APPLICATION_HOME_PATH);
}
};

return (
<header className="flex w-full items-start justify-between bg-bg-default px-[82px] pt-10 pb-4">
Expand Down
5 changes: 4 additions & 1 deletion jobdri/src/components/common/icons/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import IC_ARROW_R_N from "@/assets/ic_Arrow_Right_M.svg";
import IC_DOTS_M from "@/assets/ic_Dots_M.svg";
import IC_KABAB from "@/assets/ic_Kabab.svg";
import IC_CLOSE_M from "@/assets/ic_Close_M.svg";
import IC_CLOSE_S from "@/assets/ic_Close_S.svg";
import IC_SIDEBAR from "@/assets/ic_SidebarToggle.svg";
import IC_HOME_S from "@/assets/ic_Home_s.svg";
import IC_APPLY from "@/assets/ic_Apply.svg";
Expand All @@ -35,6 +36,7 @@ import IC_LIGHTBULB from "@/assets/ic_Lightbulb.svg";
import IC_CHECK_M from "@/assets/ic_Check_M.svg";
import IC_CHECK_COMPLETE from "@/assets/ic_Check_Complete.svg";
import IC_EDIT from "@/assets/ic_Edit.svg";
import IC_EMAIL from "@/assets/ic_Email.svg";
import IC_LINK from "@/assets/ic_Link.svg";
import IC_POLYGON_1 from "@/assets/ic_Polygon_1.svg";
import IC_POLYGON_2 from "@/assets/ic_Polygon_2.svg";
Expand Down Expand Up @@ -63,13 +65,13 @@ const iconMap = {
DOTS_M: IC_DOTS_M,
KABAB: IC_KABAB,
CLOSE_M: IC_CLOSE_M,
CLOSE_S: IC_CLOSE_S,
SIDEBAR: IC_SIDEBAR,
HOME_S: IC_HOME_S,
APPLY: IC_APPLY,
EX_S: IC_EX_S,
ARROW_R_N_S: IC_ARROW_R_N_S,
DOT_S: IC_DOT_S,
CLOSE: IC_CLOSE,
EX_LINK: IC_EX_LINK,
TOKEN: IC_TOKEN,
SPARKLE: IC_SPARKLE,
Expand All @@ -78,6 +80,7 @@ const iconMap = {
CHECK_M: IC_CHECK_M,
CHECK_COMPLETE: IC_CHECK_COMPLETE,
EDIT: IC_EDIT,
EMAIL: IC_EMAIL,
LINK: IC_LINK,
POLYGON_1: IC_POLYGON_1,
POLYGON_2: IC_POLYGON_2,
Expand Down
Loading