CSS: Color css fixed

src/components/Footer.tsx

@@ -14,24 +14,16 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import RepoLink from "./utils/RepoLink";
 
 export default function Footer() {
   return (
     <footer
       className="relative bottom-0 left-0 flex w-full flex-row items-center justify-center gap-2
       border bg-[#F6F7F9] p-2 md:gap-4 md:p-4"
     >
-      <Link href="https://github.com/42Where">
-        <Image
-          src="image/logo/logoC.svg"
-          alt="logo"
-          width={120}
-          height={120}
-          className="
-        w-[80px] md:w-[120px]"
-        />
-      </Link>
-      <span className="text-darkblue flex flex-col items-center justify-center  gap-2">
+      <RepoLink />
+      <span className="flex flex-col items-center justify-center gap-2  text-darkblue">
         <Link href="https://forms.gle/VbjaSrZRPjuqVyuz9">
           <p className="rounded-lg text-xs hover:bg-gray-200 hover:underline md:text-lg">
             버그 제보/문의
@@ -43,7 +35,7 @@ export default function Footer() {
               개인정보 이용 동의서
             </p>
           </DialogTrigger>
-          <DialogContent className="text-darkblue max-w-[800px]  gap-2">
+          <DialogContent className="max-w-[800px] gap-2  text-darkblue">
             <DialogHeader className="text-m  ">
               <DialogTitle>
                 <h2 className="text-l">개인정보 수집 및 이용 동의서(필수)</h2>

src/components/Groups.tsx

@@ -39,7 +39,7 @@ export default function Groups({ groups }: { groups: Group[] }) {
               className="relative overflow-hidden transition-all duration-500 ease-in-out"
             >
               {group.isInEdit && (
-                <div className="absolute right-[50px] top-[4px] flex flex-col items-center justify-center gap-1 border md:right-[80px] md:top-[16px] md:flex-row md:gap-2">
+                <div className="absolute right-[50px] top-[4px] flex flex-col items-center justify-center gap-1 md:right-[80px] md:top-[16px] md:flex-row md:gap-2">
                   {checkedUsers.length > 0 && (
                     <div className="flex flex-row gap-1 md:gap-2">
                       <GroupDeleteModal curGroup={group} />
@@ -48,8 +48,8 @@ export default function Groups({ groups }: { groups: Group[] }) {
                   )}
                   <div className="flex flex-row gap-1 md:gap-2">
                     <Button
-                      className="text-l border-darkblue text-darkblue h-6
-                gap-2 rounded-full border-2 bg-white px-2 py-1
+                      className="text-l h-6 gap-2 rounded-full
+                border-2 border-darkblue bg-white px-2 py-1 text-darkblue
                 hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
                       onClick={() => {
                         const temp = checkedUsers;
@@ -66,8 +66,8 @@ export default function Groups({ groups }: { groups: Group[] }) {
                       전체 선택
                     </Button>
                     <Button
-                      className="text-l border-darkblue h-6
-                gap-2 rounded-full border-2 px-2 text-white md:h-8 md:px-3
+                      className="text-l h-6 gap-2
+                rounded-full border-2 border-darkblue px-2 text-white md:h-8 md:px-3
                lg:text-xl"
                       onClick={() => {
                         const temp = groups;
@@ -86,7 +86,7 @@ export default function Groups({ groups }: { groups: Group[] }) {
                 </div>
               )}
               <GroupSettingModal curGroup={group} />
-              <AccordionTrigger className="text-l text-darkblue p-2 px-6 md:p-4  md:text-2xl">
+              <AccordionTrigger className="text-l p-2 px-6 text-darkblue md:p-4  md:text-2xl">
                 <span className="flex flex-row items-center justify-start gap-6">
                   {group.groupName}
                   <p className="text-xl md:text-2xl">

src/components/buttons/GroupSettingBtn.tsx

@@ -29,7 +29,7 @@ export default function GroupSettingBtn({
             />
           </TooltipTrigger>
           <TooltipContent>
-            <p className=" text-l  lg:text-xl">그룹 설정</p>
+            <p className="text-l lg:text-xl">그룹 설정</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>

src/components/modals/GroupAddModal.tsx

@@ -25,8 +25,8 @@ export default function GroupAddModal({ curGroup }: { curGroup: Group }) {
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          className="text-l border-darkblue text-darkblue h-6
-          gap-2 rounded-full border-2 bg-white px-2 hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
+          className="text-l h-6 gap-2 rounded-full
+          border-2 border-darkblue bg-white px-2 text-darkblue hover:bg-gray-200  md:h-8  md:px-3 lg:text-xl"
         >
           다른 그룹에 추가
         </Button>
@@ -42,8 +42,8 @@ export default function GroupAddModal({ curGroup }: { curGroup: Group }) {
                   className={`rounded-2xl ${
                     checkedGroups.includes(g.groupId)
                       ? "bg-darkblue text-white hover:bg-gray-500"
-                      : "border-darkblue text-darkblue border-2 bg-white hover:bg-gray-200"
-                  } border-darkblue gap-2 border-0 px-3 py-1  text-xl`}
+                      : "border-2 border-darkblue bg-white text-darkblue hover:bg-gray-200"
+                  } gap-2 border-0 border-darkblue px-3 py-1  text-xl`}
                   onClick={() => {
                     if (checkedGroups.includes(g.groupId)) {
                       setCheckedGroups(

src/components/modals/GroupDeleteModal.tsx

@@ -32,7 +32,7 @@ export default function GroupDeleteModal({ curGroup }: { curGroup: Group }) {
           삭제
         </Button>
       </DialogTrigger>
-      <DialogContent className="text-darkblue max-w-[425px] transition-all duration-500  ease-out">
+      <DialogContent className="max-w-[425px] text-darkblue transition-all duration-500  ease-out">
         <DialogTitle>그룹 삭제</DialogTitle>
         <p className="">선택한 카뎃들을 삭제하시겠습니까?</p>
         {curGroup.groupId === user?.defaultGroupId && (

src/components/ui/dialog.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -19,8 +19,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
@@ -36,15 +36,15 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
-        <X className='size-6' />
-        <span className='sr-only'>Close</span>
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="size-6" />
+        <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
@@ -58,14 +58,14 @@ function DialogHeader({
   return (
     <div
       className={cn(
-        'flex flex-col space-y-1.5 text-center sm:text-left',
-        className
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className,
       )}
       {...props}
     />
   );
 }
-DialogHeader.displayName = 'DialogHeader';
+DialogHeader.displayName = "DialogHeader";
 
 function DialogFooter({
   className,
@@ -74,14 +74,14 @@ function DialogFooter({
   return (
     <div
       className={cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-        className
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className,
       )}
       {...props}
     />
   );
 }
-DialogFooter.displayName = 'DialogFooter';
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -90,8 +90,8 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className
+      "text-lg font-semibold leading-none tracking-tight text-darkblue",
+      className,
     )}
     {...props}
   />
@@ -104,7 +104,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));