기능 구현
- 로그인 후 메인 페이지에 접근하면 이벤트 모달창이 표시됩니다.
- 모달창의 닫기 버튼을 누르면 새로고침하거나 다시 페이지에 접근할 때 모달창이 계속 표시됩니다.
- "오늘 하루 보지 않기" 버튼을 클릭하면 당일 동안 모달창이 뜨지 않습니다.
- 이 기능은 다음과 같이 구현되었습니다:
- 페이지 접속 시 모달창의 display 속성을 fixed로 설정합니다.
- 닫기 버튼을 누르면 display 속성이 none으로 변경됩니다.
- "오늘 하루 보지 않기"는 현재 날짜를 로컬 스토리지에 저장하고, 페이지 접속 시 저장된 날짜와 현재 날짜를 비교하여 일치하지 않으면 다시 모달창을 띄웁니다.
- 모달창을 닫고 나면 상단에 스와이퍼 배너가 있으며, 그 아래에 스와이퍼 콘텐츠가 있습니다.
- 이미지는 포켓베이스에서 webp 형식으로 불러옵니다.
- 배너는 페이지 넘김 및 이전으로 넘김 버튼을 통해 수동 조작이 가능하며, 키보드 커서로도 제어할 수 있습니다. 5초가 지나면 자동으로 넘어갑니다.
- 모든 콘텐츠 카드 섹션은 자동으로 5초마다 넘겨지도록 설정되었습니다.
- 각 섹션은 독립적인 스와이퍼 객체를 생성하여 스와이퍼 간격 등의 속성을 제어합니다.
- 콘텐츠 클릭 시 메인 페이지로 이동하며, 이동 후 시청 중인 콘텐츠 섹션이 나타나고 클릭한 콘텐츠 이미지가 렌더링됩니다.
- 이 기능은 클릭된 콘텐츠 이미지를 로컬 스토리지에 저장하고, 저장된 데이터를 포켓베이스에서 불러와 템플릿에 렌더링하는 방식으로 구현되었습니다.
- 로그아웃 시 로컬 스토리지의 데이터가 삭제되어 재로그인 시 시청 중인 콘텐츠가 초기화됩니다.
- 프로필 아이콘에 호버 시 프로필 메뉴가 나타나고, 마우스가 떠나면 사라집니다.
- 서치 아이콘을 클릭하면 검색 페이지로 이동합니다.
구현자: 박윤선
- 검색어를 입력하면 포켓베이스에서 해당 검색어로 시작하는 콘텐츠 제목을 가져와 일치하는 이미지를 렌더링합니다.
- 이 기능은 디바운스를 사용하여 일정 시간 후에 렌더링되도록 구현되었습니다.
- 해당 검색어가 존재하지 않으면 "검색 결과가 존재하지 않습니다."라는 텍스트가 표시됩니다.
- 검색어 입력 후 검색 버튼을 누르면 최근 검색어에 추가되며, 중복된 검색어는 추가되지 않습니다.
- 검색어는 로컬 스토리지에 저장되며, 최대 10개까지만 저장됩니다. 10개를 초과하면 가장 오래된 데이터부터 삭제됩니다.
- 실시간 인기 순위는 포켓베이스의 rank 필드 데이터를 가져와 렌더링하며, 아래 실시간 정보는 Date 생성자 함수를 이용하여 구현되었습니다.
구현자: 박윤선
- 주요 문구들은 GSAP 라이브러리를 활용하여 0.6초 간격으로 아래에서 위로 자연스럽게 올라오는 애니메이션 효과를 적용했습니다.
- 랜딩 페이지에 배치된 랜딩 버튼을 클릭하면 로그인 페이지로 이동하는 기능을 구현하였습니다.
-
랜딩 페이지는 포켓베이스에 저장된 webp 형식의 이미지 데이터를 비동기적으로 불러옵니다.
이를 통해 빠르고 효율적인 이미지 로드를 구현하였습니다. -
스와이퍼 구성
- 랜딩 페이지에는 상단 스와이퍼 1개와 하단 스와이퍼 2개, 총 3개의 스와이퍼가 배치되어 있습니다.
- 하단 스와이퍼는 dir="rtl" 속성을 사용하여 슬라이드가 역방향으로 진행되도록 설계하였습니다.
-
슬라이드 이미지 삽입
- 포켓베이스에서 이미지를 가져와, 각 이미지 데이터를 반복문으로 처리하여 스와이퍼 템플릿에 이미지 경로를 동적으로 삽입합니다.
- 이를 통해 사용자에게 매끄럽고 일관된 슬라이드 쇼를 제공합니다.
-
반응형 슬라이드 설계
- 창 크기 대응: 상단 슬라이드는 반응형으로 설계되어, 창 크기가 변할 때 슬라이드 이미지도 자동으로 변경됩니다.
- 이미지 경로 업데이트: 스와이퍼 초기화 함수와 이미지 경로 업데이트 함수를 활용하여, 창 크기 변경 시 데스크탑과 모바일 환경에 맞춰 적절한 이미지가 로드되도록 구현하였습니다.
구현자: 권보령
- 프로필 페이지에서 로고를 클릭하면 메인 페이지로 이동하도록 설정하여, 사용자가 쉽게 메인 페이지로 돌아갈 수 있도록 했습니다.
-
프로필 데이터 로드 및 구성
- 계정 데이터 불러오기: 로컬 스토리지에 저장된 현재 계정 정보를 기반으로 포켓베이스에서 일치하는 계정을 찾아 데이터를 불러옵니다.
- 프로필 페이지 구성: 불러온 데이터를 이용해 프로필 페이지를 동적으로 구성합니다.
-
프로필 템플릿 설계
- 동적 데이터 로드: 프로필 템플릿 함수에 인덱스를 추가하여, 계정 주인뿐만 아니라 다른 사용자들의 이미지와 이름도 동적으로 가져와 표시할 수 있도록 설계했습니다.
-
반응형 프로필 레이아웃
- 프로필 레이아웃 조건: 프로필이 4개 이상이면서 창 크기가 모바일 크기일 경우, 프로필 레이아웃이 자동으로 변경되도록 조건문을 추가하여 반응형 디자인을 구현했습니다.
- 프로필 이미지 추가: forEach문을 사용해 아바타 프로필 이미지를 프로필 템플릿에 동적으로 추가하고, 프로필이 자동으로 생성되도록 했습니다.
-
프로필 클릭 이벤트
- 페이지 이동 기능: 모든 프로필 요소에 대해 클릭 이벤트 리스너를 설정하여, 사용자가 프로필을 클릭하면 메인 페이지로 이동하도록 했습니다. 각 프로필 요소에 대해 addEventListener 메서드를 사용하여 클릭 이벤트가 발생할 때마다 window.location.href 속성을 통해 지정된 URL로 페이지를 변경합니다.
- 프로필 편집: 아이콘 SVG 경로를 조건문으로 저장하여, 프로필 편집 버튼을 클릭할 시 버튼 내부 텍스트와 아이콘 SVG가 변경되도록 구현했습니다.
구현자: 권보령
-
아이디 입력 조건
- 조건: 아이디는 영문 또는 영문, 숫자 조합으로 6~12자리를 입력받습니다.
- 검증: 조건에 부합하지 않는 값이 입력될 경우, "적합하지 않은 값"이라는 메시지를 유저에게 표시합니다.
-
비밀번호 및 이메일 검증
- 비밀번호와 이메일 입력란에도 유사한 검증을 적용합니다.
-
체크박스 조건
- 필수 체크박스: 4개의 필수 체크박스가 모두 활성화되어야 버튼이 활성화됩니다.
- 모두 동의 버튼: '모두 동의' 버튼을 누르면 모든 체크박스가 클릭됩니다.
-
회원가입 처리
- 데이터 전송: 회원가입 버튼을 클릭 시, 입력된 값이 포함된 form 데이터를 생성합니다.
- 유저 생성: 생성된 form 데이터를 포켓베이스의 create 메서드를 통해 전달하여 새로운 유저를 생성합니다. 구현자: 고명한
- 랜딩 페이지에서 티빙 로고 홈 아이콘을 클릭하여 로그인 페이지로 이동합니다.
- ‘아이디 찾기’ 및 ‘비밀번호 찾기’ 버튼을 클릭하면 각각 해당 페이지로 이동합니다.
- throttle 함수를 사용하여 유효성 검사가 1초에 한 번만 호출되도록 제한하였습니다.
마지막 호출 시점과 현재 시간을 비교하여 지연 시간이 지난 경우에만 함수를 호출합니다.
- 사용자가 아이디(ID)와 비밀번호를 입력하면 유효성 검사가 활성화됩니다.
- ID: 6~12자의 영문자 및 숫자로 구성된 ID만 유효한 값으로 인정합니다.
- 비밀번호: 영문자, 숫자, 특수문자가 포함된 8~15자의 비밀번호만 유효한 값으로 인정합니다.
- 유효한 입력 값이 입력되면 "입력 값 모두 취소"와 "비밀번호 표시 토글" 기능이 활성화됩니다.
- 사용자가 로그인 버튼을 클릭하면, 입력 값이 유효한 경우 Pocketbase API를 통해 인증을 시도합니다.
- 인증 성공 시
- 사용자 정보를 로컬 스토리지에 저장합니다.
- “환영합니다. + 유저 아이디 + 님” 메시지가 포함된 환영 알림창을 띄웁니다.
- 프로필 페이지로 리디렉션합니다.
- 인증 실패 시
- 에러 메시지 팝업창을 띄웁니다.
- 입력된 아이디(ID)와 비밀번호 값을 초기화합니다.
구현자: 형시영
- 회원 가입 시 입력한 이메일을 입력받습니다.
- 입력 값이 없는 상태에서 확인 버튼을 클릭하면 에러 메시지를 표시합니다.
- 입력한 이메일로 등록된 정보가 없을 경우
- 입력 값을 초기화합니다.
- 에러 알림 창을 표시합니다.
- 입력한 이메일에 해당하는 사용자가 존재할 경우
- 해당 사용자의 아이디를 알림 창으로 보여줍니다.
- 로그인 페이지로 리디렉션합니다.
구현자: 형시영
- 찾고자 하는 계정의 아이디(ID)를 입력받고, 확인 버튼을 클릭합니다.
- 입력된 아이디를 Pocketbase를 통해 조회하여 해당 사용자의 이메일 주소로 비밀번호 재설정 이메일을 발송합니다.
- 이메일 전송은 구글 SMTP를 사용하여 구현되었습니다.
- 입력한 아이디로 등록된 사용자가 존재할 경우
- 비밀번호 재설정 이메일을 전송합니다. "비밀번호 재설정 후 로그인하세요." 메시지를 알림 창으로 표시합니다.
- 로그인 페이지로 리디렉션합니다.
- 입력한 아이디로 등록된 사용자가 존재하지 않을 경우
- 입력 값을 초기화합니다.
- 에러 알림 창을 표시합니다.
구현자: 형시영