[GGFE-44] Style Rank Trophy #807

parksangmin1543 · 2023-06-02T05:24:08Z

📌 개요

rank-trophy 메인과 랭킹페이지에 추가

💻 작업사항

트로피메인과 랭킹페이지에 따라 높이값 변경
토글버튼에 따라 색상변경
시즌리스트 디자인 변경
랭킹페이지일때 시즌, 토글 변경시 랭커변경
1,2,3등 순으로 받아오기 때문에 2 1 3등 순으로 변경
모바일 환경일 경우 trophy 위치 조정

✅ 변경로직

PHJoon

고생하셨습니다!! 👍 에러 주석과 콘솔만 처리하시면 될 것 같아요!!

PHJoon · 2023-06-02T08:23:31Z

hooks/rank/useRankList.ts

+    url: makePathRanker,
+    setState: (data) => {
+      const temp = data?.rankList[1];
+      data?.rankList.splice(1, 1);


[data.rankList[0], data.rankList[1]] = [data.rankList[1], data.rankList[0]] 으로도 원하시는 값을 얻을 수 있는 것 같아요!

좋은 방법이네요! 감사합니다

42sungwook

고생하셨습니다!

42sungwook · 2023-06-04T05:42:35Z

components/rank/topRank/.RankListMain.tsx.swp

이거는 잘못생성된 파일인거같은데 맞을까요?

42sungwook · 2023-06-04T05:48:17Z

components/rank/topRank/RankListItemMain.tsx

+              <PlayerImage
+                src={userImageUri} //사진 크기 키우기,
+                styleName={rank === 1 ? 'ranktropy' : 'gameResultBig'}
+                size={50}


주석은 처리가 덜되어서 남아있는 건가요?
스타일을 찾아보니까 gameResultBig이라는 스타일이 존재하지 않는데 삼항연산을 쓰신 이유가 궁금해요!

gameResultBig은 PlayerImage에서 기존에 game결과 보여줄 때 크게 보이는 항목의 사진에 사용하는 스타일으로 알고 있어요! (원래 있던 것이라 변경사항에는 반영되지 않았네요)

gameResultBig은 원래 사용되던 부분이고 ranktropy는 rank가 1등인 경우에만 크기변화가 필요해서 따로 준 부분입니다.

42sungwook · 2023-06-04T05:48:50Z

components/rank/topRank/RankListMain.tsx

  const content = {
    normal: { style: styles.normal, title: 'VIP' },
    rank: { style: '', title: 'Champion' },
    both: { style: '', title: 'Champion' },
  };
-
+  //console.log(rank);


콘솔로그는 지워주세요~

42sungwook · 2023-06-04T05:49:30Z

hooks/mode/useModeToggle.ts

+const useModeToggle = (toggleMode: 'normal' | 'rank') => {
  const [Mode, setMode] = useState(toggleMode);

  const onToggle = (): void => {
-    setMode(Mode === 'RANK' ? 'NORMAL' : 'RANK');
+    setMode(Mode === 'rank' ? 'normal' : 'rank');


이 부분은 다시 소문자로 바뀌는게 맞는건가요?

42sungwook · 2023-06-04T05:50:07Z

hooks/useAxiosGet.ts

@@ -54,7 +54,7 @@ const useAxiosGet = ({
      } else if (type === 'console') {
        console.log(err);
      } else if (type === 'setError') {
-        setError(err);
+        //setError(err);


주석 풀어주세요!

42sungwook · 2023-06-04T05:53:15Z

styles/rank/RankListMain.module.scss

+.leaf {
+  height: 8.4rem;
+  background: linear-gradient(
+    70.48deg,
+    #693200 28.73%,
+    #ed9b00 38.5%,
+    #fede5d 41.72%,
+    #fffdd2 60.48%,
+    #b5661d 73.6%,
+    #5c2f06 76.05%
+  );
+  border-radius: 65px 65px 100px 0px;
+}
+
+.leaf1 {
+  height: 8rem;
+  background: linear-gradient(180deg, #ffcf55 36.24%, #ff823c 73.96%);
+  border-radius: 65px 65px 100px 0px;
+}


이쁘게 잘나오네요 짱이에여👍👍

42sungwook · 2023-06-04T05:54:22Z

styles/rank/RankListMain.module.scss

  font-size: 1.05rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr; /* grid-template-rows로 변경 */


주석으로 남기신 부분들은 확인해주시고 이미 수정된 사항이면 지워주시면 감사하겠습니다~

42sungwook · 2023-06-04T05:54:31Z

styles/rank/RankListMain.module.scss

  color: white;
  font-size: 1.8rem;
  font-family: $title-font;
-  text-shadow: $text-border-black;
+  z-index: 1;
+  //text-shadow: $text-border-black;


42sungwook · 2023-06-04T05:54:59Z

utils/infinityScroll.ts

@@ -18,7 +18,7 @@ export default function InfScroll(path: string) {
    },
    onError: (e: any) => {
      if (e.response.data.code === 'UF001') setError('JB07');
-      else setError('KP01');
+      //else setError('KP01');


여기도 주석 해제해주세요

…rophy

…-Trophy

This reverts commit a74658f.

…yle-Rank-Trophy" This reverts commit cc2e73a, reversing changes made to a74658f.

PHJoon

랭크 트로피 이미지 예쁘게 잘 적용됩니다 👍 코멘트에 남겨놨는데 랭크 트로피에서 intraId 폰트 색상 다른 거랑 뱅 이미지 모바일에서 움직이는 거만 수정하시면 될 듯합니다!! 고생하셨습니다!! 👍

PHJoon · 2023-06-13T08:33:37Z

components/rank/RankList.tsx

-  const seasonMode = 'RANK';
+export const ToggleModeContext = createContext<'RANK' | 'NORMAL'>('RANK');
+
+export default function RankList(prop: RankListProps) {


이 부분은 {toggleMode, season, isMain}: RankListProps로 인자 안에서 구조분해해도 될 것 같아요!

PHJoon · 2023-06-13T08:37:52Z

components/rank/RankList.tsx

+            <RankListItem
+              key={index}
+              toggleMode={toggleMode}
+              user={makeUser(item)}


makeUser의 반환값도 타입 지정해주면 RankListItem에서 타입 경고 없어질 듯 합니다!

PHJoon · 2023-06-13T08:39:45Z

components/rank/topRank/RankListItemMain.tsx

+                styleName={rank === 1 ? 'ranktropybig' : 'ranktropy'}
+                size={50}
+              />
+              <span>{intraId}</span>


피그마 보시면 intraId도 순위에 따라 폰트색깔이 달라지는 것 같아요!!

와 검은색인줄 알았는데 등수에 따라 색상이 다 다르네요 감사합니다!

PHJoon · 2023-06-13T08:42:22Z

components/rank/topRank/RankListMain.tsx

-    both: { style: '', title: 'Champion' },
-  };
+export default function RankListMain({ rank, isMain }: RankListMainProps) {
+  const bangElements = Array.from({ length: 5 }, (_, index) => (


Array를 이렇게도 만들 수 있군요. 배워갑니다!! 👍

PHJoon · 2023-06-13T08:44:02Z

styles/PlayerImage.module.scss

+  }
+}
+
+@media (max-width: 767px) {


미디어쿼리로 화면 크기에 따라 크기 다르게 적용하는 거 좋네요! 👍

PHJoon · 2023-06-13T08:49:27Z

styles/rank/RankListMain.module.scss

+  transform: scale(1.14);
+}
+
+.mainData:nth-child(1) {


nth-child 활용하는 거 배우고 갑니다!! 👍

PHJoon · 2023-06-13T08:50:37Z

styles/PlayerImage.module.scss

@@ -59,3 +59,31 @@
    @include userImage(4.7rem);
  }
 }
+
+.ranktropybig {


플레이어 이미지가 피그마에서는 테두리가 없는데 따로 추가하신 걸까요?

PHJoon · 2023-06-13T08:51:40Z

styles/rank/RankListMain.module.scss

+  margin-top: -7.5rem;
+}
+
+.bang {


모바일 화면에서는 bang이 한쪽으로 쏠려서 나오네요 😱 수정부탁드려요!

알려주신 방법으로 수정해두었습니다!

yoouyeon

CSS 마스터,,,😳 트로피 부분 예쁘게 잘 나오고 에러들도 사라졌네요!! 👍 수고하셨습니다!!

yoouyeon · 2023-06-13T09:20:53Z

components/rank/RankList.tsx

+          {rank?.rankList.map((item: NormalUser | RankUser, index) => (
+            <RankListItem
+              key={index}
+              toggleMode={toggleMode}
+              user={makeUser(item)}
+            />
+          ))}


만약에 rank 배열의 원소가 3개 미만이면 어떻게 되나요? 저번에 시즌 새로 만들었을 때 순위가 2등까지인가 밖에 없었던 것을 본 적이 있었는데 그때는 그냥 비어있었던 것 같아서요. 지금은 어떻게 처리되어있나 보고싶긴 한데 볼 방법이 없네요... (이렇게 직접 확인해보기 어려운 경우에는 story 만들어주시면 좋을 것 같아요 👍)

배열이 부분적으로 없을경우 , 아예없을경우 물음표나오게 처리했습니다. 스토리는 1,2,3등 데이터없을때 에러가 떠서 3등만 없을경우만 확인했습니다.

yoouyeon · 2023-06-13T09:26:39Z

components/rank/RankListItem.tsx

  const { rank, intraId, statusMessage, point, level } = user;
  const myIntraId = useRecoilValue(userState).intraId;
  const wrapStyle = {
-    evenOdd: index % 2 === 0 ? styles.even : styles.odd,
    topStandard: rank < 4 ? styles.top : styles.standard,


여기서 에러나는데 확인해주실 수 있나요? rank의 타입이 string | number라서 < 연산자를 사용할 수 없다는 것 같아요...!
아마 string인 경우에는 styles.standard가 적용되었던 것 같은데, rank가 string인 경우가 잘 고려되고 있는지 (애초에 rank가 string일 필요가 있는지?) 확인해봐야 할 것 같습니다!

ranklist 데이터를 전에는 가입한 모든 분들을 받아와 한번도 안했을경우에도 랭킹에 '-'이렇게 표시하기 위해서 사용했었습니다. 현재는 필요없어서 수정했습니다.

yoouyeon · 2023-06-13T09:34:23Z

components/rank/topRank/RankListItemMain.tsx

+            className={`${
+              rank === 1
+                ? styles.rankNumber1
+                : rank === 2
+                ? styles.rankNumber2
+                : styles.rankNumber3
+            } ${toggleMode === 'NORMAL' && styles.normal}`}


이부분 rank의 값이 1, 2, 3 뿐이라면 ${styles[`rankNumber${rank}`]} 이런 식으로 하면 좀 더 보기 좋을 것 같긴 한데, 위에서 말씀드렸던것처럼 rank가 string인 경우에 어떻게 될지 봐야 할 것 같습니다..!

좋은 방법 감사합니다!

yoouyeon · 2023-06-13T09:40:14Z

styles/PlayerImage.module.scss

+@media (max-width: 467px) {
+  .ranktropy {
+    div {
+      @include userImage(4rem);
+    }
+  }
+  .ranktropybig {
+    div {
+      @include userImage(5rem);
+    }
+  }
+}


너비에 따라 크기 다르게 하니까 확실히 덜 어색한 것 같네요 👍

감사합니다!

yoouyeon · 2023-06-13T09:42:12Z

styles/rank/RankList.module.scss

-  &.vip {
-    text-shadow: $text-border-black, 0.3rem 0.3rem 0 $norm-lightblue2;
-  }
+  margin-top: -4rem;


margin에 음수값을 주신 이유가 무엇인가요???

노티바와 타이틀사이가 멀어서 추가했었는데 통일감을 위해 일단 삭제했습니다. 다른 좋은 방법 생각해보면 좋을것 같아요

yoouyeon · 2023-06-13T09:46:01Z

styles/rank/RankList.module.scss

+  .myRank-text {
+    pointer-events: auto;
+  }


pointer-events: auto 는 여기서 어떤 기능을 하는건가요..?
그리고 myRank-text 를 검색해봤을 때 이 클래스로 지정된 클래스가 없는 것 같은데 어디서 쓰이는건가요?

myrank전체 부분을 클릭할수 있게 되어 방법을 찾는 중에 삭제했어야 하는 부분입니다. 현재는 전과 비슷한 방법으로 수정했습니다

yoouyeon · 2023-06-13T09:49:55Z

styles/rank/RankListMain.module.scss

+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;


background-clip 속성으로 text에만 배경을 적용할 수 있는건가요?? 처음 알았네요 👍

당근 감사합니다!

yoouyeon · 2023-06-13T09:51:30Z

styles/rank/RankListMain.module.scss

+  }
+}
+
+.rankNumber2 {


언뜻 봤을 때 rankNumber1, 2, 3들에 비슷한 속성들이 많아 보이는데 가능하면 mixin으로 합치는 것도 보기에 좋을 것 같아요

mixin을 활용해서 수정했습니다.

…rophy

Sangmin Park added 9 commits May 31, 2023 15:46

[Feat] [GGFE-44] rank matchmode타입에 맞게 수정

ff9e49c

[Feat] [GGFE-44] rank togglemode에 맞게 수정 및 myrank -1로 변경

0b7cb15

[Feat] [GGFE-44] rank togglemode에 맞게 수정 및 myrank -1로 변경

740b697

[Style] [GGFE-44] rank trophy 추가

b1a8fc9

[Style] [GGFE-44] 랭킹페이지에서 tropy추가, api 수정에 따른 타입,url변경

d131d65

[Feat] [GGFE-44] 랭킹페이지 트로피 시즌변경, 랭크 변경시 랭커변경

92b004f

[Style] [GGFE-44] 위치 크기 색상 변경

b5780f1

Merge branch 'GGFE-42-Rank-List' into GGFE-47-Style-Rank-Normal-Chart

ff60165

[Style] [GGFE-47] 차트 스타일 적용

346a2a1

PHJoon approved these changes Jun 2, 2023

View reviewed changes

Sangmin Park added 2 commits June 2, 2023 18:25

[Style] [GGFE-44] 빵빠레 효과 적용

c233f79

[Feat] [GGFE-44] ranklist 로직수정

e80ee80

42sungwook changed the title ~~GGFE-44 style rank trophy~~ [GGFE-44] Style Rank Trophy Jun 3, 2023

42sungwook requested changes Jun 4, 2023

View reviewed changes

42sungwook assigned parksangmin1543 Jun 4, 2023

[Style] [GGFE-47] 차트리스트 normal myrank ranktitle 적용

c78eaa6

parksangmin1543 closed this Jun 5, 2023

Sangmin Park added 5 commits June 5, 2023 18:21

[Style] [GGFE-44] 챔피언 삭제 후 위치 변경

a3aa065

[Style] [GGFE-44] rankpage 피그마에 맞게 짧게 조절

74b82dc

[Style] [GGFE-44] 주석 제거

e720d56

[Feat] [GGFE-44] 토글버튼에 따라 색상번경 빵빠레 5개로 변경 시즌리스트 디자인 z-index변경

7708a81

[Chor] [GGFE-44] togglemodecontext 타입 대문자로 변경

02916cf

parksangmin1543 reopened this Jun 7, 2023

Sangmin Park added 7 commits June 7, 2023 17:43

[Style] [GGFE-47] 위치 수정, 폰트수정, 주석 제거

d1de6ee

[Chore] 주석제거

d11a2de

[Chore] [GGFE-44] gameresultbit 변경에 따라 새로운 ranktropy 추가

a59343e

[Style] [GGFE-44] background-image 색상 변경

d3405ff

[Fix] [GGFE-62] 랭크 타입 관련수정

8eef93b

[Chore] [GGFE-62] 주석 제거

559098f

[Style] [GGFE-47] 일반랭킹 색상 변경

184113c

Sangmin Park and others added 18 commits June 10, 2023 19:00

[Fix] [GGFE-62] myrank css오류 수정

ad02c99

Merge branch 'GGFE-00/Feat/api-refactoring' into GGFE-44-Style-Rank-T…

7248fe3

…rophy

[Style] [GGFE-44] 빵빠레 데이터 없을시 안뜨게 변경

9d8e3a6

Merge branch 'GGFE-62-rank-api-type-bug' into GGFE-44-Style-Rank-Trophy

1a63e76

[Fix] [GGFE-44] rank 타입 버그수정

b530cd9

[Style] [GGFE-44] z-index수정

ceb4fe4

[Style] [GGFE-44] z-index수정

e25cec5

Update RankList.tsx

a74658f

Merge branch 'GGFE-46-Style-Game-Result-List' into GGFE-44-Style-Rank…

cc2e73a

…-Trophy

Revert "Update RankList.tsx"

9784524

This reverts commit a74658f.

Revert "Merge branch 'GGFE-46-Style-Game-Result-List' into GGFE-44-St…

3c03283

…yle-Rank-Trophy" This reverts commit cc2e73a, reversing changes made to a74658f.

[Feat] [GGFE-44] merge후 myrank z-index수정

ae403e1

[Chore] [GGFE-44] console.log 제거

07fa591

[Chore] [GGFE-44] 주석제거

68e3671

[Style] [GGFE-44] 모바일 환경일때크기 값 조정

7e9555f

[Style] [GGFE-44] 모바일 환경일때크기 값 조정

4406e76

[Style] [GGFE-44] myrank 데이터 없을때 디자인 변경, 스크롤 trophy로 인해 생긴 문제 수정

2de350b

[Style] [GGFE-44] 빵빠레 효과 rem-> %로 변경

b0ce1e4

PHJoon requested changes Jun 13, 2023

View reviewed changes

Sangmin Park added 2 commits June 13, 2023 18:24

[Style] [GGFE-44] intraId 색상및테두리변경

9b7fbb2

[Chore] [GGFE-44] 타입 변경

513222f

yoouyeon reviewed Jun 13, 2023

View reviewed changes

Sangmin Park and others added 5 commits June 14, 2023 14:47

Merge branch 'GGFE-60-Set-up-Storybook' into GGFE-44-Style-Rank-Trophy

9eaec10

[Feat] [GGFE-44] ranker에 데이터가 없을 경우 물음표가 나오게 변경, rank타입 변경, 스토리북 추가

9179c4b

Merge branch 'GGFE-00/Feat/api-refactoring' into GGFE-44-Style-Rank-T…

49d56ba

…rophy

[Style] [GGFE-44] 스타일버튼 서치바 z-index값 변경

79c0af4

[Fix] [GGFE-44] img priority & package-lock

e2818d2

42sungwook merged commit bdbc419 into GGFE-00/Feat/api-refactoring Jun 15, 2023

42sungwook deleted the GGFE-44-Style-Rank-Trophy branch June 19, 2023 11:05

[GGFE-44] Style Rank Trophy #807

[GGFE-44] Style Rank Trophy #807

Conversation

parksangmin1543 commented Jun 2, 2023 • edited Loading

📌 개요

💻 작업사항

✅ 변경로직

PHJoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

42sungwook left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PHJoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoouyeon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parksangmin1543 commented Jun 2, 2023 •

edited

Loading