🙌 안녕하세요. Yudillo 입니다!

Trello 스타일의 칸반보드 웹 애플리케이션으로, 프로젝트를 생성하고 리스트를 만들어 리스트 별로 할 일을 카드로 만들어 Drag & Drop으로 손쉽게 이동시키며 할 일을 효율적으로 관리할 수 있어요!

✨ 기능

• 회원가입, 로그인, 비밀번호 재설정
• 마이페이지, 활동 로그 확인
• 프로젝트 생성, 수정, 삭제
• 리스트 생성, 수정, 삭제
• 카드 생성, 수정, 삭제
• 리스트 간 Drag&Drop을 통한 카드 이동 (Mobile 제외)
• 상태 저장

🔧 사용방법

• 프로젝트를 생성 할 수 있어요.
• 프로젝트에 맞는 리스트를 생성할 수 있어요.
• 리스트에 맞는 카드를 추가 할 수 있어요.
• 카드 상태에 따라 리스트 간 이동이 가능해요.
• Drag&Drop으로 쉽게 카드를 리스트 간 이동할 수 있어요. (Mobile 제외)

⚙️ 기술스택

• Frontend

🪄 설치 및 실행

👀 프론트엔드

💡 실행환경

node -v
v22.11.0

💡 프로젝트 실행

🎈 프로젝트 클론

git clone https://github.com/Yudillo/front-end.git

🎈 의존성 설치

pnpm install

🎈 개발 서버 실행

pnpm dev

🎈 기본 실행 경로

> http://localhost:3000
vite를 사용하고 있다면 vite.config.ts에서 포트를 설정할 수 있습니다.

📁 폴더구조

👀 프론트엔드

src/
│
├── api/ # api 호출 및 관련 로직
├── assets/ # 이미지 및 정적 파일
├── components/ # 재사용 가능한 컴포넌트
├── constants/ # 상수 파일
├── hooks/ # 커스텀 훅
├── integrations/ #
├── layout/ # 미디어쿼리별 레이아웃 관리
├── pages/ # 페이지 단위 구성
├── routes/ # 파일 기반 라우트
├── styles # 전역스타일
├── types/ # TypeScript 전용 타입 선언
├── utils/ # 유틸리티 함수들
└── main.tsx # 진입 파일

🌱 기타

☘️ 추후 개선 사항

• Oauth
• 공지사항, FAQ, 문의사항
• 관리자 페이지
• 실시간 협업

🔎 리스트

1. ✨ 기능
2. 🔧 사용방법
3. ⚙️ 기술스택
4. 🪄 설치 및 실행
5. 📁 폴더구조
6. 🌱 기타