프론트엔드 재구조화 - API 레이어 개선

[RanolP]

• 이 이슈는 프론트엔드 재구조화 #2024 의 하위 이슈입니다.

문제 상황

• mock data를 만드는 함수와 실제 API 로직 두 부분 모두 타입에 의존하므로 공통 의존성을 추출하는 게 좋음
• 백엔드 - 프론트엔드 간 용어 통일이 되지 않음
• 백엔드 응답을 type-safe하게 다루지 않음

개선 방향

• 타입 정의 로직과 분리하기
• API 응답 검증하기
• Tauri IPC를 사용하는 부분 숨기기 (좋은 설계가 어렵다면 미루기)
• 용어 통일하기 (초안: [1])

할 일 목록

분류	설명
🟨 1순위	API type 정의 분리하기
🟨 1순위	API type 기반으로 mocking하기 편한 구조 고민하기
🟦 2순위	API 응답 type-safety 보장 (tauri-specta/tauri-bindgen, typebox 등의 라이브러리 이용 고려)
🟪 3순위	Tauri IPC 호출 위에 레이어 하나 얹어 추상화해 HTTP 요청인 백엔드로 교체 가능하게 설계하기 (연관 이슈 : #1652)

[1]:

• Room[2] : 임의의 대화방
  • ChatRoom : "채팅" 종류의 대화방
  • ⚠️ OpenChatRoom "오픈채팅" 종류의 대화방
• User : 대화방의 사용자
  • UserProfile : 사용자의 프로필
    • ⚠️ ChannelProfile : "채널"과 채팅 시 해당 채널의 프로필
    • PersonProfile : "채팅" 종류 대화방에서 만난 사람의 프로필
    • ⚠️ OpenProfile : "오픈채팅" 종류 대화방에서 만난 사람의 오픈채팅 프로필
• Message : 대화방의 메시지
  • {Type}Message : 해당 유형의 메시지, (Text - 단순 텍스트, ⚠️ Emoticon - 카카오 이모티콘, ⚠️ SharpSearch - 샵검색, ⚠️ Image - 이미지 (묶음), ⚠️ Present - 카카오 선물하기, ⚠️ Audio - 음성, ⚠️ Location - 위치, ⚠️ KakaoTalkProfile - 카카오톡 프로필, ⚠️ PhoneContact - 연락처,⚠️ File - 파일, ⚠️ MelonMusic - 음악, ⚠️ Rich - 알림톡, 카카오페이 정산 등에 쓰이는 메시지, ⚠️ System - 시스템 (입장, 퇴장 등), ⚠️ Deleted - 삭제됨 등 )
• ⚠️ Board : 대화방에 할당된 게시판
  • ⚠️ {Type}Post : 게시판에 올라간 글 (Announcement - 공지, Image 사진, Video - 동영상, File - 파일, Event - 일정, Vote - 투표 등)

* ⚠️ : 현재 구현 없으나 미리 용어 통일

[2]: Channel의 경우 카카오톡에 "채널"이라는 고유 기능이 있고, Chat의 경우 채팅/오픈채팅과 구분이 어려워서 Room으로 지정

[Su-Yong]

네이밍 원칙

원칙 : 카카오톡 이름을 따른다
부수 조항 :

• 프론트엔드는 백엔드를 따른다
• 백엔드는 최대한 카카오톡 원래 기능 이름을 영작한다
• 기존 카카오톡 개념과 최대한 헷갈리지 않게 이름을 짓는다