feat: Tailwind UI 패키지 Storybook 환경 구축

apps/web/src/app/[locale]/auth/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { useEffect } from 'react';
-import { cn } from '@gitanimals/ui-tailwind';
 import { setRequestInterceptor, setResponseInterceptor } from '@gitanimals/api';
 import { setRenderRequestInterceptor, setRenderResponseInterceptor } from '@gitanimals/api/src/_instance';
+import { cn } from '@gitanimals/ui-tailwind';
 
 import {
   interceptorRequestFulfilled,
@@ -42,7 +42,4 @@ function JWTPage({
 
 export default JWTPage;
 
-const loadingContainerStyle = cn(
-  'fixed inset-0 bg-white/80 z-loading',
-  'flex items-center justify-center text-[36px]'
-);
+const loadingContainerStyle = cn('fixed inset-0 bg-white/80 z-loading', 'flex items-center justify-center text-[36px]');

apps/web/src/app/[locale]/dev/token/token.style.ts

@@ -1,3 +1,5 @@
 import { cn } from '@gitanimals/ui-tailwind/utils';
 
-export const container = cn('flex flex-col items-center justify-center h-screen bg-white gap-6 [&_h1]:font-product [&_h1]:text-glyph-24 [&_h1]:font-bold');
+export const container = cn(
+  'flex flex-col items-center justify-center h-screen bg-white gap-6 [&_h1]:font-product [&_h1]:text-glyph-24 [&_h1]:font-bold',
+);

apps/web/src/app/[locale]/event/(common)/BackgroundSection.tsx

@@ -2,9 +2,9 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { cn } from '@gitanimals/ui-tailwind';
 import type { Background } from '@gitanimals/api';
 import { renderUserQueries, shopQueries, useBuyBackground } from '@gitanimals/react-query';
+import { cn } from '@gitanimals/ui-tailwind';
 import { Button } from '@gitanimals/ui-tailwind';
 import { wrap } from '@suspensive/react';
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
@@ -110,23 +110,13 @@ function BackgroundItem({
 
   return (
     <div className="w-full flex flex-col items-center justify-center relative" key={item.type}>
-      <div
-        className={cn(
-          'w-full aspect-[2/1] bg-white relative',
-          isPurchased && 'brightness-50 cursor-not-allowed',
-        )}
-      >
+      <div className={cn('w-full aspect-[2/1] bg-white relative', isPurchased && 'brightness-50 cursor-not-allowed')}>
         <img src={getBackgroundImage(item.type)} alt={item.type} width={550} height={275} />
       </div>
       <div className="font-product text-glyph-18 font-bold text-black-75 border border-[#99C7DB] bg-[#DDF2FB] mt-1 mb-6 py-1 px-[25px] w-full">
         {addNumberComma(item.price)} P
       </div>
-      <Button
-        variant="secondary"
-        onClick={() => onBuy(item.type)}
-        disabled={isPurchased}
-        className="min-w-[120px]"
-      >
+      <Button variant="secondary" onClick={() => onBuy(item.type)} disabled={isPurchased} className="min-w-[120px]">
         {!isLoggedIn ? t('buy-possible-user') : isPurchased ? t('purchased') : t('buy')}
       </Button>
     </div>

apps/web/src/app/[locale]/event/(common)/BackgroundSlider/Arrow.tsx

@@ -17,7 +17,9 @@ export function ArrowButton({
         'absolute top-0 bottom-0 my-auto z-floating [&_img]:w-full [&_img]:h-full max-mobile:bottom-[72px]',
         direction === 'prev' ? 'left-[-62px] max-mobile:left-[-26px]' : 'right-[-62px] max-mobile:right-[-26px]',
         direction === 'prev' ? 'rotate-180' : 'rotate-0',
-        disabled ? 'cursor-not-allowed w-9 h-9 max-mobile:w-6 max-mobile:h-6' : 'cursor-pointer w-10 h-10 max-mobile:w-[26px] max-mobile:h-[26px]',
+        disabled
+          ? 'cursor-not-allowed w-9 h-9 max-mobile:w-6 max-mobile:h-6'
+          : 'cursor-pointer w-10 h-10 max-mobile:w-[26px] max-mobile:h-[26px]',
       )}
     >
       {disabled ? (

apps/web/src/app/[locale]/event/(common)/BackgroundSlider/BackgroundSlider.tsx

@@ -49,7 +49,10 @@ function BackgroundSlider({ children }: { children: React.ReactNode }) {
         <ArrowButton onClick={moveToNextPanel} direction="next" disabled={isLastPanel} />
         <Flicking ref={flicking} {...sliderOptions}>
           {Children.map(children, (child, idx) => (
-            <div className="w-[calc(50%-10px)] p-[10px] text-center [&_img]:w-full [&_img]:h-auto [&_img]:rounded-lg [&_p]:mt-[10px] [&_p]:text-base" key={idx}>
+            <div
+              className="w-[calc(50%-10px)] p-[10px] text-center [&_img]:w-full [&_img]:h-auto [&_img]:rounded-lg [&_p]:mt-[10px] [&_p]:text-base"
+              key={idx}
+            >
               {child}
             </div>
           ))}

apps/web/src/app/[locale]/game/quiz/_components/BackGround.tsx

@@ -7,7 +7,13 @@ export const Background = memo(function Background({ widthBottom }: { widthBotto
   const imageSrc = widthBottom ? '/assets/game/quiz/quiz-bg.webp' : '/assets/game/quiz/quiz-bg-raw.webp';
   return (
     <div className="absolute w-full h-full overflow-hidden -z-[1]">
-      <Image className="w-full h-full object-cover object-center" src={imageSrc} alt="background" layout="fill" draggable={false} />
+      <Image
+        className="w-full h-full object-cover object-center"
+        src={imageSrc}
+        alt="background"
+        layout="fill"
+        draggable={false}
+      />
     </div>
   );
 });

apps/web/src/app/[locale]/game/quiz/create/_components/QuizTextArea.tsx

@@ -36,7 +36,12 @@ function QuizTextArea({ maxLength = 1000, ...props }: QuizTextAreaProps) {
         maxLength={maxLength}
       />
       <div className="flex justify-end items-center">
-        <div className={cn('relative text-white-50 font-product text-glyph-12 font-normal p-[0px_12px_8px_0px]', props.error && 'text-[#FF6B56]')}>
+        <div
+          className={cn(
+            'relative text-white-50 font-product text-glyph-12 font-normal p-[0px_12px_8px_0px]',
+            props.error && 'text-[#FF6B56]',
+          )}
+        >
           <strong className="font-normal text-white-50">{inputLen}</strong>
           <span>/{maxLength}</span>
         </div>

apps/web/src/app/[locale]/game/quiz/solve/_components/solving/QuizProgressBar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { cn } from '@gitanimals/ui-tailwind/utils';
 import { dayjs } from '@gitanimals/dayjs';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 
 interface QuizProgressBarProps {
   onTimeout: () => void;

apps/web/src/app/[locale]/guild/(subpage)/[id]/GuildSliderContainer.tsx

@@ -2,8 +2,8 @@
 
 import { type PropsWithChildren } from 'react';
 import Image from 'next/image';
-import { cn } from '@gitanimals/ui-tailwind';
 import { guildQueries } from '@gitanimals/react-query';
+import { cn } from '@gitanimals/ui-tailwind';
 import { wrap } from '@suspensive/react';
 import { useQuery } from '@tanstack/react-query';
 
@@ -42,35 +42,22 @@ export const GuildSliderContainer = wrap.ErrorBoundary({ fallback: <>{}</> }).on
   },
 );
 
-const containerStyle = cn(
-  'w-full h-fit relative'
-);
+const containerStyle = cn('w-full h-fit relative');
 
 function CarouselButton({ direction, disabled }: { direction: 'left' | 'right'; disabled?: boolean }) {
   const imgSrc = disabled ? '/common/carousel-inner-right-disabled.png' : '/common/carousel-inner-right.png';
   return (
     <button
       disabled={disabled}
-      className={cn(
-        buttonStyle,
-        direction === 'left' && leftButtonStyle,
-        direction === 'right' && rightButtonStyle
-      )}
+      className={cn(buttonStyle, direction === 'left' && leftButtonStyle, direction === 'right' && rightButtonStyle)}
     >
       <Image width={40} height={40} src={imgSrc} alt={direction} />
     </button>
   );
 }
 
-const buttonStyle = cn(
-  'absolute top-0 bottom-0 m-auto',
-  'disabled:cursor-not-allowed'
-);
+const buttonStyle = cn('absolute top-0 bottom-0 m-auto', 'disabled:cursor-not-allowed');
 
-const leftButtonStyle = cn(
-  'left-[-66px] rotate-180'
-);
+const leftButtonStyle = cn('left-[-66px] rotate-180');
 
-const rightButtonStyle = cn(
-  'right-[-66px]'
-);
+const rightButtonStyle = cn('right-[-66px]');

apps/web/src/app/[locale]/guild/(subpage)/[id]/layout.tsx

@@ -24,12 +24,12 @@ const containerStyle = cn(
   'relative w-full max-w-[880px] m-auto min-h-full',
   'flex flex-col justify-center py-[120px]',
   'max-mobile:py-0 max-mobile:min-h-fit',
-  'max-mobile:h-[calc(100vh-var(--mobile-header-height))] max-mobile:p-4'
+  'max-mobile:h-[calc(100vh-var(--mobile-header-height))] max-mobile:p-4',
 );
 
 const bottomBgStyle = cn(
   'absolute w-screen bottom-0 left-1/2 -translate-x-1/2',
   '[&_.bg-bottom]:h-[228px] [&_.bg-bottom]:object-cover',
   '[&_.bg-bottom-house]:absolute [&_.bg-bottom-house]:bottom-8 [&_.bg-bottom-house]:right-[62px]',
-  '[&_.bg-bottom-house]:h-[202px] [&_.bg-bottom-house]:w-auto [&_.bg-bottom-house]:object-contain'
+  '[&_.bg-bottom-house]:h-[202px] [&_.bg-bottom-house]:w-auto [&_.bg-bottom-house]:object-contain',
 );

apps/web/src/app/[locale]/guild/(subpage)/[id]/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
-import { cn } from '@gitanimals/ui-tailwind/utils';
 import { getGuildById } from '@gitanimals/api';
 import { Button } from '@gitanimals/ui-tailwind';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 import { SearchIcon } from 'lucide-react';
 
 import { GitanimalsGuild } from '@/components/Gitanimals';
@@ -52,33 +52,19 @@ export default async function GuildPage({ params }: { params: { id: string } })
   );
 }
 
-const guildPreviewStyle = cn(
-  'aspect-[1/0.5] w-full rounded-lg overflow-hidden',
-  '[&_img]:w-full [&_img]:h-full'
-);
+const guildPreviewStyle = cn('aspect-[1/0.5] w-full rounded-lg overflow-hidden', '[&_img]:w-full [&_img]:h-full');
 
-const topStyle = cn(
-  'flex gap-2 items-center justify-end',
-  '[&>*]:h-10 w-full mb-4'
-);
+const topStyle = cn('flex gap-2 items-center justify-end', '[&>*]:h-10 w-full mb-4');
 
-const containerStyle = cn(
-  'flex flex-col gap-8 p-10 rounded-2xl',
-  'bg-white/10 backdrop-blur-[7px]'
-);
+const containerStyle = cn('flex flex-col gap-8 p-10 rounded-2xl', 'bg-white/10 backdrop-blur-[7px]');
 
 const titleStyle = cn(
   'flex items-center gap-4',
   'font-product text-glyph-36 font-bold text-white',
   '[&_img]:rounded-lg',
-  '[&_h2]:flex-1'
+  '[&_h2]:flex-1',
 );
 
-const bodyStyle = cn(
-  'font-product text-glyph-16 text-white/75 mt-3'
-);
+const bodyStyle = cn('font-product text-glyph-16 text-white/75 mt-3');
 
-const buttonWrapperStyle = cn(
-  'flex items-center justify-center',
-  'w-10 h-10 bg-white/25 rounded-[10px]'
-);
+const buttonWrapperStyle = cn('flex items-center justify-center', 'w-10 h-10 bg-white/25 rounded-[10px]');

apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/GuidlInfoFormClient.tsx

@@ -140,42 +140,25 @@ export function GuildInfoFormClient({ setFormError, formError, ...props }: Guild
   );
 }
 
-const headingStyle = cn(
-  'font-product text-glyph-14 font-bold mb-2'
-);
+const headingStyle = cn('font-product text-glyph-14 font-bold mb-2');
 
-const itemStyle = cn(
-  'border-white/90 rounded-lg border-none'
-);
+const itemStyle = cn('border-white/90 rounded-lg border-none');
 
-const tooltipStyle = cn(
-  'absolute top-[18px] right-3.5 h-fit'
-);
+const tooltipStyle = cn('absolute top-[18px] right-3.5 h-fit');
 
-const selectedStyle = cn(
-  'border border-solid rounded-lg opacity-100'
-);
+const selectedStyle = cn('border border-solid rounded-lg opacity-100');
 
-const unselectedStyle = cn(
-  'border-none rounded-lg opacity-40',
-  'transition-opacity duration-100 ease-in-out'
-);
+const unselectedStyle = cn('border-none rounded-lg opacity-40', 'transition-opacity duration-100 ease-in-out');
 
-const joinSettingStyle = cn(
-  'flex gap-2.5 items-center justify-between'
-);
+const joinSettingStyle = cn('flex gap-2.5 items-center justify-between');
 
 const joinSettingButtonStyle = cn(
   'border border-solid rounded-md px-4 py-2',
   'font-product text-glyph-14',
   'transition-all duration-100 ease-in-out',
-  'last:ml-1'
+  'last:ml-1',
 );
 
-const joinSettingButtonNotSelectedStyle = cn(
-  'bg-white/10 border-white/10 text-white/25'
-);
+const joinSettingButtonNotSelectedStyle = cn('bg-white/10 border-white/10 text-white/25');
 
-const joinSettingButtonSelectedStyle = cn(
-  'bg-white/25 border-white/50 text-white'
-);
+const joinSettingButtonSelectedStyle = cn('bg-white/25 border-white/50 text-white');

apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/GuildSetting.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { cn } from '@gitanimals/ui-tailwind';
 import { type Guild, updateGuild } from '@gitanimals/api';
+import { cn } from '@gitanimals/ui-tailwind';
 import { Button } from '@gitanimals/ui-tailwind';
 
 import { useRouter } from '@/i18n/routing';

apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/member/BannerGuildMember.tsx

@@ -27,13 +27,9 @@ export function BannerGuildMember({
 
 const bannerStyle = cn(
   'inline-flex p-[8px_16px_16px_16px] flex-col items-center',
-  'bg-white/10 rounded-lg text-center gap-3'
+  'bg-white/10 rounded-lg text-center gap-3',
 );
 
-const nameStyle = cn(
-  'font-product text-glyph-16 text-white'
-);
+const nameStyle = cn('font-product text-glyph-16 text-white');
 
-const countStyle = cn(
-  'font-product text-glyph-14 text-white/50'
-);
+const countStyle = cn('font-product text-glyph-14 text-white/50');

apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/member/page.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@gitanimals/ui-tailwind/utils';
 import { getGuildById } from '@gitanimals/api';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 
 import { GuildModalPageTitle } from '@/app/[locale]/guild/_components/GuildModalPageLayout';
 
@@ -40,6 +40,4 @@ export default async function GuildMemberSetting({ params }: { params: { id: str
   );
 }
 
-const subHeadingStyle = cn(
-  'font-product text-glyph-14 text-white mb-2'
-);
+const subHeadingStyle = cn('font-product text-glyph-14 text-white mb-2');

apps/web/src/app/[locale]/guild/(subpage)/[id]/setting/pet/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import { cn } from '@gitanimals/ui-tailwind';
 import { changeMainPet } from '@gitanimals/api';
+import { cn } from '@gitanimals/ui-tailwind';
 
 import { GuildModalPageTitle } from '@/app/[locale]/guild/_components/GuildModalPageLayout';
 import { GuildJoinPetSelectDialog } from '@/app/[locale]/guild/_components/GuildPetSelectDialog';
@@ -31,6 +31,4 @@ export default function GuildSettingPetPage() {
   );
 }
 
-const containerStyle = cn(
-  'flex flex-col items-center gap-[60px]'
-);
+const containerStyle = cn('flex flex-col items-center gap-[60px]');

apps/web/src/app/[locale]/guild/(subpage)/create/page.tsx

@@ -9,7 +9,7 @@ import GuildCreate from './GuildCreate';
 const dialogTitleStyle = cn(
   'font-product text-glyph-48 font-bold text-white text-center',
   'max-[1200px]:text-glyph-32',
-  'max-mobile:text-glyph-24'
+  'max-mobile:text-glyph-24',
 );
 
 export default function GuildCreatePage() {

apps/web/src/app/[locale]/guild/(subpage)/detail/GuildDetail.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 'use client';
 
-import { cn } from '@gitanimals/ui-tailwind';
 import type { Guild } from '@gitanimals/api';
+import { cn } from '@gitanimals/ui-tailwind';
 
 import { GitanimalsGuild } from '@/components/Gitanimals';
 
@@ -26,17 +26,12 @@ export const GuildDetail = ({ details }: { guildId: string; details: Guild }) =>
   );
 };
 
-const guildPreviewStyle = cn(
-  'aspect-[1/0.5] w-full rounded-lg overflow-hidden',
-  '[&_img]:w-full [&_img]:h-full'
-);
+const guildPreviewStyle = cn('aspect-[1/0.5] w-full rounded-lg overflow-hidden', '[&_img]:w-full [&_img]:h-full');
 
 const titleStyle = cn(
   'flex items-center gap-1',
   'font-product text-glyph-36 font-bold text-white',
-  '[&_img]:rounded-lg'
+  '[&_img]:rounded-lg',
 );
 
-const bodyStyle = cn(
-  'font-product text-glyph-16 text-white/75 mt-3'
-);
+const bodyStyle = cn('font-product text-glyph-16 text-white/75 mt-3');