목차(클릭하세요)
안티그래비티로 모든 담임 선생님들의 로망: 진실의 자리바꿈을 구현해보자!
진실의 자리 바꿈이란?
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템 Open Workcare: 학교 부서별 업무 Link Hub 핵심 요약
1. 프로젝트 개요
•
프로젝트명: Open Workcare (학교 부서별 업무 Link Hub)
•
한 줄 소개: 학교 내 수많은 행정 및 교육 웹페이지 링크를 마인드맵 형태의 시각적 캔버스 및 모바일 아코디언 트리 뷰로 직관적으로 관리할 수 있게 돕는 오픈소스 CMS 템플릿입니다.
•
특징:
◦
특정 학교 전용이 아닌 범용적인 템플릿으로 설계되어 타 학교나 단체에서 복제(Fork)하여 바로 사용 가능합니다.
◦
복잡한 DB 설정 대신 누구나 다루기 쉬운 Google Sheets(구글 스프레드시트)를 원격 데이터베이스로 사용합니다.
2. 핵심 기술 스택
•
프론트엔드: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, Lucide React (아이콘)
•
데이터 베이스: Google Sheets + Google Apps Script Web App API (양방향 연동)
•
인증 & 보안: Next.js Route Handler(서버 백엔드) + SHA-256 HMAC 세션 암호화 + HttpOnly 세션 쿠키 + XSS 방어 필터 적용
•
성능 최적화: 5분 단위 조회 캐시 정책 도입 (Google Sheets API의 트래픽 초과 및 로드 지연 방지)
3. 주요 기능
1.
방사형 마인드맵 캔버스 (데스크톱)
•
마우스 드래그를 이용한 캔버스 이동 및 마우스 휠 스크롤을 이용한 확대/축소(Zoom)를 지원합니다.
•
부서 노드와 자식 업무카드를 SVG 베지어 곡선(점선)으로 시각화합니다.
•
10px 그리드 단위 스냅 정렬 기능으로 카드가 겹치지 않고 정돈된 배치를 유지합니다.
•
1단계 부서 노드를 드래그하면 2단계 업무카드들이 함께 이동합니다.
2.
모바일 자동 트리 뷰 전환 (모바일)
•
화면 폭 768px 미만 접속 시 자동으로 모바일에 최적화된 아코디언 트리 구조 뷰로 자동 전환되어 모바일 터치 사용성을 확보합니다.
3.
Google Sheets 양방향 실시간 동기화
•
로그인한 관리자가 노드를 드래그하여 배치를 바꾼 후 '위치 저장'을 누르거나, 노드를 추가/수정/삭제 시 구글 시트에 실시간 자동 저장(POST)됩니다.
4.
강력한 보안 및 편집 권한 관리
•
일반 접속자는 읽기 전용 모드로 안전하게 링크를 열람하고, 관리자 로그인을 한 상태에서만 카드 추가/수정/삭제 및 드래그 편집 권한이 활성화됩니다.
•
초기 테스트 계정: ID admin / PW teacher
4. 핵심 폴더 및 파일 구조
text
src/
├── app/
│ ├── page.tsx # 메인 페이지 (구글 시트 연동, 상태 관리 및 레이아웃 제어)
│ ├── layout.tsx # 전역 메타데이터 및 레이아웃 정의
│ ├── globals.css # Tailwind CSS 전역 스타일 지정 및 폰트 설정
│ └── api/
│ ├── auth/ # 로그인, 로그아웃 및 세션 체크 서버 라우트 핸들러
│ └── cards/route.ts # Google Sheets API와 Next.js 서버를 중계하는 API 라우트
├── components/
│ ├── AppHeader.tsx # 상단 헤더 (로그인, 노드추가, 실행취소(Undo) 제어)
│ ├── MindMapBoard.tsx # 데스크톱 캔버스(드래그, 줌앤팬, SVG 렌더링) & 왼쪽 조작 패널
│ ├── DepartmentCard.tsx # 중앙 노드 / 부서 / 링크 카드의 상태별 가변 렌더러
│ ├── CardEditorDialog.tsx # 신규 카드 추가 및 기존 카드 내용 수정 모달
│ └── LoginDialog.tsx # 관리자 로그인 인증 다이얼로그
├── lib/
│ ├── auth.ts # 클라이언트 사이드 인증 API 호출 유틸
│ ├── server-auth.ts # 서버 사이드 세션 발급, 쿠키 설정 및 계정 정보 검증 로직
│ ├── card-data.ts # 로컬스토리지 로드/세이브 및 API 연결용 원격 조회 유틸
│ └── grid.ts # 드래그 시 10px 스냅 그리드 좌표 계산 유틸
└── types/
└── department-card.ts # 부서/업무카드 등의 핵심 데이터 구조 TypeScript 타입 정의
Plain Text
복사
5. 환경 변수 설정 (.env.local)
원격 서버 배포 및 로컬 실행 시 프로젝트 루트에 아래와 같이 필수 환경 변수를 세팅하여 동작시킵니다.
env
# 관리자 로그인 기본 계정 설정 (필요시 임의 수정 가능)
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
# 복사한 구글 시트와 연결된 Google Apps Script 웹앱 URL
SCHOOL_WORKCARE_SHEET_API_URL=https://script.google.com/macros/s/YOUR_API_ID/exec
Plain Text
복사