-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
사이드바 공용 컴포넌트 구현 및 랭킹 불러오는 기능 구현 (#714)
* chore: react-jsx로 변경 * feat: Flex 공용 컴포넌트 구현 * feat: Text 공용 컴포넌트 구현 * feat: 랭킹 api 호출 기능 구현 * feat: 랭킹 api 모킹 * refactor: Flex 컴포넌트 gap prop 추가 * design: Text 기본 사이즈 재설정 * refactor: 기술 스택 아이콘 이름을 선택적으로 적용 * refactor: 로딩페이지 헤더 삭제 * design: 전역 스타일 적용 * assets: 배너 이미지 추가 * feat: 사이드 위젯 컴포넌트 구현 * design: 전역 색상 적용 * design: 헤더 및 메인 레이아웃 수정 * refactor: 랭커 목데이터 추가 * design: textDecoration 속성 추가 * refactor: Flex 컴포넌트 gap 프로퍼티 수정 * design: text typographyMap 추가 * feat: 모바일용 랭크 컴포넌트 구현 * refactor: rank company 추가 * design: 리스트 필터 반응형 디자인 수정 * design: 사이드위젯 디자인 수정 * design: 반응형 디자인 수정 * test: 게시글 추가 목록 불러오기 임시 주석처리
- Loading branch information
Showing
25 changed files
with
599 additions
and
195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { CSSProperties } from 'react'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| interface FlexProps { | ||
| align?: CSSProperties['alignItems']; | ||
| justify?: CSSProperties['justifyContent']; | ||
| direction?: CSSProperties['flexDirection']; | ||
| gap?: CSSProperties['gap']; | ||
| } | ||
|
|
||
| const Flex = styled.div<FlexProps>(({ align, justify, direction, gap }) => ({ | ||
| display: 'flex', | ||
| alignItems: align, | ||
| justifyContent: justify, | ||
| flexDirection: direction, | ||
| gap: gap ? `${gap}px` : undefined, | ||
| })); | ||
|
|
||
| export default Flex; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import styled, { keyframes } from 'styled-components'; | ||
| import Avatar from '../Avatar/Avatar'; | ||
| import Flex from '../Flex/Flex'; | ||
| import Text from '../Text/Text'; | ||
| import TechLabel from '@/components/TechLabel/TechLabel'; | ||
| import { Rank } from '@/types/rank'; | ||
| import { colors } from '@/styles/colorPalette'; | ||
|
|
||
| interface RankerItemProps { | ||
| supporter: Rank; | ||
| onClick: () => void; | ||
| } | ||
|
|
||
| const RankerItem = ({ supporter, onClick }: RankerItemProps) => { | ||
| return ( | ||
| <ListWrapper as="li" align="center" key={supporter.supporterId} onClick={onClick}> | ||
| <Flex align="center" gap={10}> | ||
| <Text typography="t7">{supporter.rank}</Text> | ||
| <Avatar width="35px" height="35px" imageUrl={supporter.imageUrl} /> | ||
| <Flex direction="column" gap={10}> | ||
| <Flex gap={10} align="center"> | ||
| <Flex direction="column" align="start"> | ||
| <Text>{supporter.name}</Text> | ||
| <Text typography="t8" color="gray500"> | ||
| @{supporter.company} | ||
| </Text> | ||
| </Flex> | ||
| </Flex> | ||
| <CustomFlex justify="space-between"> | ||
| <Flex gap={4}> | ||
| {supporter.technicalTags?.map((tech) => ( | ||
| <TechLabel key={tech} tag={tech} hideText={true} /> | ||
| ))} | ||
| </Flex> | ||
| <Flex gap={5}> | ||
| <Text>완료한 리뷰</Text> | ||
| <Text $bold={true}>{supporter.reviewedCount}</Text> | ||
| </Flex> | ||
| </CustomFlex> | ||
| </Flex> | ||
| </Flex> | ||
| </ListWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| const fadeIn = keyframes` | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| `; | ||
|
|
||
| const ListWrapper = styled(Flex)` | ||
| padding: 10px 15px; | ||
| & { | ||
| cursor: pointer; | ||
| } | ||
| &:hover { | ||
| background-color: ${colors.gray100}; | ||
| } | ||
| @media (max-width: 768px) { | ||
| animation: ${fadeIn} 0.5s ease-out forwards; | ||
| } | ||
| `; | ||
|
|
||
| const CustomFlex = styled(Flex)` | ||
| min-width: 200px; | ||
| @media (max-width: 768px) { | ||
| min-width: 230px; | ||
| } | ||
| `; | ||
|
|
||
| export default RankerItem; |
Oops, something went wrong.