18일차

오늘은 관리자에게만 스트리밍 시작, 채팅창 동결, 채팅 메시지 삭제 버튼이 보이도록 설정.

 

그걸 구현하는 것 자체는 쉽다.

 

먼저 로그인 정보를 담고 있는

const { loginMember } = useContext(MyPageContext);

 

이 구문을 이용.

 

    <div className='chat-container'>

	//중략

            {loginMember.memberType === 'A' &&
              <button className='deleteBtn' onClick={() => handleDeleteMessage({ msgContent: msg.content, msgAt: msg.formattedTime })}>
                X
              </button>
            }

          </div>
        ))}
      </div>
      
	//중략
    
      {loginMember.memberType === 'A' &&
        <button onClick={handleFreezeChat} className='btn btn-outline-success'>
          {freezeChat ? 'Release Chat' : 'Freeze Chat'}
        </button>
      }
      {!connected && <p>서버 연결중...</p>}
    </div>

 

각각 loginMember로부터 memberType을 받아서 그것이 A(관리자)면 보이도록 설정

 

왼쪽이 관리자 화면

 

일단은 성공. 

 

그런데 여기서 새로고침을 하면 다음 에러가 발생

 

TypeError: Cannot read properties of null (reading 'memberType’)

 

이유를 보니 새로고침을 하면 로그인 정보가 null이 되어버리는 문제가 발생.

 

그래서 loginMember가 null 일 경우 코드 진행을 막는 다음 구문을 추가.

 

	//다른 모든 기능들 생략

    if(!loginMember){
    return;
    }

    console.log("로그인 멤버 정보 : ", loginMember);
    console.log(messages);

    return (
	//UI 코드 생략

 

다른 모든 기능들이 끝난 이후에 if문을 넣었다. 원래는 맨 위에 넣었으나 그렇게 되면 다른 기능들이 모두 진행되지 않는 문제가 발생해서 맨 아래, return 바로 위로 옮겼다.

 

어쨌든 이 구문을 모든 기능이 끝나고 UI를 return 하기 직전에 넣으니 해결. 아마도 이 구문이 로그인 정보가 null일 때 memberType 구문이 실행되는 UI에 다가가지 못하게 막고, 로그인 정보를 다시 불러올 때 까지 시간을 벌어줘서 그런 것 같다.

 

마지막으로 메인 페이지 만들기를 시작. 맨 위에 보여줄 캐러셀을 제작.

 

원래는 swiper라는 라이브러리를 쓰려했으나 부트스트랩에 있는 캐러셀이 더 마음에 들어서 변경

 

<Carousel activeIndex={index} onSelect={handleSelect}>
    <Carousel.Item className='carousel-item'>
        <Link to="/galleryBoard">
            <img src="/images/p1065618386918309_213_thum.jpg" alt='캐러셀 이미지 1' />
        </Link>
        <Carousel.Caption className='carousel-caption-left'>
            <h3>갤러리 게시판</h3>
            <p>멋진 순간들을 공유하세요</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item className='carousel-item'>
        <Link to="/GoodsShop">
            <img src="/images/79496227.3.jpg" alt='캐러셀 이미지 2' />
        </Link>
        <Carousel.Caption className='carousel-caption-left'>
            <h3>스포츠 용품</h3>
            <p>경기에 나설 준비, 여기서 시작해보세요</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item className='carousel-item'>
        <Link to="/LiveStreamingPage">
            <img src="/images/AKR20230619077100007_01_i_P4.jpg" alt='캐러셀 이미지 3' />
        </Link>
        <Carousel.Caption className='carousel-caption-left'>
            <h3>이벤트 라이브 중계</h3>
            <p>지금 진행 중인 경기 실황을 놓치지 마세요</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item className='carousel-item'>
        <Link to="/StadiumList">
            <img src="/images/s4_01_soccer_img5.jpg" alt='캐러셀 이미지 4' />
        </Link>
        <Carousel.Caption className='carousel-caption-left'>
            <h3>구장 보러가기</h3>
            <p>친구들과, 또는 동료들과 함께 뛸 구장을 찾아보세요</p>
        </Carousel.Caption>
    </Carousel.Item>
</Carousel>

 

이후 CSS를 통해 텍스트를 오른쪽으로 옮기고 약간의 어두운 그라데이션을 추가

 

 

오늘은 여기까지