prgrms-web-devcourse · gxxrxn · Jun 16, 2024 · Jun 16, 2024 · Jun 16, 2024
diff --git a/.storybook/main.ts b/.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;

diff --git a/.storybook/preview.tsx b/.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';

diff --git a/package.json b/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",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -49,7 +49,6 @@ export const metadata: Metadata = {
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
-      {/* @todo Chakra 제거시 app-layout 프로퍼티 제거. */}
       <body className={`${LineSeedKR.variable} app-layout font-lineseed`}>
         <Layout>
           <ContextProvider>

diff --git a/src/components/ChakraThemeProvider.tsx b/src/components/ChakraThemeProvider.tsx
diff --git a/src/components/ContextProvider.tsx b/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>
   );
 };

diff --git a/src/styles/global.css b/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 {

diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
diff --git a/src/ui/BookDetail/BookInfo.tsx b/src/ui/BookDetail/BookInfo.tsx