[LAB-9] 컴포넌트가 보이지 않습니다.

copiCat0 commented 1 year ago

질문 작성자

이원준

문제 상황

div 컴포넌트와 AttatchedPicture 컴포넌트 사이에 집어넣은 WeatherChoose 컴포넌트가 보이지 않습니다.
보여야 하는 컴포넌트(Figma) :
에러는 나지 않습니다.
어떤 문제가 있어서 컴포넌트가 보이지 않는건지 모르겠습니다......

localhost:3000/diary

Diary.tsx

WeatherChoose.tsx

Store.tsx

diarySlice.tsx

이원준 레포지토리
branch : feature/FEQA

환경 정보

macOS
node : 18.12.1
리덕스 툴킷 사용.
타입스크립트 사용.

yamoo9 commented 1 year ago

문제 원인

작성된 Tailwind CSS 코드를 보면 높이가 0입니다. 그래서 표시되지 않는 것입니다.

문제 해결

너비와 높이가 설정되면 정상적으로 이미지가 표시됩니다. (해(sunny) 그림 참고)

다만 문제는 스프라이트 이미지 너비, 크기 설정이 없고, 배경 이미지 위치 등이 올바르지 않는데 있습니다. 예를 들어 Sprite Cow를 통해 스프라이트 이미지를 확인해보면 너비, 높이, 배경 이미지 위치를 확인할 수 있습니다.

하지만 WEATHERS 정보를 보면 위치가 정확하지 않죠. 그렇다 보니 데이터를 정확하게 수정해야 합니다.

const WEATHERS = [
  { id: 'sunny', position: '-120px -180px', selectedPosition: '-120px -140px' },
  { id: 'rainy', position: '-80px -180px', selectedPosition: '-80px -140px' },
  { id: 'cloudy', position: '-40px -180px', selectedPosition: '-40px -140px' },
  { id: 'stormy', position: '0px -180px', selectedPosition: '0px -140px' },
  { id: 'snowy', position: '-160px -180px', selectedPosition: '-160px -140px' },
]

예를 들어 sunny 객체 정보는 다음과 같아야 합니다. 기본 표시되는 이미지, 선택된 상태의 이미지 크기도 달라요. 스프라이트 배경 이미지 기법을 꼭 사용해야 한다면? 아이콘 규격 크기부터 맞춰야 합니다. 🤔

{
  id: 'sunny',
  width: '40px',
  height: '40px',
  position: '-135px -157px',
  selectedWidth: '38px',
  selectedHeight: '38px',
  selectedPosition: '-134px -114px',
}

가이드 파일

가이드 파일을 내려받아 테스트 해보세요.

withpet-confirm-by-yamoo9.zip

copiCat0 commented 1 year ago

넵 감사합니다!!!!!!! 규격은 sprite image자체가 살짝 변경되면서 다시 맞춰야 하는 상황이였습니다. 정말 감사드립니다!

yamoo9 commented 1 year ago

넵 감사합니다!!!!!!! 규격은 sprite image자체가 살짝 변경되면서 다시 맞춰야 하는 상황이였습니다. 정말 감사드립니다!

좀 전에 가이드 파일 첨부했어요. 확인해보세요 ^^

copiCat0 commented 1 year ago

정말 정말 감사드립니다! 👍 👍

yamoo9 / likelion-FEQA