Feat: 모바일 반응형 및 카드 스타일 css 컴포넌트 분리

[cho1ys]

🧃 Pull Request

🍉 코멘트

• 모바일 사이즈 반응형
• 카드 스타일 css 컴포넌트 분리

🪿 연관된 이슈

• Feat: 기본페이지(홈페이지) 생성 #1 Feat: 상품페이지(검색어에 따라 변경), 상품 상세페이지 #8 Feat: 결제 페이지 #14

✅ PR 포인트 & 궁금한 점

• 홈페이지
  

• 상단 메뉴 클릭시
  

• 제품 상세 페이지
  

• 이외 구매페이지, 결제 완료 페이지는 큰 수정 없습니다

• 한번씩 보시고 피드백 부탁드립니다 !

[OpenS3same]

이미지 첨부해주셔서 쉽게 파악이 가능했습니다! 태블릿 메인에서도 카드가 8개가 보여지는거죠? 반응형으로 하게되면 카드 ui를 캐러셀 형태로도 많이 사용하던데 카테고리 수 자체가 적어서 8개 보여지는 것도 깔끔한 거 같습니다! 고생 많으셨습니다!!

[sunglitter]

고생 많으셨습니다!! 개인적인 취향이지만

1. 모바일 환경에서는 한 줄에 3개의 카드 배치

• 작은 화면에서 한 줄에 4개의 카드가 배치되니 중앙을 볼 때 시선이 분산되는 느낌을 좀 받았습니다.

2. 상단 상품 카드와 동일한 너비로 아래의 상품 카드 배치 영역 설정(좌우 여백 동일하게)

• 균형감이 가장 큰 이유입니다! 하나만 더하자면 카드 사이의 공간을 조금 더 줄이면 좋을 것 같습니다.

3. transition을 활용한 카드 hover시 부드러운 확대 효과 구현
   이러한 부분은 어떠실지 제안드리고 싶습니다!

[sunglitter]

아, 하나 말씀 드릴 부분이 있습니다!
.gitignore에 .env가 추가되어 있는데, 반영이 되지 않고 .env 파일도 그대로 같이 업로드 됩니다!
프로젝트 초기 설정 단계 쯤 기록들을 보니 처음 .gitignore 생성시에 .env가 추가되어 있지 않았던 상태라서 그런 것 같습니다.

[cho1ys]

동성님 말씀하신 .env관련해서 새로 커밋했습니다 !

[cho1ys]

고생 많으셨습니다!! 개인적인 취향이지만

1. 모바일 환경에서는 한 줄에 3개의 카드 배치

• 작은 화면에서 한 줄에 4개의 카드가 배치되니 중앙을 볼 때 시선이 분산되는 느낌을 좀 받았습니다.

2. 상단 상품 카드와 동일한 너비로 아래의 상품 카드 배치 영역 설정(좌우 여백 동일하게)

• 균형감이 가장 큰 이유입니다! 하나만 더하자면 카드 사이의 공간을 조금 더 줄이면 좋을 것 같습니다.

3. transition을 활용한 카드 hover시 부드러운 확대 효과 구현
   이러한 부분은 어떠실지 제안드리고 싶습니다!

말씀하신부분 반영해보겠습니다 !
다만, 1번의 경우 보여지는 카드들의 개수가 8개로 정해놔서 한 줄에 3개씩 두면 3/3/2의 형태가 될거같습니다. 이 부분 관련해서 조언해주실 수 있을까요 ?

[sunglitter]

말씀하신부분 반영해보겠습니다 ! 다만, 1번의 경우 보여지는 카드들의 개수가 8개로 정해놔서 한 줄에 3개씩 두면 3/3/2의 형태가 될거같습니다. 이 부분 관련해서 조언해주실 수 있을까요 ?

ㅁㅁㅁ
ㅁㅁㅁ
ㅁㅁ

이런 식으로 배치를 하는 것이 위화감이 적을 것 같습니다. 혹은 모바일 환경에서는 카드를 9개까지 보여지도록 하는 것은 어떨까요?

[cho1ys]

말씀하신부분 반영해보겠습니다 ! 다만, 1번의 경우 보여지는 카드들의 개수가 8개로 정해놔서 한 줄에 3개씩 두면 3/3/2의 형태가 될거같습니다. 이 부분 관련해서 조언해주실 수 있을까요 ?

ㅁㅁㅁ ㅁㅁㅁ ㅁㅁ

이런 식으로 배치를 하는 것이 위화감이 적을 것 같습니다. 혹은 모바일 환경에서는 카드를 9개까지 보여지도록 하는 것은 어떨까요?

8개의 상품만 제가 추출해서 보여지도록 로직을 구성해서 모바일에서 9개를 보여주는것은 지금 개발 시간상 어려울 것 같습니다 ㅜㅜ 1번 제외하고 우선 수정사항 커밋해놨구요, 차라리 한 줄에 2개씩해서 아래로 4줄을 넣는건 별로일까요 ?

[sunglitter]

8개의 상품만 제가 추출해서 보여지도록 로직을 구성해서 모바일에서 9개를 보여주는것은 지금 개발 시간상 어려울 것 같습니다 ㅜㅜ 1번 제외하고 우선 수정사항 커밋해놨구요, 차라리 한 줄에 2개씩해서 아래로 4줄을 넣는건 별로일까요 ?

2개씩 4줄도 괜찮은 것 같습니다!!