항해 99 - 2022.03.17.THU (배경색 반만 & 이모티콘)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링 ✅
• 03/19 중간 점검
• 04/09 최종 발표회 

오늘 내가 할 일 

• css 작업
  • 메인 페이지 겉에 배경화면 반만 색 표현하기 ✅
  • 마이페이지 큰 화면에 맞게 vh로 나타내기 ✅
  • 카테고리 선택시  아이콘까지 나타나게 하기 ✅

오늘도 정신 차리고 하자! 일단 거의 많은 기능들은 된 상태라서 내일 배포를 목적으로 달려가는 중 
자잘 자잘한 것들 고치는 중 

 

<배경화면 반만 색 바꾸기>

background: linear-gradient(180dge, #F7F7F7 50%, #fff 50%);

-> 위에 오는 색이 적은 경우 그러데이션으로 표현됨 

• 해결방안

background: linear-gradient(to top, #F7F7F7 62%, #fff 30%);

-> 앞을 많은 퍼센트로 바꾸고 반전되는 to top를 넣어준다 

다양한 방법으로 사용 가넝 (to left...)

 

<이모티콘 나타내기>

const [isEmoji, setIsEmoji] = useState(false);

// 이모티콘 보내기
  const sendEmoji = (emojiId) => {
    const data = {
      roomId: params.id,
      id: socketRef.current.id,
      emoji: emojiId,
    };
    socketRef.current.emit('send_emoji', data);
    showEmoji(data);
  };

  // 아모티콘 보여주기
  const showEmoji = (data) => {
    const { id, emoji } = data;
    //소켓 아이디가 감싸고 있는 디브태그가 있어서 확인 작업 하기 위해서 (위치 잡기)
    const targetVideo = document.getElementById(id);
    if (emoji === 'happy') {
      targetVideo.childNodes[1].classList.remove('hidden');
      setTimeout(() => targetVideo.childNodes[1].classList.add('hidden'), 3000);
    } else if (emoji === 'love') {
      targetVideo.childNodes[2].classList.remove('hidden');
      setTimeout(() => targetVideo.childNodes[2].classList.add('hidden'), 3000);
    } else if (emoji === 'bad') {
      targetVideo.childNodes[3].classList.remove('hidden');
      setTimeout(() => targetVideo.childNodes[3].classList.add('hidden'), 3000);
    } else if (emoji === 'sad') {
      targetVideo.childNodes[4].classList.remove('hidden');
      setTimeout(() => targetVideo.childNodes[4].classList.add('hidden'), 3000);
    }
  };

  // 상대방 이모티콘 받기
  useEffect(() => {
  	//삼항연산자 사용해서 하고있기 때문에 socketRef.current가 없을때는 아무것도 리턴 안하게 작성하기
    if (!socketRef.current) {
      return;
    }
    socketRef.current.on('receive_emoji', showEmoji);
	
    //이벤트를 해제 해줘야 함! 잊지 말기!
    return () => {
      socketRef.current.off('receive_emoji', showEmoji);
    };
  }, []);

- 코드 보는 데 있어서 필요한 정보덜..

• Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.
• 여기서 사용한 이유는 위치를 잡기 위해서!

 

• childNodes는 주어진 요소의 자식 노드 모음( collection )을 반환합니다.

 

• Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
  • classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

 

• socket.emit => 서버에 보내기 
• socket.on => 서버에서 받기 
• socket.off =>  서버랑 연결 끊기 

 

• useEffect안에 이벤트가 실행되면 이벤트를 끝을 내줘야 하는데 그때 return안에 이벤트 끝맺음 함수를 넣어주면 된다

 

<div>
 <ChooseEmotion
  style={{ marginRight: '15px' }}
  width="32px"
  fill="#8A8BA3"
  onClick={() => setIsEmoji(!isEmoji)}/>
 {isEmoji ? (
  <div className="emojiBox">
   <HappyEmoji onClick={(e) => {sendEmoji(e.target.id);}}/>	//svg파일 안에 각각 아이디가 있음 id=happy
   <LoveEmoji onClick={(e) => {sendEmoji(e.target.id);}}/>
   <BadEmoji onClick={(e) => {sendEmoji(e.target.id);}}/>
   <SadEmoji onClick={(e) => {sendEmoji(e.target.id);}}/>
 </div> 
 ) : (
 '')}
</div>

 

 

📍

https://developer.mozilla.org/ko/docs/Web/API/Node/childNodes

element.childNodes - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById

Document.getElementById() - Web API | MDN