[GGFE-46] Game Result List 스타일 #814
Conversation
| @@ -17,24 +27,15 @@ | |||
| .gameResultBig { | |||
| @include imageWrap; | |||
| div { | |||
| @include userImage(4.5rem); | |||
| @include gameResultImage(2.734rem); | |||
There was a problem hiding this comment.
(개인의견입니다) 기존에 비해 사람 얼굴이 많이 작아진 것 같은데 조금 더 키워도 되지 않을까요??
There was a problem hiding this comment.
figma의 px을 그대로 rem으로 변환해서 사용한거긴 한데, 지금 보니까 figma에서도 원래의 디자인에 비해서는 사진이 좀 작긴 하네요 ㅎㅎ 다른 분들 의견도 궁금합니닷
There was a problem hiding this comment.
제가 2등3등에서 gameresultbig를 활용하고 있었는데 제가 수정하겠습니다
|
z-index 수정하는데 시간이 좀 걸릴 것 같아서 일단 PR 닫아두겠습니다 🫠 |
| <div key={index}> | ||
| {gameList.games.map((game: Game) => { | ||
| {data?.pages.map((gameList, pageIndex) => ( | ||
| <React.Fragment key={pageIndex}> |
There was a problem hiding this comment.
React.Fragment가 <> </>요걸 지칭하는걸로 알고 있는데 키값을 쓸 수 있는건 처음알았네요👍
There was a problem hiding this comment.
div 태그를 지우고 빈 태그를 쓰고 싶었는데, <> </> 에는 직접 키값을 넣지 못하더라구요..ㅎㅎ React.Fragment에는 키값을 쓸 수 있길래 이걸로 써 줬습니다 😁
There was a problem hiding this comment.
빈 태그 대신에 React.Fragment 쓸 수 있다는 것 배우고 갑니다!
| @@ -10,10 +10,10 @@ const Home: NextPage = () => { | |||
| <SearchBar /> | |||
| </div> | |||
| <div className={styles.rank}> | |||
| <Section path='rank' /> | |||
| <Section path='rank' sectionTitle={'Ranking'} /> | |||
|
|
|
새로 추가된 디자인들 적용해서 다시 PR 열겠습니다! (새로 추가된 내용들은 위에 정리해둘게요) |
| {isGamePage && !isLast && ( | ||
| <button | ||
| className={styles['getButton']} | ||
| onClick={() => fetchNextPage()} | ||
| > | ||
| <FaChevronDown /> | ||
| </button> |
| }: GameResultBigScoreProps) { | ||
| return ( | ||
| <div className={styles.bigScoreBoard}> | ||
| {makeScoreStatus(status, time)} | ||
| {makeScoreStatus(status, time, radioMode)} |
There was a problem hiding this comment.
컴포넌트 형식으로 바꿔보시는건 어떨까요
해당 함수 방식이 () => JSX.element라서 가능해 보이거든요
components/main/Section.tsx
Outdated
| type pathType = { | ||
| [key: string]: JSX.Element; | ||
| }; |
There was a problem hiding this comment.
type pathType = Record<string, JSX.Element>;
There was a problem hiding this comment.
오... Record type은 처음 봤는데 Index Signature랑 동일한거네요...!
| @@ -48,7 +49,7 @@ export default function UserGameSearchBar() { | |||
| value={keyword} | |||
| /> | |||
| <div className={styles.icons}> | |||
| {keyword ? ( | |||
| {keyword && ( | |||
There was a problem hiding this comment.
There was a problem hiding this comment.
오오 위에 쓴 삼항연산자는 둘다 boolean이라서 괜찮지만 이건 삼항연산자로 수정해주는게 좋겠네요...! 감사합니당
There was a problem hiding this comment.
GoSearch아이콘이 앞에 붙으면서 검색하면 검색창 크기가 바뀌고 x표시가 엄청 작게 보이는 것 같아요!
There was a problem hiding this comment.
뒤의 X 버튼을 keyword가 있는 경우에만 보여주게 했었는데 이렇게 하니까 X 버튼이 없는 경우에 검색창 크기가 줄어드는 것이었습니다... 조건부 랜더링 하는 부분을 삭제하고 visibility 속성을 visible이랑 hidden으로 넣어주는 방식으로 변경했어요!
| <div key={index}> | ||
| {gameList.games.map((game: Game) => { | ||
| {data?.pages.map((gameList, pageIndex) => ( | ||
| <React.Fragment key={pageIndex}> |
There was a problem hiding this comment.
빈 태그 대신에 React.Fragment 쓸 수 있다는 것 배우고 갑니다!
There was a problem hiding this comment.
스토리별로 컴포넌트 확인할 수 있는 거 정말 좋습니다!! live, wait, end 다 잘 되네요! 👍
| } | ||
| &.normal { | ||
| background: linear-gradient(135deg, $norm-lightblue, $norm-hotpink); | ||
| @if ($type == 'SMALL') { |
There was a problem hiding this comment.
믹스인에서 조건문 써서 나눠주는 방법도 있군요. 배워갑니다! 👍
| radioMode?: SeasonMode; | ||
| }; | ||
|
|
||
| function ScoreStatus({ status, time, radioMode }: scoreStatusProps) { |
[GGFE-64] 게임 매뉴얼 모달 스타일 적용
📌 개요
💻 작업사항
z-index 1을 설정하면서 가려지는 match button의 z-index 값 변경단위를 px로 지정했을 때 figma에서 보이는 디자인과 실제 구현된 디자인이 좀 달라 보여서 모든 길이 단위를 16px = 1rem을 기준으로 하는 rem으로 변경해서 지정해두었는데 괜찮은 방법인지 모르겠습니다.... 🤔
❗️ BigItem의 Wait과 Live 상태일때의 디자인은 아직 만들어지지 않아서 기존 디자인 그대로입니다.➡️ 추가완료✅ 변경로직
zIndexListprops를 추가했습니다.radioModeprops를 필요한 곳에 추가했습니다.❗️ gameResultItem들에 min-width를 적용해놨는데 다른 부분들에선 아직 min-width가 적용되지 않아서 모바일 화면 일부, 화면이 많이 줄어들었을 때 이상하게 보이는 문제가 있습니다...