﻿2회차 학생용 기능별 실습

웹에서 바로 조별 통합하기
통합 화면(https://festival-code-lab.pages.dev/combined/index.html 또는 student/combined/index.html)에
지도·구매 내역·대기표의 기본 logic.js를 각 조의 칸에 넣으면 화면에 바로 반영됩니다.
지도 배치 JSON은 격자 크기·배치 파일 메뉴에서 불러오고 세 기능 전체 테스트로 16가지 입력을 확인합니다.
통합 보관 파일 다운로드로 코드와 지도를 team-integration.json으로 보관할 수 있습니다.
다른 컴퓨터의 통합 화면에서 이 JSON을 불러오면 같은 결과를 확인할 수 있습니다.
서버에 파일을 제출하는 기능이 아니며 현재 브라우저에서만 실행·임시 저장됩니다.
입문·도전 파일은 기본 코드 칸에 넣지 않습니다. 파일을 직접 교체하는 기존 방법도 사용할 수 있습니다.

난이도별 실습 9개
입문: 운영 안내(common), 부스 환영(greeting), 대기·호출(queue-basic).
기본: 지도(map), 구매 내역(history), 대기표(queue).
도전: 부스 면적(map-area), 사용 합계(history-total), 예상 대기 시간(queue-position).
입문 1개 → 자기 조의 기본 1개 → 선택적으로 도전 1개를 권장합니다. 전부 할 필요는 없습니다.
실습마다 목표·작성 위치·입력과 예상 예시·논리 힌트가 있습니다.
내 규칙 기록 → 표시된 코드 칸에 작성 → 적용·실행 → 전체 테스트 → 파일 보관 순으로 진행합니다.
LLM 도움받기는 현재 규칙과 함수 틀로 프롬프트를 만들어 복사합니다. LLM은 자동 실행하지 않습니다.
규칙 기록과 코드는 실습별로 따로 임시 저장됩니다. 기존 코드와 지도 배치 저장도 유지합니다.
통합은 기본 map/history/queue만 연결합니다. 입문·도전 코드는 해당 독립 실습 폴더에 보관합니다.

웹 코드 편집 사용법
student/index.html에서 자기 기능을 열면 작성 영역 코드 입력칸이 보입니다.
LLM 응답의 작성 주석 사이 코드만 붙여넣고 코드 적용·실행을 누릅니다.
구매 내역 조는 두 입력칸에 각각 해당 함수의 작성 영역을 넣습니다.
선택한 예시 실행과 전체 테스트로 결과를 확인하고 수정한 logic.js 다운로드를 누릅니다.
다운로드한 파일을 student 안의 해당 기능 폴더에서 logic.js 이름으로 교체합니다.
다운로드 파일 이름에 번호가 붙었으면 제거하고 logic.js로 맞춥니다.
입력 코드와 마지막 적용 코드는 이 브라우저에 임시 저장됩니다. 초기화는 해당 기능만 지웁니다.
임시 저장이 안 되는 환경도 있으므로 중요한 작업은 다운로드해 보관합니다.
웹에 붙인 코드는 분리된 실행 공간에서 실행하고 오래 걸리면 중단합니다.
다운로드는 서버의 원본 파일을 수정하지 않습니다. 통합 화면의 조별 칸에 파일을 불러오면 반영됩니다.
공통 연습도 같은 웹 편집 방법으로 진행합니다.

지도 조의 배치 설계
기본은 영역 그리기입니다. 지도 위 배치할 부스를 선택하고 시작 칸에서 끝 칸까지 드래그합니다.
놓으면 위치·가로·세로 크기가 한 번에 저장됩니다. 이미 배치한 부스도 다시 그릴 수 있습니다.
반대 방향으로 그려도 되고 지도 경계에서 멈춥니다. 겹치는 경우는 기존 배치를 유지합니다.
클릭만 하면 배치하지 않습니다. 한 칸 크기도 조금 끌었다 놓아 그리거나 숫자로 지정합니다.
선택·이동으로 전환하면 기존 부스를 끌어 옮기거나 손잡이로 조절할 수 있습니다.
부스를 선택하고 격자에서 시작 칸을 누른 뒤 가로·세로 크기를 지정해 부스 배치 적용을 누릅니다.
배치한 부스는 안쪽을 끌어 이동합니다. 선택한 부스의 흰색 손잡이와 오른쪽·아래 테두리를 끌어 크기를 조절합니다.
가로·세로 손잡이는 각각 한 방향으로, 모서리 손잡이는 두 방향으로 조절합니다. 방향키로 한 칸씩 조절할 수도 있습니다.
마지막 배치 되돌리기는 현재 화면에서 마지막으로 적용한 배치 한 번을 되돌립니다. 새로고침하면 되돌리기 기록은 초기화됩니다.
격자 칸에 맞춰 움직이며 놓으면 바로 적용·저장됩니다. 겹침·지도 밖 배치는 기존 배치를 유지합니다.
끌던 중 Esc를 누르면 취소합니다. 숫자 입력으로 위치·크기를 지정하는 방법도 그대로 사용할 수 있습니다.
칸 번호는 왼쪽 위 1열·1행부터 시작합니다. 다른 부스와 겹치거나 지도 밖으로 나가면 적용하지 않습니다.
배치와 위치 안내 문구는 코드와 별도로 임시 저장됩니다. 중요한 배치는 map-layout.json으로 다운로드합니다.
지도 조는 logic.js와 map-layout.json을 함께 전달합니다.
통합 화면의 격자 크기·배치 파일 메뉴에서 배치 파일 불러오기로 배치를 적용합니다.
실행 예시는 현재 배치를, 전체 테스트는 배치와 별개인 고정 예외 입력을 사용합니다.
배치 도구는 제공 기능이고 학생은 위치 안내 함수의 논리를 작성합니다.

아래 코드 편집기 방법은 선택 사항입니다.

1. ZIP을 내려받고 압축을 풉니다. 압축파일 안에서 직접 수정하지 않습니다.
2. student/index.html을 브라우저로 엽니다.
3. 공통 연습을 먼저 실행하고 common/logic.js의 작성 주석 사이를 채웁니다.
4. 지도 조는 map/logic.js, 구매 내역 조는 history/logic.js, 대기표 조는 queue/logic.js를 수정합니다.
5. 자기 기능 폴더의 PROMPT.txt를 참고하되, 입력·조건·결과는 먼저 직접 작성합니다.
6. 코드 편집기에서 저장한 뒤 브라우저 새로고침, 선택한 예시 실행, 전체 테스트 순서로 확인합니다.
7. 함수 이름·입력·경계 주석과 영역 밖 코드를 유지합니다. HTML이나 assets는 수정하지 않습니다.
8. 예상값은 실행 전에 정합니다. 새로고침하면 초기화되므로 PPT에도 기록합니다.
9. student 폴더 전체를 보관합니다. index.html이나 logic.js만 옮기면 실행 연결이 끊깁니다.
10. 조별 작업 사본에서 진행하고 원본을 보관합니다. 1조_지도.zip처럼 조 번호·기능 이름으로 제출합니다.
11. 제출 ZIP에는 student 폴더 전체와 별도의 논리·테스트 기록을 포함합니다.
12. 통합 담당은 세 조의 logic.js를 student 사본의 같은 기능 폴더에 모읍니다.
13. student/combined/index.html을 열고 세 기능을 함께 확인합니다.

화면·가상 데이터·테스트는 제공 코드입니다. 실제 축제 서버·결제·개인정보는 연결하지 않습니다.
실행에는 서버·인터넷·설치가 필요 없지만 LLM 요청에는 접속 환경이 필요합니다.
학생 개인정보·실제 거래 내역·PIN·토큰은 LLM에 넣지 않습니다.
함수 반환 규칙을 바꾸면 그 이유와 새로운 예상 결과를 실행 전에 기록합니다.
