프론트엔드 부트캠프 68일차, 팀 프로젝트 2주일째 주말

뒤에 배경 동그라미를 넣을까? 하다가 굳이?싶어서 안 넣었다. 편안.

어차피 쓸모없는 이미지 대신에 이걸 넣자는 맥내님의 아이디어,,!!대박... 천재????? 

넣는 건 쉬워서 참 좋다...

 

지금 댓글 작성하는 부분에서 표정을 좀 다른 걸 넣으려고 포토샵도 하고 폰트어썸에서 불러도 와보고 이것저것 하고 있는데..

이렇게 폰트어썸꺼는 혼자 튄다. 왜.. 왜이러는지. margin, padding 다 0이고 overflow, width, height도 건들여봤으나 소용이 없었다.

그리고 너무 뚜때~(?)하게 생겨서 별로 넣고 싶지 않다... antd꺼에서 조금만 수정해서 넣고 싶은데 어떻게 안되겠니,,, antd는 당장 아이콘을 하나 더 만들라ㅠ 아이콘 타고타고 들어가면 뭐가 나올까 싶어 해봤는데 내 수준에선 안된다.. 

 

desc 방탈출 관련된 걸로 수정했다. 

맨왼쪽과 맨오른쪽 입에 선 하나만 그려도 좋을텐데... 

 

수정, 삭제 버튼을... 좀 키우고 떨어뜨려놨는데 줄이 안 맞는게 거슬려서 지금은 align-items 도 추가했다.

이 두 아이콘은 같은 사이즈로 맞춰놓으면 크기 차이가 나서 0.2em 정도 다르게 설정해야 한다. (=_=) 

그리고 왠지 모르겠는데 cursor: pointer가 굉장히 감질맛나게 됐다 안됐다한다. z인덱스를 줘도 안되고~ 엥 그래서 MDN 들어갔는데 지금 내 마우스가 이상한듯?! 그렇다면 문제 해결...^^ 

 

 

타입스크립트

 

const onClickSubmit = async (data: any) => {
    try {
      await createThemeReview({
        variables: {
          createThemeReviewInput: {
            writerName: "신만두",
            ...data,
          },
          themeId: router.query.id,
        },
        refetchQueries: [
          {
            query: FETCH_THEME_REVIEWS,
            variables: { themeId: router.query.id },
          },
        ],
      });
      reset();
    } catch (error) {
      alert((error as Error).message);
    }
  };

 

개체가 '알 수 없는' 형식입니다.ts(2571)

에 대해서, error as Error 라고 써줬다.

이번에 안 사실인데, catch하고 error쓰는 건 관례는 있지만 아무거나 써도 되나보다. 그니까 구조분해할당에서 가져올 때처럼 이름을 같게 하지 않아도 된다. 난 원래 error라는 걸 따로 빼내는 줄 알았다...

catch(error) e as Error 이런식으로 써도 된다.

 

일부러 에러메세지 내보려고 하면서 발견한 문제점...

댓글 선택한 만족도 아이콘이 만~~~약에~~~없으면 보내줄 아이콘이 필요함... 

그리고 만족도를 필수값으로 둘지? ...에 대한 고민. 필수값으로 두는 게 나을 것 같고, 그러면 입력 안 했을 때 메세지가 나가야겠지... 

 

 

react-hook-form, 타입스크립트 쓰기

 

import { useForm, SubmitHandler } from "react-hook-form";

type Comment = {
  content: string,
  star: number,
  clear: boolean,
  rank: string,
}

const { register, handleSubmit, formState, setValue, trigger, reset } =
    useForm<Comment>({
      mode: "onChange",
    });

useForm 뒤에 <타입>을 써준다. 

 

const onClickUpdate = async (data: Comment) => {
    try {
      ...
      
    } catch (error) {
      alert((error as Error).message);
    }
  };

data에 타입을 쓴거랑 

 

const onClickSubmit: SubmitHandler<Comment> = async (data) => {

함수에 SubmitHandler<Comment>로 감싸준거랑...뭐가 다르지? 

 

이걸 props로 내려줄건데 속성이 없다고 함

그래서 IThemeCommentWriteUIProps에 register: Comment; 이런식으로 썼는데 

이렇게 문제가 생겼다.

 

구글링 결과 (아마도) 인터페이스나 타입 그 자체를 인터페이스로 사용할 때 생기는 문제라고 한다. 

왜? 내가 선언해서 쓰겠다는데 왜 안돼...?! 

 

이 부분 아직 해결을 못 했다. 

 

 

 

 

해야할 거

댓글 작성 만족도 체크 이상함

만족도 체크 안 했을 시 이미지를 넣거나 필수로 만들기

수정 누르고 수정 취소가 없음

eslint, typescript error 고치기(...)

 

NOTICE의 두께 좀 얇게 하기