Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GGFE-193] 상점 구매페이지 css #963

Merged
merged 9 commits into from
Aug 29, 2023

Conversation

hyobb109
Copy link
Member

📌 개요

  • 상점 구매페이지 CSS 디자인 수정

💻 작업사항

  • 코인 이미지 컴포넌트 적용
    • 상점 페이지 내 코인과 코인 내역 모달에 코인 이미지 컴포넌트 만들어 적용했습니다.
  • 구매 탭 아이템 카드 컴포넌트 디자인을 grid 적용하여 수정했습니다, 이미지는 png로 들어갈 예정입니다. 모든 피드백 환영입니다!
  • 상점 매뉴얼 내용 피드백 받은 부분 수정했습니다

✅ 변경로직

@hyobb109 hyobb109 self-assigned this Aug 25, 2023
Copy link
Contributor

@PHJoon PHJoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아이템 카드 배치 예쁘네요! 할인 가격 보여주는 부분도 전보다 훨씬 깔끔한거 같아요! 고생하셨습니다!! 👍👍

Comment on lines 54 to 56
.mainContent {
padding-right: 0.3rem;
font-size: 0.85rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mainContent는 가운데 정렬해도 괜찮은거 같아요

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen_Shot 2023-08-28 11 15 09

가운데 정렬하게 되면 제목이 길어지는 경우에 줄바꿈되게 되었을 때도 괜찮을지 모르겠어요!! (가운데 정렬이 별로라는게 아니고 진짜 괜찮은지 모르겠다 입니다.. 🥲)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

줄이 길어지면 이상하네요. 왼쪽 정렬하는게 맞겠네요 🥲

Copy link
Contributor

@parksangmin1543 parksangmin1543 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구매페이지 디자인이 변경되서 더 많은 정보를 줘서 좋은것같습니다. 모바일일때 코인이 밑으로 내려가는 것만 수정해주시면 좋을것같습니다.

Copy link
Member

@yoouyeon yoouyeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존 디자인보다 확실히 안정감있는 것 같아요 ㅋㅋ 디자인 피드백 받길 잘했네여 🥳 수고하셨습니다!! 😆👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen_Shot 2023-08-28 11 01 13

글자 크기 비율들을 바꿔보았는데 요런 느낌은 어떨까요???

  • title, mainContent 크기를 늘리고 (1.3rem, 1rem)
  • priceTag 늘리고 (0.9rem)
  • subContent, badge 크기 줄이고 (0.8rem)

이렇게 적용한건데 제가 적용한 크기들은 그냥 참고용이고 제 의견의 핵심은 제목이 좀 더 크면 좋겠다! 입니다 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

크기를 키우면 두 줄이 되어버려서 프리뷰 이미지 크기를 줄이고 타이틀을 조금 키웠습니다!

@@ -15,7 +16,9 @@ const itemList: Item[] = [
{
itemId: 2,
itemName: '확성기',
content: '확성기 설명',
mainContent: '오늘 하루 42GG는 내가 접수한다📢😎',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확성기 mainContent가 다른 것들에 비해서 길이가 길어서 크기 설정하기 좀 애매해지는 것 같은데 만약 문장 길이를 줄여도 괜찮다면 "오늘 42GG는 내가 접수한다 📢😎" 로 줄여도 좋을 것 같아요.

Comment on lines 54 to 56
.mainContent {
padding-right: 0.3rem;
font-size: 0.85rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen_Shot 2023-08-28 11 15 09

가운데 정렬하게 되면 제목이 길어지는 경우에 줄바꿈되게 되었을 때도 괜찮을지 모르겠어요!! (가운데 정렬이 별로라는게 아니고 진짜 괜찮은지 모르겠다 입니다.. 🥲)

@hyobb109 hyobb109 merged commit 66a72b0 into main Aug 29, 2023
1 check passed
@hyobb109 hyobb109 deleted the GGFE-193-상점-구매페이지-CSS branch August 30, 2023 02:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants