feat: tailwind sort prettier plugin 적용

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.0.0",
     "typescript": "~4.5.4",

src/renderer/app/layout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 const RootLayout = () => {
   return (
-    <div className="max-w-md m-auto bg-background-primary h-dvh font-pretendard">
+    <div className="m-auto h-dvh max-w-md bg-background-primary font-pretendard">
       <Outlet />
     </div>
   );

src/renderer/features/category/ui/category-chip.tsx

@@ -7,7 +7,7 @@ type CategoryChipProps = {
 
 export const CategoryChip = ({ category }: CategoryChipProps) => {
   return (
-    <div className="flex gap-sm subBody-sb text-text-tertiary bg-background-secondary p-md rounded-xs w-[80px]">
+    <div className="subBody-sb flex w-[80px] gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary">
       <Icon name={getCategoryIconName(category)} size="sm" />
       {category}
     </div>

src/renderer/features/category/ui/change-category-drawer.tsx

@@ -43,8 +43,8 @@ export const ChangeCategoryDrawer = ({
       }}
     >
       <DrawerContent>
-        <div className="flex items-center justify-between gap-2 ml-xl mr-sm">
-          <DrawerTitle className="py-1 header-3">카테고리 변경</DrawerTitle>
+        <div className="ml-xl mr-sm flex items-center justify-between gap-2">
+          <DrawerTitle className="header-3 py-1">카테고리 변경</DrawerTitle>
           <DrawerClose className="p-sm">
             <Icon name="close" size="sm" />
           </DrawerClose>
@@ -54,7 +54,7 @@ export const ChangeCategoryDrawer = ({
           onValueChange={(value) => {
             setSelectedCategory(value);
           }}
-          className="flex flex-col gap-4 mt-lg px-lg"
+          className="mt-lg flex flex-col gap-4 px-lg"
         >
           {categories?.map((category) => {
             const focusTime =
@@ -67,13 +67,13 @@ export const ChangeCategoryDrawer = ({
               <SelectGroupItem
                 key={category.no}
                 value={category.title}
-                className="flex flex-row items-center justify-start w-full p-xl gap-md"
+                className="flex w-full flex-row items-center justify-start gap-md p-xl"
               >
                 <div className="flex gap-sm">
                   <Icon name={getCategoryIconName(category.title)} size="sm" />
                   <span className="body-sb text-text-primary">{category.title}</span>
                 </div>
-                <div className="flex items-center subBody-r text-text-tertiary gap-xs">
+                <div className="subBody-r flex items-center gap-xs text-text-tertiary">
                   <span>집중 {focusTime}분</span>
                   <span>|</span>
                   <span>휴식 {restTime}분</span>

src/renderer/features/pomodoro/ui/timeout-dialog.tsx

@@ -10,7 +10,7 @@ export const TimeoutDialog = ({ open, onOpenChange, title, description }: Timeou
     <Dialog open={open} onOpenChange={onOpenChange} hasCloseButton={false}>
       <div className="flex flex-col gap-xl">
         <div>
-          <div className="header-4 text-text-primary py-[7.5px]">{title}</div>
+          <div className="header-4 py-[7.5px] text-text-primary">{title}</div>
           <div className="subBody-r text-text-secondary">{description}</div>
         </div>
         <Button

src/renderer/features/time/ui/chage-time-dialog.tsx

@@ -81,27 +81,27 @@ export const ChangeTimeDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} fullScreen animated={false}>
-      <div className="flex flex-col h-full">
-        <div className="flex flex-col items-center justify-center flex-1 gap-8">
+      <div className="flex h-full flex-col">
+        <div className="flex flex-1 flex-col items-center justify-center gap-8">
           <div className="flex items-center justify-center gap-2 px-4 py-2">
             <Icon name={getCategoryIconName(category)} size="sm" />
             <span className="body-sb text-text-secondary">{category}</span>
           </div>
 
-          <div className="relative flex items-center justify-center gap-3 select-none">
+          <div className="relative flex select-none items-center justify-center gap-3">
             <Button
               variant="primary"
               size="none"
-              className="p-2 rounded-sm"
+              className="rounded-sm p-2"
               disabled={isMinMinutes}
               onClick={decreaseMinutes}
             >
               <Icon name="minus" size="md" />
             </Button>
 
-            <div className="flex items-center justify-center gap-3 px-4 py-5 rounded-md bg-background-secondary">
+            <div className="flex items-center justify-center gap-3 rounded-md bg-background-secondary px-4 py-5">
               <Icon name={mode === 'focus' ? 'focusTime' : 'restTime'} size="md" />
-              <div className="flex justify-center items-center gap-0.5 header-1 text-text-primary tabular-nums">
+              <div className="header-1 flex items-center justify-center gap-0.5 tabular-nums text-text-primary">
                 <span>{padNumber(minutes)}</span>
                 {/* @note: 콜론 가운데 정렬이 되지 않아 이렇게 표시함 */}
                 <span className="mt-[-8px]">:</span>
@@ -112,23 +112,23 @@ export const ChangeTimeDialog = ({
             <Button
               variant="primary"
               size="none"
-              className="p-2 rounded-sm"
+              className="rounded-sm p-2"
               disabled={isMaxMinutes}
               onClick={increaseMinutes}
             >
               <Icon name="plus" size="md" />
             </Button>
 
             <div className="absolute bottom-0 left-0 w-full">
-              <div className="absolute left-0 w-full text-center top-3 subBody-r text-text-accent-1">
+              <div className="subBody-r absolute left-0 top-3 w-full text-center text-text-accent-1">
                 {errorMessage}
               </div>
             </div>
           </div>
         </div>
 
         <div className="w-full pb-[54px] text-center">
-          <Button variant="secondary" size="icon" className="p-7 aspect-square" onClick={applyTime}>
+          <Button variant="secondary" size="icon" className="aspect-square p-7" onClick={applyTime}>
             <Icon name="check" size="lg" />
           </Button>
         </div>

src/renderer/pages/home.tsx

@@ -27,7 +27,7 @@ const Home = () => {
   return (
     <div
       className={cn(
-        'w-full h-full bg-[#FFE9BF] flex justify-center items-center transition-opacity duration-500',
+        'flex h-full w-full items-center justify-center bg-[#FFE9BF] transition-opacity duration-500',
         isMinTimePassed ? 'opacity-100' : 'opacity-0',
       )}
     >

src/renderer/pages/mycat.tsx

@@ -42,8 +42,8 @@ const MyCat = () => {
     <Frame>
       <Frame.NavBar title="나의 고양이" onBack={() => navigate(PATH.MY_PAGE)} />
 
-      <div className="h-full flex justify-center items-center">
-        <div className="w-full flex flex-col">
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full flex-col">
           <Tooltip
             content="사냥놀이를 하고싶다냥"
             color="white"
@@ -52,11 +52,11 @@ const MyCat = () => {
             arrowProps={{ width: 14, height: 9 }}
           />
 
-          <RiveComponent className="w-full h-[240px] select-none" />
+          <RiveComponent className="h-[240px] w-full select-none" />
 
-          <div className="w-full flex justify-center items-center">
+          <div className="flex w-full items-center justify-center">
             <button
-              className="flex gap-1 justify-center items-center p-3"
+              className="flex items-center justify-center gap-1 p-3"
               onClick={handleClickEditNameButton}
             >
               <span className="header-4 text-text-secondary">{user?.cat?.name}</span>

src/renderer/pages/mypage.tsx

@@ -14,17 +14,17 @@ const MyPage = () => {
     <Frame>
       <Frame.NavBar title="마이페이지" onBack={() => navigate(PATH.POMODORO)} />
 
-      <div className="w-full flex flex-col gap-3">
+      <div className="flex w-full flex-col gap-3">
         <ActionButton onClick={() => navigate(PATH.MY_CAT)}>
           <span className="subBody-r text-text-tertiary">나의 고양이</span>
           <span className="header-4 text-text-primary">{user?.cat?.name}</span>
         </ActionButton>
 
         {/* <OfflineStat /> */}
 
-        <div className="w-full p-5 bg-background-secondary rounded-sm">
-          <div className="w-full flex items-center">
-            <div className="flex-1 flex flex-col justify-start">
+        <div className="w-full rounded-sm bg-background-secondary p-5">
+          <div className="flex w-full items-center">
+            <div className="flex flex-1 flex-col justify-start">
               <h3 className="body-sb text-text-primary">집중시간 알림받기</h3>
               <p className="subBody-r text-text-tertiary">
                 집중・휴식시간이 되면 고양이가 알려줘요
@@ -56,10 +56,10 @@ type ActionButtonProps = {
 };
 const ActionButton = ({ children, onClick }: ActionButtonProps) => (
   <button
-    className="flex items-center w-full p-5 rounded-sm bg-background-secondary"
+    className="flex w-full items-center rounded-sm bg-background-secondary p-5"
     onClick={onClick}
   >
-    <span className="flex flex-col items-start flex-1">{children}</span>
+    <span className="flex flex-1 flex-col items-start">{children}</span>
     <Icon name="chevronRight" size="md" />
   </button>
 );

src/renderer/pages/naming.tsx

@@ -43,8 +43,8 @@ const Naming = () => {
   return (
     <Frame>
       <Frame.NavBar onBack={handleClickBackButton} />
-      <div className="h-full flex justify-center items-center">
-        <div className="w-full flex flex-col gap-10">
+      <div className="flex h-full items-center justify-center">
+        <div className="flex w-full flex-col gap-10">
           <Tooltip
             content="반갑다냥! 내 이름을 지어줄래냥?"
             color="white"
@@ -53,7 +53,7 @@ const Naming = () => {
             arrowProps={{ width: 14, height: 9 }}
           />
           <RiveComponent
-            className="w-full h-[240px] cursor-pointer select-none"
+            className="h-[240px] w-full cursor-pointer select-none"
             onClick={() => {
               clickCatInput?.fire();
             }}
@@ -63,12 +63,12 @@ const Naming = () => {
             <input
               value={typedCatName}
               placeholder={selectedCatName}
-              className="body-sb text-text-primary placeholder:text-text-disabled p-lg rounded-sm caret-text-accent-1"
+              className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
               onChange={(e) => setTypedCatName(e.target.value)}
             />
             {errorMessage && (
               <div className="absolute bottom-[-8px] left-0 w-full">
-                <div className="absolute top-0 left-0 caption-r text-accent-red">
+                <div className="caption-r absolute left-0 top-0 text-accent-red">
                   {errorMessage}
                 </div>
               </div>

src/renderer/pages/onboarding.tsx

@@ -20,7 +20,7 @@ import { cn } from '@/shared/utils';
 
 const Onboarding = () => {
   return (
-    <Carousel className="w-full h-full" opts={{ loop: true }} plugins={[Autoplay({ delay: 3000 })]}>
+    <Carousel className="h-full w-full" opts={{ loop: true }} plugins={[Autoplay({ delay: 3000 })]}>
       {/* @note: useCarousel를 사용하기 위해 별도 컴포넌트로 분리 */}
       <OnboardingContent />
     </Carousel>
@@ -53,23 +53,23 @@ const OnboardingContent = () => {
   const [, setIsCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false);
 
   return (
-    <div className="h-full flex flex-col items-center justify-center gap-12">
+    <div className="flex h-full flex-col items-center justify-center gap-12">
       <div
         className={cn(
-          'w-full flex flex-col justify-center items-center gap-8 overflow-hidden',
+          'flex w-full flex-col items-center justify-center gap-8 overflow-hidden',
           // TODO: 가운데 정렬하고 최소 간격으로 하고 싶은데 잘 안되서 일단 주석처리함
           // 'h-sm:pt-[40px] h-md:pt-[60px] h-lg:pt-[100px] h-xl:pt-[140px]',
         )}
       >
         <CarouselContent>
           {contents.map(({ title, description, imageSrc }, index) => (
             <CarouselItem key={index}>
-              <div className="flex flex-col items-center justify-center gap-8 select-none">
+              <div className="flex select-none flex-col items-center justify-center gap-8">
                 <img src={imageSrc} width={240} height={240} />
 
                 <div className="flex flex-col gap-2 text-center">
                   <h2 className="header-4 text-text-primary">{title}</h2>
-                  <p className="body-r text-text-secondary whitespace-pre-line">{description}</p>
+                  <p className="body-r whitespace-pre-line text-text-secondary">{description}</p>
                 </div>
               </div>
             </CarouselItem>
@@ -84,7 +84,7 @@ const OnboardingContent = () => {
             <li
               key={index}
               className={cn(
-                'w-2 h-2 rounded-full',
+                'h-2 w-2 rounded-full',
                 index === currentIndex ? 'bg-background-tertiary' : 'bg-background-secondary',
               )}
             />

src/renderer/pages/selection.tsx

@@ -86,7 +86,7 @@ const Selection = () => {
     <Frame>
       <Frame.NavBar title="고양이 선택" onBack={handleClickBackButton} />
 
-      <div className="w-full flex flex-col gap-[42px]">
+      <div className="flex w-full flex-col gap-[42px]">
         <div className="flex flex-col gap-1">
           <h1 className="header-3 text-text-primary">어떤 고양이와 함께할까요?</h1>
           <p className="body-r text-text-secondary">언제든지 다른 고양이와 함께할 수 있어요</p>
@@ -101,7 +101,7 @@ const Selection = () => {
           ))}
 
           {/* TODO: 아래를 선택한 고양이 이미지 에셋으로 변경 */}
-          <RiveComponent className="w-full h-[240px] select-none" />
+          <RiveComponent className="h-[240px] w-full select-none" />
         </div>
 
         <SelectGroup
@@ -128,9 +128,9 @@ const Selection = () => {
             <SelectGroupItem
               key={cat.id}
               value={cat.id}
-              className="h-[80px] flex-1 flex flex-col gap-1"
+              className="flex h-[80px] flex-1 flex-col gap-1"
             >
-              <span className="flex gap-1 subBody-4 text-text-tertiary">
+              <span className="subBody-4 flex gap-1 text-text-tertiary">
                 {cat.adjective} <Icon size="xs" name={cat.iconName} />
               </span>
               <span
@@ -157,7 +157,7 @@ const Selection = () => {
 
 const AlarmEmpty = () => {
   return (
-    <div className="w-full h-[72px] rounded-xs bg-background-secondary flex justify-center items-center text-center text-gray-400 body-r whitespace-pre-line">
+    <div className="body-r flex h-[72px] w-full items-center justify-center whitespace-pre-line rounded-xs bg-background-secondary text-center text-gray-400">
       {'고양이를 선택하면\n딴 짓 방해알림 예시를 보여드려요'}
     </div>
   );
@@ -172,17 +172,17 @@ const AlarmSample = ({ appName = '모하냥', time = '지금', message }: AlarmS
   return (
     <div
       className={cn(
-        'w-full h-[72px] rounded-xs bg-background-secondary flex items-center gap-[10px] px-[14px]',
-        'animate-in fade-in-0 slide-in-from-bottom-2 duration-700',
+        'flex h-[72px] w-full items-center gap-[10px] rounded-xs bg-background-secondary px-[14px]',
+        'duration-700 animate-in fade-in-0 slide-in-from-bottom-2',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
       )}
     >
       <img src={appIconImage} width={38} height={38} />
 
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-1 flex-col">
         <div className="flex justify-between">
           <h3 className="subBody-sb text-gray-900">{appName}</h3>
-          <p className="caption-r text-gray-300 pr-2">{time}</p>
+          <p className="caption-r pr-2 text-gray-300">{time}</p>
         </div>
         <p className="subBody-r text-gray-900">{message}</p>
       </div>

src/renderer/shared/ui/carousel.tsx

@@ -209,7 +209,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
         ref={ref}
         size={size}
         className={cn(
-          'absolute  h-8 w-8 rounded-full',
+          'absolute h-8 w-8 rounded-full',
           orientation === 'horizontal'
             ? '-left-12 top-1/2 -translate-y-1/2'
             : '-top-12 left-1/2 -translate-x-1/2 rotate-90',

src/renderer/shared/ui/dialog.tsx

@@ -38,9 +38,9 @@ export const Dialog = ({
         />
         <DialogPrimitive.Content
           className={cn(
-            fullScreen && 'fixed left-[50%] top-0 bottom-0 translate-x-[-50%] pt-[56px]',
+            fullScreen && 'fixed bottom-0 left-[50%] top-0 translate-x-[-50%] pt-[56px]',
             !fullScreen &&
-              'fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] p-[20px] rounded-md shadow-lg',
+              'fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-md p-[20px] shadow-lg',
             'z-50 w-full max-w-md bg-background-primary',
 
             animated &&
@@ -50,8 +50,8 @@ export const Dialog = ({
           {hasCloseButton && (
             <DialogPrimitive.Close
               className={cn(
-                fullScreen && 'absolute top-[10px] right-[8px] p-2',
-                !fullScreen && 'absolute top-[20px] right-[20px] p-2',
+                fullScreen && 'absolute right-[8px] top-[10px] p-2',
+                !fullScreen && 'absolute right-[20px] top-[20px] p-2',
               )}
             >
               <Icon name="close" size="md" />
@@ -62,10 +62,10 @@ export const Dialog = ({
           <DialogPrimitive.Title
             className={cn(
               fullScreen &&
-                'absolute top-0 left-0 right-0 h-[56px] flex justify-center items-center',
+                'absolute left-0 right-0 top-0 flex h-[56px] items-center justify-center',
               !fullScreen &&
-                'absolute top-[20px] left-[20px] h-[40px] flex justify-start items-center',
-              'header-4 text-text-primary pointer-events-none',
+                'absolute left-[20px] top-[20px] flex h-[40px] items-center justify-start',
+              'header-4 pointer-events-none text-text-primary',
             )}
           >
             {title}