풀스택 간단 메모장 - 카테고리별 노트 정리

mkdir simple-notes-app-laravel-react && cd simple-notes-app-laravel-react

이 폴더에서 Laravel 13.x API 백엔드 프로젝트를 시작합니다.

다음 작업을 수행해주세요:

1. Laravel 13.x 프로젝트 생성 (폴더명: backend)
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite로 변경)
3. database/database.sqlite 파일 생성
4. Note 모델 및 마이그레이션 생성:
   - 필드: id, title (string), content (text), category (string, nullable), created_at, updated_at
5. 마이그레이션 실행
6. CORS 설정: config/cors.php에서 'paths' => ['api/*'], 'allowed_origins' => ['http://localhost:5173']
7. NoteController 생성 및 API 라우트 설정:
   - GET /api/notes (전체 메모 목록)
   - POST /api/notes (새 메모 생성)
   - GET /api/notes/{id} (특정 메모 조회)
   - PUT /api/notes/{id} (메모 수정)
   - DELETE /api/notes/{id} (메모 삭제)
   - GET /api/notes/search?q={keyword} (검색)

모든 API는 JSON 형식으로 응답하도록 설정하세요.

이제 React 19 프론트엔드 프로젝트를 생성합니다.

다음 작업을 수행해주세요:

1. 현재 폴더(simple-notes-app-laravel-react)에서 Vite + React 19 프로젝트 생성 (폴더명: frontend)
2. axios 설치: npm install axios
3. Tailwind CSS 설치 및 설정
4. src/api/noteApi.js 파일 생성:
   - axios 인스턴스 생성 (baseURL: 'http://localhost:8000/api')
   - getAllNotes(), createNote(data), updateNote(id, data), deleteNote(id), searchNotes(query) 함수 작성
5. src/App.jsx 기본 구조 작성:
   - useState로 notes 배열, selectedCategory, searchQuery 상태 관리
   - useEffect로 컴포넌트 마운트 시 전체 메모 불러오기
   - 메모 목록 표시 (카드 형식)
   - 새 메모 작성 폼 (제목, 본문, 카테고리 선택)
   - 카테고리 필터 버튼 (전체, 업무, 개인, 아이디어)
   - 검색창

Tailwind CSS로 깔끔한 UI를 디자인하세요. 카드는 그리드 레이아웃으로 배치하고, 반응형 디자인을 적용하세요.

메모 CRUD 기능을 완성하고 UI 인터랙션을 개선합니다.

다음 작업을 수행해주세요:

1. 메모 작성 기능:
   - 폼 제출 시 createNote API 호출
   - 성공 시 메모 목록 새로고침 및 폼 초기화
   - 로딩 상태 표시
2. 메모 수정 기능:
   - 각 메모 카드에 '수정' 버튼 추가
   - 클릭 시 폼에 기존 내용 채우기 (편집 모드)
   - 수정 완료 시 updateNote API 호출
3. 메모 삭제 기능:
   - 각 메모 카드에 '삭제' 버튼 추가
   - 클릭 시 확인 다이얼로그 표시 후 deleteNote API 호출
4. 카테고리 필터링:
   - 카테고리 버튼 클릭 시 해당 카테고리 메모만 표시
   - '전체' 버튼으로 모든 메모 표시
5. 검색 기능:
   - 검색창에 입력 시 실시간으로 메모 필터링 (프론트엔드에서 처리)
   - 또는 검색 버튼 클릭 시 searchNotes API 호출
6. 에러 처리:
   - API 호출 실패 시 에러 메시지 표시
   - 네트워크 오류 처리
7. UI 개선:
   - 메모가 없을 때 안내 메시지 표시
   - 버튼 호버 효과 및 트랜지션 추가
   - 메모 카드에 그림자 효과

모든 기능이 Laravel API와 정상적으로 연동되는지 확인하세요.