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

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)/albaTalk/[albatalkId]/page.tsx

@@ -121,7 +121,7 @@ export default function PostDetailPage() {
                 <h1 className="text-[16px] font-semibold lg:text-[24px]">{post.title}</h1>
                 {post.writer.id === user?.id && (
                   <div className="relative" ref={optionsRef}>
-                    <button onClick={() => setShowOptions(!showOptions)} className="text-grayscale-500">
+                    <button type="button" onClick={() => setShowOptions(!showOptions)} className="text-grayscale-500">
                       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
                           d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"

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)/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

@@ -128,8 +128,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

@@ -16,6 +16,7 @@ const BookmarkBtn = ({ className = "" }: BookmarkBtnProps) => {
 
   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

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();

src/app/components/card/board/BoardComment.tsx

@@ -49,6 +49,7 @@ const BoardComment = ({ title, content, comments, date, variant = "default", onK
 
         {/* Right Content: Kebab */}
         <button
+          type="button"
           onClick={onKebabClick}
           className="hover:text-grayscale-700 flex items-center justify-center text-grayscale-500"
           aria-label="Options"

src/app/components/card/board/CommentDetail.tsx

@@ -79,7 +79,12 @@ const CommentDetail: React.FC<CommentDetailProps> = ({
 
         {isAuthor && (
           <div className="relative" ref={optionsRef}>
-            <button onClick={() => setShowOptions(!showOptions)} className="text-grayscale-500" aria-label="Options">
+            <button
+              type="button"
+              onClick={() => setShowOptions(!showOptions)}
+              className="text-grayscale-500"
+              aria-label="Options"
+            >
               <Image src="/icons/menu/kebab-menu-md.svg" alt="Menu" width={28} height={28} />
             </button>
             {showOptions && (

src/app/components/card/cardList/AlbaListItem.tsx

@@ -178,7 +178,11 @@ const AlbaListItem = ({
             </div>
             {/* 케밥 메뉴 */}
             <div ref={dropdownRef} className="relative">
-              <button className="hover:text-grayscale-700 text-grayscale-500" onClick={handleDropdownToggle}>
+              <button
+                type="button"
+                className="hover:text-grayscale-700 text-grayscale-500"
+                onClick={handleDropdownToggle}
+              >
                 <BsThreeDotsVertical className="h-6 w-6" />
               </button>
               {/* 드롭다운 메뉴 */}

src/app/components/card/cardList/ApplicationStatusCard.tsx

@@ -24,13 +24,13 @@ const ApplicationStatusCard = ({ applicationStatusData }: ApplicationStatusCardP
           <span className={theadStyle}>전화번호</span>
           <div className="flex items-center gap-2">
             <span className={theadStyle}>경력</span>
-            <button onClick={() => setExperienceSort((prev) => !prev)}>
+            <button type="button" onClick={() => setExperienceSort((prev) => !prev)}>
               <FaSortAmountDown className={cn(sortIconStyle, experienceSort ? "rotate-0" : "rotate-180")} />
             </button>
           </div>
           <div className="flex items-center gap-2">
             <span className={theadStyle}>상태</span>
-            <button onClick={() => setStatusSort((prev) => !prev)}>
+            <button type="button" onClick={() => setStatusSort((prev) => !prev)}>
               <FaSortAmountDown className={cn(sortIconStyle, statusSort ? "rotate-0" : "rotate-180")} />
             </button>
           </div>

src/app/components/card/cardList/MyApplicationListItem.tsx

@@ -80,6 +80,7 @@ const MyApplicationListItem = ({ id, createdAt, status, resumeId, resumeName, fo
             <span>{formatLocalDate(createdAt, true)}</span>
           </div>
           <button
+            type="button"
             onClick={handleResumeDownload}
             className="decoration-grayscale-600/50 hover:text-grayscale-600 hover:decoration-grayscale-600 text-sm font-medium text-grayscale-500 underline decoration-1 underline-offset-4 hover:cursor-pointer md:text-base"
           >

src/app/components/card/cardList/ScrapListItem.tsx

@@ -143,6 +143,7 @@ const ScrapListItem = ({
             {/* 케밥 메뉴 */}
             <div ref={dropdownRef} className="relative">
               <button
+                type="button"
                 className="hover:text-grayscale-700 text-grayscale-500"
                 onClick={() => setShowDropdown(!showDropdown)}
               >

src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx

@@ -22,13 +22,13 @@ const DatePickerHeader = ({
         기간 선택
       </div>
       <div className="lg:h-15 mb-2 flex h-12 items-center justify-between px-[14px] py-3">
-        <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+        <button type="button" onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
           <MdKeyboardArrowLeft className={iconStyle} />
         </button>
         <span className="text-base font-semibold leading-[26px] text-black-400 lg:text-[20px] lg:leading-8">
           {`${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}`}
         </span>
-        <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+        <button type="button" onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
           <MdKeyboardArrowRight className={iconStyle} />
         </button>
       </div>

src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx

@@ -28,6 +28,7 @@ const DayPickerBtn = ({
   return (
     <div>
       <button
+        type="button"
         onClick={handleClick}
         disabled={disabled}
         className={cn(