refactor(webview): PandaCSS 제거 및 @gitanimals/ui-tailwind 전환 (#382)

Author: sumi-0011

apps/webview/.gitignore

@@ -22,7 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-## Panda
-styled-system
-styled-system-studio

apps/webview/package.json

@@ -3,9 +3,7 @@
   "version": "0.1.0",
   "private": false,
   "scripts": {
-    "prepare": "panda codegen",
     "dev": "vite --port 3000",
-    "prebuild": "panda codegen",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
@@ -17,8 +15,7 @@
     "@gitanimals/dayjs": "workspace:*",
     "@gitanimals/exception": "workspace:*",
     "@gitanimals/react-query": "workspace:*",
-    "@gitanimals/ui-panda": "workspace:*",
-    "@gitanimals/ui-token": "workspace:*",
+    "@gitanimals/ui-tailwind": "workspace:*",
     "@gitanimals/util-common": "workspace:*",
     "@suspensive/react": "^2.17.1",
     "@tanstack/react-query": "*",
@@ -38,13 +35,14 @@
   "devDependencies": {
     "@gitanimals/eslint-config": "workspace:*",
     "@gitanimals/typescript-config": "workspace:*",
-    "@pandacss/dev": "^0.41.0",
-    "@shadow-panda/preset": "^0.7.1",
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
     "typescript": "*",
     "vite": "^7.1.2"
   }

apps/webview/panda.config.ts

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
-}
+};

apps/webview/postcss.config.cjs

@@ -4,7 +4,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { NuqsAdapter } from 'nuqs/adapters/react';
-import { css } from '_panda/css';
 import AuthWrapper from './components/auth/AuthWrapper';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';

apps/webview/src/App.tsx

@@ -1,6 +1,5 @@
 import type { ComponentProps } from 'react';
-import { CardBack, GameCard } from '@gitanimals/ui-panda';
-import type { CardTierType } from '@gitanimals/ui-panda/src/components/Card/constants';
+import { CardBack, GameCard, type CardTierType } from '@gitanimals/ui-tailwind';
 
 import { getAnimalTierInfo } from '@/utils/animals';
 import { getPersonaImage } from '@/utils/image';
@@ -24,8 +23,14 @@ function AnimalCard(props: AnimalCardProps) {
   );
 }
 
-export function AnimalCardBack({ tier = 'S_PLUS' }: ComponentProps<typeof CardBack> & { tier?: CardTierType }) {
-  return <CardBack tier={tier} />;
+type CardBackTier = ComponentProps<typeof CardBack>['tier'];
+
+function toCardBackTier(tier: CardTierType): CardBackTier {
+  return tier === 'EVOLUTION' ? 'S_PLUS' : tier;
+}
+
+export function AnimalCardBack({ tier = 'S_PLUS' }: { tier?: CardTierType }) {
+  return <CardBack tier={toCardBackTier(tier)} />;
 }
 
 export default AnimalCard;

apps/webview/src/components/AnimalCard/AnimalCard.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
-import { css, cx } from '_panda/css';
 import { motion } from 'framer-motion';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 
 interface CardMotionProps {
   x: number;
@@ -31,7 +31,7 @@ export function NonSelectedCardMotion({ children, x, y, rotate }: PropsWithChild
           duration: 0.5,
         },
       }}
-      className={cardStyle}
+      className="absolute cursor-pointer"
       style={{
         transformStyle: 'preserve-3d',
         transformOrigin: 'center center',
@@ -66,7 +66,7 @@ export function SelectedCardMotion({ children, x, y, rotate }: PropsWithChildren
           stiffness: 70,
         },
       }}
-      className={cx('selected-card', selectedCardStyle)}
+      className={cn('selected-card w-[40vw] max-w-[400px]')}
       style={{
         transformStyle: 'preserve-3d',
         transformOrigin: 'center center',
@@ -78,11 +78,6 @@ export function SelectedCardMotion({ children, x, y, rotate }: PropsWithChildren
   );
 }
 
-const selectedCardStyle = css({
-  width: '40vw',
-  maxWidth: '400px',
-});
-
 export function DrawingCardMotion({
   children,
   x,
@@ -115,7 +110,7 @@ export function DrawingCardMotion({
           delay: index * 0.1,
         },
       }}
-      className={cardStyle}
+      className="absolute cursor-pointer"
       onClick={onClick}
       style={{
         transformStyle: 'preserve-3d',
@@ -131,8 +126,3 @@ export function DrawingCardMotion({
     </motion.div>
   );
 }
-
-const cardStyle = css({
-  position: 'absolute',
-  cursor: 'pointer',
-});

apps/webview/src/components/CardGame/FanDrawingGame/CardMotion.tsx

@@ -4,9 +4,9 @@
 
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from '_panda/css';
-import { CardBack as CardBackUi } from '@gitanimals/ui-panda';
+import { CardBack as CardBackUi } from '@gitanimals/ui-tailwind';
 import { motion } from 'framer-motion';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 
 import { AnimalCard } from '@/components/AnimalCard';
 import { Portal } from '@/components/Portal';
@@ -108,11 +108,14 @@ export function CardDrawingGame({ characters, onSelectCard, onClose }: CardDrawi
     startDrawing();
   }, []);
 
+  const cardContainerClass =
+    'relative z-0 flex h-full w-full items-center justify-center';
+
   return (
-    <div className={containerStyle}>
-      <div className={gameAreaStyle}>
+    <div className="mx-auto w-full">
+      <div className="relative flex h-[360px] items-center justify-center">
         {gameState === 'drawing' && (
-          <div className={cardContainerStyle}>
+          <div className={cardContainerClass}>
             {selectedCards.map((cardId, index) => {
               const { x, y, rotate } = getFanPosition(index, selectedCards.length);
 
@@ -133,7 +136,7 @@ export function CardDrawingGame({ characters, onSelectCard, onClose }: CardDrawi
         )}
 
         {gameState === 'revealing' && selectedCardIndex !== null && (
-          <div className={cardContainerStyle}>
+          <div className={cardContainerClass}>
             {selectedCards.map((cardId, index) => {
               const isSelected = index === selectedCardIndex;
               const { x, y, rotate } = getFanPosition(index, selectedCards.length);
@@ -156,19 +159,28 @@ export function CardDrawingGame({ characters, onSelectCard, onClose }: CardDrawi
         )}
 
         {gameState === 'selected' && selectedCardIndex !== null && (
-          <div className={cardContainerStyle}>
+          <div className={cardContainerClass}>
             {selectedCards.map((cardId, index) => {
               const isSelected = index === selectedCardIndex;
               const { x, y, rotate } = getFanPosition(index, selectedCards.length);
 
               if (isSelected && cardData) {
                 return (
                   <Portal key={`selected-card-${cardId}`}>
-                    <div className={overlayStyle} onClick={closeGame}>
+                    <div
+                      className="fixed inset-0 z-[3001] flex flex-col items-center justify-center gap-[100px] bg-black-50 backdrop-blur-[10px]"
+                      onClick={closeGame}
+                    >
                       <SelectedCardMotion key={`selected-card-${cardId}`} x={x} y={y} rotate={rotate} index={index}>
                         <DetailedCard cardData={cardData} />
                       </SelectedCardMotion>
-                      <p className={noticeMessageStyle}>{t('click-to-close')}</p>
+                      <p
+                        className={cn(
+                          'text-center text-white font-product text-glyph-16 md:text-glyph-22',
+                        )}
+                      >
+                        {t('click-to-close')}
+                      </p>
                     </div>
                   </Portal>
                 );
@@ -189,7 +201,7 @@ export function CardDrawingGame({ characters, onSelectCard, onClose }: CardDrawi
 
 function CardBack() {
   return (
-    <div className={cardBackStyle} style={{ backfaceVisibility: 'hidden' }}>
+    <div className="h-[272px] w-[220px] overflow-hidden" style={{ backfaceVisibility: 'hidden' }}>
       <CardBackUi tier="S_PLUS" />
     </div>
   );
@@ -204,7 +216,10 @@ function DetailedCard({ cardData }: { cardData: { type: string; dropRate: string
   };
 
   return (
-    <div className={detailedCardStyle} style={{ backfaceVisibility: 'hidden' }}>
+    <div
+      className="relative aspect-[220/272] h-auto overflow-hidden [transform-style:preserve-3d]"
+      style={{ backfaceVisibility: 'hidden' }}
+    >
       <AnimalCard type={getPersona.type} dropRate={getPersona.dropRate} />
     </div>
   );
@@ -225,7 +240,7 @@ function RevealingCardMotion({
 }) {
   return (
     <motion.div
-      className={revealingCardMotionStyle}
+      className="absolute z-10 cursor-pointer [transform-style:preserve-3d]"
       initial={{ x, y, rotateZ: rotate }}
       animate={{
         x: [x, x + 5, x - 5, x + 5, x - 5, x],
@@ -242,72 +257,3 @@ function RevealingCardMotion({
     </motion.div>
   );
 }
-
-const containerStyle = css({
-  width: '100%',
-  mx: 'auto',
-});
-
-const gameAreaStyle = css({
-  position: 'relative',
-  height: '360px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const cardContainerStyle = css({
-  position: 'relative',
-  zIndex: 0,
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const overlayStyle = css({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  bg: 'black.black_50',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backdropFilter: 'blur(10px)',
-  flexDirection: 'column',
-  gap: '100px',
-  zIndex: 3001,
-});
-
-const revealingCardMotionStyle = css({
-  position: 'absolute',
-  zIndex: 10,
-  transformStyle: 'preserve-3d',
-  cursor: 'pointer',
-});
-
-const cardBackStyle = css({
-  width: '220px',
-  height: '272px',
-  overflow: 'hidden',
-});
-
-const detailedCardStyle = css({
-  height: 'auto',
-  overflow: 'hidden',
-  position: 'relative',
-  transformStyle: 'preserve-3d',
-  aspectRatio: '220/272',
-});
-
-const noticeMessageStyle = css({
-  textStyle: 'glyph22.regular',
-  color: 'white',
-  textAlign: 'center',
-  _mobile: {
-    textStyle: 'glyph16.regular',
-  },
-});