퍼스널 브랜딩 페이지 업그레이드 해보기 (문의 기능 구현하기)

## 📧 이메일 전송 설정 (EmailJS)

연락처 폼에서 실제로 이메일을 전송하기 위해 EmailJS를 사용합니다.

->

## 📧 연락처 폼 설정

연락처 폼에서 실제로 메시지를 받기 위한 여러 방법이 있습니다. 개인 포트폴리오에는 **Google Apps Script**를 추천합니다.

### 🥇 추천: Google Apps Script (무료, 간단)

가장 인기 있고 실용적인 방법입니다.

#### 1. Google Sheets 생성
- [Google Sheets](https://sheets.google.com)에서 새 스프레드시트 생성
- 첫 번째 행에 헤더 추가: `이름 | 이메일 | 제목 | 메시지 | 날짜`

#### 2. Google Apps Script 생성
- Google Sheets에서 `확장 프로그램` → `Apps Script` 클릭
- 다음 코드 입력:

```javascript
function doPost(e) {
  try {
    // 스프레드시트 ID (URL에서 복사)
    const spreadsheetId = 'YOUR_SPREADSHEET_ID';
    const sheet = SpreadsheetApp.openById(spreadsheetId).getActiveSheet();
    
    // 폼 데이터 파싱
    const formData = e.parameter;
    const name = formData.name || '이름 없음';
    const email = formData.email || '이메일 없음';
    const subject = formData.subject || '제목 없음';
    const message = formData.message || '메시지 없음';
    const date = new Date().toLocaleString('ko-KR');
    
    // 스프레드시트에 데이터 추가
    sheet.appendRow([name, email, subject, message, date]);
    
    // 이메일 알림 전송 (선택사항)
    const recipient = '[email protected]'; // 본인 이메일
    const emailSubject = `새로운 문의: ${subject}`;
    const emailBody = `
새로운 문의가 도착했습니다!

이름: ${name}
이메일: ${email}
제목: ${subject}
날짜: ${date}

메시지:
${message}

---
이 메일은 포트폴리오 웹사이트의 연락처 폼을 통해 전송되었습니다.
    `;
    
    MailApp.sendEmail(recipient, emailSubject, emailBody);
    
    // 성공 응답
    return ContentService
      .createTextOutput(JSON.stringify({ success: true }))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    console.error('오류:', error);
    return ContentService
      .createTextOutput(JSON.stringify({ success: false, error: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

function doGet(e) {
  return ContentService
    .createTextOutput('연락처 폼 서버가 정상적으로 작동 중입니다.')
    .setMimeType(ContentService.MimeType.TEXT);
}
```

#### 3. 배포 설정
- `배포` → `새 배포` 클릭
- `유형`: `웹 앱` 선택
- `액세스 권한`: `모든 사용자` 선택
- `배포` 클릭
- 생성된 웹앱 URL 복사

#### 4. 환경 변수 설정
`.env` 파일에 웹앱 URL 추가:
```env
VITE_GOOGLE_APPS_SCRIPT_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec
```

#### 5. Contact 컴포넌트 수정
Contact.jsx에서 Google Apps Script 사용하도록 변경 (아래 EmailJS 섹션 참고)

### 🥈 대안: EmailJS (유료, 복잡)

연락처 폼에서 실제로 이메일을 전송하기 위해 EmailJS를 사용합니다.

실제 동작 방식
사용자가 폼 작성
Google Sheets에 데이터 저장
이메일 알림 발송 (선택사항)
스프레드시트에서 문의 관리

🔧 구현된 구조
우선순위
Google Apps Script (설정된 경우)
EmailJS (대안)
설정 안내 (설정되지 않은 경우)
사용자 경험
설정에 관계없이 "전송 완료" 메시지 표시
실제로는 스프레드시트에 저장되거나 이메일 발송
자동 답장 없이 간단하고 실용적

�� 실제 포트폴리오 사이트들의 공통점
자동 답장 거의 없음 (스팸 방지)
간단한 "전송 완료" 메시지
스프레드시트나 이메일로 관리
복잡한 설정 지양
이제 개인 포트폴리오에 최적화된 연락처 폼이 완성되었습니다! Google Apps Script를 사용하면 무료로 안정적인 연락처 폼을 운영할 수 있어요. 🚀

Google Apps Script 웹 앱을 배포할 때 실행 권한 설정에 대해 설명드리겠습니다.
권한 설정 옵션
1. "나" (Execute the app as me)
의미: 스크립트가 항상 스크립트 소유자(당신)로 실행됩니다
장점:
사용자 인증이 필요 없음
간단하고 안정적
Gmail, Google Sheets 등에 직접 접근 가능
단점:
개인 정보 보호 문제 (사용자 데이터가 스크립트 소유자에게 노출)
사용자별 맞춤 기능 불가
2. "웹 앱을 액세스하는 사용자" (Execute the app as user accessing the web app)
의미: 스크립트가 웹 앱을 사용하는 사람의 권한으로 실행됩니다
장점:
사용자별 맞춤 기능 가능
개인 정보 보호 우수
단점:
사용자가 Google 계정으로 로그인해야 함
권한 승인 과정이 복잡
사용자별 인증 제한이 있음
포트폴리오 사이트 연락처 폼의 경우
"나"로 설정하는 것을 권장합니다.
이유:
간단함: 방문자가 별도 로그인 없이 폼 사용 가능
안정성: 인증 관련 오류 없음
목적에 적합: 연락처 폼은 단순히 메시지를 받는 것이 목적
일반적인 방식: 대부분의 포트폴리오 사이트가 이 방식 사용
설정 방법
Google Apps Script 편집기에서 배포 > 새 배포
웹 앱 선택
실행 섹션에서 "나" 선택
액세스 권한에서 "모든 사용자" 선택
배포 클릭
이렇게 설정하면 누구나 로그인 없이 연락처 폼을 사용할 수 있고, 메시지는 당신의 Gmail로 전송됩니다.