fix: button variant 추가, 방석 있는 이미지로 변경

Author: JKyEun

public/empty-character.png

@@ -4,25 +4,30 @@ import { cn } from "@/utils/cn";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
+  variant?: "black" | "white";
 }
 
 export default function Button({
   className,
   disabled,
   children,
   asChild = false,
+  variant = "black",
   ...props
 }: ButtonProps) {
   const Component = asChild ? Slot.Slot : "button";
 
   return (
     <Component
       className={cn(
-        "w-fit px-9 py-4 rounded-[32px] transition-colors",
+        "w-fit px-9 py-4 rounded-[32px] transition-colors t-p-14-sb",
         "inline-flex items-center justify-center gap-[10px]",
         "shadow-[2px_2px_16px_0_rgba(0,0,0,0.4)]",
         {
-          "bg-neutral-800 text-neutral-100 active:bg-neutral-900": !disabled,
+          "bg-neutral-800 text-neutral-100 active:bg-neutral-900":
+            !disabled && variant === "black",
+          "bg-neutral-100 text-neutral-800 active:bg-neutral-300 active:shadow-[2px_2px_8px_0_rgba(0,0,0,0.4)]":
+            !disabled && variant === "white",
           "bg-neutral-400 text-neutral-500 cursor-not-allowed": disabled,
         },
         className

src/components/Button.tsx

@@ -38,7 +38,9 @@ export default function MissionNotTriedFailed({
       </div>
 
       <div className="flex justify-center gap-2 px-[30px] pb-6">
-        <Button onClick={onRetry}>재도전</Button>
+        <Button variant="white" onClick={onRetry}>
+          다시 도전
+        </Button>
       </div>
     </>
   );

src/routes/mission/$missionId/-components/MissionNotTriedFailed.tsx

@@ -44,9 +44,13 @@ export default function MissionNotTriedReviewing({
       </div>
 
       <div className="flex justify-center gap-2 pt-4 pb-6">
-        <Button onClick={onFailed}>실패</Button>
         <Button onClick={onRetry}>재촬영</Button>
-        <Button onClick={onSuccess}>성공</Button>
+        <Button variant="white" onClick={onFailed}>
+          실패
+        </Button>
+        <Button variant="white" onClick={onSuccess}>
+          성공
+        </Button>
       </div>
     </>
   );

src/routes/mission/$missionId/-components/MissionNotTriedReviewing.tsx

@@ -150,13 +150,9 @@ export default function MissionResultView({
           </Button>
         )}
         {onRetry && (
-          <button
-            type="button"
-            className="t-p-14-sb bg-neutral-100 rounded-[32px] px-9 py-4 shadow-[2px_2px_16px_0_rgba(0,0,0,0.4)]"
-            onClick={onRetry}
-          >
+          <Button variant="white" onClick={onRetry}>
             다시 도전
-          </button>
+          </Button>
         )}
       </div>
     </>

src/routes/mission/$missionId/-components/MissionResultView.tsx

@@ -1,3 +1,5 @@
+import Button from "@/components/Button";
+
 const STATUS_LABELS = {
   all: "더 이상 해결할",
   success: "성공한",
@@ -19,24 +21,19 @@ export default function MissionEmpty({
         alt="Mission Empty"
         className="w-[120px] h-[128px]"
       />
-      <div className="w-[100px] h-[20px] rounded-[50%] bg-neutral-400 mt-[-10px] z-[-1]" />
       <div className="flex flex-col items-center gap-2 mt-[17px]">
         <span className="t-p-18-sb text-neutral-100">
           {STATUS_LABELS[status]} 미션이 없어요
         </span>
-        <span className="t-p-14-m text-neutral-300">
+        <span className="t-p-14-m text-neutral-300 mb-[24px]">
           {status === "not_tried"
             ? "오늘의 문제를 모두 해결했어요!"
             : "완등하기 좋은 문제를 추천해드릴게요."}
         </span>
       </div>
-      <button
-        type="button"
-        className="t-p-14-sb bg-neutral-100 rounded-[32px] px-9 py-4 shadow-[2px_2px_16px_0_rgba(0,0,0,0.4)] mt-[24px]"
-        onClick={onClickRecommend}
-      >
+      <Button variant="white" onClick={onClickRecommend}>
         추천 문제 보기
-      </button>
+      </Button>
     </div>
   );
 }