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.

Sign up for GitHub

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-179] tier 색상부분 수정 #933

Merged
merged 2 commits into from
Aug 16, 2023
Merged

[GGFE-179] tier 색상부분 수정 #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
64ecf40
[refactor] [GGFE-179] tier 색상부분 수정
Aug 14, 2023
804cf70
[Style] [GGFE-179]
Aug 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions components/Layout/MenuBar/MenuBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ const MenuProfile = () => {
getProfile();
}, []);

const tierIndex = useRecoilValue(tierIdSelector);
const tierId = useRecoilValue(tierIdSelector);
const findTierIndex =
tierIndex === -1 ? styles.tierId : styles['tierId' + tierIndex.toString()];
tierId === 'none' ? styles.tierId : styles['tierId' + tierId];

return (
<div className={styles.menuProfileWrapper}>
Expand All @@ -76,15 +76,16 @@ const MenuProfile = () => {
</Link>
<div className={styles.userInfoWrapper}>
<div className={styles.userId}>
<div className={`${styles.tierId} ${findTierIndex}`}>
<div className={`${styles.tierContainer}`}>
<PlayerImage
src={profile.tierImageUri}
styleName={'ranktier'}
size={50}
/>
&nbsp;
{profile.tierName}
<br />
<div className={`${styles.tierId} ${findTierIndex}`}>
{profile.tierName}
</div>
</div>
<Link
href={`/users/detail?intraId=${user.intraId}`}
Expand Down
4 changes: 2 additions & 2 deletions components/user/BasicProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ export default function BasicProfile({ profileId }: ProfileProps) {
tierName,
} = useBasicProfile({ profileId });

const tierIndex = useRecoilValue(tierIdSelector);
const tierId = useRecoilValue(tierIdSelector);
const findTierIndex =
tierIndex === -1 ? styles.tierId : styles['tierId' + tierIndex.toString()];
tierId === 'none' ? styles.tierId : styles['tierId' + tierId];

return (
<div className={styles.container}>
Expand Down
2 changes: 1 addition & 1 deletion pages/api/pingpong/users/intraId.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function handler(
currentExp: 123,
maxExp: 123,
tierImageUri: '/image/fallBackSrc.jpeg',
tierName: '무지개 탁구채',
tierName: '노랑 탁구채',
expRate: 123,
snsNotiOpt: 'EMAIL',
};
Expand Down
8 changes: 5 additions & 3 deletions styles/Layout/MenuBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,14 @@
font-size: 1.3rem;
font-weight: 700;
color: rgba(43, 43, 43, 1);
.tierId {
@include tierNumber();
.tierContainer {
display: flex;
flex-direction: row;
align-items: center;
font-size: 1rem;
.tierId {
@include tierNumber();
font-size: 1rem;
}
}
}
.userLevel {
Expand Down
28 changes: 14 additions & 14 deletions styles/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,41 +333,41 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
font-family: Gugi;
background: black;
@include txtColor();
&.tierId1 {
&.tierIdred {
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
@include txtColor();
}
&.tierId2 {
&.tierIdyellow {
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
@include txtColor();
}
&.tierId3 {
&.tierIdgreen {
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
@include txtColor();
}
&.tierId4 {
&.tierIdblue {
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
@include txtColor();
}
&.tierId5 {
&.tierIdblack {
background: linear-gradient(
180.89deg,
rgba(178, 178, 178, 0.552801) 26.68%,
rgba(102, 102, 102, 0.3) 47.47%,
rgba(102, 102, 102, 0.51) 65.76%,
rgba(114, 114, 114, 0.553) 26.68%,
rgba(82, 82, 82, 0.3) 47.47%,
rgba(61, 61, 61, 0.51) 65.76%,
rgba(0, 0, 0, 0) 84.03%
);
@include txtColor();
}
&.tierId6 {
&.tierIdrainbow {
background: linear-gradient(
90deg,
rgba(239, 80, 80, 0.553) 15%,
rgba(255, 255, 102, 0.552801) 35.66%,
rgba(77, 233, 77, 0.553) 45.33%,
rgba(48, 145, 241, 0.553) 70%,
rgba(102, 102, 102, 0.3) 80.66%,
rgba(255, 209, 91, 0.51) 100%
#f6d365 38%,
rgba(60, 238, 60, 0.553) 45.33%,
rgba(10, 122, 234, 0.867) 70%,
rgba(26, 26, 27, 0.568) 80.66%,
rgb(123, 97, 224) 100%
);
@include txtColor();
}
Expand Down
2 changes: 1 addition & 1 deletion styles/user/Profile.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
font-size: $small-font;
align-items: center;
text-align: center;
background-color: #73cce4;
background-color: #8fc7fb9a;
.tierId {
@include tierNumber;
font-size: 0.9rem;
Expand Down
13 changes: 11 additions & 2 deletions utils/recoil/tierColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,21 @@ import { selector } from 'recoil';
import { profileState } from './user';
import { v1 } from 'uuid';

export const tierIdSelector = selector<number>({
export const tierIdSelector = selector<string>({
key: `profileState/${v1()}`,
get: ({ get }) => {
const myTier = get(profileState).tierName;
const tierList = ['손', '빨', '노', '초', '파', '검', '무'];
const tierColor = [
'none',
'red',
'yellow',
'green',
'blue',
'black',
'rainbow',
];
const index = tierList.findIndex((tier) => tier[0] === myTier[0]);
return index;
return tierColor[index];
},
});