chore: format files

Signed-off-by: Lukas.J.Han <[email protected]>
KRDS-community · Dec 26, 2024 · 347694a · 347694a
1 parent 92f40a5
commit 347694a
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 127 deletions.
diff --git a/packages/core/lib/components/Accordion.tsx b/packages/core/lib/components/Accordion.tsx
@@ -7,7 +7,9 @@ const ChevronIcon: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (
     viewBox="0 0 24 24"
     width="24"
     height="24"
-    className={`transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
+    className={`transition-transform duration-300 ${
+      isOpen ? 'rotate-180' : ''
+    }`}
     aria-hidden="true"
   >
     <path
@@ -31,8 +33,12 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   onClick,
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
-  const buttonId = `accordion-button-${title.replace(/\s+/g, '-').toLowerCase()}`;
-  const contentId = `accordion-content-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const buttonId = `accordion-button-${title
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
+  const contentId = `accordion-content-${title
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
 
   return (
     <div className="w-full border-b border-gray-20">

diff --git a/packages/core/lib/components/Button.tsx b/packages/core/lib/components/Button.tsx
@@ -93,7 +93,9 @@ export const Button = <E extends React.ElementType = 'button'>({
     }
   };
 
-  const labelStyles = `${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${variant === 'text' ? 'underline' : ''}`;
+  const labelStyles = `${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${
+    variant === 'text' ? 'underline' : ''
+  }`;
 
   return (
     <button

diff --git a/packages/core/lib/components/Calendar.tsx b/packages/core/lib/components/Calendar.tsx
@@ -88,7 +88,7 @@ export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
 
   const changeMonth = (delta: number) => {
     setCurrentDate(
-      new Date(currentDate.getFullYear(), currentDate.getMonth() + delta, 1)
+      new Date(currentDate.getFullYear(), currentDate.getMonth() + delta, 1),
     );
   };
 
@@ -114,8 +114,17 @@ export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
             onClick={() => handleDateClick(date)}
             className={`
               cursor-pointer text-center px-2 py-1 rounded-4
-              ${isDateInRange(date) || selectedDates.some((d) => d.getTime() === date.getTime()) ? 'bg-primary text-gray-0' : ''}
-              ${isToday(date) ? 'border border-primary' : 'border border-transparent'}
+              ${
+                isDateInRange(date) ||
+                selectedDates.some((d) => d.getTime() === date.getTime())
+                  ? 'bg-primary text-gray-0'
+                  : ''
+              }
+              ${
+                isToday(date)
+                  ? 'border border-primary'
+                  : 'border border-transparent'
+              }
             `}
           >
             <Label
@@ -150,14 +159,14 @@ export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
             value={currentDate.getFullYear()}
             onChange={(e) =>
               setCurrentDate(
-                new Date(parseInt(e.target.value), currentDate.getMonth(), 1)
+                new Date(parseInt(e.target.value), currentDate.getMonth(), 1),
               )
             }
             className="mr-2 p-1 border rounded"
           >
             {Array.from(
               { length: 100 },
-              (_, i) => currentDate.getFullYear() - 100 + i + 1
+              (_, i) => currentDate.getFullYear() - 100 + i + 1,
             ).map((year) => (
               <option key={year} value={year}>
                 {year}
@@ -168,7 +177,7 @@ export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
             value={currentDate.getMonth()}
             onChange={(e) =>
               setCurrentDate(
-                new Date(today.getFullYear(), parseInt(e.target.value), 1)
+                new Date(today.getFullYear(), parseInt(e.target.value), 1),
               )
             }
             className="p-1 border rounded"

diff --git a/packages/core/lib/components/Checkbox.tsx b/packages/core/lib/components/Checkbox.tsx
@@ -89,10 +89,10 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   const stateClasses = disabled
     ? 'bg-gray-10 border-gray-30 text-gray-40 cursor-not-allowed'
     : status === 'on'
-      ? 'bg-primary border-primary text-gray-0'
-      : status === 'intermediate'
-        ? 'bg-primary border-primary text-gray-0'
-        : 'bg-gray-0 border-gray-30 hover:border-primary';
+    ? 'bg-primary border-primary text-gray-0'
+    : status === 'intermediate'
+    ? 'bg-primary border-primary text-gray-0'
+    : 'bg-gray-0 border-gray-30 hover:border-primary';
 
   return (
     <div
@@ -135,7 +135,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           htmlFor={id}
           size={labelSizeClasses[size]}
           color={disabled ? 'gray-40' : 'gray-90'}
-          className={`${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} transition-all duration-300 ease-in-out`}
+          className={`${
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+          } transition-all duration-300 ease-in-out`}
         >
           {label}
         </Label>

diff --git a/packages/core/lib/components/Chip.tsx b/packages/core/lib/components/Chip.tsx
@@ -31,21 +31,19 @@ export const Chip: React.FC<ChipProps> = ({
   }[size];
   const labelColor = disabled ? 'gray-50' : checked ? 'primary' : 'gray-90';
 
-  const baseClasses = `inline-flex items-center gap-2 rounded-3 border transition-colors duration-200 ${
-    sizeClasses[size]
-  }`;
+  const baseClasses = `inline-flex items-center gap-2 rounded-3 border transition-colors duration-200 ${sizeClasses[size]}`;
 
   const stateClasses = disabled
     ? 'bg-gray-20 text-gray-50 border-gray-30 cursor-not-allowed'
     : checked
-      ? 'bg-primary-5 text-primary border-primary hover:bg-primary-10 cursor-pointer'
-      : 'bg-gray-0 text-gray-70 border-gray-30 hover:bg-gray-20 cursor-pointer';
+    ? 'bg-primary-5 text-primary border-primary hover:bg-primary-10 cursor-pointer'
+    : 'bg-gray-0 text-gray-70 border-gray-30 hover:bg-gray-20 cursor-pointer';
 
   const iconClasses = disabled
     ? 'text-gray-40'
     : checked
-      ? 'text-primary'
-      : 'text-gray-40';
+    ? 'text-primary'
+    : 'text-gray-40';
 
   const iconSizes = {
     sm: 'w-5 h-5',

diff --git a/packages/core/lib/components/Disclosure.tsx b/packages/core/lib/components/Disclosure.tsx
@@ -25,8 +25,12 @@ interface DisclosureProps {
 export const Disclosure: React.FC<DisclosureProps> = ({ title, children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
-  const buttonId = `disclosure-button-${title.replace(/\s+/g, '-').toLowerCase()}`;
-  const contentId = `disclosure-content-${title.replace(/\s+/g, '-').toLowerCase()}`;
+  const buttonId = `disclosure-button-${title
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
+  const contentId = `disclosure-content-${title
+    .replace(/\s+/g, '-')
+    .toLowerCase()}`;
 
   const toggleDisclosure = () => {
     setIsOpen(!isOpen);

diff --git a/packages/core/lib/components/FileUpload.tsx b/packages/core/lib/components/FileUpload.tsx
@@ -68,8 +68,8 @@ export const FileUpload: React.FC<FileUploadComponentProps> = ({
         prevFiles.map((f) =>
           f.name === fileData.name
             ? { ...f, status: success ? 'success' : 'error' }
-            : f
-        )
+            : f,
+        ),
       );
     }
   };
@@ -167,7 +167,11 @@ export const FileUpload: React.FC<FileUploadComponentProps> = ({
         onDrop={handleDrop}
         onClick={() => fileInputRef.current?.click()}
         className={`border-2 border-dashed rounded-lg px-10 py-12 text-center cursor-pointer
-          ${isDragActive ? 'border-primary-80' : 'border-gray-30 hover:border-primary'}`}
+          ${
+            isDragActive
+              ? 'border-primary-80'
+              : 'border-gray-30 hover:border-primary'
+          }`}
       >
         <input
           type="file"

diff --git a/packages/core/lib/components/Masthead.tsx b/packages/core/lib/components/Masthead.tsx
@@ -1,16 +1,16 @@
-import { colors } from "../colors/color";
-import { Label } from "./Label";
+import { colors } from '../colors/color';
+import { Label } from './Label';
 
 export type MastheadProps<E extends React.ElementType> = {
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
 
-export const Masthead = <E extends React.ElementType = "div">({
-  className = "",
+export const Masthead = <E extends React.ElementType = 'div'>({
+  className = '',
   ...props
 }: MastheadProps<E>) => {
   const flagStyle = {
-    display: "inline-block",
+    display: 'inline-block',
     width: 24,
     height: 16,
   };
@@ -26,9 +26,9 @@ export const Masthead = <E extends React.ElementType = "div">({
         <RepublicOfKoreaFlagIcon style={flagStyle} />
         <Label
           size="s"
-          color={"gray-90"}
+          color={'gray-90'}
           style={{
-            display: "inline-block",
+            display: 'inline-block',
           }}
         >
           이 누리집은 대한민국 공식 전자정부 누리집입니다.

diff --git a/packages/core/lib/components/Pagination.tsx b/packages/core/lib/components/Pagination.tsx
@@ -17,11 +17,11 @@ function generateRangeGuaranteedSequence(
   current: number,
   count: number,
   min: number,
-  max: number
+  max: number,
 ): (number | string)[] {
   const initialSequence = generateSequence(current, count);
   const filteredSequence = initialSequence.filter(
-    (num) => num >= min && num <= max
+    (num) => num >= min && num <= max,
   );
   const result: (number | 'ellipsis')[] = [...filteredSequence];
 
@@ -115,14 +115,14 @@ export const Pagination: React.FC<PaginationProps> = ({
   const [inputPage, setInputPage] = useState<number>(currentPage);
   const visiblePages = Math.max(
     propVisiblePages % 2 === 0 ? propVisiblePages + 1 : propVisiblePages,
-    1
+    1,
   );
   const showTwoLines = twoLines && !allowDirectInput;
   const pageNumbers = generateRangeGuaranteedSequence(
     currentPage,
     visiblePages,
     1,
-    totalPages
+    totalPages,
   );
 
   const handleDirectInput = () => {

diff --git a/packages/core/lib/components/RadioButton.tsx b/packages/core/lib/components/RadioButton.tsx
@@ -61,8 +61,8 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   const stateClasses = disabled
     ? 'bg-gray-10 border-gray-30 cursor-not-allowed'
     : checked
-      ? 'bg-gray-0 border-primary cursor-pointer'
-      : 'bg-gray-0 border-gray-30 hover:border-primary cursor-pointer';
+    ? 'bg-gray-0 border-primary cursor-pointer'
+    : 'bg-gray-0 border-gray-30 hover:border-primary cursor-pointer';
 
   return (
     <div
@@ -76,7 +76,13 @@ const RadioButton: React.FC<RadioButtonProps> = ({
       <div className={`${baseClasses} ${stateClasses}`} onClick={handleChange}>
         <div
           className={`
-            ${disabled && checked ? 'bg-gray-40' : checked ? 'bg-primary' : 'bg-transparent'}
+            ${
+              disabled && checked
+                ? 'bg-gray-40'
+                : checked
+                ? 'bg-primary'
+                : 'bg-transparent'
+            }
             rounded-full transition-all duration-300 ease-in-out
             ${innerCircleSizes[size]}
           `}
@@ -97,7 +103,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
         htmlFor={id}
         size={labelSizeClasses[size]}
         color={disabled ? 'gray-40' : 'gray-90'}
-        className={`${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} transition-colors duration-300`}
+        className={`${
+          disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+        } transition-colors duration-300`}
       >
         {label}
       </Label>
@@ -133,10 +141,10 @@ export const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
       if (!groupRef.current || disabled) return;
 
       const radioButtons = Array.from(
-        groupRef.current.querySelectorAll('input[type="radio"]')
+        groupRef.current.querySelectorAll('input[type="radio"]'),
       );
       const currentIndex = radioButtons.findIndex(
-        (radio) => (radio as HTMLInputElement).checked
+        (radio) => (radio as HTMLInputElement).checked,
       );
 
       let nextIndex: number;