[Side PJ] airdnd 2부 - 상태에 따른 CSS 변화 (상태지옥 State)

이번에는 왜 안찾아오나 싶었던 상태관리의 혼란이 다시금 찾아왔다.😵

---

 

📌 날짜 data  state를 이용한 CSS 변화

 

❖ 상황

체크인과 체크아웃 된날짜와 그 사이를 CSS 로 표시하기 

캘린더를 만들고 클릭을 누르면  해당 dataset을 받아  ContextAPI로 관리하는 CheckIn, CheckOut 에 반영시켰다.

 

click 이벤트가 발생했을 때  그 가능성을 조건문으로 비교하여  CheckIn, CheckOut 에 반영하는 방식으로 data흐름을 짰는데 

 

여기서 문제는 클릭된 날짜의 상태관리다.

CheckIn, CheckOut  data는  전역관리가 되고 있는데 

clickedData는 click이벤트 (handleTdBtnClick )안에서만 관리되고 있기 때문에  

rendering시에 해당 값을 가져올 수 없는 문제가 생긴것이다.

여기서 내가 내린 해결방법은 크게 두가지

 

1)  clickedData를 useState로 관리하자 

 장점: 전역상태의 최소화

2) clikedData를 전역상태에 추가하자

장점: 일관된 날짜 data관리 

---> 다 아니었다. 정답은  새로운 속성을 부여하여 조건으로 비교하며 렌더링!

---

 

 

1) useState 시도 

1)번 방법이 전역상태를 최소화 하는 방향 같아 진행햇지만 

baseball과 비슷한 문제로 실패했다.

 

clicke 이벤트

 const handleTdBtnClick = (e) => {
 
    const [clickedYear, clickedMonth, clickedDay] = e.target.dataset.day
      .split('-')
      .map(Number); 
      
    setSelectedDay(new Date(clickedYear, clickedMonth, clickedDay));
    
    //...중략

Component 렌더링 부분 

return (
                <DayTd key={idx}>
                  <DayTdButton
                    data-day={`${year}-${month}-${day}`}
                    onClick={(e) => handleTdBtnClick(e)}
                    dayCliked={selectCheckInDay === selectedDay}
                  >

클릭시  -> clickedData 갱신 -> checkInData 갱신  

이 순으로 로직을 짜면 렌더링 시 적용될 것이라 생각했는데,

 

클릭되는 순간 렌더링은 진행되고 -> useState의 결과가 반영되기 전에 렌더링이 한차례 완료되었기 때문에  -> 화면에 표현한 CSS는 나타나지 않는다.

 

 

2) selectorContext 에 clickeddata 추가

  const [calendarData, calDispatch] = useReducer(calendarReducer, {
    checkIn: { year: 0, month: 0, day: 0 },
    checkOut: { year: 0, month: 0, day: 0 },
  });

  const [calendarData, calDispatch] = useReducer(calendarReducer, {
    checkIn: { year: 0, month: 0, day: 0 },
    checkOut: { year: 0, month: 0, day: 0 },
    clicked: { year: 0, month: 0, day: 0 },
    
  });

이렇게 상태 data를 추가했다 .

하지만 사실 이 방법도  useState와 같은 의미이기 때문에 같은 현상으로 나타나지 않았다.

 

 

3) 렌더링 당시의 dataset과  비교

Component 렌더링 부분  (전)

  return (
    <SingleCalDiv>
      <tbody>
        {monthArr?.map((week, idx) => (
          <DayTr key={idx}>
            {week?.map((day, idx) => (
              <DayTd key={idx}>{day}</DayTd>
            ))}
          </DayTr>
        ))}
      </tbody>
    </SingleCalDiv>
  );
};

Component 렌더링 부분  (후)

return (
    <SingleCalDiv>
      <tbody>
        {monthArr?.map((week, idx) => (
          <DayTr key={idx}>
            {week?.map((day, idx) => {
              const checkInTime = checkInDate.getTime();
              const checkOutTime = checkOutDate.getTime();
              const clickedTime = new Date(year, month, day).getTime();
              return (
                <DayTd
                  key={idx}
                  day={day}
                  dayInterval={
                    checkInTime <= clickedTime && clickedTime <= checkOutTime
                  }
                >
                  <DayTdButton
                    disabled={handleDisabled(day)}
                    day={day}
                    data-day={`${year}-${month}-${day}`}
                    onClick={(e) => handleTdBtnClick(e)}
                    dayClicked={
                      checkInTime === clickedTime ||
                      checkOutTime === clickedTime
                    }
                  >
                    {day}
                  </DayTdButton>
                </DayTd>
              );
            })}
          </DayTr>
        ))}
      </tbody>
    </SingleCalDiv>
  );
};

styled-components

const DayTd = styled.td`

  background: ${({ day, dayInterval }) =>
    dayInterval && day !== ' ' ? '#f2f2f2' : 'none'};
  box-shadow: ${({ day, dayInterval }) =>
    dayInterval && day !== ' '
      ? '0 0 4px 0 #F2F2F2, 4px 0 4px 0 #F2F2F2'
      : 'none'};
`;

const DayTdButton = styled.button`
 
  background-color: ${({ dayClicked }) => (dayClicked ? '#333' : 'none')};
  color: ${({ dayClicked }) => (dayClicked ? '#fff' : 'none')};
  :hover {
    box-shadow: ${({ day }) => (day !== ' ' ? '0 0 0 1px #333 inset' : 'none')};
    cursor: ${({ day, disabled }) =>
      day === ' ' || disabled ? 'default' : 'pointer'};
  }
`;

체크인, 체크아웃과 렌더링 되는 DayTdButton에 dayClicked 속성을 주고

해당 속성이 true이면 검정색상이 들어갈 수 있게  styledComponents에서 조정했다.

 

---

📌 table의  border 속성

 

hover 시 border를 주는 과정에서 사소한 헤프닝이 있어는데 

분명 box-sizing: border-box를 주는데도 불구하고 우글거리는 것이었다.

padding을 줘서 확인해보니 box-sizing이 안먹는 것을 확인했다.  

table의 td에는 box-sizing이 안먹었다 ......  (엄청나게고생함 

 

<- 내용이 다 채워잇을 때 문제 없는 모습

const DayTdButton = styled.button`

  background-color: ${({ dayClicked }) => (dayClicked ? '#333' : 'none')};
  color: ${({ dayClicked }) => (dayClicked ? '#fff' : 'none')};
  :hover {
    box-shadow: ${({ day }) => (day !== ' ' ? '0 0 0 1px #333 inset' : 'none')};
    cursor: ${({ day, disabled }) =>
      day === ' ' || disabled ? 'default' : 'pointer'};
  }
`;

 

 

달력 데이터를 만들 때 공간을 차지해야 해서 " " 공백으로 넣어줬던 부분이

<td> 내용이 없어 어긋난 것이었다 .

hover 시 border 가 아닌 box-shadow를 넣음으로써 해결했다.

 

💌해당 문제를 해결하는데 도움을 준 Raccon과 DD에게 감사의 말씀을 ..

 

---

 

📌  Canves를 이용한 요금 Slider 

요금 슬라이드를 구현하는데는 Jenny가 많은 공을 세웠다.⚽️🏀..

 

해당 부분은 길이 글어질 것같아 다른 게시글로 정리했다. 

 

https://rrecoder.tistory.com/145