From 1297bc3ab656da580cf2cf39d84f31f072fd02fe Mon Sep 17 00:00:00 2001 From: yubin Date: Mon, 24 Jun 2024 15:38:50 +0900 Subject: [PATCH] =?UTF-8?q?[#28]=20feat:=20index.ts=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20/=20compare=20table=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/compare/input/CompareInput.tsx | 2 +- src/app/compare/table/CompareTable.module.scss | 15 +++++++++++---- src/app/compare/table/CompareTable.tsx | 14 ++++++++------ src/components/Chip/Category-chip/index.ts | 1 + src/components/Chip/Category-filter/index.ts | 1 + src/components/Chip/Compare/Compare.tsx | 4 +++- src/components/Chip/Compare/index.ts | 1 + src/components/Chip/Thumbs/index.ts | 1 + 8 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 src/components/Chip/Category-chip/index.ts create mode 100644 src/components/Chip/Category-filter/index.ts create mode 100644 src/components/Chip/Compare/index.ts create mode 100644 src/components/Chip/Thumbs/index.ts diff --git a/src/app/compare/input/CompareInput.tsx b/src/app/compare/input/CompareInput.tsx index 2e472040..af4ca912 100644 --- a/src/app/compare/input/CompareInput.tsx +++ b/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"; diff --git a/src/app/compare/table/CompareTable.module.scss b/src/app/compare/table/CompareTable.module.scss index 3e9e9cc9..a71df13c 100644 --- a/src/app/compare/table/CompareTable.module.scss +++ b/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; } } diff --git a/src/app/compare/table/CompareTable.tsx b/src/app/compare/table/CompareTable.tsx index 0a1dc4f6..74a31790 100644 --- a/src/app/compare/table/CompareTable.tsx +++ b/src/app/compare/table/CompareTable.tsx @@ -40,8 +40,8 @@ const CompareTable: React.FC = ({ product1, product2 }) => { key={criterion.name} > {criterion.name} - {criterion.product1} - {criterion.product2} + {criterion.product1.toFixed(1).replace(/\.0$/, "")} + {criterion.product2.toFixed(1).replace(/\.0$/, "")} {result} ); @@ -51,11 +51,11 @@ const CompareTable: React.FC = ({ 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 = ({ product1, product2 }) => {
-
- {winningProduct} {overallResult} +
+
{winningProduct}
+ {overallResult !== "무승부입니다!" && "상품이"}
+
{overallResult}
3가지 항목 중 {Math.max(product1Wins, product2Wins)}가지 항목에서 우세합니다. diff --git a/src/components/Chip/Category-chip/index.ts b/src/components/Chip/Category-chip/index.ts new file mode 100644 index 00000000..12a43289 --- /dev/null +++ b/src/components/Chip/Category-chip/index.ts @@ -0,0 +1 @@ +export { default as CategoryChip } from "./CategoryChip"; diff --git a/src/components/Chip/Category-filter/index.ts b/src/components/Chip/Category-filter/index.ts new file mode 100644 index 00000000..085e5968 --- /dev/null +++ b/src/components/Chip/Category-filter/index.ts @@ -0,0 +1 @@ +export { default as CategoryFilter } from "./CategoryFilter"; diff --git a/src/components/Chip/Compare/Compare.tsx b/src/components/Chip/Compare/Compare.tsx index 3186cf2d..07681369 100644 --- a/src/components/Chip/Compare/Compare.tsx +++ b/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 (
@@ -26,3 +26,5 @@ export function Compare({ value, onRemove, color }: CompareProps) {
); } + +export default Compare; diff --git a/src/components/Chip/Compare/index.ts b/src/components/Chip/Compare/index.ts new file mode 100644 index 00000000..28998a31 --- /dev/null +++ b/src/components/Chip/Compare/index.ts @@ -0,0 +1 @@ +export { default as Compare } from "./Compare"; diff --git a/src/components/Chip/Thumbs/index.ts b/src/components/Chip/Thumbs/index.ts new file mode 100644 index 00000000..2d4ce4f4 --- /dev/null +++ b/src/components/Chip/Thumbs/index.ts @@ -0,0 +1 @@ +export { default as Thumbs } from "./Thumbs";