hard mode 완성 + soft mode 완성

오늘 한 내용

• 도장 on off
• 도장 여러개 on off
• soft mode 생성
• 클릭 날짜 표기

오늘 배운 내용

• 도장 한개 저장

let hardCliked = hardBox.isClicked;

  const [isClicked, setClicked] = useState(hardCliked);

  function toggleStamp() {
    setClicked(!isClicked);
  }

  useEffect(() => {
    updateHardBox({
      ...hardBox,
      isClicked,
    });
  }, [isClicked]);

 

• 도장 여러개 저장

const [isClicked, setClicked] = useState(hardCliked);

  function toggleStamp(index) {
    setClicked((stamp) => ({
      ...stamp,
      [index]: !stamp[index],
    }));
    setIndex(index);
  }

  useEffect(() => {
    updateHardBox({
      ...hardBox,
      isClicked,
    });
  }, [isClicked]);

/JSX
{dates.map((day, index) => (
                <td
                  key={index}
                  className={styles.date}
                  onClick={() => {
                    toggleStamp(index);
                  }}
                >
                  <img
                    className={styles.td_box}
                    src={hardCliked[index] ? o : x}
                    alt="stamp"
                  />
                </td>
              ))}

 

• 날짜 표기

const clickDate = softBox.isDate;

const [isDate, setDate] = useState(clickDate);

function toggleStamp(index) {
    setClicked((stamp) => ({
      ...stamp,
      [index]: !stamp[index],
    }));
    setIndex(index);
    setDate(today);
  }

  useEffect(() => {
    updatesoftBox({
      ...softBox,
      isClicked,
      isDate,
    });
  }, [isClicked]);

//JSX
{softCliked[index] ? isDate : null}

 

소감

눈물의 도장쇼.. 이걸 해결하기 위해 며칠을 고생했던가... 한가지를 해결하기 위해 이렇게 오래 노력한 건 처음이다. 스타벅스의 슬라이드 이후로 최대 기간이 아닐까? 해결하자마자 눈물이 찔끔 날 뻔 했다.

오래 걸려서 그런가 soft mode는 만드는데 시간이 그리 소요되지 않았다. (물론 대부분 복붙이었지만) 날짜 표기하는데서 살짝 막히긴 했는데 도장 찍는거에서 힌트를 얻어서 금방 구현했다.

이제 거의 끝났다. 원래 생각한 기간보다는 오래 걸렸지만 31일 안에 못 끝낼까봐 전전긍긍했는데 이렇게 큰 기능들이 완성이 돼서 뿌듯하다.