항해 99 - 2022.03.18.FRI(로컬에 시간 저장 & 참가자 명단 가져오기)

이번 챕터 일정

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

오늘 내가 할 일 

• 서비스아키텍처 그리는 작업 ✅
• 인기방 진입 가능하게 하기 + 스크롤 제거 ✅
• 오늘의 참여 기록 로컬스토리지에 저장해서 가져오기 ✅
• 윈도우 컴에서 버튼이나 기타 css 깨지는 현상 수정 ✅
• 참가자 명단에 닉네임 가져오기 ✅
• 새로고침시에 두세번씩 요청되는 문제 해결 ✅

세상아 마상아 너무 졸리고,, 힘든 하루,,, 내일은 중간 점검의 날
나는 발표 안하고 창훈 님이 발표하기로 했다. 
나보다 더 말씀 잘하셔서 잘하실 거라고 믿는다!!ㅎㅎ

 

<오늘의 참여기록 로컬 스토리지에 저장해서 가져오기>

//흐른 시간 체크
  const [openTime, setOpenTime] = useState(new Date().toString()); //방에 입장하자마자 생성되는 시간 불변 
  const [diffTime, setDiffTime] = useState();	//입장과 퇴장의 시간차이를 담을 값

  const interval = useRef();

  function saveTime() {
    const closeTime = new Date();	//불릴때마다 달라지는 끝나는 시간! 

    setDiffTime(Math.abs(closeTime - Date.parse(openTime)) / 60000);	//끝나는 시간- 시작시간을 분으로 나타냄
    
    const prevTime = JSON.parse(localStorage.getItem("time"));	//로컬에 저장된걸 제이슨 형태로 사용하기 위함
    const today = new Date().getDate();			// 지금 날짜 체크 해봐 
    if (prevTime) {									// 로컬스토리지에 time이 있니?
      if (prevTime.date === today) {				// 저장된 날짜와 지금 날짜가 같니?
        //기존 데이터에 새운 데이터 추가해서 저장
        console.log('디프타임>>',diffTime); 
        prevTime[room.category.id] += 0.5;			//30초 마다 함수가 불리니까 0.5씩 늘어나게해서 저장한다 
        localStorage.setItem("time", JSON.stringify(prevTime));
      } else {										//저장된 날짜와 지금 날짜가 다르니? 
        //기존 데이터 초기화 하고 새로 저장
        const data = {
          date: new Date().getDate(),
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 0,
          6: 0,
        };
        data[room.category.id] = diffTime;
        localStorage.setItem('time', JSON.stringify(data));
      }
    } else {										//로컬스토리지에 time 없으면 값 생성해~
      const data = {
        date: new Date().getDate(),
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
      };
      data[room.category.id] = diffTime;
      localStorage.setItem('time', JSON.stringify(data));
    }

    setTimeout(() => {		//1.5초 뒤에 서버에 연결해줘 
      socketRef.current.emit('save_time', parseInt(diffTime) + 1);	//1.5초간의 시간 때문에 +1 해주깅
    }, [1500]);
  }

  useEffect(() => {
    interval.current = setInterval(saveTime, 6000);

    return () => {
      clearInterval(interval.current);
    };
  }, [diffTime]);

 

<방에 들어온 참가자 명단 가져오기>

 

parti.js

import React from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";
import { Image } from '../../elements/Index';
import userIcon from '../../assets/inRoom/userIcon.svg';

const Parti =({me})=>{
  const userInfo = useSelector((store)=>store.user.userInfo)
  console.log(userInfo)
  
  return(
    <React.Fragment>
      <Container>		//나에 대한 정보들 
        <Image
            shape="circle"
            width="40px"
            height="40px"
            src={me.profileImg? me.profileImg :userIcon}
            className="profile"
            />
        <div style={{marginRight:"3px"}}>
          <div className="userNick">{me.nickname}</div>
          <div className="statusMsg">{me.statusMsg}</div>
        </div>
        </Container>
        {userInfo&&			//따른 참가자에 대한 정보들
        userInfo.map((u,idx)=> (
          <div key={u.id}>
          <Container>
          <Image
            shape="circle"
            width="42px"
            height="42px"
            src={u.profileImg?u.profileImg :userIcon}
            className="profile"
            />
          <div>
            <div className="userNick">{u.nickname}</div>
            <div className="statusMsg">{u.statusMsg}</div>
          </div>
          </Container>
          </div>
        ))}
      
    </React.Fragment>
  )
}

const Container = styled.div`
display: flex;
margin-top: 20px;
align-items: center;
padding: 0px 5px;
.profile{
  margin-right: 7px;
}
.userNick{
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
}
.statusMsg{
  font-size: 14px;
  width: 85%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
`

export default Parti

<새로고침시 두세 번씩 요청되는 문제 해결>