폰트 기반 방명록 서비스 토독

신한 스퀘어브릿지 해커톤 2기 | 쏠인원(SOL人ONE) 팀

QR 기반 디지털 방명록으로, 사용자가 방문 공간에 메시지를 남길 수 있는 웹서비스입니다.

• 기간: 2026.01 - 2026.02
• 인원: FE 1명, BE 2명, Design 2명
• 역할: 프론트엔드 개발, 팀 리더, 기획
• 수상: 신한 스퀘어브릿지 청년해커톤 2기 혁신상

주요 구현 기능

• QR 기반 방명록 작성 및 참여 흐름 구현
• AI 폰트 추천 결과 시각화 및 선택 UI
• 지도 기반 공간 탐색 및 메시지 조회 인터페이스
• 매장 관리 및 데이터 확인을 위한 관리자 UI

사용 기술

• Framework: Reac
• Language: TypeScript
• Styling / UI: Tailwind CSS, Storybook, Framer Motion
• State Management: Zustand
• Build Tool: Vite

폴더 구조

src/
├── app/              
├── pages/            
├── features/         
├── entities/         
├── shared/           
│   ├── assets/       
│   ├── lib/          
│   └── ui/           
├── styles/           
└── main.tsx    

시작하기

npm install

# dev
npm run dev

# build
npm run build

협업 가이드라인

1. 이슈 및 브랜치 관리

• 이슈 선 생성: 작업 전 이슈 생성 필수 (이슈 단위와 브랜치 단위 일치)
• 담당자 할당: 본인(Assignee) 설정 및 체크리스트 작성
• 이슈 템플릿 사용: 정해진 양식에 따른 이슈 작성
• 브랜치 명명: type/#이슈번호 형식 준수 (ex: feat/#10)

2. 커밋 컨벤션 (Commit Convention)

• 메시지 형식: [#이슈번호]Type: 메시지 (ex: [#2]Feat: 로그인 기능 구현)
• 작성 규칙:
  • 제목은 명령형 사용 및 끝 마침표(.) 금지
  • 제목과 본문 사이 한 줄 개행 필수
  • 본문은 "어떻게"보다 "무엇을", "왜" 위주로 설명
  • 여러 줄 메시지 작성 시 -로 구분

Type	설명
Feat	새로운 기능 추가
Fix	버그 수정
!HOTFIX	치명적 버그 긴급 수정
Design	CSS 등 UI 디자인 변경
Style	코드 포맷팅, 세미콜론 누락 등 (로직 수정 없음)
Refactor	코드 리팩토링
Comment	주석 추가 및 변경
Docs	문서 수정 (README.md 등)
Test	테스트 코드 추가 및 리팩토링
Rename	파일/폴더명 변경
Remove	파일/폴더 삭제
Chore	패키지 매니저 설정, 빌드 업무 등 기타

3. PR 및 코드 리뷰

• 할당: 본인(Assignee), 팀원 전체(Reviewer) 할당
• Merge 조건: 리뷰 승인(Approve) 후 Merge 진행 및 이슈 종료
• 피드백 대응: 수정 요청 시 해당 PR에서 수정 후 재검토 요청

4. 브랜치 전략

• main: 최종 배포용 브랜치
• develop: 기능 통합 및 개발용 브랜치