개발자를 위한 투두리스트, BugZero

배포 링크: https://silver-starburst-a7fd7e.netlify.app (현재는 서버를 중지했습니다)

서비스 소개

시중에 다양한 투두리스트 서비스가 존재하지만, 일반적인 투두리스트는 개발자의 흐름을 따라가지 못합니다.

BugZero는 개발자만을 위해 설계된 일정 관리 서비스입니다. 문제 링크와 코드 레퍼런스를 함께 저장할 수 있는 투두 기능, 날짜별 달성률을 확인할 수 있는 캘린더, 친구와의 투두 공유 기능을 통해 개발자에게 최적화된 일정 관리 환경을 제공합니다.

버그 없는 하루, 그 시작을 BugZero와 함께하길 바랍니다.

기술 스택

• 

• 배포 :

• 협업 툴 :

주요 기능

1. 소셜 로그인

• 랜딩 페이지는 다양한 디바이스 환경에서도 최적화된 화면을 제공하여, 사용자에게 일관되고 편리한 서비스를 제공합니다.
• 카카오 로그인을 통해 사용자가 더 편리하게 서비스에 로그인할 수 있습니다.

2. 투두리스트

• 내용, 링크를 투두로 작성할 수 있으며, 내용은 필수, 링크는 선택입니다.
• [수정 버튼] 클릭 시, 투두의 내용과 링크를 수정할 수 있습니다.
• [삭제 버튼] 클릭 시, 투두를 삭제할 수 있습니다.
• 매일 자정, 백준 문제 링크가 랜덤하게 '오늘의 미션'으로 생성됩니다.

3. 캘린더

• 투두리스트 달성률에 따라 해당 날짜의 배경 색상의 투명도가 결정됩니다.

4. 타이머

• 뽀모도로 타이머를 통해 집중 학습이 가능하게 합니다.

5. 친구 추가

• 친구 요청이 있을 시, 체크 색상이 초록색으로 변경되며, 모달을 열어 친구를 수락or거절할 수 있습니다.

• 친구 요청을 보낼 수 있습니다.
• 친구 요청을 다시 보낼 시, 요청 실패 메시지를 받게됩니다.

6. 친구 투두

• 친구의 투두를 볼 수 있습니다.
• 친구 리스트에서 누른 친구의 페이지로 이동하며, 친구 페이지에서는 투두를 추가or수정or삭제할 수 없습니다.
• 헤더의 로고를 클릭하여 자신의 페이지로 돌아올 수 있습니다.

7. 반응형

• 메인 페이지는 다양한 디바이스 환경에서도 최적화된 화면을 제공하여, 사용자에게 일관되고 편리한 서비스를 제공합니다.

8. 로그아웃

• 헤더의 로그아웃 버튼을 눌러 로그아웃할 수 있습니다.
• 로그아웃 시, 랜딩 페이지로 이동합니다.

develop-ss

5인 팀으로, 1개의 서버에 대해, 브랜치를 branch-ss, branch-mej로 나누어 2개의 서비스를 구현했습니다.

팀원 소개

노수진	이서현

폴더 구조

📁 src
├── 🛰️ apis              # API 요청 함수 정의
│
├── 🎨 assets
│   ├── 🖼️ icons         # 아이콘 리소스
│   └── 🖋️ fonts         # 웹폰트
│
├── 🧩 components        # 컴포넌트
│   ├── 📦 common
│   ├── 🧑‍🤝‍🧑 friend        # 친구 기능 관련 컴포넌트
│   ├── 🏠 home          # 홈 화면 관련 컴포넌트
│   ├── 💬 modals        # 모달 컴포넌트
│   └── ✅ todo          # 투두 컴포넌트
│
├── 🪝 hooks             # 커스텀 훅 (모달 관련)
│
├── 📄 pages             # 라우팅 단위 페이지 컴포넌트
│
├── 🗃️ store             # 전역 상태 관리 (Zustand)
│
├── 🎨 styles            # Tailwind 스타일 정의
│
├── 🧾 types             # 전역 타입 정의 (interface, type 등)
│
├── 🧠 App.tsx           # 루트 컴포넌트
├── 🚪 main.tsx          # React DOM 렌더링
│
└── ⚙️ 설정 및 환경 파일
    ├── .env
    ├── tailwind.config.js     # Tailwind 설정
    └── tsconfig.json          # 타입스크립트 설정

develop-mej

5인 팀으로, 1개의 서버에 대해, 브랜치를 branch-ss, branch-mej로 나누어 2개의 서비스를 구현했습니다.

팀원 소개

안민지	이은채	이주희

폴더 구조

📁 src/                          # 소스코드 루트
│
│   ├── 📁 api/                  # Axios 인스턴스, API 요청 정의
│   ├── 📁 assets/               # 이미지, 폰트, SVG 등 정적 자산
│   ├── 📁 components/          # UI 구성 컴포넌트
│   │   ├── common/             # 공통 컴포넌트 (버튼, 인풋 등)
│   │   ├── friend/             # 친구 관련 UI 컴포넌트
│   │   ├── layout/             # 레이아웃 (헤더, 푸터 등)
│   │   ├── modals/            # 모달 컴포넌트
│   │   ├── panels/            # 대시보드 등 여러 기능 묶인 UI
│   │   ├── timer/             # 타이머 관련 UI
│   │   ├── todo/              # 투두 관련 UI
│   │   └── user/              # 사용자 관련 UI
│   ├── 📁 features/            # 도메인 단위 비즈니스 로직 (API/훅)
│   ├── 📁 hooks/               # 공통 커스텀 훅
│   ├── 📁 pages/               # 라우팅되는 페이지 컴포넌트
│   ├── 📁 router/              # React Router 설정
│   ├── 📁 store/               # 전역 상태 관리 (Zustand)
│   ├── 📁 types/               # 타입 정의 파일 (interface 등)
│   ├── 📁 utils/               # 공통 유틸 함수
│   ├── 🧠 App.tsx              # 앱 루트 컴포넌트
│   └── 🚪 main.tsx             # 진입점 (ReactDOM.createRoot)
│
├── .env                        # 환경 변수
├── tsconfig.json              # TypeScript 기본 설정
└── tailwind.config.js         # Tailwind 설정

아키텍쳐

로컬 실행 방법

# 레포지토리 클론
git clone https://github.com/ureca-bug-zero/Bugzero-Frontend.git

# 의존성 설치
npm install

# 실행
npm run dev