이제 정말 마지막. 내가 담당한 페이지들은 다음과 같다. 메인 페이지 + 날씨 위젯   실시간 스트리밍 + 채팅   내가 제작한 페이지들을 총 정리하자면 메인페이지(모든 페이지에 들어갈 헤더, 푸터 포함)날씨 위젯실시간 스트리밍 + 채팅 주요 기능은 실시간 채팅실시간 비디오 스트리밍실시간 채팅 삭제실시간 채팅 금지 / 허용 실시간 INPUT 비활성화 특정 사용자 채팅 내역 검색이모지 메시지캐러셀날씨 API 받고, 사용자 위치를 역산해 시/도 단위 날씨 예보아이템 랜덤으로 뽑아오기 프로젝트 기간 동안 내 주요역할은 실시간 스트리밍 + 채팅메인 페이지전체적인 css 테마 지정팀원들의 에러 수집 및 지원 자세한 최종 결과물은 링크와 시연 영상을 걸도록 하며 프로젝트를 마감하도록 한다. https://githu..

aws에서 배포를 하다가 마지막에 문제가 발생. 배포 방식을 http로 하다보니 위치 정보와 카메라 권한을 받아올 수 없어서 날씨 위젯과 웹캠 기능을 사용할 수가 없다. 문제를 헤결하려면 https 로 사이트를 열어야하는데 프로젝트 기간이 끝나 더 이상 수정이 불가능. 아쉽지만 웹캠과 날씨 위젯은 로컬호스트에서 시연하는 것으로 합의했다. 채팅은 다행히 aws에서 무난하게 기능. 내가 담당한 페이지들을 총 정리하면 첫 번째 메인 페이지 + 헤더 + 푸터 * 헤더- 로그인 세션의 저장 유무에 따라 로그인 링크 or '사용자 이름+환영합니다'와 로그아웃 버튼- 통합 검색을 통해 구장 목록, 갤러리, 용품 장터에서 해당 검색어와 관련된 아이템들을 보여줌- 각 섹션들로 갈 수 있는 버튼들 * 메인 페이지- 헤더 ..

오늘은 어제 구현하려다 실패한 채팅 밴 먹이기 기능을 다시 도전해보았다. 곰곰이 생각해본 결과 chatable(채팅 권한 변수)의 변화하는 값을 관리자만 가지고 있으면 안되고 이걸 freezeChat이나 WebCam처럼 WebSocket을 통해 전파해야한다고 보았다. 따라서 LiveStreamingPage에도 웹소켓 관련 코드를 추가. 기존에 쓰던 코드를 재활용 했다. useEffect(() => { const socket = new SockJS('http://localhost:9000/ws'); // WebSocket 엔드포인트 const client = new Client({ webSocketFactory: () => socket, connectHeaders: {}..

기능 하나가 더 생각나서 하나 더 추가. 유저 아이디를 검색하고 그 아이디가 적어왔던 채팅 기록들을 보여주는 것이다. 먼저 백엔드 쪽 //Controller//검색한 사용자의 채팅목록 가져오기@GetMapping("/search/chat")public ResponseEntity> showWhosChat(@RequestParam("memberId") String memberId){ List chatLog = chatService.showWhosChat(memberId); return ResponseEntity.ok(chatLog);}------------------------------------------------------------------------------//Mapper//특정 사..

라이브 페이지 css를 전체적으로 다시 다잡는 시간 하얀 페이지에 스트리밍 화면과 채팅창만 있는 건 너무 휑한 느낌이라 아예 검은색 계열 바탕으로 지정해 고급스러움을 살리는 방향으로 했다.  검은색 계열에서도 명도에 차이를 두어 구분할 수 있도록 했다. 그리고 채팅창에 올라오는 아이디에 랜덤한 색깔을 부여할 수 있도록 했다.  // 랜덤 색상 선택 함수 const getRandomColor = () => { const randomIndex = Math.floor(Math.random() * colors.length); return colors[randomIndex]; }; 처음에는 sender가 있는 strong에 바로 style={{color : getRandomColor()}} 를 지..

오늘도 합본 css 수정 메인페이지를 전반적으로 다시 다듬었다.  SELECT og.stadiumNo, og.stadiumName, og.stadiumAddress, og.stadiumPrice, og.stadiumCapacity, og.stadiumImage, (SUM(rv.likeCount) - SUM(rv.dislikeCount)) as totalLike FROM stadium og JOIN stadiumreview rv ON og.stadiumNo = rv.stadiumNo GROUP BY og.stadiumNo, og.stadiumName, og.stadiumImage ORDER BY totalLike DESC SELECT * FROM galleryboard ORDER..