업무 대시보드

취업운영·일경험 업무를 관리하고, 자주 쓰는 Drive·Google Sheets·Notion 링크를 빠르게 여는 개인용 대시보드입니다.

• Next.js (App Router) · TypeScript · Tailwind CSS
• 데이터 저장소: Google Sheets (서비스 계정, 서버에서만 호출)

화면

경로	내용
/	홈: 오늘 마감 업무, 미완료·지연 업무, 카테고리별 진행 상황, 즐겨찾기 링크
/kanban	칸반보드: 카테고리별 열, 열마다 대기 위·완료 아래
/calendar	업무 월 캘린더 (끌어서 날짜 옮기기)

• 자주 보는 링크는 따로 화면 없이 사이드바의 일경험 · 취업운영 · 교육사업본부 · 인턴먼저 토글에 있습니다. 펼친 상태는 브라우저에 기억되고, +로 추가, ✎로 수정(즐겨찾기 포함), 같은 서비스끼리 끌어서 순서를 바꿉니다.

• 칸반보드는 고른 날짜의 업무만 보여줍니다. ‹ ›, 날짜 선택, 오늘 버튼이나 캘린더의 날짜를 눌러 날짜를 바꿉니다.

• 업무는 이름, 카테고리, 날짜와 필요하면 메모·링크를 입력합니다. 기간을 체크하면 종료일을 고를 수 있고, 기간 업무는 기간 안의 모든 날짜에 표시됩니다.

• 체크박스로 완료 처리하고, 체크를 해제하면 대기로 돌아갑니다.

• 지연·오늘 마감·임박 표시는 업무의 마지막 날(기간 업무는 종료일) 기준입니다.

• 루틴(반복 업무): 칸반 윗줄 ↻ 루틴에서 등록합니다. 반복은 평일(월금), 요일(월금 중 고르기), 매월 N일 중 하나이고, 영업일에만 생깁니다. 주말·공휴일·대체공휴일에는 생기지 않습니다.

  • 매월 N일이 영업일이 아니면 루틴마다 고른 대로 앞 영업일이나 다음 영업일로 옮기고, 그달에 그 날짜가 없으면(예: 31일) 말일로 봅니다.
  • 루틴은 오늘·앞날의 칸반에 점선 카드(↻ 루틴)로 보이고, 체크하거나 끌어 옮기거나 수정하면 그날의 업무로 Tasks에 저장됩니다. 그 전에는 시트에 아무것도 쓰지 않습니다.
  • 지나간 날에 끝내지 못한 루틴은 지연으로 남지 않고 사라집니다. 완료한 루틴 업무는 기록으로 남습니다.
  • 루틴 카드의 수정 창에서 이 날 건너뛰기를 누르면 그날만 빠집니다.
  • 공휴일 목록은 src/lib/holidays.ts에 있습니다(2026·2027년). 임시공휴일이 생기거나 해가 바뀌면 이 파일에 더해 주세요.

• 예전 주소 /calendar는 /kanban으로 연결됩니다.

로컬 실행

npm install
npm run dev

http://localhost:3000 에서 확인합니다.

환경변수가 없으면 개발용 예시 데이터로 동작합니다. 이때 화면 상단과 사이드바에 노란색 안내가 표시되며, 변경 사항은 서버 메모리에만 있어 서버를 재시작하면 초기화됩니다.

Google Sheets 연결

1. 스프레드시트 만들기 빈 Google 스프레드시트를 하나 만듭니다. 탭(Tasks, Links, Routines)과 헤더 행은 앱이 처음 접속할 때 자동으로 만듭니다. 직접 만들어도 됩니다(아래 형식 참고).

2. Google Cloud 설정

   1. Google Cloud Console에서 프로젝트를 만들거나 선택합니다.
   2. API 및 서비스 > 라이브러리에서 Google Sheets API를 사용 설정합니다.
   3. IAM 및 관리자 > 서비스 계정에서 서비스 계정을 만듭니다(역할 부여 불필요).
   4. 서비스 계정의 키 > 키 추가 > 새 키 만들기 > JSON으로 키 파일을 내려받습니다. 이 파일은 저장소에 넣지 마세요.

3. 시트 공유 스프레드시트의 공유에서 서비스 계정 이메일([email protected])을 편집자로 추가합니다.

4. 환경변수 설정 .env.example을 복사해 .env.local을 만들고 값을 채웁니다.

   cp .env.example .env.local
   

   변수	값
   GOOGLE_SHEETS_SPREADSHEET_ID	시트 URL https://docs.google.com/spreadsheets/d/<ID>/edit의 <ID>
   GOOGLE_SERVICE_ACCOUNT_EMAIL	JSON 키의 client_email
   GOOGLE_PRIVATE_KEY	JSON 키의 private_key (줄바꿈은 \n 그대로, 큰따옴표로 감싸기)

   키 값에 따옴표가 겹치거나 줄바꿈이 \\n으로 들어가도 앱이 자동으로 정리합니다.

5. npm run dev를 다시 실행하면 사이드바에 저장소: Google Sheets가 표시됩니다. 인증이나 권한에 문제가 있으면 각 화면에 원인(키 형식, 공유 권한, 시트 ID, API 사용 설정)을 안내하는 오류 메시지가 나옵니다.

보안

• Sheets API 호출과 인증은 서버(src/lib/server/, src/app/api/)에서만 합니다. 이 모듈은 server-only로 표시되어 있어 브라우저 번들에 포함되면 빌드가 실패합니다.
• 환경변수 이름에 NEXT_PUBLIC_을 붙이지 마세요. 붙이면 브라우저에 노출됩니다.
• .env, .env.local 등은 .gitignore로 제외되고 .env.example만 커밋됩니다.
• 별도 로그인 기능은 없습니다. 배포 URL을 아는 사람은 데이터를 보고 수정할 수 있으므로, 공개 배포 시 Vercel의 Deployment Protection(비밀번호/Vercel 인증) 사용을 권장합니다.

시트 형식

모든 날짜는 한국 시간 기준이며 시간대 표기 없이 저장합니다. 날짜는 YYYY-MM-DD, 생성일·수정일은 YYYY-MM-DD HH:mm 형식입니다. 값은 서식 변환 없이(RAW) 문자열로 기록됩니다. 하루짜리 업무는 종료일을 비워 둡니다. 종료일이 있으면 시작일부터 종료일까지의 기간입니다.

Tasks

업무 ID	업무명	카테고리	상태	시작일	종료일	생성일	수정일	순서	메모	루틴 ID	링크
T-1a2b3c4d	수료식 준비	취업운영	대기	2026-09-28		2026-09-20 10:00	2026-09-28 09:12	1	강당 예약 확인		https://docs.google.com/…
T-5e6f7a8b	수료보고 정리	취업운영	완료	2026-09-28	2026-09-30	2026-09-20 10:00	2026-09-30 17:40	2

Links

링크 ID	링크명	URL	카테고리	서비스 종류	설명	즐겨찾기 여부
L-1a2b3c4d	수강생 관리 시트	https://docs.google.com/…	취업운영	Google Sheets	…	TRUE

Routines

루틴 ID	루틴명	카테고리	반복	요일	매월 날짜	휴일이면	메모	시작일	종료일	건너뛴 날짜	링크
R-1a2b3c4d	메일·문의 확인	취업운영	평일			앞		2026-10-05
R-5e6f7a8b	주간 현황 공유	일경험	요일	월,수		앞	기업A, 기업B 공유	2026-10-05	2026-12-31	2026-10-07	https://docs.google.com/…
R-9c8d7e6f	수당 서류 취합	일경험	매월		10	앞		2026-10-05

• 반복: 평일, 요일, 매월 / 휴일이면: 앞(앞 영업일), 뒤(다음 영업일)
• 루틴에서 저장된 업무는 Tasks의 루틴 ID 열에 루틴 ID가 들어갑니다. 루틴 종료일을 비우면 계속 반복합니다.

허용 값

• 카테고리(Tasks·Routines): 취업운영, 일경험, 기타
• 카테고리(Links): 취업운영, 일경험, 교육사업본부, 인턴먼저 (사이드바 토글 하나씩)
• 상태: 대기, 완료
• 서비스 종류: Drive, Google Sheets, Notion, 기타

시트에서 직접 행을 추가할 때는 ID 칸을 비우지 말고 겹치지 않는 값을 넣어 주세요(ID가 빈 행은 무시됩니다). 목록에 없는 값은 기본값(취업운영·대기·기타)으로 읽힙니다.

예전 버전에서 쓰던 Schedules(일정) 탭은 이제 앱에서 쓰지 않습니다. 그대로 둬도 되고, 필요 없으면 직접 지워도 됩니다.

Vercel 배포

1. 저장소를 Vercel에 가져옵니다(Framework: Next.js, 설정 변경 불필요).
2. Settings > Environment Variables에 다음을 추가합니다.
   • GOOGLE_SHEETS_SPREADSHEET_ID
   • GOOGLE_SERVICE_ACCOUNT_EMAIL
   • GOOGLE_PRIVATE_KEY — JSON의 private_key 값을 그대로 붙여 넣습니다(여러 줄 또는 \n 모두 가능).
3. 배포합니다. 환경변수 없이 배포하면 개발용 예시 데이터로 동작하며, 서버리스 환경이라 변경 사항이 유지되지 않습니다.

Chrome에서 앱처럼 사용하기

1. 배포 주소를 Chrome으로 엽니다.
2. 주소창 오른쪽의 설치 아이콘, 또는 ⋮ > 전송, 저장 및 공유 > 페이지를 앱으로 설치를 누릅니다.
3. "업무 대시보드" 이름과 전용 아이콘으로 설치되며, 주소창 없는 별도 창으로 열립니다.

Notion에 임베드하기

Notion 페이지에 배포 주소를 붙여 넣고 임베드 생성을 고릅니다(또는 /embed). Vercel Deployment Protection이 대표 주소까지 막고 있으면 임베드 안에서 로그인 화면만 보이니, 대표 주소(Production 도메인)를 사용하세요.

무료로 사용하기

유료 서비스 없이 사용할 수 있도록 구성되어 있습니다.

구성 요소	비용	참고
Google Sheets / Google Sheets API	무료	결제 계정(카드 등록) 없이 API 사용 설정 가능. 분당 요청 수 제한만 있으며 1인 사용으로는 도달하지 않습니다.
서비스 계정·JSON 키	무료	Google Sheets API 외의 API는 켤 필요가 없습니다.
로컬 실행 (npm run dev / npm run build && npm start)	무료	내 PC에서만 접속. 가장 확실한 무료 방법입니다.
Vercel Hobby 플랜	무료	개인·비상업적 용도 기준 플랜입니다. 회사 업무용이면 약관을 확인하세요. 카드 등록 없이 가입 가능하고 한도 초과 시 과금 대신 제한됩니다.

• 이 앱은 유료 데이터베이스나 외부 유료 API를 사용하지 않습니다.
• 회사(Google Workspace) 계정에서는 관리자 정책으로 서비스 계정 키 발급이 막혀 있을 수 있습니다. 이 경우 개인 Gmail 계정으로 Google Cloud 프로젝트를 만들고, 서비스 계정 이메일에 시트를 공유하면 됩니다.

구조

src/
  app/                 페이지와 API 라우트(/api/tasks, /api/schedules, /api/links)
  components/          화면 컴포넌트
  lib/
    types.ts           타입·허용 값
    date.ts            날짜 유틸(KST)
    validation.ts      입력 검증(zod)
    client-api.ts      브라우저 → /api 호출
    server/            서버 전용: Sheets 클라이언트, 탭 정의, 저장소, 개발용 데이터