fix: item image 규격 맞지 않는 부분 수정

[hae-on]

Issue

• close grid 규격 안 맞는 버그 수정 #105

✨ 구현한 기능

item image 규격이 맞지 않는 부분 임시 수정하였습니다.

📢 논의하고 싶은 내용

전체적으로 이미지 규격이 맞지 않은 부분들 있잖아요?
그게 이미지 크기를 화면에 맞게 유동적으로 가져오는 부분만 그렇게 오류가 나더라구요.

요거 사용했던 컴포넌트들...

export const reviewImage = style({
  width: '100%',
  height: 'auto',
  minWidth: 164,
  borderRadius: '6px',
  objectFit: 'cover',
  aspectRatio: '164 / 90',
});

이게 name이나 content가 너무 길어지게 되면, 이미지도 그 길이만큼 늘어나고 전체 레이아웃이 깨져요.

이 모든게 말줄임표 속성 때문이라는 것!!
말줄임표 속성을 삭제하면 레이아웃이 안 틀어집니다...
whiteSpace: 'nowrap', 요 친구때문에 이미지도 같이 늘어나는 듯??

결국 얘가 고정 width가 없어서 그런거 같긴한데 정확히는 모르겠네요?
그래서 말줄임표 속성에 max width를 설정해줬어요.
그러니까 제대로 작동하는데...
근데 이제 문제는 productItem에서 발생하는데 이 컴포넌트가 두군데에서 사용되거든요?

첫번째 사진의 제목 공간이 다른 것보다 좁아서 얘 기준으로 잡으니까
두번째 사진 제목처럼 컴포넌트 길이보다 좀 짧아요.

사진으로 티가 잘 안날 수 있는데 다른 컴포넌트로 보자면

이렇게 이름이 이미지 길이보다 짧게 잘리는게 보이죠?
그래서 그냥 productItem이랑 recipeItem 이렇게 사용하는 곳에서 따로 길이 줄까 하다가
이것도 임시방편으로 만든 해결책이니까 어차피 덜어내야 할 거 같아서 그냥 뒀습니다...

더 좋은 방법이 생각난다면 댓글 달아주세요...!
저도 더 생각해보겠음!

🎸 기타

x

[github-actions]

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-bihbjyupcg.chromatic.com/

[xodms0309]

그 grid에

grid-template-columns: minmax(0, 1fr) 1fr;

이거 한 번 해볼래여 해온?!

[hae-on]

@xodms0309

오옹 된다!!!!
근데 아래 사진처럼 flex일 때는 뭘 설정해줘야할까요?? 🤔

[xodms0309]

흠.. 찾아보니까 min-width를 이미지 말고 li에 주면 될 거 같은데 이거 가능한가여?

[github-actions]

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-mkcgaxwwka.chromatic.com/

[hae-on]

@xodms0309
오 해결~~~!!
productItem 같은 경우에는 grid에서도 사용하기 때문에 거기만 따로 minWidth 안 빼고 그냥 뒀습니다~~~
(= list랑 item 둘 다 minWidth 있다는 말)