[feat] Modal 컴포넌트 제작 by jwj0620gcu · Pull Request #32 · Leets-Official/LOOPIT-FE

jwj0620gcu · 2026-01-15T16:45:58Z

✨ 주요 변경사항

공통 Modal 컴포넌트를 신규 추가했습니다.
spacing 디자인 토큰 하나 추가했습니다.

📝 작업 상세 내용

Modal 컴포넌트는 Button 공통 컴포넌트를 재사용하도록 구현했습니다.
Playground 페이지에서 Modal 컴포넌트를 직접 확인할 수 있도록 예제를 추가했습니다.
subtitle은 truncate로 한 줄 유지하게 하였습니다.

✅ 체크리스트

PR 본문에 Close #번호 추가
불필요한 주석, 디버깅 코드 제거
기능 테스트 및 정상 동작 확인
커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

모달 버튼을 누르면....

모달이 열립니다!

🔍 기타 참고사항

🔗 관련 이슈

Close [Feat] #26 - Modal 컴포넌트 제작 #26

vercel · 2026-01-15T16:46:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
loopit	Error		Jan 15, 2026 4:46pm

github-actions · 2026-01-15T16:48:24Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 측정 불가

KyeongJooni

수고하셨습니다! 코멘트 확인해주시면 좋을 것 같아요!!

KyeongJooni · 2026-01-16T01:28:30Z

BannerCard에도 달았던 코멘트긴 하지만 variant가 없는데 tv 의존성을 사용할 필요가 없을 것 같습니다! 한번 확인해보시면 좋을 것 같아요

variant 사용 안 해 Modal.style.ts파일로 새로 만들었습니다!

KyeongJooni · 2026-01-16T01:30:55Z

+            <Button variant="outline" size="auto" className="w-full" onClick={onCancel}>
+              취소
+            </Button>
+          </div>
+
+          <div className={buttonWrapper()}>
+            <Button variant="fill" size="auto" className="w-full" onClick={onConfirm}>
+              삭제
+            </Button>


현재 취소 삭제 버튼을 하드코딩했지만 범용성을 위해 cancelText, confirmText props 로 사용하는 방법은 어떨까요?

범용 모달 충족 위해 말씀해주신대로 변경했습니다! 감사합니다

KyeongJooni · 2026-01-16T01:33:40Z

+    overlay: 'fixed inset-0 z-50 flex items-center justify-center bg-black/40',
+
+    container:
+      'w-[347px] h-[167px] rounded-[var(--radius-l)] bg-[var(--color-green-500)] px-[32px] py-[24px] flex flex-col justify-between',


현재 토큰값으로 py-[24px]은 padding-xl이 있는것 같은데 토큰값 사용안하신 이유가 있을까요? px는 토큰값이 없기 때문에 새로 추가해서 둘다 하드코딩말고 토큰값으로 사용하면 좋을 것 같습니다! 또한 추후에 fade-in/out 애니메이션 추가하면 더 UX를 챙길 수 있을 것 같습니다!

토큰 새로 추가하고 집어 넣었습니다!
애미네이션 또한 추가하여 부드럽게 in/out 생겨 더 UX 친화적이 되었습니다!

KyeongJooni · 2026-01-16T01:34:03Z

+            onCancel={() => setIsModalOpen(false)}
+            onConfirm={() => {
+              setIsModalOpen(false);
+              console.log('삭제 확정');


불필요한 console.log는 삭제부탁드립니다!

넵 감사합니다!

KyeongJooni · 2026-01-16T01:54:18Z

+
+export const modalVariants = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 flex items-center justify-center bg-black/40',


피그마 디자인 상 이름이 컴포넌트 네이밍이 모달이긴 한데 와이어프레임을 보면 모달이 아닌 ConfirmPopup이나 Toast 느낌이 좀 더 강한 것 같아요 overlay가 필요한지 다시 확인해보시면 좋을 것 같습니다! 😄

github-actions · 2026-01-16T02:30:24Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

YeBeenChoi

고생 많으셨습니다!! 👍

YeBeenChoi · 2026-01-16T07:43:33Z

현재 구현만 보면 버튼을 통한 닫기(onCancel)만 제공되는 것 같네용 UX 관점에서 ESC 키나 오버레이 클릭으로도 닫히는 동작이 있으면 좋을 것 같아서 참고용으로 리뷰 남깁니다!

esc키나 오버레이 배경 클릭하게 해도 닫기 버튼 말씀하신 대로 변경 완료 했습니다!
좋은 아이디어 감사합니다!

…l/LOOPIT-FE into 26-feat/모달-컴포넌트-제작

github-actions · 2026-01-17T08:07:47Z

PR 검증 결과

✅ TypeScript: 통과
⚠️ ESLint: 문제 발견
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

ESLint 상세

Errors: 0
Warnings: 4

src/shared/ui/Modal/Modal.tsx

Warning (Line 43): Visible, non-interactive elements with click handlers must have at least one keyboard listener. jsx-a11y/click-events-have-key-events
Warning (Line 43): Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element. jsx-a11y/no-static-element-interactions
Warning (Line 44): Visible, non-interactive elements with click handlers must have at least one keyboard listener. jsx-a11y/click-events-have-key-events
Warning (Line 44): Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element. jsx-a11y/no-static-element-interactions

…l/LOOPIT-FE into 26-feat/모달-컴포넌트-제작

github-actions · 2026-01-17T08:49:22Z

PR 검증 결과

✅ TypeScript: 통과
⚠️ ESLint: 문제 발견
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

ESLint 상세

Errors: 0
Warnings: 2

src/shared/ui/Modal/Modal.tsx

Warning (Line 59): Visible, non-interactive elements with click handlers must have at least one keyboard listener. jsx-a11y/click-events-have-key-events
Warning (Line 59): Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element. jsx-a11y/no-static-element-interactions

github-actions · 2026-01-17T08:55:59Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
❌ Test: 실패
❌ Build: 실패

github-actions · 2026-01-17T09:03:44Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
❌ Test: 실패
❌ Build: 실패

github-actions · 2026-01-17T09:08:40Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

github-actions · 2026-01-17T14:42:43Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

github-actions · 2026-01-17T17:31:51Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 3MB

KyeongJooni

고생하셨습니다!! 💯

YeBeenChoi

변경 사항 확인했습니다! 고생 많으셨어요!! 👍👍

jwj0620gcu added 3 commits January 16, 2026 01:39

chore: chore: 모달 예제 플레이그라운드에 추가

adb27aa

Modal 컴포넌트 신규 추가 및 스타일 적용

c9b9870

chore: Modal test 통과

6b07d0d

github-actions Bot assigned jwj0620gcu Jan 15, 2026

github-actions Bot requested review from KyeongJooni and YeBeenChoi January 15, 2026 16:47

github-actions Bot added the ✨Feature 새로운 기능 label Jan 15, 2026

jwj0620gcu changed the title ~~[feat]-Modal 컴포넌트 제작~~ [feat] Modal 컴포넌트 제작 Jan 15, 2026

KyeongJooni reviewed Jan 16, 2026

View reviewed changes

Merge branch 'main' into 26-feat/모달-컴포넌트-제작

b30300c

vercel Bot deployed to Preview January 16, 2026 02:29 View deployment

YeBeenChoi reviewed Jan 16, 2026

View reviewed changes

jwj0620gcu added 5 commits January 17, 2026 15:04

버튼 텍스트를 cancelText, confirmText props로 분리해 모달 재사용성을 개선

be6f6c1

refactor:overlay 제거

a03765b

refactor: padding 값 토큰 값 사용 및 새로 추가

2acec6f

refactor: 커멘트 최종 수정

023891c

Merge branch '26-feat/모달-컴포넌트-제작' of https://github.com/Leets-Officia…

d1a0c7c

…l/LOOPIT-FE into 26-feat/모달-컴포넌트-제작

vercel Bot deployed to Preview January 17, 2026 06:40 View deployment

Merge branch 'main' into 26-feat/모달-컴포넌트-제작

01ae397

vercel Bot deployed to Preview January 17, 2026 08:07 View deployment

jwj0620gcu added 2 commits January 17, 2026 17:47

fix: eslint 문제 해결 시도

a0e9bdd

Merge branch '26-feat/모달-컴포넌트-제작' of https://github.com/Leets-Officia…

905f9a4

…l/LOOPIT-FE into 26-feat/모달-컴포넌트-제작

vercel Bot deployed to Preview January 17, 2026 08:49 View deployment

오버레이 영역 수정

bc64b20

vercel Bot deployed to Preview January 17, 2026 08:55 View deployment

fix: test 코드 수정

83a1436

vercel Bot deployed to Preview January 17, 2026 09:03 View deployment

chore:prettier 포맷 적용

f836e1a

vercel Bot deployed to Preview January 17, 2026 09:08 View deployment

refactor:주석 정리

aec3192

vercel Bot deployed to Preview January 17, 2026 14:42 View deployment

chore: 로컬 작업 파일 push 취소

f2f70e7

vercel Bot had a problem deploying to Preview January 17, 2026 17:02 Failure

chore: 중복 root 파일 정리

2389d0f

vercel Bot deployed to Preview January 17, 2026 17:08 View deployment

Merge branch 'main' into 26-feat/모달-컴포넌트-제작

53351eb

vercel Bot deployed to Preview January 17, 2026 17:31 View deployment

KyeongJooni approved these changes Jan 17, 2026

View reviewed changes

YeBeenChoi approved these changes Jan 18, 2026

View reviewed changes

jwj0620gcu merged commit 54db360 into main Jan 18, 2026
5 checks passed

Uh oh!

Hidden character warning

Conversation

jwj0620gcu commented Jan 15, 2026

✨ 주요 변경사항

📝 작업 상세 내용

✅ 체크리스트

📸 스크린샷 (선택)

🔍 기타 참고사항

🔗 관련 이슈

Uh oh!

vercel Bot commented Jan 15, 2026

Uh oh!

github-actions Bot commented Jan 15, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 16, 2026

PR 검증 결과

Uh oh!

YeBeenChoi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

ESLint 상세

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

ESLint 상세

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 17, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

YeBeenChoi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels