풀스택 개인 학습 목표 트래커

mkdir personal-learning-goal-tracker && cd personal-learning-goal-tracker

이 폴더에서 프로젝트를 시작합니다.

# Laravel 12.x API 백엔드 설정

1. `backend` 폴더에 Laravel 12.x 프로젝트를 생성해주세요.
2. SQLite 데이터베이스를 사용하도록 `.env` 파일을 설정해주세요.
3. `goals` 테이블을 위한 마이그레이션 파일을 생성하고, 다음 필드를 포함해주세요:
   - id (자동 생성)
   - title (string, 필수) - 학습 목표 제목
   - description (text, nullable) - 상세 설명
   - progress (integer, 기본값 0) - 진행률 (0~100)
   - is_completed (boolean, 기본값 false) - 완료 여부
   - created_at, updated_at (타임스탬프)
4. 마이그레이션을 실행하여 테이블을 생성해주세요.
5. `Goal` 모델을 생성하고, fillable 속성을 설정해주세요.
6. CORS 설정을 추가하여 프론트엔드(localhost:5173)에서 API 접근이 가능하도록 해주세요.

# Laravel API 라우트 및 컨트롤러 구현

1. `GoalController`를 생성하고 다음 RESTful API 메서드를 구현해주세요:
   - `index()` - 모든 학습 목표 조회 (GET /api/goals)
   - `store(Request $request)` - 새 학습 목표 생성 (POST /api/goals)
     - title 필수 검증
     - progress는 0~100 범위 검증
   - `update(Request $request, $id)` - 학습 목표 수정 (PUT /api/goals/{id})
     - progress 업데이트 시 100이면 is_completed를 true로 자동 설정
   - `destroy($id)` - 학습 목표 삭제 (DELETE /api/goals/{id})

2. `routes/api.php`에 위 컨트롤러를 연결하는 라우트를 정의해주세요.

3. 각 API는 JSON 형식으로 응답하도록 해주세요.

4. Laravel 개발 서버를 `php artisan serve` 명령으로 실행하여 API 테스트가 가능하도록 해주세요.

# React 19 프론트엔드 프로젝트 설정

1. 프로젝트 루트에 `frontend` 폴더를 만들고, Vite + React 19 프로젝트를 생성해주세요.
2. Tailwind CSS를 설치하고 설정해주세요.
3. `src/App.jsx`를 메인 컴포넌트로 만들고, 다음 UI 레이아웃을 구현해주세요:
   - 상단에 "📚 학습 목표 트래커" 제목
   - 새 목표 추가 폼 (제목 입력, 설명 입력, 추가 버튼)
   - 목표 목록 표시 영역
4. `useState`를 사용하여 다음 상태를 관리해주세요:
   - goals (배열) - 학습 목표 목록
   - newTitle (문자열) - 새 목표 제목 입력값
   - newDescription (문자열) - 새 목표 설명 입력값
5. 아직 API 연동은 하지 말고, 빈 배열 상태로 UI만 구현해주세요.
6. Tailwind CSS로 깔끔하고 현대적인 디자인을 적용해주세요.

# React와 Laravel API 연동

1. `useEffect` 훅을 사용하여 컴포넌트 마운트 시 Laravel API(http://localhost:8000/api/goals)에서 학습 목표 목록을 가져와 상태에 저장해주세요.

2. 새 목표 추가 기능을 구현해주세요:
   - 폼 제출 시 POST /api/goals로 데이터 전송
   - 성공 시 목록을 다시 불러오고 입력 필드 초기화

3. 각 목표 항목에 다음 UI를 추가해주세요:
   - 제목과 설명 표시
   - 진행률 바 (0~100% 시각화)
   - 진행률 입력 슬라이더 (0~100 범위)
   - 슬라이더 변경 시 PUT /api/goals/{id}로 업데이트
   - 삭제 버튼 (DELETE /api/goals/{id})

4. 진행률이 100%인 목표는 초록색 배경이나 체크 아이콘으로 시각적 구분을 해주세요.

5. 로딩 상태와 에러 처리를 추가해주세요.

6. `npm run dev`로 개발 서버를 실행하여 전체 기능이 동작하는지 확인해주세요.