오늘 한 일

• 모바일 / 768px~1200px / 1200px이상 3가지 버전 반응형 작업 완료
• 주변 지인 및 스파르타 코딩클럽에 재배포

트러블 슈팅

• 채팅 반응형 웹
  

중고거래 채팅리스트쪽에 채팅리스트를 담는 컨테이너의 height가 있고, 그 height를 넘어가게 컨텐츠가 많아지면 채팅창 한개 한개가 상위 컨테이너의 높이에 맞춰 크기가 작아지는 현상이 있었다. 그래서 다양한 방법을 시도하였으나 상위 컨테이너 height를 엄청나게 키우는게 아닌이상 채팅창 하나 하나가 height에 맞춰서 줄어드는 문제가 해결되지 않았었다.

![](https://velog.velcdn.com/images/gyu4016/post/cbaf9416-0dfe-4f78-8b95-813064f6241a/image.png)

많은 시도를 통해 상위 컴포넌트의 height를 auto로 설정해주면 한 단계 상위 컴포넌트 height에 맞춰 고정은 되어있는 채로 overflow:scroll을 적용하였기 때문에 모달창은 모달창대로 고정되고, 채팅창 하나하나에 대한 height은 줄어들지 않은채 스크롤 처리해서 볼 수 있게 해결할 수 있었다

• 마이페이지 디폴트 이미지 우리가 넣어준 이미지가 아닌 React.png가 나오는 현상
  

 <St.ProfileImg src={userData?.user_img || profileImage} />

이 코드를 통해 userData안에 유저가 정해놓은 이미지가 없으면 default로 우리가 asset폴더에 넣어놓은 profileImage가 보이게 구현을 하였는데, 실제 이미지 없이 회원가입을 진행하면 우리가 정해놓은 profileImage가 아닌 React.png가 나오고 있었다. 그래서 회원가입 로직을 살펴보니

 export const signupHandler = async (email: string, password: string, nickname: string) => {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            full_name: nickname,
            user_img:
              'https://ywwmsridviznotzmkver.supabase.co/storage/v1/object/public/user_img/default_img/defaultprofileimage.webp',
          },
        },
      });
      return { data, error };
    };

최초 가입때 user_img에 링크를 넣어놨었는데 이게 React.png였던게 원인이였다.
그래서 수파베이스를 살펴보니

테이블에 user_img가 우리가 세팅한 값이 담기고 있었고 그 링크는

이렇게 supabase에 storage에 넣어놓은 사진의 링크였었다

그래서 해당 부분에 우리 팀이 넣고 싶은 사진을 보는 것처럼 넣어놨더니 기본 회원가입때 React.png가 나타나는걸 해결할 수 있었다