Design: 커뮤니티 UI 구현

[mung96]

#️⃣연관된 이슈

#13

📝작업 내용

추가된 라이브러리 & 플러그인

• dayjs : 시간과 날짜를 편리하게 조작할수 있도록 도와주는 라이브러리 (타이머 구현시 사용)

다음 페이지들 UI 구현

• 랭킹페이지
• 친구페이지
• 채팅페이지
• 베팅페이지

🐛버그 있음

(한번만 확인해주세요. 안고쳐지면 이번 pr 머지하고 작업하면서 계속 찾아보겠습니다.)

• 랭킹페이지에 그라데이션 색상이 세은이 코드와 충돌함.

// tailwind.config.js L39

      Ranking_Bar_Start: '#88A0E9',
      Ranking_Bar_End: '#C7A4F4',
    },    //1번

     backgroundImage: {
    gradient: 'linear-gradient(0.25turn,#3F70DD, #B377F3)',
    },   //2번

문제: 1번과 2번 동시 적용이 안됨.

• 1번 구간 주석처리시 홈페이지 그라데이션 적용가능
• 2번 구간 주석처리시 랭킹페이지 그라데이션 적용가능
• 하지만 주석을 모두 풀었을때 동시 적용이 안됨

🔥 check your project preview here!

[ChaMinXD]

이슈 문제는 아마 계층문제가 아닐지..?

[se-eun-park]

우선 코드 보기 전에, 버셀 먼저 확인했는데 해상도가 1920일 때, 화면 너비가 모자랍니다! 그리고 배경색도 figma와 다른 것 같아요. 개발자도구로 해상도 왔다갔다 하면서, 너비와 비율 유지되도록 코드 수정하면 좋을 것 같습니다.

[se-eun-park]

UI 너비를 큰 해상도에서도 어느정도 호환되도록 바꿔주세요! Dark모드 적용 안된 폰트 컬러들도 꽤나 보입니당.

[se-eun-park]

    extend: {
      backgroundImage: {
        gradient: 'linear-gradient(0.25turn,#3F70DD, #B377F3)',
      },
    },

theme에서 extend로 컬러 위치를 옮겼더니 해결됐습니다. theme에 적용한 색들은 기본 컬러들을 덮어써서 등록한 컬러 외엔 사용할 수 없게 하기 때문에 (의도한 설정임) 발생한 문제같습니다!

[se-eun-park]

바뀐거 확인했습니다! 수고하셨어용

[ChaMinXD]

확인이요~

[ChaMinXD]

고생고생