2024. 9. 9. 17:35ㆍFCB2O4
aws에서 배포를 하다가 마지막에 문제가 발생.
배포 방식을 http로 하다보니 위치 정보와 카메라 권한을 받아올 수 없어서 날씨 위젯과 웹캠 기능을 사용할 수가 없다.
문제를 헤결하려면 https 로 사이트를 열어야하는데 프로젝트 기간이 끝나 더 이상 수정이 불가능.
아쉽지만 웹캠과 날씨 위젯은 로컬호스트에서 시연하는 것으로 합의했다.
채팅은 다행히 aws에서 무난하게 기능.
내가 담당한 페이지들을 총 정리하면
첫 번째 메인 페이지 + 헤더 + 푸터
* 헤더
- 로그인 세션의 저장 유무에 따라 로그인 링크 or '사용자 이름+환영합니다'와 로그아웃 버튼
- 통합 검색을 통해 구장 목록, 갤러리, 용품 장터에서 해당 검색어와 관련된 아이템들을 보여줌
- 각 섹션들로 갈 수 있는 버튼들
* 메인 페이지
- 헤더 바로 아래 부분 큰 이미지와 캐러셀 기능으로 여러 콘텐츠들을 소개하고 이미지 클릭 시 해당 콘텐츠가 있는 링크로 이동.
- 주요 콘텐츠들(구장 목록, 갤러리, 추천 상품)들을 화면에 보여주어 사용자들의 관심을 끌 수 있도록 유도
- 평가 받은 적 있는 구장들은 모두 나열하되, 인기도(좋아요 수 - 싫어요 수)가 가장 높은 3가지 아이템에 HOT ITEM 표시
- 각 아이템들은 슬라이드-캐러셀을 사용해 목록 전환이 부드러울 수 있도록 설정
- 갤러리와 추천 기어의 순서는 페이지를 새로고침 할 떄마다 순서가 랜덤으로 재배치됨
- 갤러리는 DB에 저장된 작성 글 중 랜덤으로 6개를 가져오도록 함
- 접속한 컴퓨터의 위치 정보(권한을 줄 시)를 바탕으로 해당 지역(시/도 단위)의 5일 간의 날씨를 보여주는 날씨 위젯
- 해당 지역의 날씨에 따라 위젯 배경화면 및 이미지가 변화함. 또한 실시간으로 날씨에 따라 변화함
- 날씨 위젯은 화면 상단에 걸려 스크롤을 따라 페이지 아래쪽 까지 따라감 (position: sticky)
* 푸터
- 가상의 주소와 각종 sns로 이어지는 아이콘 추가
==========================================================================
다음은 라이브 스트리밍 페이지. 내가 중점적으로 구현한 페이지이다.
- 눈부심을 막고 스트리밍 화면과 페이지의 경계를 애매하게 만들어 보다 넓은 느낌을 줄 수 있도록 검은색 계열의 바탕으로 지정
- 좌 : 관리자 전용 화면 / 우 : 일반 사용자 화면
- 관리자는 freeze chat 버튼을 통해 본인 포함 모든 사용자들의 input을 비활성화 시킬 수 있음.
- 관리자는 Begin Streaming/Quit Streaming 버튼을 통해 웹캠을 키고 끌 수 있으며 이 화면은 모든 사용자들에게 전파됨
- 관리자는 메시지에 마우스를 올리면 나타나는 x 버튼을 통해 특정 메시지를 채팅창에서 삭제할 수 있음
- 관리자가 아래 채팅 부검 섹션에서 특정 아이디를 입력하면 해당 아이디가 지금까지 입력한 채팅 내역을 확인할 수 있음
- 채팅 허용 / 채팅 금지 버튼을 통해 검색한 아이디를 사용하는 사용자의 input을 활성화/비활성화 시킬 수 있음. 이 때 사용자에게 채팅이 허용/금지 되었습니다. 라는 알림창이 뜸.
- 채팅이 금지된 사용자는 다른 페이지에 다녀오거나 재로그인 해도 채팅 금지가 유지됨.
- 스트리밍 화면과 채팅창 동결 기능은 사용자가 다른 페이지를 다녀와도 유지됨
- 채팅 메시지는 프로필사진, 아이디, 채팅내용, 채팅 시간 으로 이루어져 있음.
- 관리자는 아이디 옆에 왕관 표시가 있음
- 채팅 삭제는 아이디와 채팅 시간을 근거로 DB에서 삭제하도록 설정
- 채팅 금지는 member 테이블의 chatable 컬럼 값을 변경시키고 프론트 엔드 쪽에서 세션을 저장하는 것으로 구현
아직 CSS가 완전히 끝난게 아니어서 아마 다음 포스팅에 보여질 페이지가 정말 찐막 최종본일 것
깃 허브는 링크와 시연 영상은 다음에