refactor: 사용하지 않는 라이브러리 제거

- chakra, framer-motion, emotion, recoil

.storybook/main.ts

@@ -15,11 +15,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  refs: {
-    '@chakra-ui/react': {
-      disable: true,
-    },
-  },
   webpackFinal: async config => {
     const imageRule = config.module?.rules?.find(rule => {
       const test = (rule as { test: RegExp }).test;

.storybook/preview.tsx

@@ -4,7 +4,6 @@ import { initialize, mswLoader } from 'msw-storybook-addon';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { Preview } from '@storybook/react';
 
-import Layout from '../src/v1/layout/Layout';
 import ToastProvider from '../src/v1/base/Toast/ToastProvider';
 
 import '@/styles/global.css';

package.json

@@ -18,10 +18,6 @@
   },
   "dependencies": {
     "@actions/core": "^1.10.1",
-    "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.4.9",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
     "@headlessui/react": "^1.7.15",
     "@tanstack/react-query": "^4.24.4",
     "@tanstack/react-query-devtools": "^4.24.12",
@@ -30,14 +26,12 @@
     "@types/react-dom": "18.0.10",
     "axios": "^1.3.4",
     "colorthief": "^2.4.0",
-    "framer-motion": "^9.0.2",
     "next": "13.4.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.43.2",
-    "react-intersection-observer": "^9.4.3",
-    "recoil": "^0.7.7"
+    "react-intersection-observer": "^9.4.3"
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",

src/components/ContextProvider.tsx

@@ -1,24 +1,18 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { RecoilRoot } from 'recoil';
 
 import PWAServiceWorkerProvider from '@/components/PWAServiceWorkerProvider';
-import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
 
 import ToastProvider from '@/v1/base/Toast/ToastProvider';
 
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (
     <PWAServiceWorkerProvider>
-      <RecoilRoot>
-        <ReactQueryProvider>
-          <ChakraThemeProvider>
-            <ToastProvider>{children}</ToastProvider>
-          </ChakraThemeProvider>
-        </ReactQueryProvider>
-      </RecoilRoot>
+      <ReactQueryProvider>
+        <ToastProvider>{children}</ToastProvider>
+      </ReactQueryProvider>
     </PWAServiceWorkerProvider>
   );
 };

src/styles/global.css

@@ -21,16 +21,24 @@
   html {
     @apply w-full bg-background font-[LineSeedKR] text-[62.5%] text-black-700;
     -webkit-tap-highlight-color: #ffffff50;
+
+    /** from charka */
+    -webkit-text-size-adjust: 100%;
+    font-family: system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    touch-action: manipulation;
   }
 
   body {
     font-size: 1.6rem;
   }
 
   .app-layout {
-    /* TODO: Chakra UI 걷어내면 제거 */
     max-width: 43rem;
     margin: 0 auto;
+    @apply bg-white;
   }
 
   .sticky {