그랜파의 프론트엔드 공부

예약 관리 시스템 완성 - 백엔드 (Spring Boot 3 + Mysql)

Eclipse에서 Spring Boot 프로젝트 생성🔹 사전 준비JDK 17 이상Eclipse IDE (최신)Maven 설치 (또는 Eclipse 내장 Maven 사용)MySQL 실행 중🔹 Step 1: Spring 프로젝트 생성Eclipse 실행 → File → New → Spring Starter Project프로젝트 정보 입력:Name: reservationType: MavenPackaging: JarJava Version: 17Language: JavaGroup: com.exampleArtifact: j reservationDependencies 추가:Spring WebSpring Data JPASpring Boot DevTools (선택)Spring SecurityMySQL DriverLom..

예약 관리 시스템 완성 - 프론트엔드(Vue 3 + Vuetify)

프로젝트npm init vue@latestProject name (target directory):│ reservationcd reservationnpm installnpm install vue-router@4 vuetify@3 axios plugins - axios.js// src/plugins/axios.jsimport axios from 'axios'import { useAuthStore } from '@/stores/authStore'axios.interceptors.request.use((config) => { const auth = useAuthStore() if (auth.token) { config.headers.Authorization = `Bearer ${auth.token}..

예약 관리 시스템 완성 - Spring Boot 3 + Vue 3

홈 회원가입로그인예약하기 회원 - 예약조회, 예약 취소 관리자 - 예약 조회, 승인, 거부 예약 날짜 선택

예약 관리 시스템 (Spring Boot 3 + Vue 3) - 예약 조회(사용자)

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

예약 관리 시스템 (Spring Boot 3 + Vue 3) - 예약 관리(관리자)

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

예약 관리 시스템 (Spring Boot 3 + Vue 3) - 예약 하기 (백엔드)

예약 기능 전체 흐름에 필요한 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..

예약 관리 시스템 (Spring Boot 3 + Vue 3) - 예약 하기 (프론트엔드)

예약 기능 추가예약 시나리오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. 로그인 / 회원가입경로:..