Feat: 공용 모달 컴포넌트 추가 #11

seoyoung-min · 2024-02-02T10:20:38Z

개요

공용 모달 컴포넌트를 제작했습니다.

작업 사항

모달포탈 추가 (by @Nahyun-Kang 🙇‍♀️)
모달, 모달타이틀, 모달버튼 컴포넌트 추가
useOnClickOutside 훅 구현
useBooleanOutput 훅 구현

참고 사항 (optional)

모달 컴포넌트 이용방법

Modal, ModalTitle, ModalButton, {children}을 조합하여 구현합니다.
- ModalTitle과 ModalButton은 Modal 컴포넌트 하나만 import하면 가져올 수 있습니다.
- Modal: 검정 background와 하얀색 모달. 기본배경.
  - handleModalClose 속성값으로 닫히는 함수를 넘겨줘야함. (검정 배경 클릭시 실행될 함수)
- ModalTitle: 왼쪽 상단 제목 부분
  - 타이틀에 들어갈 내용 children으로 전달
- ModalButton: 우측 하단 2개 버튼.
  - 취소버튼: '취소'로 버튼명 고정. onCancel로 취소버튼 클릭시 실행될 함수 전달 필요.
  - 나머지버튼: children으로 버튼명 전달. onClick으로 버튼 클릭시 실행될 함수 전달 필요.
- {children}: 타이틀과 버튼 사이에 들어가는 값. (아래 스크린샷에서 input의 위치)
조합한 모달 컴포넌트에서 모달의 상태(열림/닫힘)를 관리합니다.
- useState로 직접 상태를 만들어주지 않고, useBooleanOutput 훅을 활용하면 코드를 줄일 수 있습니다.
- 모달 컴포넌트 안에 모달 트리거 버튼도 함께 위치시키면 편합니다.
아래는 [모달 컴포넌트] 예시입니다.

// @/create/_components/LinkModal
import { ReactNode } from 'react';

import Modal from '@/components/Modal/Modal'; // <Modal> <Modal.Title> <Modal.Button> 로 사용가능
import useBooleanOutput from '@/hooks/useBooleanOutput';
import LinkIcon from '/public/icons/link_diagonal.svg';

interface LinkModalProps {
  children: ReactNode;
}

export default function LinkModal({
  children,
}: LinkModalProps) {
  const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); //모달 열림,닫힘 상태 관리

  const handleConfirmButtonClick = () => {
    //확인버튼 클릭시 실행될 로직()
    handleSetOff(); //닫기
  };

  return (
    <>
     {/*👆 누르면 모달이 열리는 트리거 버튼*/}
      <button onClick={handleSetOn}>
        <LinkIcon />
      </button>

     {/*✨ 조합한 모달 */}
      {isOn && (
        <Modal handleModalClose={handleSetOff}>
          <Modal.Title>링크 추가</Modal.Title>
          {children} //타이틀과 버튼 외에 필요할 경우 추가
          <Modal.Button onCancel={handleSetOff} onClick={handleConfirmButtonClick}>
            확인 //버튼명
          </Modal.Button>
        </Modal>
      )}
    </>
  );
}

스크린샷

리뷰어에게

ModalPortal은 팝오버에도 사용할 것 같아서 components/modal 폴더가 아닌 components 폴더 안에 두었습니다. 괜찮을지 궁금합니다.
공용 모달 컴포넌트 구현 방식에 여러가지가 있지만, 가장 익숙한 방식으로 구현했습니다.
useBooleanOutput은 true/false 상태가 필요한 모든 곳에 사용될 수 있습니다! 참고 부탁드립니다! ⭐️

seoyoung-min · 2024-02-02T10:46:38Z

src/components/Modal/Modal.tsx

+  const { ref } = useOnClickOutside(() => {
+    handleModalClose();
+  });


@Nahyun-Kang
이 부분이 추가 됐습니다! 속성값으로 검정바탕 눌렀을때 발생할 핸들러 전달주시면 됩니다~! :)

확인했습니다!! :D 알려주셔서 감사해용!! 🙇‍♀️

Nahyun-Kang

우왕!! 서영님 빠른 수정 감사합니다!!👍👍 다시봐도 모달 공통화 너무 잘 시키셨네요..🫢 잘 사용하겠습니다 LGTM!

Eugene-A-01

크.. 서영님 모달공통화 깔끔합니다!!!!
+코드컨벤션 잘 지켜지고 있는게 예술이네요,,,
LGTM🥹👍

src/components/Modal/Modal.tsx

Nahyun-Kang · 2024-02-02T15:42:47Z

src/hooks/useOnClickOutside.ts

+import { useEffect, useRef, useState } from 'react';
+
+const useOnClickOutside = (handler: () => void) => {


서영님 그나저나 훅 달인이시네요.. 어떻게 이렇게 만드시나요ㅜㅜ!! 배워갑니다 진짜루.. 훅을 훅훅 만드시네요..막 이래😶‍🌫️

꺄 감사합니다 나현님🙇‍♀️ 사실 저번 팀프로젝트들에서 얻은 것들을 주섬주섬 주워다가 쓰고 있습니다 ㅎㅎ

ParkSohyunee

서영님, 공용 모달 만드시느라 고생많으셨습니다! 늦게 리뷰드려 죄송합니다🥹
사용법도 작성해 주셔서 코드를 이해하는데 도움이 많이 되었습니다. 늘 감사합니다 💓🥰

ParkSohyunee · 2024-02-02T15:55:00Z

src/components/ModalPortal.ts

+import { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+


서영님 이 부분은 사소하지만 createPortal을 바로 불러와도 좋을 것 같습니다.
또, 모달이 브라우저 상태일때만 렌더링될 수 있도록 체크하는 조건을 넣어주는 방법도 불필요한 렌더링을 막을 수 있어서 참고로 말씀드려 봅니다!!

import { createPortal } from "react-dom"; const ModalPortal = ({ children }: Props) => { /** 모달이 서버상태에서는 실행되지 않도록 */ if (typeof window === "undefined") { return null; } const el = document.getElementById('modal-root') as HTMLElement; return createPortal(children, el); }; export default ModalPortal;

앗 소현님! 이 부분은 제가 구현한 컴포넌트인데 조언 감사합니다!☺️ 말씀하신대로 수정해놓겠습니다👍

꼼꼼하게 봐주셔서 감사합니다 :)

ParkSohyunee · 2024-02-02T16:10:13Z

src/components/Modal/ModalButton.tsx

+  onCancel: MouseEventHandler<HTMLButtonElement>;
+  onClick: MouseEventHandler<HTMLButtonElement>;


이벤트핸들러 타입을 지정하실 때 핸들러 자체 타입으로 지정하신 이유가 궁금합니다!!

onCancel: (e: MouseEvent<HTMLButtonElement>) => void; onClick: (e: MouseEventHandler<HTMLButtonElement>) => void;

사실 타입이 너무 어려워서, 오류가 뜨면 수정해나가면서 하고 있는데요!🥲

button 태그의 onClick 타입이 핸들러 자체 타입인 것 같아 그대로 적었습니다🙈

핸들러 자체 타입 지정 대신 다른 타입으로 지정하는 것이 좋을까요??🤔

ParkSohyunee · 2024-02-02T16:30:34Z

src/hooks/useBooleanOutput.ts

+
+export default function useBooleanOutput(defaultValue?: boolean): useBooleanOutput {
+  const [isOn, setIsOn] = useState<boolean>(!!defaultValue);
+
+  const toggle = useCallback(() => setIsOn((prev) => !prev), []);
+  const handleSetOn = useCallback(() => setIsOn(true), []);
+  const handleSetOff = useCallback(() => setIsOn(false), []);
+
+  useEffect(() => {
+    setIsOn(false);
+  }, []);
+
+  return { isOn, toggle, handleSetOn, handleSetOff };
+}


서영님 토글을 useCallback으로 감싸기 너무 좋네요!!
매번 열림, 닫힘 코드를 작성하지 않고 상태를 관리하는 훅 너무 좋은 방법이네요!!!

isOn 초기값이 boolean으로 추론될 것 같아서 제네릭 타입을 지정하지 않아도 될 것 같습니다.

const [isOn, setIsOn] = useState(!!defaultValue);

궁금한점이 useEffect는 isOn 상태가 무엇이든지 false로 만들어주는 역할을 하고 있는 것이 맞나용?

우왓 boolean 값 추론이 되겠군요!! 꼼꼼하게 봐주셔서 감사합니다🙇‍♀️

네 맞습니다!! 그런데 이러면 defaultValue 의미가 없어지는군요ㅠㅠ

추가했던 이유는 이전에 useToggle 훅을 만들어 모달을 관리한 적이 있는데 vercel 배포과정에서 strictmode가 꺼지면서 모든 모달이 오픈되는 오류가 발생했었습니다. (이유를 정확히는 모르겠지만) 렌더링이 되면서 뭔가 잘못되는 것 같아, 저 코드를 넣었더니 해결이 됐습니다 🤔

(1) 정확한 원인도 모르는 해결책이니 우선 지우고 문제 발생시 다시 생각해본다.
(2) 혹시를 대비하여 아래처럼 코드를 수정한다

useEffect(() => { if (!!defaultValue === false) { setIsOn(false); } }, []);

저는 1번으로 제거 해볼까 하는데, 소현님 의견도 궁금합니다 :)

ParkSohyunee · 2024-02-02T16:32:52Z

src/hooks/useOnClickOutside.ts

+  useEffect(() => {
+    const handleClickOutside = (e: Event) => {
+      if (ref.current !== null && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };


오! 매번 outSideClick 함수를 버블링으로만 구현했었는데 이렇게 ref를 이용하는 방법도 있군요!
이 방법이 팝오버 메뉴에 적용할 때 더 유용할 것 같다는 생각이 드네요, 또 서영님 덕분에 touchstart 이벤트도 알아갑니당👍

궁금해서 찾아보니 touchstart가 모바일/태블릿 기기 전용 이벤트 였군요!! 서영님 세심함에 감탄하고 갑니다 ㅎㅎ 👍

헉 감사합니다 🙇‍♀️

저는 항상 ref로만 구현 해봐서, 버블링으로 구현하는 방법 너무 궁금합니다! 소현님 이전 프로젝트 구경가야겠어요 🏃‍♀️

Feat: 공용 모달 컴포넌트 추가

795f170

seoyoung-min added the Feat 구현 label Feb 2, 2024

seoyoung-min requested review from Eugene-A-01, kanglocal, ParkSohyunee and Nahyun-Kang February 2, 2024 10:20

seoyoung-min self-assigned this Feb 2, 2024

Refactor: 불필요 코드 제거

be2908e

seoyoung-min commented Feb 2, 2024

View reviewed changes

Nahyun-Kang approved these changes Feb 2, 2024

View reviewed changes

Eugene-A-01 approved these changes Feb 2, 2024

View reviewed changes

seoyoung-min added 2 commits February 2, 2024 21:15

Refactor: 불필요 코드 제거

46962d6

Feat: layout에 Portal 위치 추가

238a283

Nahyun-Kang reviewed Feb 2, 2024

View reviewed changes

src/components/Modal/Modal.tsx Outdated Show resolved Hide resolved

Refactor: 불필요 코드 제거

12fc904

Nahyun-Kang reviewed Feb 2, 2024

View reviewed changes

ParkSohyunee approved these changes Feb 2, 2024

View reviewed changes

seoyoung-min added 7 commits February 3, 2024 03:31

Refactor: CreatePortal 임포트 방식 변경 및 포탈 성능 개선

f63caee

Refactor: 추론 가능한 타입 지정 코드 제거

3ec583e

Chore: import문 띄어쓰기 수정

6794a9c

Fix: 미사용 import 삭제 및 dependency list 추가

fa6c2ce

Design: 버튼 비활성화 스타일 추가

801369a

Refactor: ModalButton 비활성화 속성 추가

a3eaf2a

Fix: 프리티어 줄바꿈 에러 수정

f325a2f

seoyoung-min added the Design UI 수정 label Feb 3, 2024

Merge branch 'dev' into feature/modal

5799a19

seoyoung-min merged commit 163ebb7 into 8-Sprinters:dev Feb 3, 2024
1 check passed

seoyoung-min added the 추후 확인 필요 나중에 다시 살펴봐야할 PR (미해결 문제 존재, 급한 머지 등) label Feb 3, 2024

seoyoung-min deleted the feature/modal branch October 28, 2024 12:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: 공용 모달 컴포넌트 추가 #11

Feat: 공용 모달 컴포넌트 추가 #11

seoyoung-min commented Feb 2, 2024 •

edited

Loading

seoyoung-min Feb 2, 2024 •

edited

Loading

Nahyun-Kang Feb 2, 2024

Nahyun-Kang left a comment

Eugene-A-01 left a comment

Nahyun-Kang Feb 2, 2024

seoyoung-min Feb 2, 2024

ParkSohyunee left a comment

ParkSohyunee Feb 2, 2024

Nahyun-Kang Feb 2, 2024

seoyoung-min Feb 2, 2024

ParkSohyunee Feb 2, 2024

seoyoung-min Feb 2, 2024

ParkSohyunee Feb 2, 2024

seoyoung-min Feb 2, 2024

ParkSohyunee Feb 2, 2024

Nahyun-Kang Feb 2, 2024

seoyoung-min Feb 2, 2024

		import { useEffect, useRef, useState } from 'react';

		const useOnClickOutside = (handler: () => void) => {

		import { ReactNode } from 'react';
		import ReactDOM from 'react-dom';

		onCancel: MouseEventHandler<HTMLButtonElement>;
		onClick: MouseEventHandler<HTMLButtonElement>;

Feat: 공용 모달 컴포넌트 추가 #11

Feat: 공용 모달 컴포넌트 추가 #11

Conversation

seoyoung-min commented Feb 2, 2024 • edited Loading

개요

작업 사항

참고 사항 (optional)

모달 컴포넌트 이용방법

스크린샷

리뷰어에게

seoyoung-min Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nahyun-Kang left a comment

Choose a reason for hiding this comment

Eugene-A-01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min commented Feb 2, 2024 •

edited

Loading

seoyoung-min Feb 2, 2024 •

edited

Loading