Refactor : 헤더, 모달 CSS 일부 수정

src/app/(home)/page.tsx

@@ -47,58 +47,56 @@ export default function Home() {
   ];
 
   return (
-    <div className="flex min-h-screen min-w-[320px] flex-col">
-      <main className="flex-grow">
-        {/* 히어로 섹션 */}
-        <section className="bg-black text-black relative flex flex-col items-center py-10">
-          <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
-            {/* 상자 내부의 텍스트와 버튼 */}
-            <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
-              WorkRoot
-            </h1>
-            <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
-              한 곳에서 관리하는 알바 구인 플랫폼
-            </p>
-            {user ? (
-              <Link href="/albalist">
-                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                  알바 둘러보기
-                </p>
-              </Link>
-            ) : (
-              <Link href="/login">
-                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                  알바를 시작하기
-                </p>
-              </Link>
-            )}
-          </div>
+    <div className="flex min-w-[320px] flex-grow flex-col">
+      {/* 히어로 섹션 */}
+      <section className="bg-black text-black relative flex flex-col items-center py-10">
+        <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
+          {/* 상자 내부의 텍스트와 버튼 */}
+          <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
+            WorkRoot
+          </h1>
+          <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
+            한 곳에서 관리하는 알바 구인 플랫폼
+          </p>
+          {user ? (
+            <Link href="/albalist">
+              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                알바 둘러보기
+              </p>
+            </Link>
+          ) : (
+            <Link href="/login">
+              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                알바 시작하기
+              </p>
+            </Link>
+          )}
+        </div>
 
-          {/* 배경 이미지 */}
-          <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
-            <Image src="/images/01.png" alt="Hero Background" fill className="rounded-lg object-contain" priority />
-          </div>
-        </section>
+        {/* 배경 이미지 */}
+        <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
+          <Image src="/images/01.png" alt="Hero Background" fill className="rounded-lg object-contain" priority />
+        </div>
+      </section>
 
-        {/* UI 섹션 */}
-        <section className="py-8 md:py-16">
-          <div className="container mx-auto px-4">
-            <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
-              {sections.map((section) => (
-                <div
-                  key={section.id}
-                  data-id={section.id}
-                  className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
-                    visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
-                  }`}
-                >
-                  <Image src={section.src} alt={section.alt} fill className="rounded-lg object-contain" />
-                </div>
-              ))}
-            </div>
+      {/* UI 섹션 */}
+      <section className="py-8 md:py-16">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
+            {sections.map((section) => (
+              <div
+                key={section.id}
+                data-id={section.id}
+                className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
+                  visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
+                }`}
+              >
+                <Image src={section.src} alt={section.alt} fill className="rounded-lg object-contain" />
+              </div>
+            ))}
           </div>
-        </section>
-      </main>
+        </div>
+      </section>
     </div>
   );
 }

src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx

@@ -27,7 +27,7 @@ export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
       </div>
       <div className="flex space-x-5 text-2xl">
         <p>{albaFormDetailData.location}</p>
-        <button className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
+        <button type="button" className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
           복사
         </button>
       </div>

src/app/(pages)/kakao-map/page.tsx

@@ -73,10 +73,15 @@ const KakaoMapPage = () => {
           onChange={(e) => setAddress(e.target.value)}
           className="flex-1 border p-2"
         />
-        <button onClick={handleOpenPostcode} className="rounded bg-green-500 p-2 text-white hover:bg-green-600">
+        <button
+          type="button"
+          onClick={handleOpenPostcode}
+          className="rounded bg-green-500 p-2 text-white hover:bg-green-600"
+        >
           우편번호 찾기
         </button>
         <button
+          type="button"
           onClick={searchAddress}
           disabled={loading || !!error}
           className="rounded bg-blue-500 p-2 text-white hover:bg-blue-600 disabled:bg-gray-400"

src/app/(pages)/myAlbaform/(role)/owner/page.tsx

@@ -154,7 +154,7 @@ export default function AlbaList() {
       {/* 검색 섹션과 필터 드롭다운을 고정 위치로 설정 */}
       <div className="fixed left-0 right-0 top-16 z-40 bg-white shadow-sm">
         {/* 검색 섹션 */}
-        <div className="w-full border-b border-grayscale-100">
+        <div className="w-full border-b border-line-100">
           <div className="mx-auto flex max-w-screen-2xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
             <div className="flex items-center justify-between">
               <SearchSection />
@@ -163,7 +163,7 @@ export default function AlbaList() {
         </div>
 
         {/* 필터 드롭다운 섹션 */}
-        <div className="w-full border-b border-grayscale-100">
+        <div className="w-full border-b border-line-100">
           <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
             <div className="flex items-center gap-2">
               <FilterDropdown

src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx

@@ -31,7 +31,7 @@ export default function TabMenu() {
   };
 
   return (
-    <div className="flex space-x-4 sm:space-x-8">
+    <div className="flex gap-4 lg:gap-8">
       {TABS.map((tab) => (
         <Link key={tab.value} href={`/mypage?${createQueryString(tab.value)}`} className={getLinkClassName(tab.value)}>
           {tab.name}

src/app/(pages)/mypage/components/FilterBar/index.tsx

@@ -49,33 +49,29 @@ export default function FilterBar() {
   return (
     <div className="w-full bg-white">
       {/* 마이페이지 섹션 */}
-      <div className="border-b border-grayscale-200">
-        <div className="flex items-center justify-between">
-          <h1 className="text-grayscale-900 py-4 text-xl font-bold sm:py-6 sm:text-2xl">마이페이지</h1>
-          {/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
-          <div>
-            <div className="hidden lg:flex lg:gap-2">
-              <Button variant="solid" width="sm" onClick={handleEditProfile}>
-                내 정보 수정
-              </Button>
-              <Button variant="outlined" width="sm" onClick={handleChangePassword}>
-                비밀번호 변경
-              </Button>
-            </div>
-            <div className="lg:hidden">
-              <KebabDropdown options={dropdownOptions} />
-            </div>
+      <div className="flex items-center justify-between">
+        <h1 className="text-grayscale-900 py-4 text-xl font-bold sm:py-6 sm:text-2xl">마이페이지</h1>
+        {/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
+        <div>
+          <div className="hidden lg:flex lg:gap-2">
+            <Button variant="solid" width="sm" onClick={handleEditProfile}>
+              내 정보 수정
+            </Button>
+            <Button variant="outlined" width="sm" onClick={handleChangePassword}>
+              비밀번호 변경
+            </Button>
+          </div>
+          <div className="lg:hidden">
+            <KebabDropdown options={dropdownOptions} />
           </div>
         </div>
       </div>
 
       {/* 탭 메뉴 섹션 */}
-      <nav className="border-b border-grayscale-200">
-        <div className="mx-auto flex max-w-screen-2xl items-center justify-between px-4 py-4 md:px-6 lg:px-8">
+      <nav className="border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between py-4">
           <TabMenu />
-          <div className="ml-auto">
-            <SortSection />
-          </div>
+          <SortSection />
         </div>
       </nav>
     </div>

src/app/(pages)/mypage/components/sections/ScrapsSection.tsx

@@ -129,8 +129,8 @@ export default function ScrapsSection() {
   return (
     <div className="space-y-4">
       {/* 필터 드롭다운 섹션 */}
-      <div className="w-full border-b border-grayscale-100">
-        <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+      <div className="w-full border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 py-4">
           <div className="flex items-center gap-2">
             <FilterDropdown
               options={filterPublicOptions.map((option) => option.label)}

src/app/(pages)/mypage/layout.tsx

@@ -8,13 +8,11 @@ interface MypageLayoutProps {
 
 export default function MypageLayout({ children }: MypageLayoutProps) {
   return (
-    <div className="flex min-h-screen flex-col">
-      <div className="mx-auto w-full min-w-[327px] px-6 md:max-w-[600px] lg:max-w-[1480px]">
-        <Suspense fallback={<LoadingSpinner />}>
-          <FilterBar />
-          {children}
-        </Suspense>
-      </div>
+    <div className="mx-auto flex w-full min-w-[327px] flex-col px-6 md:max-w-[600px] lg:max-w-[1480px]">
+      <Suspense fallback={<LoadingSpinner />}>
+        <FilterBar />
+        {children}
+      </Suspense>
     </div>
   );
 }

src/app/components/button/default/BookmarkBtn.tsx

@@ -0,0 +1,35 @@
+"use client";
+import React, { useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+
+interface BookmarkBtnProps {
+  className?: string;
+}
+
+const BookmarkBtn = ({ className = "" }: BookmarkBtnProps) => {
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  const toggleBookmark = () => {
+    setIsBookmarked((prev) => !prev);
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-orange-50 p-2 transition-colors",
+        className
+      )}
+      onClick={toggleBookmark}
+    >
+      {isBookmarked ? (
+        <FaBookmark className={cn("text-xl text-primary-orange-300")} />
+      ) : (
+        <FaRegBookmark className={cn("text-xl text-primary-orange-300")} />
+      )}
+    </button>
+  );
+};
+
+export default BookmarkBtn;

src/app/components/button/default/FloatingBtn.tsx

@@ -18,7 +18,7 @@ const FloatingBtn = ({ variant = "orange", icon, children, className, ...props }
   const widthStyles = children ? "w-auto px-3" : "w-12";
 
   return (
-    <button className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
+    <button type="button" className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
       {icon && <span className="text-2xl">{icon}</span>}
       <span className={cn(children ? "ml-2" : "", "hidden sm:inline")}>{children}</span>
     </button>

src/app/components/button/default/RadioBtn.tsx

@@ -53,7 +53,7 @@ const RadioBtn = ({
   );
 
   const labelElement = label && (
-    <label htmlFor={props.id || value} className="cursor-pointer text-sm md:text-lg">
+    <label htmlFor={props.id || value} className="cursor-pointer text-sm lg:text-lg">
       {label}
     </label>
   );
@@ -62,7 +62,7 @@ const RadioBtn = ({
     <div
       onClick={handleClick}
       className={cn(
-        "flex w-full cursor-pointer items-center rounded-lg border border-grayscale-200 p-4 transition-colors md:p-6",
+        "flex w-full cursor-pointer items-center rounded-lg border border-grayscale-200 p-4 transition-colors lg:px-6 lg:py-[17px]",
         checked && "border-primary-orange-300 bg-primary-orange-50",
         !checked && "hover:border-grayscale-300 hover:bg-grayscale-50",
         position === positionOptions.POSITION_RIGHT ? "justify-between" : "gap-2",

src/app/components/button/dropdown/FilterDropdown.tsx

@@ -57,31 +57,29 @@ const FilterDropdown = ({ options, className = "", onChange, initialValue, readO
         className
       )}
     >
-      <div>
-        <button
-          type="button"
+      <button
+        type="button"
+        className={cn(
+          "flex w-full items-center justify-between rounded-md border p-2 font-medium shadow-sm",
+          "text-grayscale-700 hover:bg-primary-orange-50",
+          selectedLabel === options[0]
+            ? "border border-grayscale-100 bg-white"
+            : "border-primary-orange-300 bg-primary-orange-50"
+        )}
+        onClick={toggleDropdown}
+        disabled={readOnly}
+      >
+        <span className={selectedLabel === options[0] ? "text-black-100" : "text-primary-orange-300"}>
+          {selectedLabel}
+        </span>
+        <IoIosArrowDown
           className={cn(
-            "flex w-full items-center justify-between rounded-md border p-2 font-medium shadow-sm",
-            "text-grayscale-700 hover:bg-primary-orange-50",
-            selectedLabel === options[0]
-              ? "border border-grayscale-100 bg-white"
-              : "border-primary-orange-300 bg-primary-orange-50"
+            "text-orange-400 transition-transform duration-200",
+            isOpen && "rotate-180",
+            selectedLabel === options[0] ? "text-grayscale-200" : "text-primary-orange-300"
           )}
-          onClick={toggleDropdown}
-          disabled={readOnly}
-        >
-          <span className={selectedLabel === options[0] ? "text-black-100" : "text-primary-orange-300"}>
-            {selectedLabel}
-          </span>
-          <IoIosArrowDown
-            className={cn(
-              "text-orange-400 transition-transform duration-200",
-              isOpen && "rotate-180",
-              selectedLabel === options[0] ? "text-grayscale-200" : "text-primary-orange-300"
-            )}
-          />
-        </button>
-      </div>
+        />
+      </button>
 
       {isOpen && !readOnly && (
         <DropdownList

src/app/components/button/dropdown/KebabDropdown.tsx

@@ -28,6 +28,7 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
   return (
     <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
       <button
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         className="rounded-full p-2 hover:bg-grayscale-50"
         aria-label="메뉴 더보기"
@@ -40,6 +41,7 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
           <div className="py-1">
             {options.map((option, index) => (
               <button
+                type="button"
                 key={`${index}-${option.label}`}
                 onClick={() => {
                   option.onClick();