fix: QA 수정 사항 반영

bside-bump · Oct 5, 2024 · d05dd72 · d05dd72
1 parent b02af69
commit d05dd72
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/src/app/(route)/(protected)/ask-condition/page.tsx b/src/app/(route)/(protected)/ask-condition/page.tsx
@@ -10,14 +10,14 @@ const AskConditionPage = () => {
 
   return (
     <div className="px-6">
-      <p className="text-title-lg flex items-center mb-1">
+      <p className="text-title-lg mb-1">
         {thatItemName} {Number(thatItemPrice).toLocaleString()}원이요?
         <Image
           src="/imgs/emoji-surprise.png"
           alt="surprise-emoji"
           width={26}
           height={26}
-          className="inline-block ml-1"
+          className="inline-block ml-1 align-text-top"
         />
       </p>
       <p className="text-title-lg">제 생각에는...</p>

diff --git a/src/app/(route)/(protected)/result/page.tsx b/src/app/(route)/(protected)/result/page.tsx
@@ -131,8 +131,8 @@ const ResultPage = () => {
             imageWidth: 400,
             imageHeight: 400,
             link: {
-              mobileWebUrl: "https://with-that-money.vercel.app",
-              webUrl: "https://with-that-money.vercel.app",
+              mobileWebUrl: `https://with-that-money.vercel.app/result?id=${data?.id}`,
+              webUrl: `https://with-that-money.vercel.app/result?id=${data?.id}`,
             },
           },
           buttons: [
@@ -182,7 +182,7 @@ const ResultPage = () => {
               <div className="flex flex-col items-center mb-10">
                 <p className="text-gray03 font-extrabold text-sm">[결과지]</p>
                 <div className="flex flex-col justify-center items-center mt-2">
-                  <p className="text-title-lg mb-1">
+                  <p className="text-title-lg mb-1 text-center">
                     {thatItemName || data.name}{" "}
                     {formatWithCommas(thatItemPrice || data.price.toString())}
                     원,
@@ -219,10 +219,10 @@ const ResultPage = () => {
                         </div>
                       )}
                     </div>
-                    <div className="flex items-center justify-center mt-2">
-                      <p className="flex items-center">
+                    <div className="mt-2 min-w-28 mx-12">
+                      <p className="text-center">
                         <span className="mr-1 font-bold">{item.name}</span>
-                        <span className="bg-primary04 rounded-md px-[6px] py-[2px] text-white text-sm font-semibold">
+                        <span className="bg-primary04 rounded-md px-[6px] py-[2px] text-white text-sm font-semibold inline-flex align-bottom">
                           {data.recommendationType === "EXPENSIVE" ? (
                             `${item.percentage}%`
                           ) : (
@@ -235,6 +235,12 @@ const ResultPage = () => {
                           )}
                         </span>
                       </p>
+                      {data.recommendationType === "EXPENSIVE" &&
+                        item.percentage.toString() === "0.00" && (
+                          <p className="text-center text-sm font-semibold text-[#FF3E60] mt-3">
+                            0.01%보다 작은 수치는 볼 수 없어요.
+                          </p>
+                        )}
                     </div>
                   </div>
                 ))}

diff --git a/src/app/(route)/ask-item/page.tsx b/src/app/(route)/ask-item/page.tsx
@@ -18,20 +18,21 @@ const AskItemPage = () => {
     <>
       <div className="px-6 flex-1">
         <div className="mb-11">
-          <p className="text-title-lg flex items-center mb-1">
+          <p className="text-title-lg mb-1">
             소비를 망설이고 있나요?
             <Image
               src="/imgs/emoji-sad.png"
               alt="sad-emoji"
               width={26}
               height={26}
-              className="inline-block ml-1"
+              className="inline-block ml-1 align-text-top"
             />
           </p>
           <p className="text-title-lg">어떤 것인지 적어주세요</p>
         </div>
         <div className="mb-12">
           <p className="mb-3">소비를 망설이고 있는 것</p>
+
           <input
             placeholder="오마카세"
             type="text"

diff --git a/src/app/components/select/Chip.tsx b/src/app/components/select/Chip.tsx
@@ -19,7 +19,7 @@ const Chip = ({
     <div className="relative min-w-fit">
       <div
         onClick={onClickChip}
-        className={`min-h-9 font-semibold text-sm text-center rounded-half inline-block px-4 py-2 relative max-h-9 ${
+        className={`min-h-9 font-semibold text-sm text-center rounded-half inline-block px-4 py-2 relative max-h-9 whitespace-nowrap ${
           selectedCategory === value
             ? "bg-black text-primary02"
             : "bg-gray04 text-gray01"

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -6,6 +6,7 @@
   --background: #ffffff;
   --foreground: #171717;
   --min-layout-size: 475px;
+  --border: #535353;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -31,7 +32,7 @@ body {
 @layer base {
   input {
     outline: 0;
-    border-bottom: 2px solid #535353;
+    border-bottom: 2px solid var(--border);
   }
   input[type="number"] {
     appearance: textfield;