feat: 방 생성 및 방 관리 페이지 다크모드 대응

src/RoomForm/components/Routines.tsx

@@ -82,12 +82,14 @@ const Routines = () => {
       )}
 
       <li className="flex flex-col items-center gap-3">
-        <Icon
-          className={iconButtonStyle}
-          icon="FaPlusCircle"
-          size="3xl"
-          onClick={handleAppendRoutine}
-        />
+        <button type="button">
+          <Icon
+            className={iconButtonStyle}
+            icon="FaPlusCircle"
+            size="3xl"
+            onClick={handleAppendRoutine}
+          />
+        </button>
         <div className="text-center text-xs">
           {routines.length} / {ROUTINE_COUNT.max}
         </div>

src/RoomForm/components/UserCount.tsx

@@ -27,19 +27,23 @@ const UserCount = () => {
   return (
     <>
       <div className="flex items-center justify-center gap-10">
-        <Icon
-          icon="FaMinusCircle"
-          size="3xl"
-          className={iconButtonStyle}
-          onClick={() => handleSetUserCount(watchUserCount - 1)}
-        />
+        <button type="button">
+          <Icon
+            icon="FaMinusCircle"
+            size="3xl"
+            className={iconButtonStyle}
+            onClick={() => handleSetUserCount(watchUserCount - 1)}
+          />
+        </button>
         <b className="text-xl">{watchUserCount} 명</b>
-        <Icon
-          icon="FaPlusCircle"
-          size="3xl"
-          className={iconButtonStyle}
-          onClick={() => handleSetUserCount(watchUserCount + 1)}
-        />
+        <button type="button">
+          <Icon
+            icon="FaPlusCircle"
+            size="3xl"
+            className={iconButtonStyle}
+            onClick={() => handleSetUserCount(watchUserCount + 1)}
+          />
+        </button>
       </div>
       {errors.userCount && (
         <p className={errorStyle}>{errors.userCount.message}</p>

src/RoomForm/constants/styles.ts

@@ -1,6 +1,6 @@
 // 플러스(+), 마이너스(-) 버튼에 적용할 스타일
 export const iconButtonStyle =
-  'cursor-pointer text-light-point transition-all hover:text-light-point-hover';
+  'cursor-pointer text-light-point dark:text-dark-point transition-all hover:text-light-point-hover hover:dark:text-dark-point-hover';
 
 // 에러 메시지를 표시할 때 적용할 스타일
 export const errorStyle = 'ml-2 mt-4 text-red-500 text-sm';

src/RoomNew/components/BirdCard.tsx

@@ -12,8 +12,10 @@ const BirdCard = ({ active = false, type, onClick }: BirdCardProps) => {
   return (
     <div
       className={clsx(
-        'flex h-48 grow cursor-pointer select-none flex-col items-center justify-center rounded-xl border-3 bg-white',
-        active ? 'border-light-point' : 'border-transparent'
+        'flex h-48 grow cursor-pointer select-none flex-col items-center justify-center rounded-xl border-3 bg-white text-black',
+        active
+          ? 'border-light-point dark:border-dark-point'
+          : 'border-transparent'
       )}
       onClick={onClick}
     >

src/RoomNew/components/Navbar.tsx

@@ -57,7 +57,7 @@ const Navbar = ({
     <nav className="grid grid-cols-2 text-2xl">
       {hasPrev && (
         <button
-          className="col-start-1 h-16 rounded-es-xl bg-white text-dark-gray transition-all hover:bg-slate-100"
+          className="col-start-1 h-16 w-full bg-white text-dark-gray transition-all hover:bg-slate-100"
           type="button"
           onClick={toPrev}
         >
@@ -67,8 +67,9 @@ const Navbar = ({
 
       <button
         className={clsx(
-          'col-start-2 flex h-16 items-center justify-center',
-          'rounded-ee-xl bg-light-point text-white transition-all hover:bg-light-point-hover',
+          'col-start-2 flex h-16 w-full items-center justify-center',
+          'bg-light-point text-white transition-all hover:bg-light-point-hover',
+          'dark:bg-dark-point hover:dark:bg-dark-point-hover',
           isPending && 'cursor-not-allowed'
         )}
         type={hasNext ? 'button' : 'submit'}

src/RoomSetting/components/LoadingFallback.tsx

@@ -5,7 +5,7 @@ const LoadingFallback = () => {
     <div className="flex justify-center overflow-hidden">
       <LoadingSpinner
         size="7xl"
-        colorStyle="text-black"
+        colorStyle="text-black dark:text-white"
       />
     </div>
   );

src/RoomSetting/tabs/RoomTab.tsx

@@ -81,7 +81,7 @@ const RoomTab = ({ roomId }: RoomTabProps) => {
               'w-full resize-none p-3 text-sm',
               'rounded-lg border border-gray-300 shadow-sm placeholder:text-gray-400',
               'focus:border-light-point focus:outline-none focus:ring-1 focus:ring-light-point',
-              'dark:focus:border-dark-point dark:focus:ring-dark-point'
+              'dark:bg-dark-sub dark:focus:border-dark-point dark:focus:ring-dark-point'
             )}
             minRows={3}
             maxLength={ANNOUNCEMENT.max}
@@ -131,7 +131,7 @@ const RoomTab = ({ roomId }: RoomTabProps) => {
 
         <button
           className={clsx(
-            'btn btn-light-point mb-24 flex h-12 w-full items-center justify-center text-xl',
+            'btn btn-light-point mb-24 flex h-12 w-full items-center justify-center text-xl dark:bg-dark-point',
             mutation.isPending && 'cursor-not-allowed'
           )}
           disabled={mutation.isPending}

src/TimePicker/components/TimePicker.tsx

@@ -1,6 +1,7 @@
 import { FreeMode, Mousewheel } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { SwiperClass } from 'swiper/react';
+import clsx from 'clsx';
 import { formatHourString } from '../utils/hour';
 import '../styles/TimePicker.css';
 
@@ -39,7 +40,12 @@ const TimePicker = ({
 
   return (
     <Swiper
-      className={`time-picker flex h-44 w-40 cursor-pointer select-none items-center rounded-2xl shadow-md ${className}`}
+      className={clsx(
+        'time-picker flex h-44 w-40 cursor-pointer select-none items-center rounded-2xl shadow-md',
+        // 'border-1 dark:border-dark-gray',
+        'border-y-1 border-dark-gray',
+        className
+      )}
       modules={[FreeMode, Mousewheel]}
       direction="vertical"
       slidesPerView={3}

src/TimePicker/styles/TimePicker.css

@@ -1,5 +1,21 @@
 .time-picker {
-  background: linear-gradient(180deg, #E9E9E9 0%, rgba(255, 255, 255, 0.00) 25.52%, rgba(255, 255, 255, 0.00) 72.92%, #EDEDED 100%);
+  background: linear-gradient(
+    180deg,
+    #e9e9e9 0%,
+    rgba(255, 255, 255, 0) 25.52%,
+    rgba(255, 255, 255, 0) 72.92%,
+    #ededed 100%
+  );
+}
+
+.dark .time-picker {
+  background: linear-gradient(
+    180deg,
+    #122337 0%,
+    rgba(18, 24, 55, 0) 25.52%,
+    rgba(18, 24, 55, 0) 72.92%,
+    #121837 100%
+  );
 }
 
 .time-picker .swiper-slide {

src/pages/RoomNewPage.tsx

@@ -41,7 +41,7 @@ const RoomNewPage = () => {
         onSubmit={handleSubmit}
       >
         <Header
-          className="bg-light-main"
+          className="bg-light-main dark:bg-dark-main"
           prev="routines"
           title="방 만들기"
         />