프론트엔드 부트캠프 77일차, 팀 프로젝트(19) 예약한 자에게만 댓글을 허용하노라

 

 내가 예약한 테마가 아니면 테마 후기를 달 수 없게 하자!

const [isReviewer, setIsReviewer] = useState(false);  
 
 
  useEffect(() => {
    data?.fetchReservationsUser.filter(
      (ele: IFetchReservationData) =>
        ele.theme_menu.theme?.id === router.query.id
    ).length >= 1
      ? setIsReviewer(true)
      : setIsReviewer(false);
  }, []);

isReviewer 라는 state 변수를 하나 선언했다.

reviewer가 맞으면 댓글 달 수 있게 할거고, 아니면 댓글을 못 달게 할 것이다.

 

댓글을 못 달게 하는 방법은 여러가지가 있을 것 같다.

 

1. 댓글 다 작성했는데 누르면 "예약하지 않은 사람은 댓글을 달 수 없습니다!"하기.. -  이건 좀 그렇다. 이건 마치 후기 게시판은 다 열려있고 작성까지 했는데 전송을 눌렀을 때 아뇨 당신은 권한이 없습니다. 하는 것과 같다. 

 

2. 그냥 댓글 작성하지 말라고 경고하고 누르면 댓글 달기 api 요청을 보내지 않는다. - 이것도 좀 그렇다. 열려있는데 통제된... 그런... 그리고 버튼이 눈으로 보기엔 활성화 되어있는데 안 눌리는 것만큼 안 좋은 UX가 없다고 생각한다.

 

3. 댓글창 input을 비활성화 시켜놓기. - 이 정돈 괜찮지않나? 싶다. 적당히 연한 글씨와 마우스를 갖다대도 무반응인 input창은 그것이 disabled 상태라는 것을 알려줄 것이다... 

 

 

4. 댓글창을 날려버리기 - 화끈하고 좋은 것 같다. 만들기도 쉽다. 난 이걸 택했다.

 

그럼 이제 저 isReviewer라는 변수를 props로 내려준다. 

return (
    <>
      {props.isReviewer ? (
        <form
          onSubmit={
            props.isEdit
              ? props.handleSubmit(props.onClickUpdate)
              : props.handleSubmit(props.onClickSubmit)
          }
        >
          <S.Wrapper isEdit={props.isEdit}>
            <S.StarBox>
              <S.StarScore
                tooltips={desc}
                style={{ fontSize: "3em", color: "#7457E8" }}
                onChange={onClickChangeStar}
                value={star || props.el?.star}
                character={({ index }: { index: number }) =>
                  customIcons[index + 1]
                }
              />
              {props.isEdit ? (
                <FontAwesomeIcon
                  icon={faXmark}
                  onClick={onClickCancel}
                  style={{
                    fontSize: "1.5em",
                    margin: "4px",
                    cursor: "pointer",
                    position: "absolute",
                    right: "1em",
                    color: "#5c4a7e",
                  }}
                />
              ) : (
                ""
              )}
            </S.StarBox>

            <S.EscapeRankBox>
              <S.RadioGroup color="secondary">
                <S.RadioButton
                  onClick={onClickEscape0}
                  checked={isEscape === true}
                  id="escape0"
                >
                  탈출
                </S.RadioButton>
                <S.RadioButton
                  onClick={onClickEscape1}
                  checked={isEscape === false}
                  id="escape1"
                >
                  미탈출
                </S.RadioButton>
              </S.RadioGroup>
              <S.RankBox>
                <S.RadioGroup color="secondary" defaultValue={props.el?.rank}>
                  <S.RadioButton
                    onClick={onClickRank}
                    selected={rank === "쉬움"}
                    value="쉬움"
                  >
                    쉬움
                  </S.RadioButton>
                  <S.RadioButton
                    onClick={onClickRank}
                    selected={rank === "보통"}
                    value="보통"
                  >
                    보통
                  </S.RadioButton>
                  <S.RadioButton
                    onClick={onClickRank}
                    selected={rank === "어려움"}
                    value="어려움"
                  >
                    어려움
                  </S.RadioButton>
                  <S.RadioButton
                    onClick={onClickRank}
                    selected={rank === "매우 어려움"}
                    value="매우 어려움"
                  >
                    매우 어려움
                  </S.RadioButton>
                </S.RadioGroup>
              </S.RankBox>
            </S.EscapeRankBox>
            <S.CommentBox>
              <S.CommentWriter>{userInfo.name}</S.CommentWriter>
              <S.CommentInput
                defaultValue={props.el?.content}
                {...props.register("content")}
                placeholder="댓글을 입력하세요."
              />
              <S.SubmitButton>{props.isEdit ? "수정" : "등록"}</S.SubmitButton>
            </S.CommentBox>
          </S.Wrapper>
        </form>
      ) : (
        <div></div>
      )}
    </>
  );

(이 부분이 presenter다. 

radio 버튼으로 인해 많이 혼란스러워지만,,, 아무튼 잘 굴러는 간다~~~^^)

 

 이걸 테마 디테일 페이지에서 한 후에 컴포넌트 불러오는 부분에만 썼으면 깔끔했을 것 같다는 생각이 지금에야 들었다... (아예 후기댓글 작성 컴포넌트를 불러오는 곳에서 결정했으면 좋았을 것 같다는 뜻이다.) 

그리고 지금 문제는 fetchReservationsUsers의 argument로 page가 있어서, 지금은 1페이지만 검색된다...! 두둥 

사실 엄청 치명적인 문제..!지만 우린 가라데이터라서 1페이지까지밖에 없기도하고, 이걸 또 다시 api 만들기는 좀 그러지 않나 싶어서... 

백엔드가 api를 만드는 것이 얼마나 쉽고 어려운지에 대한 이해도 필요할 것 같다. 이건 우엉님께 한 번 여쭤는 봐야겠다. 

 그리고 알고리즘상으로 생각해보면 1페이지에 없으면 2페이지에 검색하는... 이런것도 가능하지 않을까?라는 생각은 있다 생각은^ㅡ^

배고프다. 김치만두가 먹고싶다. 

 

!!!!!!!!!!!! 저 위에 부분... 저때라도 수정을 했어야했어. 이게 맞는진 모르겠지만, 하여튼 이렇게 하면 수정할 때 댓글창이 안 보인다ㅠㅠ

수정내역은 여기 참고

https://hani-honey.tistory.com/173

프론트엔드 부트캠프 78일차, 팀 프로젝트(20) 글은 일인당 하나로 제한합니다.

 

 

 ㅠㅠ저 위에 컴포넌트 불러오는 부분에 쓸걸 하는 후회가 자꾸 일어서 그렇게 수정해야할 것 같다!

presenter에 저렇게 쓰는 건 너무 안 예쁜 것 같아. 

그리고 하면서 1인당 후기는 하나만 쓸 수 있도록 하는 걸 생각해봐야겠다.  

아무래도 이걸 하고 pr 날려야겠어ㅠ_ㅠ 

 

🐻 프론트엔드

 - 나는 아직 보충수업,,, 나머지 분들은 네비바도 하고 바쁨바쁨

 

🐻‍❄️ 백엔드

 - 재택이라 모른다,, ! 

 

🍚 점심

 - 달걀 후라이(집)

 

🍬 간식

 - 메가커피 체리콕 열모금? 또 먹고 싶다... 

 

☕️ 커피

 - 안 마셨지만 위에 음료수를 먹었다! 

 

🎵 노래

 - X

 

👀 비고

 - 환경이 갖춰지지 않은 재택은 내게 독인 것 같다. 일단 발받침이 없어서 자세가 불편해! 

 

 

 

 오늘은! 머리를 뗐다. 

떼기 전에 애들 산책시킬까~ 하고 집에 갔더니 응가 폭탄 맞아있었다. 이걸 어떻게 해야할까...? 내가 독립해야되는 이유 중 하나. 근데 독립해도 뭐가 얼마나 달라질까 조금 머리가 아프다. 인지기능장애... 그래 우리 강아지들은 안올줄 알았어... 근데 이번이 두번째. 세번째에 대비해야한다는 생각 + 내가 감당해낼 수 있을까에 대한 걱정... 그리고 그걸 겪는 애기는 어떤 생각일까... 계속 빙글빙글 돌기만 한다. 계속. 

 올해는... 엄지 앞다리 부러짐, 완두 인지기능장애 심해지다가 췌장염으로 하늘나라감, 까치 췌장/신장 안 좋음, 까치 인지기능장애 옴 여기에 자잘하게 나 자전거 사고난 것까지. 자전거 사고나 앞다리 부러진 정도는 액땜이라고 생각했는데, 까치 인지기능장애까지 오게된 건 너무하잖아... 가뜩이나 내가 돌볼 수도 없는 상황에, 그래도 다행히 조금 싼 약이 나와서 그걸 먹이고는 있는데 그래서 괜찮아질거라고 생각했는데 더 심해진 모습을 보니까 너무 미안하고 괴롭다. 나는 그 와중에 별거 아닌 것 같아서 자꾸만 작아진다. 개인적으로 또 따로 일이 있었는데 그것때문에 반쯤 정신 놓고 있고 너무 부끄럽다. 내가 아무리 작아도 나는 책임져야 할 생명이 있기 때문에 살아야 한다. 이게 힘들면서도 참 다행이다. 내 존재 이유를 가끔은 다른데서 찾고 싶어질 때가 있으니까