🌐 블로그 첫 화면 구성 및 로그인 시작하기
본 문서는 블로그(apps/blog) 첫 화면의 레이아웃 구성과 기본적인 회원가입 및 로그인 방식을 간략히 소개합니다.
🎨 1. 블로그 화면 구성 및 레이아웃
블로그 화면은 방문자가 정보를 신속하게 찾을 수 있도록 직관적인 레이아웃(헤더, 본문, 사이드바, 푸터)으로 설계되어 있습니다.
- 상단 네비게이션 헤더 (Header):
- 사이트 로고: 클릭 시 첫 홈화면으로 복귀합니다.
- 단축 메뉴 바: 카테고리 바로가기나 외부 채널 연결 등 주요 링크들이 나열됩니다.
- 다국어 스위칭: 지구본 아이콘 클릭 시 사이트 전체의 메뉴 언어 및 게시글 번역본이 실시간으로 전환되어 표시됩니다.
- 사이드바 영역 (Sidebar):
- PC 화면에서는 카테고리 목록, 블로그 운영자 프로필 카드, 인기 태그 등이 노출되어 독자의 탐색을 돕습니다.
- 모바일 기기 접속 시에는 본문 가독성을 위해 자동으로 감춰집니다.
- 메인 콘텐츠 영역 (Main Content):
- 최신 발행 게시글 목록과 카테고리 필터가 카드 디자인 형식으로 배치되어 있습니다.
🔑 2. 회원가입 및 로그인
댓글 작성 및 방명록 참여를 위한 계정 생성과 로그인 기능을 지원합니다.
⚙️ 로그인 및 가입 지원 방식
- 기본 이메일 로그인/가입 (Default):
- 설치 직후 기본 활성화되는 로그인 방식입니다. 이메일 주소, 디스플레이 네임(닉네임), 그리고 비밀번호를 등록하여 신규로 가입할 수 있으며, 가입 즉시 자동 로그인이 적용됩니다.
- 소셜 로그인 (Better-Auth):
- 내부적으로 Better-Auth 엔진을 탑재하고 있어 구글(Google), 깃허브(GitHub), 카카오, 네이버 등을 포함한 총 21종의 소셜 프로바이더 로그인을 지원합니다.
- 다만, 소셜 로그인은 사이트 구축 후 관리자가 각 소셜 플랫폼에서 획득한 클라이언트 ID 및 비밀키를 설정 환경변수에 수동으로 주입해야만 로그인 화면에 노출되고 작동합니다. (소셜 프로바이더별 구체적인 연동 가이드는 추후 별도 문서로 안내됩니다.)
- 로그인 상태 표시:
- 로그인이 완료되면 오른쪽 위 버튼이 사용자의 프로필 이미지 아이콘과 마이페이지 바로가기로 변경됩니다.
- 참고: 사용자 프로필 사진을 실제 연동하여 표시하는 기능은 현재 완벽히 작동하지 않을 수 있으며, 기본 이미지 아이콘 등으로 대체 표시될 수 있습니다.
댓글 0개
댓글을 작성하려면 로그인이 필요합니다.