답변 하기 버튼 추가 및 버튼 클릭 시 정답 제출 형식 보여주는 모달 생성하는 기능 구현

[hye-on]

🔗 관련 이슈

resolves #18

📝 작업 내용

• 문제 유형에서 keyword 제거
• 폴더 이름 변경 및 디렉토리 구조 수정
  • interaction 패키지를 discord-event로 변경
  • commands 패키지를 slash 폴더로 변경
  • handlers패키지 안에 interaction폴더 생성
  • interaction 패키지 하위에 상호작용 타입별 구현체 배치
    • slash(챗 입력 명령어)
    • button(버튼 상호작용)
• 모달에 문제가 보이게 설정

🍇 고민한 부분

1. 폴더 구조 리팩토링:
   Discord.js의 Interaction 타입 계층을 반영하여 코드 구조를 개선하였습니다.
   새로운 상호작용 추가가 용이하게끔 확장성을 고려하였습니다.

export type Interaction<Cached extends CacheType = CacheType> =
  | ChatInputCommandInteraction<Cached> // <- slash 인터렉션
  | MessageContextMenuCommandInteraction<Cached>
  | UserContextMenuCommandInteraction<Cached>
  | AnySelectMenuInteraction<Cached>
  | ButtonInteraction<Cached>  // <- 버튼 인터랙션
  | AutocompleteInteraction<Cached>
  | ModalSubmitInteraction<Cached>;

변경된 디렉토리 구조

discord-interactions/
└── handlers/
    └── interaction/
        ├── slash/        
        └── button/       

2. keyword 필드 제거
   MVP 단계에서 핵심 기능에 집중하고자 정답 처리가 모호한 키워드 문제 형식 제거했습니다.

3. 문제 제출 형식을 모달 형식으로 한 이유

   • 원래는 메시지 자체에 입력을 할 수 있게 하려고 했으나 디스코드에서는 메시지 자체에 사용자가 직접 입력할 수 있는 폼 필드를 제공하지 않습니다.
   • 모달 vs 채팅방 메시지 입력 (chat input)
     • 대안으로 모달을 띄워 정답 제출 폼을 보여주게 하였습니다.
     • 사용자가 더 편하게 문제를 제출하고 서비스의 대한 허들을 낮추기 위해 더 편한 UI를 제공하고자 했습니다.

4. 모달에 문제를 보이게 한 이유

   • 모달이 중앙에 띄워져 문제가 안보입니다. 뒤로 가기 할 필요없이 문제를 확인할 수 있게 하였습니다.
   • 모달에서 문제를 수정가능한 텍스트에 배치한 이유: title에 배치하고자 하였으나 45글자 제한이 있었습니다.
     
     
     

🏞️ 스크린샷