그랜파 개발자의 풀스택 공부

회원 예약 조회 및 취소회원은 자신의 예약을 조회할 수 있습니다.자신의 예약을 취소할 수 있습니다. ‘예약조회’를 누르면, 예약 조회 페이지로 이동하고, 자신의 모든 예약을 볼 수 있습니다.각 예약에는 ‘예약 취소’ 버튼이 있어 이것을 누르면 예약이 취소 됩니다. - 프론트엔드 -UserReservations.vue 내 예약 목록 예약 ID: {{ reservation.id }} - {{ reservation.date }} - 상태: {{ statusText(reservation.status) }} 메모: {{ reservation.memo }} 시간 슬롯: {{ slot...

관리자 모드1. 관리자 페이지1. 관리자는 DB에 수동 등록회원 등록, DB에서 수동으로 Role을 ADMIN으로 변경2. 예약 조회, 관리 - 관리자 기능날짜 선택, 예약 조회, 예약 승인/거부예약 승인/거부는 관리자만 할 수 있음관리자 기능은 관리자만 사용가능하도록 제한3. 백엔드컨트롤러에서 역할에 따라 접근 제어하기예약 상태 변경 : 예약 승인 (APPROVED), 거절 (REJECTED)Jwt Token 생성할 때 이메일 뿐 아니라 역할(Role)도 클레임에 포함Jwt Token에서 역할 추출 메서드 추가로그인할 때 관리자, 사용자 구분 가능SecurityFilterChain에 관리자 전용 경로 설정/api/admin/** 경로는 ADMIN만 접근 가능하게 설정 - 프론트엔드 - AdminRe..

예약 기능 전체 흐름에 필요한 ReservationController, ReservationService, DTO, 모델, 리포지토리 구조를 포함한 전체 코드 입니다.프론트엔드에서 JWT 토큰을 헤더로 넘기면 사용자의 이메일을 추출하여 예약을 등록합니다.✅ ReservationController.javapackage com.example.reservation.controller;import com.example.reservation.dto.ReservationRequest;import com.example.reservation.dto.ReservationResponse;import com.example.reservation.service.ReservationService;import com.example..

예약 기능 추가예약 시나리오1. 예약 페이지에서 캘린더를 통해 날짜를 선택한다.2. 예약 시간을 선택한다. time-slot 하나의 타임 slot은 1시간, 한번에 여러개 선택할 수 있다.3. 메모를 입력하여 예약요청 버튼을 누른다.4. 예약 상태는 기본적으로 "대기 중(PENDING)" 상태로 저장된다. 로그인 상태 관리로그인 여부 App bar에 표기로그인을 해야 예약 가능로그인에 따른 메뉴 항목 변경 예약하기 프론트엔드 (Vue + Vuetify)npm init vue@latestProject name (target directory):│ reservationcd reservationnpm installnpm install vue-router@4 vuetify@3 axios 상태관..

Spring Boot 백엔드와 연동 가능한 Vue 3 + Vuetify 기반의 간단한 홈, 회원가입, 로그인 예제입니다.기본적인 페이지와 API 연동 코드, 라우터, Vuetify UI를 포함합니다. 1. 프로젝트 npm init vue@latestProject name (target directory):│ reservationcd reservationnpm installnpm install vue-router@4 vuetify@3 axios2. main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './router';import 'vuetify/styles';import { createVuetify }..

예약 관리 시스템 백엔드 - Spring Boot 3 + MySQL + JWT 인증Spring Boot 3 + MySQL + JWT 인증 백엔드 프로젝트를 Eclipse와 Maven을 사용해 만드는 과정을 단계별로 상세히 설명드릴게요.✅ 1. Eclipse에서 Spring Boot 프로젝트 생성하기🔹 사전 준비JDK 17 이상Eclipse IDE (최신)Maven 설치 (또는 Eclipse 내장 Maven 사용)MySQL 실행 중🔹 Step 1: Spring 프로젝트 생성Eclipse 실행 → File → New → Spring Starter Project프로젝트 정보 입력:Name: jwt-auth-demoType: MavenPackaging: JarJava Version: 17Language: J..

예약 관리 시스템의 UI 페이지 구성을 사용자/관리자 기준으로 나누어 정리하고,각 페이지에 어떤 컴포넌트가 포함되는지도 함께 설명드릴게요.✅ 전체 UI 페이지 구성도📦 App├── 🧍 사용자 화면│ ├── 1. 로그인 / 회원가입│ ├── 2. 메인 대시보드 (예약 캘린더)│ ├── 3. 예약 생성 페이지 (시간 선택)│ ├── 4. 내 예약 목록 페이지│ └── 5. 프로필 페이지 (선택)│├── 🛠️ 관리자 화면│ ├── 6. 관리자 로그인│ ├── 7. 예약 관리 페이지 (목록 + 승인/거절)│ └── 8. 통계 대시보드 (선택)│└── 🧭 공통 ├── 내비게이션 바 └── 알림 / 메시지 컴포넌트📄 각 페이지별 상세 구성1. 로그인 / 회원가입경로:..

"예약 관리 시스템"의 사용자 및 관리자 관점의 사용 시나리오를 아래와 같이 정리할 수 있습니다.이런 시나리오는 실제 서비스 론칭 전에 기능 누락을 방지하고, UX 흐름을 점검하는 데도 매우 유용합니다.✅ 사용자 시나리오 (고객)🧍‍♀️ 시나리오: 회원가입부터 예약까지1. 회원가입 및 로그인사용자는 메인 페이지에서 회원가입을 한다.가입 후 로그인 폼에 이메일/비밀번호를 입력해 로그인한다.2. 예약 가능 시간 확인메인 페이지에서 캘린더를 통해 날짜를 선택한다.선택한 날짜의 예약 가능한 시간대를 리스트로 확인한다.3. 예약 요청시간대 리스트에서 원하는 시간을 선택한다.간단한 추가 정보(메모 등)를 입력하고 예약 요청 버튼을 누른다.예약 상태는 기본적으로 "대기 중(PENDING)" 상태로 저장된다.4. 내..

🗓️ 예약 관리 시스템 (Meeting Room / 미용실 / 병원 등)주요 기능: 예약 등록/조회, 시간대 중복 방지, 관리자 승인학습 포인트:Spring: REST API 설계, JPA + DB 연동, 예약 중복 체크 로직Vue: 캘린더 컴포넌트, 시간 선택 UI, 예약 목록 관리인증: 사용자/관리자 권한 분리 (JWT or Spring Security)Spring + Vue 기반의 "예약 관리 시스템"은 실제 스타트업, 병원, 미용실, 학원 등에서 사용하는 실전성이 높은 프로젝트입니다.아래는 이 프로젝트의 전체 구성, 기능 목록, 기술 스택, 그리고 추후 확장 포인트입니다.✅ 프로젝트 개요: 예약 관리 시스템🎯 목표사용자는 시간대를 선택해 예약하고, 관리자는 이를 확인 및 승인/거절할 수 있는 ..

Spring Boot + JPA로 만든 게시판 REST API를 Vue 3 프론트엔드 앱에서 호출하는 예제를 만들어보겠습니다. 아래는 가장 기본적인 게시글 목록 조회, 게시글 작성, 상세 보기, 삭제 기능을 포함한 Vue 앱 예제입니다. ✅ 1. Vue 3 프로젝트 생성npm init vue@latestcd vue-boardnpm install 선택 시:TypeScript: ❌ (JS로 설명)Router: ✅ YesPinia: ❌ (기본 프로젝트에선 생략)✅ 2. 프로젝트 구조vue-board/├── public/├── src/│ ├── assets/│ ├── components/│ │ ├── PostList.vue│ │ └── PostForm.vue│ ├── views/│ ..