예약 시스템에서 매장마다 다른 운영시간을 반영하여 사용자가 선택할 수 있는 예약 가능 시간대를 동적으로 생성하고자 하였습니다. 예를 들어, 이와 같이 임시 데이터로 입력한 매장들의 운영시간을 모두 다르게 설정하였습니다. 이와 같이 각각 운영시간이 다르기 때문에, 이를 무시하고 고정된 시간 슬롯을 보여준다면 사용자 경험이 나빠질 수밖에 없을 것입니다. ✅ 문제 정의운영 시간(open, close)을 기준으로 예약 가능 시간대를 생성해야 합니다. • 예약 시간 단위는 1시간 간격으로 설정• 12시간제 표기(오전/오후)를 사용해 직관적으로 표시• 각 매장의 오픈 ~ 마감 시간까지만 예약이 가능하도록 구현 💡 해결 방법1. 공통 함수 만들기 우선, open과 close 시간을 "HH:MM" 형식의 문자열..

🚨 케이스 설명React 애플리케이션에서 사용자가 로그인해야만 접근할 수 있는 특정 페이지가 있을 수 있습니다.  예를 들어, 예약 페이지(예: /reservationForm)에 접근하려고 할 때, 로그인된 사용자만 접근할 수 있도록 해야 합니다. 하지만 로그인되지 않은 사용자가 해당 페이지를 방문하려고 하면, 로그인 페이지로 리디렉션해야 합니다. 이때 문제는, 로그인 후 사용자가 원래 가려고 했던 페이지로 다시 돌아가게끔 해야 한다는 점입니다. 만약 로그인 후 바로 홈 페이지로 리디렉션된다면, 사용자는 원하는 작업을 하지 못하고 다시 페이지를 찾아야 하는 번거로움이 발생합니다.  (로그인하지 않은 상태) 예약하기 버튼 선택 → 로그인 페이지로 이동  →  로그인 성공  → 예약화면으로 이동 따라서, ..

안녕하세요! 😊 이번에는 React/TypeScript와 Spring Boot를 활용한 로그인 기능을 구현한 내용을 공유하려고 합니다.기본적인 ID/PW 로그인과 함께 세션 저장 및 상태 관리까지 포함된 구조입니다.  1. 프론트엔드 : React/TypeScript 로그인 페이지📌 로그인 컴포넌트import React, { useState } from "react";import "../../styles/account/Login.css";import { FcGoogle } from "react-icons/fc";import { SiKakao, SiNaver } from "react-icons/si";import { Link, useNavigate } from "react-router-dom";impo..

웹 애플리케이션에서 데이터를 클라이언트 측에 저장할 때 localStorage와 sessionStorage를 자주 사용합니다. 이 두 가지는 모두 웹 스토리지 API의 일부로, 브라우저에서 데이터를 저장하고 관리하는 데 도움을 줍니다. 이번 블로그에서는 localStorage와 sessionStorage의 차이점, 각각의 특징과 사용법 그리고 sessionStorage를 활용하여 로그인 상태를 관리하는 방법에 대해 다뤄보겠습니다.   1. localStorage란 ?localStorage는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 공간을 제공합니다. 사용자가 브라우저를 종료하더라도 데이터는 유지되며, 데이터는 브라우저의 세션이 끝날 때까지 계속 남아있습니다. 다른 웹 페이지나 탭에서도 동일한 l..

💡 Auto Increment란 ?Auto Increment는 데이터베이스에서 특정 컬럼에 자동으로 고유한 값을 증가시켜 주는 기능입니다. 주로 기본 키(Primary Key) 컬럼에 사용되며, 새로운 레코드가 삽입될 때마다 자동으로 숫자가 증가하여 고유한 값을 생성합니다. 이 기능은 수동으로 값을 지정하지 않아도 되므로, 데이터베이스에서 레코드를 추가할 때 유용하게 사용됩니다. ✱ 특징1) 자동 증가- Auto Increment가 설정된 컬럼은 레코드가 삽입될 때마다 자동으로 값이 증가합니다. 보통 1씩 증가하지만, 증가 값을 설정할 수 있는 DBMS도 있습니다.2) 유니크한 값- Auto Increment를 적용하면 각 레코드가 고유한 값을 가지게 되어, 중복된 값을 방지할 수 있습니다.3) 테이블..

1. postgreSQL 실행 (pgAdmin)  2. 새 사용자 생성Login/Group Roles > Create > Login/Group Role 탭 선택   ✱ General 탭 > Name: 새 사용자의 이름을 입력합니다 (예: myuser).✱ Definition 탭 > Password: 사용자 비밀번호를 입력합니다.✱ Privileges 탭 > 데이터베이스 사용자가 특정 권한을 가질지 여부를 설정할 수 있습니다.3가지 탭 모두 설정하였으면 Save 버튼으로 새 사용자를 생성합니다.  이와 같이 새로 등록하려한 사용자가 제대로 생성되었음을 확인할 수 있습니다.  3. 프로젝트 데이터베이스 만들기Databases > Create > Database 클릭  ✱ Database > 원하는 데이터베이..

예약 상태에 따라 이와 같이 세가지의 구성으로 화면을 다양하게 꾸며보고 싶어서 피그마로 이렇게 우선 디자인을 진행했습니다. 완료: 예약을 통한 시술을 마친 상태대기: 예약 후 시술 대기 상태 (D-day 라는 기능을 통해 예약까지 남은 일수를 계산)취소: 예약 후 취소된 상태   📋 데이터 구조 정의하기이와 같이 예약 상태에는 완료, 대기, 취소 3가지의 상태만 정의되도록 타입을 지정해주었습니다.interface Reservation { no: number; name: string; date: Date; menu: string; designerName: string; designerRole: string; status: "완료" | "대기" | "취소";}  ✨ 예약내역 데이터 작성하기우선..

고객이 남긴 리뷰에서 중요한 부분인 별점을 효과적으로 표시하는 것은 사이트의 신뢰도를 높이고, 사용자 경험을 향상시키는 데 도움이 됩니다. 이번 포스팅에서는 react-icons 라이브러리를 활용하여 별점을 구현하는 방법을 알아보겠습니다. ✨ 필수 라이브러리 설치우리가 사용할 라이브러리는 react-icons입니다. react-icons는 React에서 사용할 수 있는 다양한 아이콘들을 제공해주는 라이브러리로, 별점 구현에 매우 유용합니다. 먼저 아래 명령어로 설치해 주세요.npm install react-icons // npm 사용자yarn add react-icons // yarn 사용자  📋 리뷰 데이터 구조 정의하기먼저, 각 리뷰 항목의 데이터를 관리하기 위해 TypeScript 인터페이스를 정..

프론트엔드는 React, 백엔드는 SpringBoot를 사용하여 프로젝트를 진행할 예정입니다. 1. Spring Boot 프로젝트 생성하기https://start.spring.io/start.spring.io 사이트에서 접속해줍니다. 빌드 도구는 Gradle을 사용할 예정이므로 Gradle - Groovy 선택하고, Springboot 버전은 3.3.8 버전, Packaging은 Jar, Java 버전은 17 버전을 선택해주었습니다. 추가적으로 Dependencies는 Thymeleaf, Spring Web, Lombok, Spring Boot DevTools를 받아주었습니다. Project Metadata는 제 프로젝트명 dangle에 알맞게 작성하였습니다. 모든 정보를 입력하였으면 GENERATE 버..