refactor: 미사용 코드 삭제, 컴포넌트 cva 적용 (#137)

* chore: 24 -> 25 version up

* remove: 미사용 파일 삭제

* remove: global.css 미사용 디자인 삭제

* docs: update README.md

* rename: /libs/utils -> utils/designUtils로 cn() 위치이동

* refactor: BlockBtn cva 적용, 디자인 일부 수정

* design: BlockBtn 색상 변경

* refactor: RoundBtn cva 적용

* fix: 어학 증명서 예시 링크 오류 수정

* remove: 레거시 block-btn 제거

Author: wibaek

README.md

@@ -1,11 +1,18 @@
-솔리드 커넥션 웹
+# 솔리드 커넥션 웹
 
-React + Next.js
+- Next.js (App Router)
+- TypeScript
+- Tailwind CSS
+- Clsx
+- Axios
+- ESLint
+- Prettier
+- Vercel
 
 ## Commands
 
 ```bash
 npm run dev
 
 npm run lint
-```
+```

src/app/my/activity/legacy.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import BlockBtn from "@/components/button/block-btn";
+import BlockBtn from "@/components/button/BlockBtn";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 
 const GpaCertExamplePage = () => {

src/app/score/example/gpa-cert/page.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import BlockBtn from "@/components/button/block-btn";
+import BlockBtn from "@/components/button/BlockBtn";
 import TopDetailNavigation from "@/components/layout/TopDetailNavigation";
 
 const GpaCertExamplePage = () => {

src/app/score/example/lang-cert/page.tsx

@@ -4,8 +4,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 
-import clsx from "clsx";
-
 import { postGpaScoreApi } from "@/services/score";
 
 import BlockBtn from "@/components/button/BlockBtn";
@@ -122,14 +120,11 @@ const GpaSubmitForm = () => {
               }}
             />
             <div className="mt-[30px] flex gap-[9px]">
-              <RoundBtn
-                className={clsx({ "bg-primary text-k-0": file, "bg-k-300 text-k-0": !file })}
-                onClick={() => fileInputRef.current?.click()}
-              >
+              <RoundBtn variant={file ? "default" : "inactive"} onClick={() => fileInputRef.current?.click()}>
                 파일 첨부하기
               </RoundBtn>
               <Link href="/score/example/gpa-cert" target="_blank">
-                <RoundBtn className="bg-primary-400 text-k-0">증명서 예시</RoundBtn>
+                <RoundBtn variant="primary-400">증명서 예시</RoundBtn>
               </Link>
             </div>
           </div>

src/app/score/submit/gpa/GpaSubmitForm.tsx

@@ -4,8 +4,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 
-import clsx from "clsx";
-
 import { postLanguageTestScoreApi } from "@/services/score";
 import { validateLanguageScore } from "@/utils/scoreUtils";
 
@@ -139,14 +137,11 @@ const LanguageTestSubmitForm = () => {
               }}
             />
             <div className="mt-[30px] flex gap-[9px]">
-              <RoundBtn
-                className={clsx({ "bg-primary text-k-0": file, "bg-k-300 text-k-0": !file })}
-                onClick={() => fileInputRef.current?.click()}
-              >
+              <RoundBtn variant={file ? "default" : "inactive"} onClick={() => fileInputRef.current?.click()}>
                 파일 첨부하기
               </RoundBtn>
-              <Link href="/score/example/gpa-cert" target="_blank">
-                <RoundBtn className="bg-primary-400 text-k-0">증명서 예시</RoundBtn>
+              <Link href="/score/example/lang-cert" target="_blank">
+                <RoundBtn variant="primary-400">증명서 예시</RoundBtn>
               </Link>
             </div>
           </div>

src/app/score/submit/language-test/LanguageTestSubmitForm.tsx

@@ -1,21 +1,41 @@
-import React from "react";
+import * as React from "react";
 
-export interface BlockBtnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "@/utils/designUtils";
+
+const blockBtnVariants = cva("h-13 w-full min-w-80 max-w-screen-sm rounded-lg flex items-center justify-center", {
+  variants: {
+    variant: {
+      default: "bg-secondary hover:bg-secondary/90 disabled:bg-k-100",
+      primary: "bg-primary hover:bg-primary/90 disabled:bg-k-100",
+    },
+    text: {
+      default: "text-base font-medium text-white",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    text: "default",
+  },
+});
+
+export interface BlockBtnProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof blockBtnVariants> {
   onClick: () => void;
   children: React.ReactNode;
 }
 
-const BlockBtn = React.forwardRef<HTMLButtonElement, BlockBtnProps>(({ onClick, children, ...props }, ref) => (
-  <button
-    ref={ref}
-    className="h-[3.125rem] w-full min-w-80 max-w-screen-sm rounded-lg bg-primary disabled:opacity-50"
-    onClick={onClick}
-    type="button"
-    {...props}
-  >
-    <span className="font-serif text-base font-medium text-white">{children}</span>
-  </button>
-));
+const BlockBtn = React.forwardRef<HTMLButtonElement, BlockBtnProps>(
+  ({ className, variant, text, children, ...props }, ref) => {
+    return (
+      <button ref={ref} className={cn(blockBtnVariants({ variant, text, className }))} {...props}>
+        <span>{children}</span>
+      </button>
+    );
+  },
+);
 BlockBtn.displayName = "BlockBtn";
 
 export default BlockBtn;

src/components/button/BlockBtn.tsx

@@ -1,19 +1,43 @@
-type RoundBtnProps = {
-  className?: string;
+import * as React from "react";
+
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "@/utils/designUtils";
+
+const roundBtnVariants = cva("h-[2.375rem] w-[6.375rem] rounded-3xl px-4 py-2.5 ", {
+  variants: {
+    variant: {
+      default: "bg-secondary hover:bg-secondary/90 text-k-0",
+      primary: "bg-primary hover:bg-primary/90 text-k-0",
+      "primary-400": "bg-primary-400 hover:bg-primary-400/90 text-k-0",
+      inactive: "bg-k-100 hover:bg-k-100/90 text-k-0",
+    },
+    text: {
+      default: "text-xs font-bold leading-normal",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    text: "default",
+  },
+});
+
+export interface RoundBtnProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof roundBtnVariants> {
   onClick?: () => void;
   children: React.ReactNode;
-};
+}
 
-const RoundBtn = ({ onClick, className, children }: RoundBtnProps) => {
-  return (
-    <button
-      className={`${"h-10 w-[102px] rounded-full px-3 py-[5px] font-serif text-xs font-bold leading-normal"} ${className || ""}`}
-      onClick={onClick}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-};
+const RoundBtn = React.forwardRef<HTMLButtonElement, RoundBtnProps>(
+  ({ className, variant, text, children, ...props }, ref) => {
+    return (
+      <button ref={ref} className={cn(roundBtnVariants({ variant, text, className }))} {...props}>
+        <span>{children}</span>
+      </button>
+    );
+  },
+);
+RoundBtn.displayName = "RoundBtn";
 
 export default RoundBtn;

src/components/button/RoundBtn.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import BlockBtn from "@/components/button/block-btn";
+import BlockBtn from "@/components/button/BlockBtn";
 import StarFilledIcon from "@/components/ui/icon/star-filled";
 
 import styles from "./college-review-form.module.css";
@@ -116,7 +116,7 @@ const CollegeReviewForm = () => {
           </div>
         </div>
       </div>
-      <BlockBtn style={{ marginTop: "24px" }} onClick={() => {}}>
+      <BlockBtn className="mt-6" onClick={() => {}}>
         작성하기
       </BlockBtn>
     </form>