Merge pull request #203 from D3vPals/feat/#195

page Home min-width 설정, 카드리스트 스킬태그 이미지 고정으로 수정 (# issue 195)

Author: YouD0313

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;

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) {
       <S.TagsWrapper>
         {Boolean(list.skillTags.length) &&
           listSkillTag.map((tag) => (
-            <SkillTagImg image={tag.img} key={tag.id} skillTag={tag.name} />
+            <S.SkillTagImgWrapper key={tag.id}>
+              <S.SkillTagImg src={tag.img} alt={tag.name} />
+            </S.SkillTagImgWrapper>
           ))}
         {list.skillTags.length > listSkillTag.length && (
           <S.EllipsisIconButton>+{othersSkill}</S.EllipsisIconButton>

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`