feat: 혜택 관리 페이지 테이블 뷰로 변경

src/pages/Services/Benefit/index.style.tsx

@@ -33,32 +33,37 @@ export const Wrapper = styled.div`
 
 `;
 
-export const ShopContainer = styled.div`
+export const Row = styled.tr<{ isclicked: boolean }>`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  grid-template-rows: repeat(auto-fill, 80px);
-  place-items: center;
+  grid-template-columns: 40% 60%;
+  cursor: pointer;
+  width: 100%;
+  height: 50px;
+  border: ${(props) => (props.isclicked ? '1px solid rgba(129, 173, 255, 0.8) ' : '1px solid #f0f0f0')};
 `;
 
-export const Button = styled.button<{ isclicked: boolean }>`
-  cursor: pointer;
-  width: 150px;
+export const HeaderRow = styled.tr`
+  display: grid;
+  grid-template-columns: 40% 60%;
+  width: 100%;
   height: 50px;
-  background: #fff;
-  text-align: center;
-  transition: scale 0.2s;
-  border: ${(props) => (props.isclicked ? '4px solid rgba(129, 173, 255, 0.8) ' : 'none')};
-  border-radius: 10px;
+  border: 1px solid #f0f0f0;
+`;
+
+export const HeaderItem = styled.th`
+  padding: 15px;
+`;
+
+export const TitleItem = styled.td`
+  padding: 15px;
+`;
 
-  &:active {
-    scale: 0.95;
-  }
+export const DetailItem = styled.td`
+  padding: 15px;
 `;
 
-export const ShopListContainer = styled.div`
-  background: #ddd;
-  padding: 25px;
-  height: 60%;
+export const ShopList = styled.table`
   width: 100%;
-  overflow-y: auto;
+  border-spacing: 0 10px;
+  border-collapse: collapse;
 `;

src/pages/Services/Benefit/index.tsx

@@ -141,21 +141,33 @@ export default function BenefitPage() {
             </CustomForm.Modal>
           </S.ButtonContainer>
         </S.SideContainer>
-        <S.ShopListContainer>
-          {selected ? (
-            <S.ShopContainer>
+        {selected ? (
+          <S.ShopList>
+            <thead>
+              <S.HeaderRow>
+                <S.HeaderItem>상점명</S.HeaderItem>
+                <S.HeaderItem>상세정보</S.HeaderItem>
+              </S.HeaderRow>
+            </thead>
+            <tbody>
               {data?.shops.map((shop) => (
-                <S.Button
+                <S.Row
                   isclicked={selectedShop.includes(shop.id)}
                   onClick={() => onShopClick(shop.id)}
                   key={shop.id}
                 >
-                  {shop.name}
-                </S.Button>
+                  <S.TitleItem>
+                    {shop.name}
+                  </S.TitleItem>
+                  <S.DetailItem>
+                    {shop.detail}
+                  </S.DetailItem>
+                </S.Row>
               ))}
-            </S.ShopContainer>
-          ) : null}
-        </S.ShopListContainer>
+            </tbody>
+          </S.ShopList>
+
+        ) : null}
       </S.Container>
     </S.Wrapper>
   );