refactor: 접근성 개선 및 상품명 1줄만 나오도록 변경

feb-dain · May 15, 2023 · 6f13553 · 6f13553
1 parent abf8436
commit 6f13553
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/ProductItem.tsx b/src/components/ProductItem.tsx
@@ -39,10 +39,12 @@ const ProductItem = ({ id, imgUrl, name, price }: Props) => {
 
   return (
     <div>
-      <S.Image src={imgUrl} />
+      <S.Image src={imgUrl} alt={name} />
       <S.InfoWrapper>
         <div>
-          <S.Name htmlFor={name}>{name}</S.Name>
+          <S.Name htmlFor={name} title={name}>
+            {name}
+          </S.Name>
           <S.Price>
             {price.toLocaleString()}
             <span>원</span>
@@ -79,12 +81,17 @@ const S = {
   `,
 
   Name: styled.label`
+    display: -webkit-box;
     margin-right: 4px;
     font-weight: 400;
     line-height: 1.4;
     letter-spacing: 0.5px;
     color: var(--text-color);
     opacity: 0.9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
 
     @media (max-width: 1270px) {
       font-size: 15px;