초대장 앱을 만들어 보자!

💡 주요 기능 (concept)

1. 초대장 생성 및 관리

• 사용자가 이벤트(결혼식, 돌잔치, 생일 등)를 선택하여 초대장 생성 가능
• 초대장 꾸미기 및 미리보기 기능

2.초대장 전송 및 RSVP 관리

• 이메일, 문자(SMS), 카카오톡, 링크 공유 방식으로 초대장 전송
• 참석 여부(RSVP) 응답 기능 (참석 / 불참 / 미정)
• 참석자 목록 관리 (참석자 수 카운트 및 실시간 업데이트)

3. 일정 및 알림 시스템

• 캘린더 연동 (Google Calendar, Outlook 등)
• 초대장 받은 사람에게 일정 리마인더 알림 전송

4. 추가기능

• 개발 진행 하면서 추가 기능 개발 예정..

🛠️ 기술 스택

📌 프론트엔드 (React)

• UI 라이브러리: Material-UI, Ant Design 또는 TailwindCSS
• 상태 관리: Redux 또는 React Context API
• 지도 API: Google Maps API 또는 Kakao 지도 API
• 이미지/동영상 업로드: Firebase Storage 또는 AWS S3

📌 백엔드 (Java, Spring Boot)

• API 설계: RESTful API 또는 GraphQL
• 데이터베이스: MySQL (참석자 및 이벤트 데이터 저장)
• 이메일/SMS 발송: Twilio, SendGrid, AWS SES
• 결제 시스템: Stripe, Toss Payments (축의금, 선물 기능 추가 시)
• 실시간 알림: WebSocket 또는 Firebase Cloud Messaging (FCM)

🛠️ 프로젝트 구조

/dearU
 ├── frontend (React + TypeScript)
 │   ├── src
 │   │   ├── components  (재사용 가능한 UI 컴포넌트)
 │   │   ├── pages       (각 페이지 라우트)
 │   │   ├── assets      (이미지, 아이콘 등)
 │   │   ├── store       (상태 관리)
 │   │   ├── services    (API 호출)
 │   │   ├── types       (TypeScript 타입 정의)
 │   ├── tsconfig.json  (TypeScript 설정)
 │   ├── package.json
 │
 ├── backend (Spring Boot)
 │   ├── src/main/java/com/dearu
 │   │   ├── config  			
 │   │   ├── controller  (API 엔드포인트)
 │   │   ├── service     (비즈니스 로직)
 │   │   ├── repository  (DB 연동)
 │   │   ├── model       (데이터 모델)
 │   ├── pom.xml
 │
 ├── README.md

개발 진행

1. 프론트 환경 구성(React+TypeScript)

npx create-react-app frontend --template typescript --use-npm
cd frontend
npm install react@18 react-dom@18
npm install --save-dev @types/react@18 @types/react-dom@18

npm start

2. GitHub 연동

https://github.com/sein0121/dearU

3. 백엔드 환경 구성(SrpingBoot)

3-1. 프로젝트 생성

3-2. MySQL 설정

application.properties

# ✅ MySQL 연결 정보
spring.datasource.url=jdbc:mysql://localhost:3306/dearu?serverTimezone=UTC&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=your_password  # ← 본인의 MySQL 비밀번호 입력

# ✅ JPA 설정
spring.jpa.hibernate.ddl-auto=update  # 애플리케이션 실행 시 자동 테이블 생성
spring.jpa.show-sql=true  # 콘솔에 SQL 출력
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
spring.sql.init.mode=always  # 초기 SQL 실행 (선택사항)

# ✅ 서버 포트 설정 (기본값: 8080)
server.port=8080

3-3. 프론트와 연결

npm install axios

api.ts 생성

import axios from "axios";

const API_BASE_URL = "http://localhost:8080/api";

export const getEvents = async () => {
    const response = await axios.get(`${API_BASE_URL}/events`);
    return response.data;
};

export const createEvent = async (event: { title: string; description: string }) => {
    const response = await axios.post(`${API_BASE_URL}/events`, event);
    return response.data;
};