20231229~1231 TIL

목표

• 맡은 부분 끝내기

새로 알게 된것/ 오늘의 코드

 

일지 C

  const addDiaryhandle = () => {
    if (toiletNumber && condition && meal) {
      const newDiary = {
        toiletNumber,
        condition,
        meal,
        date: formatDate,
        comment
      };

      const addDiary = async () => {
        try {
          const response = await axios.post(
            "url",
            newDiary
          );
          alert("일기가 추가되었습니다.");
          setMeal("");
          setComment("");
        } catch {
          alert("오류가 발생하였습니다.");
        }
      };
      addDiary();
      fetchDiary();
    } else {
      alert("모두 입력해주세요");
    }
  };

일지 R

  //일기 읽어오기
  const fetchDiary = async () => {
    const { data } = await axios.get("http://localhost:4001/diary");
    setDiarys(data);
  };

  useEffect(() => {
    fetchDiary();
  }, []);
  // 해당 날짜 일기 불러오기 (클릭된 날짜)
  const dateDiary = diarys!.find((one: GetDiary) => {
    return formatDate === one.date;
  });

 <St.DiaryContainer>
            <St.closeBtn onClick={diaryCloseHandle}>X</St.closeBtn>
            <St.Title>쾌변일지</St.Title>
            <St.Date>{formatDate}</St.Date>
            <St.QuestionContainer>
              <div>오늘 화장실 간 횟수</div>
              <St.InputWrap>{dateDiary?.toiletNumber}</St.InputWrap>
              <p>오늘의 쾌변 컨디션</p>
              <St.InputWrap>{dateDiary?.condition}</St.InputWrap>
              <p>오늘의 식단</p>
              <St.InputWrap>{dateDiary?.meal}</St.InputWrap>
              <p>메모</p>
              <St.InputWrap>{dateDiary?.comment}</St.InputWrap>
            </St.QuestionContainer>
            <St.ButtonContainer>
              <Button
                text="수정하기"
                handler={() => {
                  setIsEdit(true);
                }}
              ></Button>
              <Button
                text="삭제하기"
                handler={() => {
                  removeHandle(dateDiary?.id);
                }}
              ></Button>
            </St.ButtonContainer>
          </St.DiaryContainer>

일지 U

  //수정하기
  const [editToiletNumber, setEditToiletNumber] = useState(
    dateDiary?.toiletNumber
  );
  const [editCondition, setEditCondition] = useState(dateDiary?.condition);
  const [editMeal, setEditMeal] = useState(dateDiary?.meal);
  const [editComment, setEditComment] = useState(dateDiary?.comment);

  const editHandle = (id: string | undefined) => {
    axios.patch(`url/${id}`, {
      toiletNumber: editToiletNumber,
      condition: editCondition,
      meal: editMeal,
      comment: editComment
    });
    setIsEdit(false);
    fetchDiary();
  };

<St.DiaryContainer>
            <St.closeBtn onClick={diaryCloseHandle}>X</St.closeBtn>
            <St.Title>쾌변일지 수정</St.Title>
            <St.Date>{formatDate}</St.Date>
            <St.QuestionContainer>
              <div>이날 화장실 간 횟수</div>
              //라디오 타입 기본값 설정 안됨
              <St.InputWrap>
                {toiletNumberArr.map((item: string, i) => {
                  return (
                    <St.RadioSelect key={i}>
                      <input
                        type="radio"
                        name={editToiletNumber}
                        value={item}
                        onChange={(e) => setEditToiletNumber(e.target.value)}
                      />
                      {item}
                    </St.RadioSelect>
                  );
                })}
              </St.InputWrap>

              <p>이날의 쾌변 컨디션</p>
              <St.InputWrap>
                {conditionArr.map((item: string, i) => {
                  return (
                    <St.RadioSelect key={i}>
                      <input
                        type="radio"
                        name={editCondition}
                        value={item}
                        onChange={(e) => setEditCondition(e.target.value)}
                      />
                      {item}
                    </St.RadioSelect>
                  );
                })}
              </St.InputWrap>

              <p>이날의 식단</p>
              <St.EditTextArea
                placeholder="이날 먹은 것을 입력해주세요"
                value={editMeal}
                onChange={(e) => setEditMeal(e.target.value)}
              >
                {dateDiary?.meal}
              </St.EditTextArea>

              <p>메모</p>
              <St.EditTextArea
                placeholder="추가로 적으실게 있다면 적어주세요"
                value={editComment}
                onChange={(e) => setEditComment(e.target.value)}
              >
                {dateDiary?.comment}
              </St.EditTextArea>
            </St.QuestionContainer>

            <Button
              text="수정완료"
              handler={() => {
                editHandle(dateDiary?.id);
              }}
            ></Button>
          </St.DiaryContainer>

 

일지 D

  //삭제하기
  const removeHandle = async (id: string | undefined) => {
    if (confirm(`${formatDate} 날짜의 일기를 삭제하시겠습니까?`)) {
      axios.delete(`http://localhost:4001/diary/${id}`);
      setDiarys(
        diarys?.filter((diary) => {
          return diary.id !== id;
        })
      );
      alert("삭제가 완료되었습니다");
    } else {
      alert("삭제가 취소되었습니다.");
    }
  };

 

캘린더 설정

 type ValuePiece = Date | null | any;
 type Value = ValuePiece | [ValuePiece, ValuePiece] | any;
 
 const [value, onChange] = useState<Value>(new Date());

<StyleCalendar
        locale="en"
        onChange={onChange} //선택 날짜 변경
        value={value}
        tileContent={addContent} //달력 일자에 들어가는거
        onClickDay={writeHandle} // 달력 일자 클릭이벤트
      />

 

날짜에 맞는 콘텐츠 넣기

-> 일단 일기가 있는 날짜를 담은 배열이 필요

  const dayList = diarys?.map((diary) => diary.date);

-> 콘텐츠를 추가해주는 함수 

  //달력에 추가할 컨텐츠
  const addContent = ({ date }: any) => {
    // 해당 날짜(하루)에 추가할 컨텐츠의 배열
    const contents = [];
    // 해당날짜타일과 일기의 날짜 가 맞는 것(타일 날짜)
    const diaryDate = diarys!.find((one: GetDiary) => {
      return moment(date).format("YYYY.MM.DD") === one.date;
    });
    const diaryCondition = diaryDate?.condition;
    const diaryToiletNumber = diaryDate?.toiletNumber;

    // date(각 날짜)가  리스트의 날짜와 일치하면 해당 컨텐츠(이모티콘) 추가
    if (dayList!.find((day) => day === moment(date).format("YYYY.MM.DD"))) {
      if (diaryCondition === "😄") {
        contents.push(<img src="/assets/빨간똥.png" />);
      } else if (diaryCondition === "😐") {
        contents.push(<img src="/assets/주황똥.png" />);
      } else if (diaryCondition === "😣") {
        contents.push(<img src="/assets/초록똥.png" />);
      } else if (diaryCondition === "😫") {
        contents.push(<img src="/assets/파란똥.png" />);
      }
    }
    return (
      <St.TileContents>
        {contents}
        <p>{diaryToiletNumber}</p>
      </St.TileContents>
    ); // 각 날짜마다 해당 요소가 들어감
  };

 

개념정리

어려웠던 점

캘린더에 이모티콘을 추가하는데 날짜 리스트를 어떻게 만드는 게 좋을지 고민했는데 처음한 시도가 배열 만들어 놓고 거기에 push하는 것을 했는데 생각해보니 일회성이라 불가능 했다.

 

그래서 다음으로 생각한 것은 db에 날짜가 따로 저장되게 하려고 했는데 그렇게 하다보니까 그냥 원래 데이터에서 날짜만 map으로 빼면 되겠다 싶었다.

 

그리고 타일의 클릭 이벤트를 어떻게 줘야할지 고민 했는데 역시 모든건 공식 문서를 먼저 봐야한다...

 

https://github.com/wojtekmaj/react-calendar

GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app.

대놓고 나와있는 것을 구글링으로 찾겠다고 하루종일 찾았으니.. 멍청시간...+1

 

그리고 일지 상태를 토글하는 것을 isOpen= 일지on/off, isEdit= 수정상태/ 읽기상태, isWrite=작성하기/읽기 이렇게 하고 데이터가 있는 날짜엔 isWrite가 false, 없는 날짜엔 true가 나오게 하려고 둔 상태였는데 그렇게하면 렌더링의 순서에 문제가 조금 있었다. 

일자를 누르면 바로 set되는 것이 아니라 다음 행위에 실행이 되는 점이 있었다. 

 

그래서 어떻게 해야할지 고민을 했는데  생각해보니 그냥 데이터 상태 자체로 삼항연산자를 하면된다는 것을 알아챘다.. 

 

목표 달성여부

완!

내일 목표

• alert  꾸미기?
• 글 작성중 못나가게 하기..?
• 미래의 날짜에 작성 못하게 하기