문서
모바일 앱 설치
Dive to Bada는 PWA(Progressive Web App)로 제공됩니다. 모바일 기기에 앱으로 설치하여 더 편리하게 사용하세요.
iOS (iPhone/iPad)
- Safari 브라우저로 divetobada.com 접속
- 하단의 공유 버튼
- "홈 화면에 추가" 선택
- 이름 확인 후 "추가" 탭
- 홈 화면에서 앱 아이콘으로 실행
참고: iOS에서는 Safari 브라우저만 지원합니다. Chrome이나 다른 브라우저에서는 설치할 수 없습니다.
Android
- Chrome 브라우저로 divetobada.com 접속
- 주소창 하단에 표시되는 "설치" 또는 "앱 설치" 배너 클릭
- 설치 확인 팝업에서 "설치" 선택
- 설치 완료 후 홈 화면에서 앱 아이콘으로 실행
참고: 설치 배너가 보이지 않으면, 메뉴(⋮) → "홈 화면에 추가" 또는 "앱 설치"를 선택하세요.
주요 기능
- 오프라인 지원: 일부 콘텐츠를 오프라인에서도 확인할 수 있습니다.
- 빠른 로딩: 자주 사용하는 콘텐츠를 캐시하여 빠르게 로드합니다.
- 앱처럼 사용: 홈 화면에서 바로 실행하여 네이티브 앱처럼 사용할 수 있습니다.
- 푸시 알림: (준비 중) 중요한 알림을 받을 수 있습니다.
표준 모달 컴포넌트 목업
프로젝트에서 사용하는 표준 모달 컴포넌트의 다양한 예시를 확인할 수 있습니다.
기본 모달
타이틀, 제2언어, 텍스트 필드, 버튼이 있는 기본 모달
경고 문구가 있는 모달
경고 문구 영역이 포함된 모달
위험 액션 모달
삭제 등 위험한 액션을 위한 빨간 테두리 버튼이 있는 모달
3개 버튼 모달
비활성, 활성, 위험 액션 버튼이 모두 있는 모달
자주 묻는 질문
앱을 삭제하려면 어떻게 하나요?
iOS: 홈 화면에서 아이콘을 길게 눌러 삭제하세요.
Android: 설정 → 앱 → Dive to Bada → 삭제
설치 후에도 브라우저로 열리나요?
네, 설치된 PWA는 독립적인 앱처럼 실행되지만, 필요시 브라우저에서도 접속할 수 있습니다.
데이터는 어떻게 저장되나요?
PWA는 브라우저의 저장소를 사용합니다. 브라우저 데이터를 삭제하면 저장된 데이터도 함께 삭제됩니다.
Component Showcase
프로젝트에서 사용되는 통합 컴포넌트들의 실제 렌더링 결과입니다.
Buttons
.btn + 변형 클래스 조합
Type
Size
Full Width
Disabled
Form Inputs
.form-group + .form-label + .form-input 조합
Text Input
Textarea
Select
Toggle
Toggle option
Enabled option
Hint & Error
This is a hint message.
This field is required.
Search Field
.search-input (배경 스타일, 테두리 없음)
Search Input
Search Field Component
Action Buttons
.action-button (게시물 좋아요/댓글/리포스트/더보기)
Default State
Active State (Liked + Reposted)
Post Card
.posts-list 래퍼 + _post_card 컴포넌트
