feat: 제한 시간 드롭다운 구현

[KimDongGyun23]

#️⃣ 연관된 이슈 번호

관련된 이슈 번호를 작성하고, 자동으로 이슈를 닫으려면 Closes #이슈번호 형식으로 작성해주세요.

• Closes 사전 투표 제한 시간 드롭다운 구현 #60

⏰ 작업 시간

예상 작업 시간과 실제 작업 시간을 작성해주세요.
두 시간이 다를 경우, 그 이유를 함께 설명해주세요.

• 예상 작업 시간 : 1 h
• 실제 작업 시간 : 1.5 h

공통 컴포넌트로 분리하고자 고민하는 과정에서 시간이 조금 걸렸습니다.

📝 작업 내용

이번 PR(작업)을 통해 수행한 주요 내용을 구체적으로 작성해주세요.

• ESC 키 입력 시 모달을 닫을 수 있도록 useEscapeKey 커스텀 훅을 구현하고, 기존 모달 ESC 처리 로직을 해당 훅을 사용하도록 리팩터링했습니다.

• 특정 요소 외부 클릭을 감지해 닫기 동작을 수행하는 useOutsideClick 커스텀 훅을 구현했습니다.

• 사전 투표 시간 제한을 설정하기 위한 TimeLimitDropdown 공통 컴포넌트를 추가하고, 시간 옵션/기본값 상수를 정의했습니다.

구현 사항

구현된 훅

이름	설명
useEscapeKey	ESC 키 입력을 감지해 콜백을 실행하는 훅
useOutsideClick	특정 요소(ref) 바깥 영역을 클릭했을 때 콜백을 실행하는 훅

구현된 컴포넌트

이름	설명
TimeLimitDropdown	- 사전 투표 등의 시간 제한을 설정하기 위한 드롭다운 - 여러 시간 옵션 중 하나를 선택하고 선택된 값을 상위에 콜백으로 전달
TimeLimitDropdownList	- 시간 제한 옵션 리스트를 렌더링하는 내부용 컴포넌트 - 현재 선택된 값을 표시하고 항목 클릭 시 선택 이벤트를 상위로 전달

컴포넌트 props

TimeLimitDropdownList 내부 컴포넌트 props

이름	타입	필수	설명
selectedTime	number	O	리스트에서 현재 선택된 시간 값 (초 단위)
handleSelectTime	(time: number) => void	O	리스트 항목 클릭 시 선택된 시간 값을 상위로 전달하는 콜백

TimeLimitDropdown 컴포넌트 props

이름	타입	필수(O/X)	설명
onChange	(time: number) => void	O	시간 제한 옵션 선택 시 호출되는 콜백으로, 선택된 시간을 초 단위 값으로 전달
selectedTime	number	X	현재 선택된 시간 제한 값(초 단위)으로, 전달되지 않으면 기본값 0(제한 없음)을 사용
className	string	X	드롭다운 루트 요소에 추가로 적용할 CSS 클래스

사용 방법

function App() {
  const [selectedTime, setSelectedTime] = useState(0);

  const handleChange = (value: number) => {
    setSelectedTime(value);
    logger.ui.info(`시간 제한: ${value} seconds`);
  };

  return (
    <div className="w-200">
      <section className="flex flex-col gap-2">
        <h4 className="text-text text-sm font-extrabold">제한 시간</h4>
        <TimeLimitDropdown
          selectedTime={selectedTime}
          onChange={handleChange}
        />
      </section>
    </div>
  );
}

관련된 스크린샷이나 캡처 화면을 첨부해주세요.

2026-01-10.5.43.28.mov

🪏 주요 고민과 해결 과정

작업 중 겪은 문제나 고민, 그리고 그에 대한 해결 과정을 정리해주세요.
관련 트러블슈팅 문서가 있다면 링크로 연결해주세요.

• 제한 시간 드롭다운이 QnA 컴포넌트에서도 사용되는 것을 파악하여 공통 컴포넌트로 분리하였습니다.

• useEscapeKey의 경우, 기존 모달 컴포넌트에서도 사용되고 있으며 추후 강의실 내 화면 닫기 등에서도 사용될 것으로 판단되어 공통 훅으로 분리하였습니다.

• useOutsideClick 역시도 강의실에서 사용되면 좋은 부분들이 많이 보여 공통 훅으로 분리하였습니다.

💬 리뷰 요구사항

리뷰어가 중점적으로 확인해주길 바라는 부분이 있다면 작성해주세요.

📘 참고 자료

참고한 문서, 링크, 또는 외부 리소스를 작성해주세요.

[YunDo-Gi]

고생하셨어요 👏👏

[YunDo-Gi]

현재 구조는 부모 컨테이너 내부에 속해 있어서 드롭다운이 열릴 때 컨테이너의 전체 높이가 늘어나며 불필요한 스크롤이 생길 수도 있을 것 같아요. Portal 같은걸 사용해서 컨테이너에서 분리하면 좋지 않을까 생각해요!

[KimDongGyun23]

페이지 디자인 상에서 제한 시간 선택 의 위치를 고민하면서, 현재 컴포넌트 구조상 모달의 가장 하단에 위치해 있다는 점을 고려했습니다. 드롭다운을 모달 컨텐츠 외부로 띄우는 방식도 고려하면서 다음과 같은 결론을 내렸습니다.

드롭다운을 모달 컨텐츠 내부에 보여주기

모달 컨텐츠 영역 안에서만 드롭다운을 펼치면 뷰포트 안에서 모든 내용이 보장되어, 작은 화면에서도 동작이 더 안정적이라고 판단했습니다.

대신, 모달 컨텐츠 내부에서 스크롤을 해야하는 문제가 있었습니다.

드롭다운을 모달 컨텐츠 외부에 보여주기

드롭다운을 모달 컨텐츠 밖으로 띄우는 경우, 해상도가 작은 디스플레이에서는 모달 하단이 잘려서 옵션 일부가 보이지 않는 문제가 있었습니다.

이를 해결하기 위해서는 다음과 같이 스크롤을 해야만 했습니다.

이때는 모달 컨텐츠의 윗부분이 가려질 수도 있습니다.

정리하자면

결론은, 모달 컨텐츠를 한 페이지처럼 스크롤 없이 온전히 보여줄거냐 vs 드롭다운을 모달 컨텐츠 외부로 띄울 것니냐 의 결정해야했습니다.

저는 모달은 한 화면 안에서 스크롤 없이 모든 내용을 보여주는 것이 좋다고 생각하여, 전자를 선택하였습니다. 만약 후자가 나을 것 같다면 말씀해주시면 수정해두겠습니다!

[YunDo-Gi]

이런 식으로 유연하게 다른 방향으로 열리는걸 생각하기는 했는데, 결국 사용성 차이인 것 같아서 지금 상태로 진행해도 괜찮을 것 같아요!

[KimDongGyun23]

오 그렇다면 우선은 진행해두고, 해당 방안 조금 더 고민해보겠습니다!!!!

뭔가 useLayoutEffect 사용하면 잘 할 수 있을 것 같은데, 조금 알아봐야할 것 같아요. 다른 작업부터 마무리 짓겠습니다!

[dami0806]

수고하셨습니다!! 확인했습니다! 👍👍