Skip to content
BranchesTags

Repository files navigation

Open Workcare: 학교 부서별 업무 Link Hub

Open Workcare는 학교 내 여러 부서의 주요 행정 및 교육 업무 링크를 한 화면에서 마인드맵 형태로 직관적으로 시각화하고 관리할 수 있도록 지원하는 정적 웹 기반 CMS 템플릿입니다.

다른 학교에서도 이 저장소를 Fork하여 자신들의 학교 업무 허브로 손쉽게 커스터마이징하고, Google Sheets를 데이터베이스 삼아 실시간으로 양방향 동기화하여 사용할 수 있습니다.

🌟 주요 기능

1. 방사형 마인드맵 캔버스

  • 마우스 드래그로 화면 이동, 휠 스크롤로 자유로운 확대 및 축소(Zoom)를 지원합니다.
  • 부서 노드와 개별 업무카드 노드를 부드러운 베지어 곡선으로 연결해 보여줍니다.
  • 카드를 자유롭게 드래그 앤 드롭하여 재배치할 수 있으며, 보이지 않는 10px 그리드에 자동 스냅되어 깔끔하게 정렬됩니다.
  • 1단계 부서 노드를 드래그하면 하위 업무카드 노드들도 함께 이동해 배치를 유지합니다.

2. 왼쪽 제어 메뉴바 (크기 조절 가능)

  • 필터: '전체 부서 보기' 및 '업무 카드가 있는 부서만 보기' 필터를 제공합니다.
  • 위치 저장: 편집한 캔버스 레이아웃 배치를 브라우저(LocalStorage) 및 구글 시트에 원격 저장합니다.
  • 사용법 안내: 마인드맵 보드의 다양한 단축 인터랙션 가이드를 제공합니다.
  • 링크 모아보기: 클릭 시 선택한 부서의 모든 업무 카드를 모달 테이블 형식으로 깔끔하게 조회합니다. (백드롭 블러 효과 적용)

3. 모바일 자동 아코디언 트리 뷰

  • 768px 미만 화면(모바일 기기 등)으로 접속 시, 무거운 캔버스를 터치하기 힘든 점을 고려하여 모바일 최적화 트리 구조 뷰로 자동 전환됩니다.
  • 모바일 환경에서도 업무 가독성과 터치 조작 편의성을 제공합니다.

4. 강력한 보안 및 편집 권한 관리

  • 누구나 읽을 수 있는 정적 사이트 형식이지만, 카드 생성·수정·삭제 및 드래그 배치는 승인된 로그인 사용자만 가능합니다.
  • 세션 및 HttpOnly 쿠키 기반 인증을 제공하며 XSS 보안 방어 처리가 완벽히 적용되어 있습니다.

🛠️ 기술 스택

  • 프레임워크: Next.js 15 (App Router)
  • 언어: TypeScript
  • 스타일링: Tailwind CSS v4
  • 아이콘: lucide-react
  • 원격 DB 연동: Google Sheets + Google Apps Script Web App API
  • 로컬 캐싱: LocalStorage 및 5분 단위 조회 캐시 정책 적용

🚀 빠른 시작 및 연동 가이드

다른 학교나 단체에서 본 프로젝트를 복제(Fork)하여 연동하는 방법을 순서대로 안내합니다.

1단계: 구글 시트 복제하기 (DB 준비)

  1. 아래 구글 시트 복사본 생성 링크를 클릭합니다.
  2. 사본 만들기 버튼을 클릭하여 본인의 Google 드라이브로 시트를 가져옵니다.
    • 복사된 시트에는 부서 템플릿(교무부, 정보부, 행정실 등)만 정의되어 있으며, 업무카드는 비어있습니다.

2단계: Google Apps Script 웹앱 배포 (API 구축)

  1. 복사된 구글 시트 상단 메뉴에서 확장 프로그램 ➡️ Apps Script를 클릭합니다.
  2. 스크립트 편집기가 열리면 우측 상단의 배포 버튼을 누르고 새 배포를 선택합니다.
  3. 설정 창에서 아래와 같이 지정합니다.
    • 유형 선택(톱니바퀴): 웹앱
    • 설명: Open Workcare API 등 자유롭게 작성
    • 웹앱을 실행할 사용자: 나(본인의 Google 계정)
    • 액세스 권한이 있는 사용자: 모든 사람 (이 설정을 해야 Next.js 서버에서 API로 접근이 가능합니다)
  4. 배포 버튼을 클릭합니다.
  5. 최초 배포 시 "액세스 승인" 창이 뜹니다. 권한 검토 ➡️ 본인 Google 계정 선택 ➡️ Advanced(고급) ➡️ Go to Open Workcare(안전하지 않음으로 이동) ➡️ Allow(허용) 을 차례로 클릭합니다.
  6. 배포가 완료되면 생성된 웹앱 URL을 안전하게 복사해 둡니다.

3단계: 로컬 실행 및 환경변수 설정

  1. 이 저장소를 복사(Fork)하거나 로컬로 Clone합니다.
  2. 프로젝트 루트 디렉토리에 .env.local 파일을 생성하고 아래 항목들을 입력합니다.
# 교사 로그인 계정 설정
SCHOOL_WORKCARE_TEACHER_NAME=admin
SCHOOL_WORKCARE_TEACHER_PASSWORD=teacher

# 세션 암호화용 32자 이상의 무작위 문자열 (자유롭게 지정)
SCHOOL_WORKCARE_SESSION_SECRET=a_very_long_random_string_with_32_characters_or_more

# 2단계에서 복사한 Google Apps Script 웹앱 URL
SCHOOL_WORKCARE_SHEET_API_URL=https://script.google.com/macros/s/YOUR_DEPLOYED_SCRIPT_ID/exec
  1. 로컬 개발 환경에서 패키지를 설치하고 실행합니다.
# 의존성 패키지 설치
npm install

# 개발 서버 구동
npm run dev
  1. 브라우저에서 http://localhost:3000으로 접속하여 서비스가 정상 구동되는지 확인합니다.

🌐 서버 배포 가이드 (Vercel)

본 프로젝트는 Next.js로 구성되어 있어 Vercel을 통해 클릭 몇 번으로 무료 호스팅이 가능합니다.

  1. Vercel 계정을 만들고 GitHub 저장소(Fork한 open_workcare)와 연동합니다.
  2. 프로젝트 추가 시, Environment Variables (환경 변수) 설정 단계에서 로컬의 .env.local 에 작성했던 변수 4가지(SCHOOL_WORKCARE_*)를 그대로 입력해줍니다.
  3. Deploy를 실행하면 자동으로 서비스 URL이 발급되며 전 세계 어디서든 사용 가능하게 됩니다.

🔒 보안 권장 사항

  • 운영 환경으로 배포하기 전에 .env에 설정된 로그인 계정 ID(SCHOOL_WORKCARE_TEACHER_NAME)와 비밀번호(SCHOOL_WORKCARE_TEACHER_PASSWORD)를 기본값(admin / teacher)에서 반드시 고유한 값으로 변경하십시오.
  • .env.local 파일은 외부로 유출되거나 GitHub에 업로드되지 않도록 주의해야 합니다. (기본적으로 .gitignore에 등록되어 있습니다.)

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages