Skip to content

✨ feat: 로그인/회원가입 페이지 내에서 모달창 닫기 방법 추가 #96

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
Yun-Jinwoo merged 6 commits into from
Jun 18, 2025
Merged

✨ feat: 로그인/회원가입 페이지 내에서 모달창 닫기 방법 추가 #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd640d7
✨ feat: 모달 컴포넌트에 ref 속성 추가
Yun-Jinwoo Jun 17, 2025
5666d2d
✨ feat: 로그인/회원가입 페이지 내에서 모달창 닫기 방법 추가
Yun-Jinwoo Jun 17, 2025
39d4e08
✨ feat: Ref 타입 추가
Yun-Jinwoo Jun 17, 2025
fa32d85
♻️ refactor: eslint에 따라 handleModalConfirm 함수 useCallback으로 처리
Yun-Jinwoo Jun 17, 2025
37f9efb
♻️ refactor: 모달 닫힘 기능을 모달 컴포넌트에서 구현
Yun-Jinwoo Jun 17, 2025
9204ecc
♻️ refactor: 모달 닫기 관련 로직 합치기
Yun-Jinwoo Jun 18, 2025
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: 44 additions & 3 deletions src/components/common/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { type MouseEventHandler, type ReactNode } from 'react';
import {
type MouseEventHandler,
type ReactNode,
useEffect,
useRef,
} from 'react';
import Button from './Button';
import ic_check from '@/assets/icons/modal_check.svg';
import ic_exclamation from '@/assets/icons/modal_exclamation.svg';
Expand All @@ -14,6 +19,8 @@ interface Props {
yesButtonContent?: string;
/** modal 문구 */
children?: ReactNode;
/** 모달이 닫힐 때 (버튼 클릭 제외) 실행할 함수 */
onClose: () => void;
}

export default function Modal({
Expand All @@ -22,11 +29,42 @@ export default function Modal({
onYesButtonClick,
yesButtonContent,
children,
onClose,
}: Props) {
const modalRef = useRef<HTMLDivElement>(null);

useEffect(() => {
// 1. 바깥 클릭 시 닫기
function handleClickOutside(event: MouseEvent): void {
const target = event.target as Node;
if (modalRef.current && !modalRef.current.contains(target)) {
onClose();
}
}

// 2. ESC 키로 닫기
function handleKeyDown(event: KeyboardEvent): void {
if (event.key === 'Escape') {
onClose();
}
}

document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('keydown', handleKeyDown);

return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('keydown', handleKeyDown);
};
}, [onClose]);

return (
<div className="fixed inset-0 z-40 content-center justify-items-center bg-[#000000b3]">
{option === 'alert' ? (
<div className="flex h-220 w-327 flex-col items-center justify-between rounded-lg bg-white p-28 md:h-250 md:w-540">
<div
ref={modalRef}
className="flex h-220 w-327 flex-col items-center justify-between rounded-lg bg-white p-28 md:h-250 md:w-540"
>
<div className="mt-53 text-center text-body1/19 font-regular text-[#333236] md:mt-80 md:text-[18px]/21">
{children}
</div>
Expand All @@ -38,7 +76,10 @@ export default function Modal({
</button>
</div>
) : (
<div className="flex h-184 w-298 flex-col items-center justify-between rounded-xl bg-white p-24">
<div
ref={modalRef}
className="flex h-184 w-298 flex-col items-center justify-between rounded-xl bg-white p-24"
>
<div className="flex flex-col items-center gap-16">
{option === 'action' ? (
<img src={ic_check} />
Expand Down
8 changes: 5 additions & 3 deletions src/pages/account/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ export default function Login() {
}
}

const handleModalConfirm = () => {
function handleModalConfirm() {
setModal({ isOpen: false, message: '' });
};
}
Comment on lines -84 to +86
Copy link
Contributor

@Moon-ju-young Moon-ju-young Jun 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

💬 원래대로 써도 되지 않을까 싶네요!

Copy link
Collaborator Author

@Yun-Jinwoo Yun-Jinwoo Jun 18, 2025

Choose a reason for hiding this comment

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

저희가 함수 선언식을 화살표 함수가 아닌 function으로 정했던걸로 알고있어서 수정했습니다!

Copy link
Contributor

@Moon-ju-young Moon-ju-young Jun 18, 2025

Choose a reason for hiding this comment

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

아마 컴포넌트 함수만 통일 했었던 것 같은데 일단 확인했습니다!

Copy link
Collaborator

@minimo-9 minimo-9 Jun 18, 2025

Choose a reason for hiding this comment

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

이부분은 화살표로 쓰셔도 상관없습니다! 컴포넌트만 통일입니다


return (
<>
Expand Down Expand Up @@ -128,7 +128,9 @@ export default function Login() {
</form>

{modal.isOpen && (
<Modal onButtonClick={handleModalConfirm}>{modal.message}</Modal>
<Modal onClose={handleModalConfirm} onButtonClick={handleModalConfirm}>
{modal.message}
</Modal>
)}
</>
);
Expand Down
10 changes: 6 additions & 4 deletions src/pages/account/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { postUser, type UserType } from '@/api/userApi';
import Input from '@/components/common/Input';
Expand Down Expand Up @@ -107,14 +107,14 @@ export default function Signup() {
}
}

const handleModalConfirm = () => {
const handleModalConfirm = useCallback(() => {
if (modal.message === '가입이 완료되었습니다!') {
setModal({ isOpen: false, message: '' });
navigate('/login');
} else {
setModal({ isOpen: false, message: '' });
}
};
}, [modal.message, navigate]);

return (
<>
Expand Down Expand Up @@ -223,7 +223,9 @@ export default function Signup() {
</form>

{modal.isOpen && (
<Modal onButtonClick={handleModalConfirm}>{modal.message}</Modal>
<Modal onClose={handleModalConfirm} onButtonClick={handleModalConfirm}>
{modal.message}
</Modal>
)}
</>
);
Expand Down