diff --git a/src/components/home/projectCardLists/cardList/CardList.styled.ts b/src/components/home/projectCardLists/cardList/CardList.styled.ts index 54488cf3..f62d3a60 100644 --- a/src/components/home/projectCardLists/cardList/CardList.styled.ts +++ b/src/components/home/projectCardLists/cardList/CardList.styled.ts @@ -67,6 +67,15 @@ export const TagWrapper = styled.div<{ $positionPadding?: boolean }>` z-index: 10; `; +export const SkillTagImgWrapper = styled.div` + border: 1px solid ${({ theme }) => theme.color.grey}; + border-radius: 50%; +`; + +export const SkillTagImg = styled.img` + width: 2rem; +`; + export const EllipsisIconButton = styled.button` display: flex; justify-content: center; diff --git a/src/components/home/projectCardLists/cardList/CardList.tsx b/src/components/home/projectCardLists/cardList/CardList.tsx index d39308d4..23041a4e 100644 --- a/src/components/home/projectCardLists/cardList/CardList.tsx +++ b/src/components/home/projectCardLists/cardList/CardList.tsx @@ -1,5 +1,4 @@ import PositionButton from '../../../common/positionButton/PositionButton'; -import SkillTagImg from '../../../common/skillTagBox/skillTag/skillTagImg/SkillTagImg'; import * as S from './CardList.styled'; import beginner from '../../../../assets/beginner.svg'; import Avatar from '../../../common/avatar/Avatar'; @@ -35,7 +34,9 @@ export default function CardList({ list }: CardListProps) { {Boolean(list.skillTags.length) && listSkillTag.map((tag) => ( - + + + ))} {list.skillTags.length > listSkillTag.length && ( +{othersSkill} diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts index e4a2be59..fa84d453 100644 --- a/src/pages/home/Home.styled.ts +++ b/src/pages/home/Home.styled.ts @@ -2,6 +2,7 @@ import styled from 'styled-components'; export const Container = styled.main` width: 100%; + min-width: 22.7rem; `; export const Wrapper = styled.div`