아키텍처 설계

시스템 개요

• 프로젝트 명: 투두등장
• 프로젝트 목적: 일정을 관리하기위한 웹 애플리케이션 개발
• 기술 스택
  • 백엔드
    • 사용 기술
      
    • 패키지 관리
      
    • 개발 환경
      
    • 배포
      
  • 프론트엔드
    • 사용 기술
      
    • 설정 및 패키지 관리
      
    • 개발 환경
      
    • 배포
      

아키텍처 다이어그램

• 프론트엔드: React + Vite + Tailwind CSS
• 백엔드: Spring Boot + JPA + Spring Security
• 데이터 베이스: PostgreSQL
• API 연동: RESTful API ( JWT 인증 사용 )
• 외부 서비스: OpenWeather API, FullCalendar 라이브러리
• 배포 환경: Render ( 백엔드 ), Vercel ( 프론트엔드 ) + GitHub Actions

주요 기능

프론트엔드

• 날씨 정보 제공 (OpenWeatherMap API 연동)
• 일정 관리 (Fullcalendar 기반 일정 추가, 수정, 삭제)
• 할 일 관리 (To-Do 리스트 추가, 수정, 삭제, 완료 체크로 할일 완료 여부 관리)
• 반응형 UI 지원

백엔드

• 일정 관리 API (CRUD)
• 할 일 관리 API (CRUD)
• JWT 기반 사용자 인증
• 예외 처리 및 보안 필터 적용

데이터베이스 설계

ERD

테이블

Member

키	컬럼명	자료형	컬럼타입	기본값	비고
PK	ID	Long	BIGINT(20)	auto_increment
	NAME	String	VARCHAR(255)
	EMAIL	String	VARCHAR(255)
	PHONE	String	VARCHAR(255)
	PASSWORD	String	VARCHAR(255)
	JOIN_DATE	OffsetDateTime	TIMESTAMP	current_timestamp

Member_Role

키	컬럼명	자료형	컬럼타입	기본값	비고
PK	ID	Long	BIGINT(20)	auto_increment
	ROLE_NAME	String	VARCHAR(255)
FK	MEMBER_ID	Long	BIGINT(20)

Schedule

키	컬럼명	자료형	컬럼타입	기본값	비고
PK	ID	Long	BIGINT(20)	auto_increment
	TITLE	String	VARCHAR(255)
	CONTENT	String	VARCHAR(2000)
	START_TIME	OffsetDateTime	TIMESTAMP
	END_TIME	OffsetDateTime	TIMESTAMP
	LOCATION	String	VARCHAR(255)
	REG_DATE	OffsetDateTime	TIMESTAMP	current_timestamp
FK	MEMBER_ID	Long	BIGINT(20)

Todo

키	컬럼명	자료형	컬럼타입	기본값	비고
PK	ID	Long	BIGINT(20)	auto_increment
	TITLE	String	VARCHAR(255)
	CONTENT	String	VARCHAR(2000)
	REG_DATE	OffsetDateTime	TIMESTAMP	current_timestamp
FK	MEMBER_ID	Long	BIGINT(20)

API 설계

REST API 설계

HTTP 코드

HTTP 상태 코드	상태	지정할 코드명	표시할 메시지
200	성공	”SU"	"Success.”
400	유효성 검증 실패	”VF"	"Validation failed.”
	중복된 이메일	”DE"	"Duplicate email.”
	중복된 전화번호	”DP"	"Duplicate Phone.”
	존재하지 않는 유저	”NU"	"This user does not exist.”
	존재하지 않는 일정	”NS"	"This Schedule does not exist.”
	존재하지 않는 할일	”NT"	"This Todo does not exist.”
401	로그인 실패	”SF"	"Login information mismatch.”
500	데이터베이스 에러	”DBE"	"Database error.”

Data Flow

사용자 인증

1. 사용자 회원가입 → Spring Security로 비밀번호 암호화 후 저장
2. 로그인 시 JWT 토큰 발급 → 프론트에서 저장 후 API 요청 시 헤더에 포함

일정/ 할 일 관리

1. 사용자가 일정 혹은 할 일 추가 요청 → 백엔드 API → PostgreSQL 에 저장 → 성공 실패 판별 후 관련 응답 코드 프론트로 전송
2. 사용자가 일정 혹은 할 일 수정 요청 → 백엔드 API → PostgreSQL 에 수정 → 성공 실패 판별 후 관련 응답 코드 프론트로 전송
3. 사용자가 일정 혹은 할 일 조회 요청 → 백엔드 API → PostgreSQL 에서 조회 → 성공 시 조회 한 목록 + 성공 응답 코드 발송/ 실패 시 실패 응답 코드 발송
4. 사용자가 일정 혹은 할 일 삭제 요청 → 백엔드 API → PostgreSQL 에서 삭제 → 성공 실패 판별 후 관련 응답 코드 프론트로 전송

날씨 데이터

1. 프론트에서 OpenWeather API 요청 → 응답 데이터를 받아 데이터 가공 후 화면에 표시