refactor: 불필요한 스타일 정리

Author: yyezzzy

src/app/components/button/BookmarkBtn.tsx

@@ -14,7 +14,7 @@ const BookmarkBtn: React.FC<BookmarkBtnProps> = ({ className = "" }) => {
   };
 
   const baseStyles =
-    "inline-flex items-center justify-center transition-colors rounded-full w-54 h-54 p-4 bg-orange-50";
+    "inline-flex items-center justify-center transition-colors rounded-full h-12 w-12 p-2 bg-orange-50";
 
   const iconStyles = "text-xl text-primary-orange-300";
 

src/app/components/button/Button.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import React, { ButtonHTMLAttributes, ReactNode } from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -8,7 +7,6 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   radius?: "lg" | "full";
   icon?: ReactNode;
 }
-
 /**
  * 버튼 컴포넌트
  * @param variant - 버튼 스타일 solid | outlined
@@ -20,7 +18,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * @param props - 추가 버튼 속성
  * @returns 버튼 컴포넌트
  */
-const Button = ({
+const Button: React.FC<ButtonProps> = ({
   className = "",
   variant = "solid",
   width = "md",
@@ -29,22 +27,14 @@ const Button = ({
   disabled = false,
   children,
   ...props
-}: ButtonProps) => {
+}) => {
   const baseStyles = "inline-flex items-center justify-center transition-colors font-medium h-12";
 
   const variants = {
-    solid: [
-      "bg-primary-orange-300 text-gray-100",
-      "hover:bg-primary-orange-200",
-      "focus:ring-1 focus:ring-primary-orange-200 focus:outline-none",
-      "disabled:bg-gray-100 disabled:cursor-not-allowed text-white",
-    ].join(" "),
-    outlined: [
-      "border-2 border-primary-orange-300 text-primary-orange-300",
-      "hover:border-primary-orange-200 hover:text-primary-orange-200",
-      "focus:ring-1 focus:ring-primary-orange-200 focus:outline-none",
-      "disabled:border-gray-100 disabled:text-gray-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-    ].join(" "),
+    solid:
+      "bg-primary-orange-300 text-gray-100 hover:bg-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:bg-gray-100 disabled:cursor-not-allowed text-white",
+    outlined:
+      "border-2 border-primary-orange-300 text-primary-orange-300 hover:border-primary-orange-200 hover:text-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:border-gray-100 disabled:text-gray-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
   };
 
   const widths = {
@@ -65,7 +55,7 @@ const Button = ({
       disabled={disabled}
       {...props}
     >
-      {icon && <span className="mr-2">{icon}</span>} {/* 아이콘 렌더링 */}
+      {icon && <span className="mr-2">{icon}</span>}
       {children}
     </button>
   );

src/app/components/button/CheckBtn.tsx

@@ -7,17 +7,25 @@ interface CheckBtnProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string; // 체크박스의 value 속성
   checked?: boolean; // 체크박스가 선택된 상태인지 여부
   disabled?: boolean; // 체크박스가 비활성화된 상태인지 여부
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; // 체크박스 상태 변화 처리 함수
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const CheckBtn = ({ label, name, value, checked = false, disabled = false, onChange, ...props }: CheckBtnProps) => {
-  const baseStyles = "flex items-center justify-between rounded-lg";
+const CheckBtn: React.FC<CheckBtnProps> = ({
+  label,
+  name,
+  value,
+  checked = false,
+  disabled = false,
+  onChange,
+  ...props
+}) => {
+  const baseStyles = "flex items-center justify-between rounded-lg p-2";
 
   const textColor = disabled ? "text-gray-400" : "text-black";
   const cursorStyle = disabled ? "cursor-not-allowed" : "cursor-pointer";
 
   return (
-    <div className={`${baseStyles} ${cursorStyle} p-2`}>
+    <div className={`${baseStyles} ${cursorStyle}`}>
       <label htmlFor={value} className={`text-sm ${textColor}`}>
         {label}
       </label>

src/app/components/button/FrameRadioBtn.tsx

@@ -11,23 +11,22 @@ interface FrameRadioBtnProps extends ButtonHTMLAttributes<HTMLInputElement> {
   disabled?: boolean; // 라디오 버튼이 비활성화된 상태인지 여부
 }
 
-const FrameRadioBtn = ({ width = "sm", checked = false, disabled = false, ...props }: FrameRadioBtnProps) => {
-  const baseStyles = "flex items-center justify-between rounded-lg border";
+const FrameRadioBtn: React.FC<FrameRadioBtnProps> = ({ width = "sm", checked = false, disabled = false, ...props }) => {
+  const baseStyles = "flex items-center justify-between rounded-lg border px-5 py-4";
 
   const widths = {
-    sm: "w-[252px] px-5 py-4",
-    md: "w-[360px] px-6 py-5",
+    sm: "w-[252px]",
+    md: "w-[360px]",
   };
 
-  const labelTextSize = width === "sm" ? "text-sm" : "text-base";
-  const bgColor = disabled ? "none" : checked ? "bg-primary-orange-50" : "bg-white";
+  const bgColor = disabled ? "bg-gray-200" : checked ? "bg-primary-orange-50" : "bg-white";
   const borderColor = disabled ? "border-gray-200" : "border-primary-orange-300";
   const textColor = disabled ? "text-gray-400" : "text-black";
   const cursorStyle = disabled ? "cursor-not-allowed" : "cursor-pointer";
 
   return (
     <div className={`${baseStyles} ${widths[width]} ${bgColor} ${borderColor} ${cursorStyle}`}>
-      <label htmlFor={props.value} className={`${labelTextSize} ${textColor}`}>
+      <label htmlFor={props.value} className={`text-sm ${textColor}`}>
         {props.label}
       </label>
       <input

src/app/globals.css

@@ -92,15 +92,13 @@ input[type="checkbox"]:disabled {
   font-family: "HakgyoansimDunggeunmisoTTF-R";
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HakgyoansimDunggeunmisoTTF-R.woff2") format("woff2");
   font-weight: 400;
-  font-style: normal;
 }
 
 /* 학교안심 둥근미소 B */
 @font-face {
   font-family: "HakgyoansimDunggeunmisoTTF-B";
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/HakgyoansimDunggeunmisoTTF-B.woff2") format("woff2");
   font-weight: 700;
-  font-style: normal;
 }
 
 /* 넥슨 폰트 */
@@ -109,14 +107,12 @@ input[type="checkbox"]:disabled {
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv1 Gothic OTF Light.woff")
     format("woff");
   font-weight: 300;
-  font-style: normal;
 }
 @font-face {
   font-family: "NEXON Lv1 Gothic OTF Regular";
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv1 Gothic OTF Regular.woff")
     format("woff");
   font-weight: 400;
-  font-style: normal;
 }
 @font-face {
   font-family: "NEXON Lv1 Gothic OTF Bold";