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-173] 보관함 프로필 이미지띠 배경색 모달 #945

Merged

Conversation

hyobb109
Copy link
Member

📌 개요

  • 보관함 프로필 이미지띠, 배경색 변경 모달

💻 작업사항

  • 두 모달이 크게 다른 부분이 없어서 배경색 모달을 이미지띠 모달 브랜치에 이어서 작업하였습니다
  • 이미지띠 색상은 이미지띠 모달에서 뽑기 버튼을 누르면 임시 미리보기 컴포넌트에서 확인할 수 있습니다.
  • 배경색은 더미 데이터의 backgroundType을 변경하면서 확인할 수 있습니다
  • useProfileColor 커스텀훅을 추가하여 colorMode를 바꿔서 배경색이 변경되도록 했습니다
  • 미리보기는 뽑기 애니메이션과 함께 작업할 예정입니다
  • 이미지띠, 배경색에 대한 의견도 자유롭게 부탁드립니다

✅ 변경로직

@hyobb109 hyobb109 self-assigned this Aug 19, 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.

프로필 배경색들 1번부터 16번까지 다 예쁘네요! 배경색, 프로필 테두리 색상 찾느라 고생많으셨습니다!
기존에 있는 colorModeState 활용하여 훅 만들어서 사용하는 것도 작동도 잘하고 엄청 좋은 것 같아요!
배경색은 티어 색상이랑 겹칠 수도 있어서 티어 색상들과 비교해 볼 필요가 있는거 같아요.
일단, 4번 배경색에서 노란색 티어가 잘 안보일 수도 있을 듯하네요. 고생하셨습니다!! 👍👍

Comment on lines 85 to 100
$profile-background1: linear-gradient(to bottom, #ef629f, #eecda3);
$profile-background2: linear-gradient(to bottom, #acb6e5, #86fde8);
$profile-background3: linear-gradient(to bottom, #00416a, #e4e5e6);
$profile-background4: linear-gradient(to top, #ffe259, #ffa751);
$profile-background5: linear-gradient(to bottom, #215f00, #e4e4d9);
$profile-background6: linear-gradient(to top, #3d7eaa, #ffe47a);
$profile-background7: linear-gradient(to top, #dc2424, #4a569d);
$profile-background8: linear-gradient(to bottom, #1cd8d2, #93edc7);
$profile-background9: linear-gradient(to bottom, #757f9a, #d7dde8);
$profile-background10: linear-gradient(to bottom, #870000, #190a05);
$profile-background11: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff);
$profile-background12: linear-gradient(to top, #9cecfb, #65c7f7, #0052d4);
$profile-background13: linear-gradient(to top, #77a1d3, #79cbca, #e684ae);
$profile-background14: linear-gradient(to top, #a770ef, #cf8bf3, #fdb99b);
$profile-background15: linear-gradient(to top, #bbd2c5, #536976, #292e49);
$profile-background16: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
Copy link
Contributor

@PHJoon PHJoon Aug 20, 2023

Choose a reason for hiding this comment

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

배경색도 그렇고 프로필 테두리색도 색 이름이 존재한다면 변수명에 포함시켜야 나중에 관리하기 더 쉬울 것 같아요. 색 이름이 없다면 간단하게라도 포함된 색들로 이름 만들어서 포함시켜주면 한번에 색상 파악하기 좋을거 같습니다!

Copy link
Member Author

Choose a reason for hiding this comment

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

넵 안그래도 이름 바꿔야겠다고 생각했어요😂 수정하겠습니다!

@hyobb109
Copy link
Member Author

우선 배경색, 이미지띠 색 변수명을 색상을 알아볼 수 있도록 수정했습니다! 또추후에 티어 이미지 추가되면 티어가 잘 보이도록 몇몇 색상 변경할 수도 있을 것 같습니다

@hyobb109 hyobb109 merged commit 11d5d01 into main Aug 22, 2023
@hyobb109 hyobb109 deleted the GGFE-173-보관함-프로필-이미지띠-배경색-모달 branch August 22, 2023 06:09
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.

2 participants