실시간 협업 보드 웹앱 프롬프트 (Padlet 스타일)
다음은 실시간 협업 보드 애플리케이션을 생성하기 위한 상세 프롬프트입니다.
1. 목표: Padlet 스타일의 실시간 공동 작업 보드 웹 애플리케이션을 생성합니다. 사용자들은 로그인 없이 접속하여 그룹별로 포스트를 작성하고 상호작용할 수 있어야 합니다.
2. 기술 스택 및 구조:
파일: 단일
index.html파일로 구성합니다.스타일링: Tailwind CSS를 사용하여 완전히 반응형(Responsive)이며 현대적인 UI를 구현합니다.
언어: 순수 JavaScript를 사용하여 모든 로직을 구현합니다.
데이터: Firebase Firestore를 사용하여 실시간 데이터 동기화를 구현합니다.
3. 디자인 요구 사항:
배경: 밝은 녹색 계열의 'Funky' 그라데이션 배경 (
linear-gradient(135deg, #10b981 0%, #34d399 30%, #a7f3d0 70%, #6ee7b7 100%)유사)을 적용합니다.카드/포스트: 흰색 배경에 그림자가 있고 모서리가 둥근(Rounded) 카드를 사용합니다.
레이아웃: 메인 콘텐츠는 가로 스크롤이 가능한 플렉스(Flex) 컨테이너 안에 컬럼(열) 형태로 배열되어야 합니다.
폰트: Inter 폰트를 사용합니다.
4. 핵심 기능 요구 사항:
인증 (Authentication): 사용자에게 별도의 로그인 절차를 요구하지 않아야 합니다. Firebase 익명 인증(Anonymous Authentication)을 사용하여 접속 즉시 고유한
User ID를 부여하고, 이를 기반으로 데이터에 접근해야 합니다.데이터 경로 (Firestore): 모든 컬럼 및 포스트 데이터는
/artifacts/{appId}/public/data/경로를 사용하여 공유 데이터로 저장해야 합니다.초기 설정 (Columns): 앱 로드 시 데이터베이스에 컬럼 데이터가 없으면, 자동으로 다음 네 개의 기본 컬럼을 생성해야 합니다:
"1모둠","2모둠","3모둠","4모둠".포스트 작성:
각 컬럼 하단에 'Add Post' 버튼을 제공해야 합니다.
버튼 클릭 시, 포스트 제목과 내용을 입력할 수 있는 모달(Modal) 창이 나타나야 합니다. (
alert()대신 사용).제목과 내용 중 하나라도 입력되면 포스트가 해당 컬럼에 추가되어야 합니다.
상호작용 (Likes):
각 포스트에 '좋아요' 버튼(하트 아이콘)을 제공해야 합니다.
사용자가 클릭하면 해당 포스트의 '좋아요' 카운트가 실시간으로 증가/감소해야 합니다.
사용자 본인이 '좋아요'를 누른 포스트는 하트 아이콘이 채워진 상태로 표시되어야 합니다.
사용자 표시: 포스트 작성자의
User ID를 짧게 잘라서 표시하며, 페이지 상단 헤더에는 협업을 위해 전체User ID를 표시해야 합니다.
5. 안정성 및 디버깅:
DOM 요소에 접근할 때는 반드시
null여부를 확인하여TypeError: Cannot read properties of null과 같은 런타임 오류를 방지해야 합니다. (예:loading-indicator요소 처리 시)Firestore 데이터가 변경될 때마다
renderBoard()함수를 호출하여 UI가 즉시 업데이트되도록 해야 합니다.
요청 모델: gemini-2.5-flash-preview-09-2025
출력 파일: index.html (단일 파일)
