메일상자 프론트엔드

메일상자는 AI 기반 다중 계정 인박스 관리 자동화 서비스입니다.

프로젝트 개요

현대 사용자는 업무용, 학교용, 개인용, 프로젝트용 등 다양한 목적의 이메일 계정을 동시에 사용합니다. 계정이 분산될수록 여러 메일 계정을 관리하기 위한 부담이 커지고, 중요한 메일을 늦게 확인하거나 놓치는 문제가 발생합니다.

메일상자는 이러한 비효율을 해결하기 위해 기획된 서비스입니다. 여러 메일 벤더 계정을 하나의 통합 인박스로 연결하고, AI를 활용해 메일 확인, 분류, 작성 과정의 부담을 줄이는 것을 목표로 합니다.

메일상자는 단순히 여러 메일을 한곳에 모아 보여주는 서비스가 아니라, 사용자의 메일 관리와 커뮤니케이션 과정 전반을 보조하는 AI 에이전트형 도구를 지향합니다. 이를 통해 사용자 편의성, 업무 생산성, 커뮤니케이션 정확성을 함께 향상시키는 것을 목표로 합니다.

목표

• 여러 이메일 계정을 하나의 인박스에서 통합 조회
• 메일 수신, 읽음 처리, 삭제, 스레드 조회 등 메일 흐름 관리
• 계정 선택 기반 메일 작성 및 발송
• AI 기반 메일 요약, 우선순위 강조, 자동 분류 및 라벨 추천
• AI 기반 제목/본문 초안 생성, 답장 방향 추천, 발송 전 점검 지원

주요 기능

1. 통합 인박스

• 복수 메일 계정 연동
• 계정별 메일 식별이 가능한 통합 메일 리스트
• 읽음 처리, 삭제, 스레드 단위 조회, 실시간 알림

2. 메일 작성 및 발송

• 발신 계정 선택 후 메일 작성 및 발송
• 첨부파일, CC, BCC 지원
• 주소록 기반 자동완성
• 답장/전달 및 발송 내역 확인

3. AI 메일 보조

• 장문 메일 3줄 요약
• 중요 메일 우선 표시
• 자동 라벨 및 규칙 추천
• 사용자 정의 라벨/규칙 수정 지원

4. AI 작성 보조

• 메일 목적 또는 제목 기반 초안 생성
• 대화 맥락 기반 답장 방향 추천
• 발송 전 오탈자, 첨부 누락, 어조/문맥 점검

기술 스택

• React 19
• TypeScript
• Vite
• TanStack Router
• TanStack React Query
• Tailwind CSS v4
• shadcn/ui
• Axios

시작하기

1. 의존성 설치

npm install

2. 개발 서버 실행

npm run dev

기본적으로 Vite 개발 서버가 실행되며, 로컬 주소는 실행 로그에서 확인할 수 있습니다.

3. 주요 스크립트

npm run dev        # 개발 서버 실행
npm run build      # 프로덕션 빌드
npm run preview    # 빌드 결과 미리보기
npm run lint       # ESLint 실행
npm run format     # Prettier 포맷팅
npm run typecheck  # 타입 검사

디렉터리 구조

src/
  components/   # 공통 UI 컴포넌트
  lib/          # 유틸리티
  routes/       # TanStack Router 기반 라우트
public/         # 정적 에셋