[#105] Spinner 컴포넌트에 CSS 동적으로 적용되지 않는 문제 해결 (#106)

* ✨ feat: Spinner 컴포넌트에 적용되는 동적 css 속성들을 모아놓은 util 객체

* 🐛 fix: Spinner 컴포넌트에 css가 적용되지 않는 문제 해결

* 🚚 rename: 컨벤션에 맞게 파일명 변경

apps/client/src/entities/workspace/WorkspaceNameInput.tsx

@@ -1,9 +1,9 @@
 import { FocusEventHandler, KeyboardEventHandler } from 'react';
 
+import { Spinner } from '@/shared/ui';
 import { useParams } from 'react-router-dom';
 import { useUpdateWorkspaceName } from '@/shared/hooks';
 import { useWorkspaceStore } from '@/shared/store';
-import { Spinner } from '@/shared/ui';
 
 export const WorkspaceNameInput = () => {
   const { workspaceId } = useParams() as { workspaceId: string };
@@ -47,7 +47,7 @@ export const WorkspaceNameInput = () => {
         />
         {isPending && (
           <div className="absolute right-5">
-            <Spinner width={4} height={4} foregroundColor="green-500" backgroundColor="gray-200" />
+            <Spinner width={4} height={4} foregroundColor="green500" backgroundColor="gray200" />
           </div>
         )}
       </div>

apps/client/src/shared/ui/loading/Spinner.tsx

@@ -1,28 +1,23 @@
+import { background, foreground, h, w } from '@/shared/utils';
+
 import SpinIcon from '@/shared/assets/spinner.svg?react';
 
 type SpinnerProps = {
-  width: number;
-  height: number;
-  foregroundColor: string;
-  backgroundColor: string;
+  width: keyof typeof w;
+  height: keyof typeof h;
+  foregroundColor: keyof typeof foreground;
+  backgroundColor: keyof typeof background;
 };
 
 /**
  * @description
  * 스피너 컴포넌트
- * width, height에 들어가는 값은 tailwind css에 정의된 값만 들어갈 수 있습니다.
- * @param {string} width
- * @param {string} height
- * @param {string} foregroundColor
- * @param {string} backgroundColor
- *
- * @returns
+ * width, height, foregroundColor, backgroundColor에 들어가는 값은 spinnerStyle.ts에 정의된 객체의 키값만 들어갈 수 있습니다.
  */
 export const Spinner = ({ width, height, foregroundColor, backgroundColor }: SpinnerProps) => {
-  const w = `w-${width}`;
-  const h = `h-${height}`;
-  const foreground = `fill-${foregroundColor}`;
-  const background = `text-${backgroundColor}`;
-
-  return <SpinIcon className={`inline ${h} ${w} animate-spin ${foreground} ${background}`} />;
+  return (
+    <SpinIcon
+      className={`inline ${w[width]} ${h[height]} animate-spin ${foreground[foregroundColor]} ${background[backgroundColor]}`}
+    />
+  );
 };

apps/client/src/shared/utils/index.ts

@@ -1,3 +1,4 @@
-export { CATEGORY_ICONS } from './category_icons';
+export { CATEGORY_ICONS } from './categoryIcons';
 export { getUserId } from './userId';
 export { formatRelativeOrAbsoluteDate } from './dateFormat';
+export { w, h, foreground, background } from './spinnerStyle';

apps/client/src/shared/utils/spinnerStyle.ts

@@ -0,0 +1,35 @@
+export const w = {
+  1: 'w-1',
+  2: 'w-2',
+  3: 'w-3',
+  4: 'w-4',
+  5: 'w-5',
+  6: 'w-6',
+  7: 'w-7',
+  8: 'w-8',
+  9: 'w-9',
+  10: 'w-10',
+};
+
+export const h = {
+  1: 'h-1',
+  2: 'h-2',
+  3: 'h-3',
+  4: 'h-4',
+  5: 'h-5',
+  6: 'h-6',
+  7: 'h-7',
+  8: 'h-8',
+  9: 'h-9',
+  10: 'h-10',
+};
+
+export const foreground = {
+  grayWhite: 'fill-gray-white',
+  gray200: 'fill-gray-200',
+  green500: 'fill-green-500',
+};
+
+export const background = {
+  gray200: 'text-gray-200',
+};

apps/client/src/widgets/home/WorkspaceModal.tsx

@@ -46,8 +46,8 @@ export const WorkspaceModal = () => {
                   <Spinner
                     width={4}
                     height={4}
-                    foregroundColor="gray-white"
-                    backgroundColor="gray-200"
+                    foregroundColor="grayWhite"
+                    backgroundColor="gray200"
                   />
                 ) : (
                   content.name