241106 / 날씨카드 크기 맞추기, 닉네임 넣기(오류), footer 반응형, 눈 내리는 컴포넌트

오늘 할 일

1. 날씨카드 크기 맞추기(?
2. 닉네임 넣기
3. 회원가입 유효성 검사 텍스트 UI 수정
4. footer 반응형

---

날씨카드 크기 맞추기

(어느 쪽이 나은지 비교하기)
** 지금 보니 옷 이미지랑 내용이랑 안 맞는 것도 있어서 수정 필요
-> 2번째로 했는데 결국 다시 원점이 돼

맞추려고 했는데 어느 쪽에 min-height 설정해도 별로고
코트 이미지만 나올 때 저래서 일단 그냥 두고 폰트 컬러랑 크기만 살짝 수정했음
근데 역시 옷 박스 너무 구려 어쩐담

---

닉네임 넣기

기존에 있던 훅을 가져와서 데이터 값에서 닉네임을 고대로 넣어줌
뭔가 다른 방법을 생각해도 이제 가장 코드도 적고 간단한 거 같아서
요렇게 하기로 !
* 닉네임에만 스타일 굵게 적용

잘 되는 줄 알았더니 저번처럼
로그아웃을 하면 닉네임 부분 때문에 요런 오류가 나서 페이지 로딩이 안 됨
그럼 그렇지 ㅠㅠ

1. recoil 사용

// 로그인 유저 닉네임
export const nicknameState = atom({
  key: "nicknameState",
  default: "",
});

const setNickname = useSetRecoilState(nicknameState);
// IIFE 즉시 실행 함수
(() => {
    setNickname(data.nickname);
})();

잘 작동은 하는데 오류가 하나 있음
처음에 로그인 했을 때 닉네임이 바로 안 나오고
마이페이지가 로딩된 후 마이페이지에서 나왔을 때 닉네임이 보임
흠

---

footer 반응형

작업 완료 !
근데 보니 가로형일 때 조금 레이아웃 깨지는 부분이 있어서 추가 수정 필요

---

방금 눈 내리는 라이브러리 아니고 컴포넌트 추가해봤는데
너무 아름다워........
https://www.npmjs.com/package/react-snowfall?activeTab=readme