Skip to content

[DESIGN] 신 기능 홍보 모달 사이즈 변경 #424

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
i-meant-to-be merged 4 commits into from
Feb 24, 2026
Merged

[DESIGN] 신 기능 홍보 모달 사이즈 변경 #424

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
42ffd02
design: 메인 컨테이너 크기 변경
i-meant-to-be Feb 23, 2026
eb74eb5
design: 내부 텍스트 및 컨텐츠 크기 변경
i-meant-to-be Feb 23, 2026
7c174a0
design: 체크박스 크기 변경
i-meant-to-be Feb 24, 2026
3a3afef
design: 추가 요구사항 반영
i-meant-to-be Feb 24, 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
28 changes: 16 additions & 12 deletions src/components/UpdateModal/UpdateModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ export default function UpdateModal({
onClickDetailButton,
}: UpdateModalProps) {
return (
<div className="flex aspect-square w-[clamp(800px,min(62.5vw,90vh),1000px)] flex-col overflow-hidden rounded-[2.2%] bg-default-white">
<div className="flex aspect-square w-[clamp(600px,min(47.5vw,90vh),780px)] flex-col overflow-hidden rounded-[2.2%] bg-default-white">
Copy link

@gemini-code-assist gemini-code-assist bot Feb 23, 2026

Choose a reason for hiding this comment

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

medium

clamp 함수에 사용된 600px, 47.5vw, 780px와 같은 값들이 하드코딩되어 있습니다. 이러한 '매직 넘버'는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 이 값들을 의미 있는 이름의 상수로 추출하여 사용하면 코드의 의도를 더 명확하게 전달하고 향후 수정을 용이하게 할 수 있습니다. 이 방식은 파일 내 다른 clamp 함수(예: 34, 59, 63 라인 등)에도 일관되게 적용하는 것이 좋습니다.

{isPredefinedPatchNote(data) ? (
<>
{/* 메인 컨텐츠 */}
<div className="flex h-[60%] w-full flex-col gap-[2%] bg-[#EFF0F4] p-[4.5%]">
<div className="flex w-full flex-row items-center gap-[1%]">
<div className="w-[15.7%] shrink-0">
<MegaphoneAsset className="h-auto w-full" />
<div className="flex h-[clamp(72px,6vh,96px)] w-full flex-row items-center gap-[1%]">
<div className="h-full w-[15.7%] shrink-0">
<MegaphoneAsset className="my-[8px] h-[80px] w-[93px]" />
</div>

<div className="flex w-full flex-col space-y-[2.0%]">
<p className="text-[clamp(14px,1.25vw,20px)] leading-none text-default-black">
<div className="flex w-full flex-col space-y-[clamp(15px,1.25vw,20px)]">
<p className="text-[clamp(12px,0.875vw,14px)] leading-none text-default-black">
디베이트 타이머에 새로운 기능이 생겼어요!
</p>

Expand All @@ -56,11 +56,11 @@ export default function UpdateModal({
<div className="flex w-full flex-1 flex-col p-[1%]">
{/* 타이틀 및 내용 */}
<div className="flex h-full flex-col items-center justify-center">
<p className="text-[clamp(32px,2.8vw,45px)] font-bold text-brand">
<p className="text-[clamp(26px,2.1vw,34px)] font-bold text-brand">
{data.title}
</p>
<div className="mb-[1.6%] mt-[0.8%] h-[2px] w-[10%] bg-brand" />
<p className="text-center text-[clamp(20px,1.5vw,24px)]">
<p className="text-center text-[clamp(14px,1.1vw,18px)]">
{data.description}
</p>
</div>
Expand All @@ -73,11 +73,13 @@ export default function UpdateModal({
<input
id="update-modal-hide-for-week-predefined"
type="checkbox"
className="border-gray size-[clamp(16px,1.5vw,20px)] rounded-[4px]"
className="border-gray size-[clamp(12px,0.93vw,15px)] rounded-[4px]"
checked={isChecked}
onChange={(e) => onChecked(e.target.checked)}
/>
<p className="text-[clamp(13px,1vw,16px)]">일주일 간 보지 않기</p>
<p className="text-[clamp(10px,0.75vw,12px)]">
일주일 간 보지 않기
</p>
</label>
</div>
</>
Expand All @@ -100,11 +102,13 @@ export default function UpdateModal({
<input
id="update-modal-hide-for-week-image-only"
type="checkbox"
className="border-gray size-[clamp(16px,1.5vw,20px)] rounded-[4px]"
className="border-gray size-[clamp(16px,1.25vw,20px)] rounded-[4px]"
checked={isChecked}
onChange={(e) => onChecked(e.target.checked)}
/>
<p className="text-[clamp(13px,1vw,16px)]">일주일 간 보지 않기</p>
<p className="text-[clamp(10px,0.75vw,12px)]">
일주일 간 보지 않기
</p>
</label>
</div>
)}
Expand Down
Loading