Aether Front

프로젝트 소개

Aether는 업무 관리와 협업에 최적화된 서비스 제공 대시보드입니다.

Cloud Native / MSA 기반으로 설계된 백엔드와 연동되어 아래와 같은 주요 기능을 갖고있습니다.

• Netlify + OAuth2 기반 로그인 기능 (구글)
• 프로젝트 단위 업무 CRUD
• 대시보드 기능
  • 사내/팀 공지
  • 메모장
  • 참여중인 프로젝트 바로가기
• 업무 별 코멘트 & 문서 관리
  • 코멘트 CRUD
  • 문서 업로드
• 알림 센터
  • 할당받은 업무 및 프로젝트에 변경 사항이 생겼는지 혹은 사용자가 새롭게 부여받은 임무가 있는지에 대하여
• 직급 별 기능 제한

Goal of Aether

본 프로젝트는 다음과 같은 문제 해결을 목표로 합니다:

• 팀원 간 업무 현황이 명확히 공유되지 않아 발생하는 커뮤니케이션 오류
• 대시보드 툴의 반복된 UI 구현을 줄이고자 하는 프론트엔드 개발자의 비효율
• 업무 카드의 상태 흐름을 직관적으로 표시하고 관리하는 기능 부재

🔧 기술 스택

• React 18 + TypeScript
• Vite
• Tailwind CSS
• ESLint / Prettier
• React Query / Zustand (선택 시)
• 배포: Netlify

🗂️ 주요 기능

• Netlify + OAuth2 기반 로그인 기능 (구글)
• 프로젝트 단위 업무 CRUD
• 대시보드 기능
  • 사내/팀 공지
  • 메모장
  • 참여중인 프로젝트 바로가기
• 업무 별 코멘트 & 문서 관리
  • 코멘트 CRUD
  • 문서 업로드
• 알림 센터
  • 할당받은 업무 및 프로젝트에 변경 사항이 생겼는지 혹은 사용자가 새롭게 부여받은 임무가 있는지에 대하여
• 직급 별 기능 제한

📁 디렉토리 구조

src/ ├── api/ # api 연동 모듈 ├── assets/ # 이미지, 아이콘 etc 정적 리소스 파일 ├── components/ # 공통 UI 컴포넌트 ├── hooks/ # 커스텀 훅 ├── pages/ # 라우팅 기반 페이지 컴포넌트 ├── utils/ # 공용 유틸 함수 ├── App.tsx ├── main.tsx ├── testTask.ts # 테스트용 API 연동 예시로 보임 └── vite-env.d.ts

🧪 추후 개선 예정

• GitHub Actions CI 구축
• Vitest / Jest 기반 유닛 테스트 도입
• 공통 컴포넌트 추출 → 라이브러리화 검토