WONDER

Slack 스타일 UI의 팀 업무관리 워크스페이스. 현재 여섯 개의 채널을 제공합니다.

• # 할일 — 팀 할일을 만들고, 담당자/마감일을 지정하고, 상태(할 일 / 진행 중 / 완료)를 관리
• # 캘린더 — 관리자가 연결한 팀 공용 구글 캘린더의 일정을 볼 수 있는 채널
• # 드라이브 — 연결된 구글 계정의 드라이브를 폴더째로 탐색
• # 회의록 — 드라이브의 "00. 회의록" 문서를 그대로 임베드해서 보여주는 채널
• # 회의 아카이브 — Meet Recordings의 Gemini 회의록을 안건·결정사항으로 자동 요약하는 채널
• # 마케팅 — 월별로 어떤 채널에 어떤 마케팅을 진행했고 비용을 얼마나 어떤 방식으로 지출했는지 기록하고, 큐텐/쇼피 등 프로젝트별 목표 예산 대비 실제 지출을 비교하는 채널. 구글 시트와 양방향으로 동기화됩니다(3단계 참고).
• # 장관인증요건 — 개인별 장관인증 조건 6가지(GTEP 수료·학업 성적·외국어·지역전문가 보고서·소속팀 성과·무역자격증)의 충족 여부를 한눈에 확인하는 채널. 어학 성적은 사업단 비교표(src/lib/minister-cert.ts)로 TOEIC 환산해 자동 판정합니다.
• # 플로우보드 — 프로젝트/작업을 확대·축소·드래그 가능한 무한 캔버스 위에 타임라인으로 배치해 보는 팀 공용 채널. 서버(Postgres)에 저장되어 누가 접속하든 같은 보드를 봅니다.

기술 스택: Next.js 16 (App Router) · TypeScript · Tailwind CSS · Prisma 7 + Postgres (Vercel Postgres/Neon) · Google Calendar/Drive/Sheets API

계정/로그인이 없는 완전 공개 워크스페이스입니다 — 링크만 있으면 누구나 모든 채널에 접속할 수 있습니다.

1. 처음 실행하기

Postgres 데이터베이스가 먼저 필요합니다 (배포 시 Vercel Postgres를 쓴다면 8단계 참고, 로컬에서만 테스트한다면 neon.com에서 무료 인스턴스를 만들어 DATABASE_URL로 사용해도 됩니다).

npm install
cp .env.example .env   # DATABASE_URL 등 채우기 (2단계 참고)
npx prisma migrate dev   # 최초 1회: 스키마 적용
npm run dev

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

2. 환경변수 설정

.env.example을 복사해 .env 파일을 만듭니다.

cp .env.example .env

변수	설명
DATABASE_URL	Postgres 연결 문자열. Vercel Postgres(Neon)를 쓰면 Storage 탭에서 자동으로 채워집니다.
GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET / GOOGLE_REDIRECT_URI	구글 캘린더 연동용 OAuth 클라이언트 정보. 3단계 참고.
ANTHROPIC_API_KEY	(선택) # 회의 아카이브 채널의 자동 요약에 사용. 미설정 시 새 회의록이 자동으로 추가되지 않을 뿐, 나머지 기능은 그대로 동작합니다. console.anthropic.com에서 발급.
SLACK_CLIENT_ID / SLACK_CLIENT_SECRET / SLACK_REDIRECT_URI	(선택) # 할일 채널에서 슬랙으로 할일을 전송하는 기능용 OAuth 클라이언트 정보. 5단계 참고. 미설정 시 "슬랙 연결" 버튼이 그냥 보이지 않을 뿐, 나머지 기능은 그대로 동작합니다.

3. Google Calendar 연동 설정 (한 번만 하면 됨)

팀 캘린더 채널은 누군가 한 번 자신의 구글 캘린더를 연결하면, 그 이후로는 링크에 접속하는 모두가 그 일정을 볼 수 있는 구조입니다. 연동하려면 Google Cloud Console에서 OAuth 클라이언트를 직접 발급받아야 합니다.

1. Google Cloud Console에 접속해 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
2. 좌측 메뉴 APIs & Services → Library에서 Google Calendar API, Google Drive API, Google Sheets API를 각각 검색해 Enable(사용 설정) 합니다.
3. APIs & Services → OAuth consent screen으로 이동해 동의 화면을 설정합니다.
   • User Type은 팀 규모가 작다면 External + 테스트 사용자로 등록하거나, Google Workspace 조직이라면 Internal 선택.
   • 앱 이름, 지원 이메일 등 필수 항목만 입력하면 됩니다.
   • External을 선택했다면 Test users에 캘린더를 연결할 관리자의 구글 이메일을 추가해야 로그인 시 차단되지 않습니다.
4. APIs & Services → Credentials → Create Credentials → OAuth client ID를 클릭합니다.
   • Application type: Web application
   • Authorized redirect URIs에 다음 주소를 정확히 추가:
     • 로컬 개발: http://localhost:3000/api/calendar/oauth/callback
     • 배포 후에는 실제 도메인으로 동일한 경로를 추가로 등록 (예: https://your-domain.com/api/calendar/oauth/callback)
5. 생성된 Client ID와 Client Secret을 .env의 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET에 붙여넣습니다. GOOGLE_REDIRECT_URI는 4번에서 등록한 콜백 주소와 완전히 동일하게 맞춰주세요.
6. 서버를 재시작한 뒤, # 캘린더 채널 → 구글 캘린더 연결 버튼을 클릭해 구글 로그인 동의 화면에서 권한을 승인합니다.
7. 이후부터는 링크에 접속하는 누구나 연결된 캘린더의 예정된 일정을 조회할 수 있습니다. 조회만 가능하며(읽기 전용 권한), 이 앱에서 일정을 생성/수정하지는 않습니다.

연결을 끊고 싶다면 캘린더 채널 상단의 연결 해제 버튼을 사용하세요. 로그인이 없으므로 접속하는 누구나 연결/해제할 수 있습니다.

# 마케팅 채널의 구글 시트 동기화도 이 연결을 그대로 사용합니다. 시트 접근 권한(spreadsheets 스코프)이 추가되기 전에 이미 연결된 계정이라면, # 마케팅 채널 상단의 구글 계정 다시 연결 버튼으로 재연결해 시트 접근을 추가로 동의해 주세요. 첫 동기화 시 "WONDER 마케팅 채널"이라는 이름의 새 스프레드시트가 연결된 계정의 드라이브에 자동으로 생성됩니다. 시트에서 직접 입력/수정한 내용은 다음 동기화 때 앱에 반영되지만, 시트에서 행을 지우는 것만으로는 삭제되지 않습니다(다음 동기화 때 다시 채워짐) — 삭제는 앱의 삭제 버튼으로만 가능합니다.

4. 회의 아카이브 자동 요약

# 회의 아카이브 채널은 드라이브의 "Meet Recordings" 폴더(WON:DER 팀 드라이브 루트 하위)에서 Gemini가 자동 생성한 회의록 문서(파일명에 "Gemini가 작성한 회의록" 포함)를 감지해, Claude API로 안건·결정사항을 요약해 저장합니다.

• ANTHROPIC_API_KEY가 설정되어 있으면, 누군가 # 회의 아카이브 채널을 열 때마다 서버가 Meet Recordings 폴더를 확인해 아직 정리되지 않은 새 회의록이 있으면 자동으로 요약해 추가합니다. 이미 정리된 문서는 다시 처리하지 않습니다.
• 별도의 백그라운드 작업이나 크론(cron)은 없습니다 — 채널을 방문하는 것 자체가 동기화 트리거입니다.
• 요약 1건당 Claude API 비용이 소량 발생합니다.
• 요약 로직은 src/lib/meeting-summarizer.ts(Claude 호출), src/lib/meeting-archive-sync.ts(신규 문서 감지·저장)에 있습니다.

5. Slack 연동 설정 (할일 → 슬랙 전송)

# 할일 채널에서 할일 내용을 슬랙 채널로 전송하려면, 구글 캘린더와 마찬가지로 누군가 한 번 슬랙 워크스페이스를 연결해야 합니다. 이후로는 링크에 접속하는 모두가 할일마다 슬랙 채널을 선택하고 전송 버튼을 쓸 수 있습니다.

1. api.slack.com/apps에서 Create New App → From scratch로 새 앱을 만들고, 연결할 워크스페이스를 선택합니다.
2. 좌측 메뉴 OAuth & Permissions로 이동합니다.
   • Redirect URLs에 다음 주소를 추가:
     • 로컬 개발: http://localhost:3000/api/slack/oauth/callback
     • 배포 후에는 실제 도메인으로 동일한 경로를 추가로 등록 (예: https://your-domain.com/api/slack/oauth/callback)
   • Scopes → Bot Token Scopes에 다음 네 개를 추가: channels:read, groups:read, chat:write, chat:write.public
   • 페이지 상단의 Save URLs를 눌러 저장합니다.
3. 좌측 메뉴 Basic Information으로 이동해 App Credentials에서 Client ID와 Client Secret을 확인합니다.
4. 이 값을 .env의 SLACK_CLIENT_ID, SLACK_CLIENT_SECRET에 붙여넣습니다. SLACK_REDIRECT_URI는 2번에서 등록한 콜백 주소와 완전히 동일하게 맞춰주세요.
5. 서버를 재시작한 뒤, # 할일 채널 상단의 슬랙 연결 버튼을 클릭해 슬랙 인증 화면에서 권한을 승인합니다.
6. 이후부터 할일을 만들거나 수정할 때 슬랙 채널을 선택할 수 있고, 각 할일 카드의 💬 전송 버튼으로 해당 채널에 할일 내용을 메시지로 보낼 수 있습니다. chat:write.public 스코프 덕분에 공개 채널은 봇을 초대하지 않아도 전송되지만, 비공개 채널은 봇을 먼저 초대해야 합니다.

연결을 끊고 싶다면 할일 채널 상단의 슬랙 연결 해제 버튼을 사용하세요. 로그인이 없으므로 접속하는 누구나 연결/해제할 수 있습니다.

6. 할일 담당자

계정이 없기 때문에 할일 담당자는 실제 로그인 계정이 아니라 그냥 이름 문자열입니다. 담당자 선택 UI에는 src/components/task-board.tsx의 TEAM_MEMBERS 상수에 있는 이름들이 기본으로 뜨고, 그 외 이름은 직접 입력할 수 있습니다. 팀원 명단이 바뀌면 이 상수만 수정하면 됩니다.

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗