HelpDesk Intercom Support Page

인터컴(Intercom) 메신저를 활용한 전용 고객 지원 페이지입니다. 이 프로젝트는 helpdesk.umoh.io와 같은 독립적인 지원 페이지를 구축하여 고객이 쉽게 문의할 수 있도록 합니다.

주요 기능

• 🚀 페이지 로드 시 인터컴 메신저 자동 열기
• 💬 실시간 채팅 지원
• 📱 모바일 반응형 디자인
• 🎨 커스터마이징 가능한 UI
• 🔒 안전한 암호화 통신

기술 스택

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Language: TypeScript
• Chat: Intercom Messenger SDK

시작하기

1. 필수 요구사항

• Node.js 18.18.0 이상
• npm 또는 yarn
• Intercom 계정 및 App ID

2. 설치

# 저장소 클론
git clone https://github.com/yourusername/helpdesk-intercom.git
cd helpdesk-intercom

# 의존성 설치
npm install

3. 환경 변수 설정

.env.local 파일을 생성하고 다음 내용을 추가합니다:

# Intercom Configuration
NEXT_PUBLIC_INTERCOM_APP_ID=your_actual_intercom_app_id_here

# Optional settings
NEXT_PUBLIC_INTERCOM_DEBUG=false
NEXT_PUBLIC_INTERCOM_HIDE_DEFAULT_LAUNCHER=true

Intercom App ID 찾기:

1. Intercom 대시보드 로그인
2. Settings → Installation → Web 이동
3. App ID 복사

4. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000 접속

프로젝트 구조

helpdesk-intercom/
├── app/
│   ├── page.tsx           # 메인 페이지 컴포넌트
│   ├── layout.tsx          # 레이아웃 설정
│   └── globals.css         # 전역 스타일
├── components/
│   └── IntercomWidget.tsx  # 인터컴 위젯 컴포넌트
├── lib/
│   └── intercom.ts         # 인터컴 설정 및 유틸리티
├── public/                 # 정적 파일
└── .env.local              # 환경 변수 (Git에서 제외)

커스터마이징

메신저 설정 변경

lib/intercom.ts 파일에서 다양한 설정을 변경할 수 있습니다:

window.intercomSettings = {
  app_id: INTERCOM_APP_ID,
  hide_default_launcher: true,  // 기본 런처 숨기기
  alignment: 'center',           // 정렬: 'left', 'center', 'right'
  horizontal_padding: 20,        // 좌우 패딩
  vertical_padding: 20,          // 상하 패딩
};

자동 열기 스페이스 변경

app/page.tsx에서 기본으로 열리는 스페이스를 변경할 수 있습니다:

<IntercomWidget 
  autoShow={true} 
  space="messages"  // 'home', 'messages', 'help', 'news', 'tasks', 'tickets'
/>

사용자 정보 전달

로그인된 사용자 정보를 전달하려면:

<IntercomWidget 
  autoShow={true}
  userData={{
    email: 'user@example.com',
    name: '홍길동',
    user_id: 'user_123',
    // 커스텀 속성 추가 가능
    company: 'UMOH',
    plan: 'premium'
  }}
/>

배포

Vercel 배포 (권장)

1. 위 버튼 클릭 또는 Vercel 직접 접속
2. GitHub 저장소 연결
3. 환경 변수 설정:
   • NEXT_PUBLIC_INTERCOM_APP_ID 추가
4. Deploy 클릭

수동 배포

# 프로덕션 빌드
npm run build

# 프로덕션 서버 실행
npm start

Docker 배포

FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

도메인 설정

커스텀 도메인 연결 (helpdesk.umoh.io)

1. Vercel에서:

   • Project Settings → Domains
   • Add Domain → helpdesk.umoh.io 입력
   • DNS 설정 안내 따르기

2. DNS 설정:

   • A Record: 76.76.21.21 (Vercel IP)
   • CNAME: cname.vercel-dns.com

3. SSL 인증서:

   • Vercel에서 자동 발급 및 갱신

문제 해결

인터컴이 표시되지 않는 경우

1. App ID 확인: .env.local의 NEXT_PUBLIC_INTERCOM_APP_ID가 올바른지 확인
2. 인터컴 설정: Intercom 대시보드에서 Messenger가 활성화되어 있는지 확인
3. 브라우저 콘솔: 에러 메시지 확인
4. 광고 차단기: 광고 차단 확장 프로그램 비활성화

자동 열기가 작동하지 않는 경우

// 디버그 모드 활성화
NEXT_PUBLIC_INTERCOM_DEBUG=true

// 콘솔에서 수동 테스트
window.Intercom('show')

보안 고려사항

1. 환경 변수: .env.local 파일을 절대 Git에 커밋하지 마세요
2. 사용자 인증: 민감한 정보를 전달할 때는 서버사이드 검증 필요
3. CORS 설정: 특정 도메인만 허용하도록 설정
4. Rate Limiting: API 호출 제한 설정

라이선스

MIT

지원

• 이슈 리포트: GitHub Issues
• Intercom 문서: Intercom Developers

기여하기

Pull Request는 언제나 환영합니다!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request