[#28] feat: index.ts 추가 / compare table 수정

src/app/compare/input/CompareInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, ChangeEvent, KeyboardEvent } from "react";
 import { STORAGE_PRODUCT_A, STORAGE_PRODUCT_B } from "@/app/compare/constant/constant";
 import { Product } from "@/app/compare/input/compareProductItem";
-import { Compare } from "@/components/Chip/Compare/Compare";
+import { Compare } from "@/components/Chip/Compare";
 import styles from "./CompareInput.module.scss";
 import { saveToLocalStorage, getFromLocalStorage } from "./localStorage";
 

src/app/compare/table/CompareTable.module.scss

@@ -9,7 +9,7 @@
 }
 
 .resultBox {
-  margin-top: 80px;
+  margin-top: 70px;
   margin-bottom: 40px;
   text-align: center;
 }
@@ -19,7 +19,7 @@
   gap: 8px;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20px;
+  margin: 0 20px 20px;
   font-size: 24px;
   font-weight: 600;
 
@@ -28,6 +28,11 @@
   }
 }
 
+.productBox {
+  display: flex;
+  gap: 8px;
+}
+
 .winnerText {
   color: $green-100;
 }
@@ -74,21 +79,23 @@
 }
 
 .th {
+  width: 30px;
   padding: 20px;
   text-align: center;
-  width: 30px;
 
   @include respond-to(mobile) {
-    padding: 15px;
     width: auto;
+    padding: 15px;
   }
 }
 
 .td {
+  width: 300px;
   padding: 30px;
   text-align: center;
 
   @include respond-to(mobile) {
+    width: auto;
     padding: 15px;
   }
 }

src/app/compare/table/CompareTable.tsx

@@ -40,8 +40,8 @@ const CompareTable: React.FC<CompareTableProps> = ({ product1, product2 }) => {
           key={criterion.name}
         >
           <td className={`${styles.td} ${styles.name}`}>{criterion.name}</td>
-          <td className={styles.td}>{criterion.product1}</td>
-          <td className={styles.td}>{criterion.product2}</td>
+          <td className={styles.td}>{criterion.product1.toFixed(1).replace(/\.0$/, "")}</td>
+          <td className={styles.td}>{criterion.product2.toFixed(1).replace(/\.0$/, "")}</td>
           <td className={`${resultClass} ${styles.td}`}>{result}</td>
         </tr>
       );
@@ -51,11 +51,11 @@ const CompareTable: React.FC<CompareTableProps> = ({ product1, product2 }) => {
     let winningProduct = "";
     let resultClass = "";
     if (product1Wins > product2Wins) {
-      overallResult = "상품이 승리하였습니다!";
+      overallResult = "승리하였습니다!";
       winningProduct = product1.name;
       resultClass = styles.winnerText;
     } else if (product1Wins < product2Wins) {
-      overallResult = "상품이 승리하였습니다!";
+      overallResult = "승리하였습니다!";
       winningProduct = product2.name;
       resultClass = styles.loserText;
     } else {
@@ -72,9 +72,11 @@ const CompareTable: React.FC<CompareTableProps> = ({ product1, product2 }) => {
     <div className={styles.compare}>
       <div className={styles.resultBox}>
         <div className={styles.result}>
-          <div>
-            <span className={`${styles.colorText} ${resultClass}`}>{winningProduct}</span> {overallResult}
+          <div className={styles.productBox}>
+            <div className={`${styles.colorText} ${resultClass}`}>{winningProduct}</div>
+            {overallResult !== "무승부입니다!" && "상품이"}
           </div>
+          <div>{overallResult}</div>
         </div>
         <div className={styles.reason}>
           3가지 항목 중 {Math.max(product1Wins, product2Wins)}가지 항목에서 우세합니다.

src/components/Chip/Category-chip/index.ts

@@ -0,0 +1 @@
+export { default as CategoryChip } from "./CategoryChip";

src/components/Chip/Category-filter/index.ts

@@ -0,0 +1 @@
+export { default as CategoryFilter } from "./CategoryFilter";

src/components/Chip/Compare/Compare.tsx

@@ -9,7 +9,7 @@ type CompareProps = {
   color?: boolean;
 };
 
-export function Compare({ value, onRemove, color }: CompareProps) {
+function Compare({ value, onRemove, color }: CompareProps) {
   return (
     <div className={styles.back}>
       <div className={`${styles.container} ${color ? styles.compare1 : styles.compare2}`}>
@@ -26,3 +26,5 @@ export function Compare({ value, onRemove, color }: CompareProps) {
     </div>
   );
 }
+
+export default Compare;

src/components/Chip/Compare/index.ts

@@ -0,0 +1 @@
+export { default as Compare } from "./Compare";

src/components/Chip/Thumbs/index.ts

@@ -0,0 +1 @@
+export { default as Thumbs } from "./Thumbs";