TransTalk 는 언어의 장벽 없이 소통할 수 있도록 도와주는 실시간 번역 채팅 서비스입니다.
채팅방마다 원하는 언어를 선택하면, 보내는 메시지가 곧바로 선택된 언어로 번역되어 전달됩니다.
친구와 언어를 설정하여 대화를 나누며 자연스럽게 새로운 언어를 배워보세요!
├── .prettierrc
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
│
├── public
│ └── transtalk-favicon.svg
└── src
├── api
├── apiRequest.ts
└── reissue-access-token.ts
├── assets
├── logo
│ ├── google-logo.png
│ └── transtalk-logo.svg
└── ui
│ ├── arrow-down.svg
│ ├── arrow-left.svg
│ ├── arrow-up.svg
│ .
│ .
│ .
├── components
├── constant
├── i18n
├── language
└── index.ts
├── pages
├── ChatRoom
│ ├── api
│ ├── components
│ ├── hooks
│ ├── utils
│ └── ChatRoom.tsx
├── Home
│ ├── api
│ ├── components
│ ├── hooks
│ ├── utils
│ └── Home.tsx
├── Login
│ ├── api
│ ├── components
│ ├── hooks
│ ├── GoogleCallback.tsx
│ └── Login.tsx
└── Settings
│ ├── api
│ ├── components
│ ├── hooks
│ └── Settings.tsx
├── querykey
├── router
├── socket
├── styles
├── types
├── utils
├── App.tsx
└── main.tsx
- 배포 :
Vercel - 빌드 :
Vite - 다국어 지원 :
i18next - 프레임워크 & 언어 :
React,Typescript - 스타일링 :
Tailwind CSS - 상태관리 :
Tanstack query - 데이터 페칭 :
axios - 웹소켓 :
Stompjs,Sockjs
-
WebSocket 기반 실시간 통신
STOMP.js와 SockJS를 활용해 채팅방 리스트 및 채팅 메시지를 실시간으로 주고받을 수 있도록 구현했습니다. -
TanStack Query를 활용한 데이터/상태 관리 & 무한 스크롤
TanStack Query로 서버 상태를 효율적으로 관리하고 채팅방 리스트와 채팅 내역에 무한 스크롤을 적용해 불필요한 네트워크 요청을 줄였습니다. -
i18next 기반 다국어 지원
i18next를 사용해 브라우저 언어 설정에 따라 UI 언어가 자동으로 적용되도록 했고, 추후 언어 확장도 용이한 구조로 설계했습니다.
- 서비스 접속 시 가장 먼저 보게 되는 화면입니다.
- 구글 소셜 로그인을 통해 별도의 회원가입 없이 빠르게 서비스를 이용할 수 있습니다.
- 로그인 후 가장 먼저 보여지는 메인 화면입니다.
- 참여 중인 채팅방 리스트가 최근 대화 시각을 기준으로 정렬되어 표시됩니다.
- 각 채팅방에는 상대방 프로필 사진, 이름, 번역 언어, 최근 메시지 시간, 원본 메시지, 번역 메시지, 읽지 않은 메시지 개수가 함께 표시됩니다.
- 효율적인 데이터 요청을 위해 무한 스크롤을 적용했습니다.
- 웹소켓을 통해 새로운 메시지가 도착하면 채팅방 리스트가 실시간으로 업데이트됩니다.
- 홈 화면 상단 헤더의 검색 버튼을 눌러 검색 창을 열 수 있습니다.
- 채팅 상대 이름을 기준으로 채팅방을 검색할 수 있습니다.
- 0.5초 디바운싱을 적용해 입력 이벤트와 데이터 요청을 최적화했습니다.
- 홈 화면 우측 하단의 플로팅 버튼을 눌러 새 채팅 생성 모달을 띄울 수 있습니다.
- 가입된 사용자의 이메일과 번역 언어를 선택하여 새로운 채팅방을 생성할 수 있습니다. (Gmail 계정만 지원합니다.)
- 번역 언어는 한국어, 영어, 일본어, 중국어, 스페인어 중에서 선택할 수 있습니다.
- 채팅방이 성공적으로 생성되면 해당 채팅방 화면으로 바로 이동합니다.
- 동일한 정보로 이미 존재하는 채팅방이 있다면 새로 생성되지 않고 해당 채팅방으로 이동합니다.
- 상단 헤더에 채팅 상대의 프로필 정보가 표시됩니다.
- 채팅 내역은 시간순으로 정렬되며, 최신 메시지는 화면 하단에 위치합니다.
- 각 메시지에는 원본 메시지, 번역된 메시지, 발송 시간이 함께 표시됩니다.
- 과거 메시지를 위로 스크롤하면 추가 데이터를 불러오는 역방향 무한 스크롤을 구현했습니다.
- 웹소켓을 이용해 실시간 채팅을 지원하며, 새 메시지를 받으면 자동으로 최하단으로 스크롤됩니다.
- 사용자 프로필 정보를 확인할 수 있고, 로그아웃 및 회원탈퇴 기능을 제공합니다.
- 로그아웃 또는 회원탈퇴를 누르면 실수 방지를 위해 확인 모달이 한 번 더 나타납니다.
