ui: filter 컴포넌트 수정

.gitignore

@@ -30,4 +30,6 @@ dist-ssr
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+.yarn/install-state.gz
+.pnp.*

.storybook/main.ts

@@ -26,14 +26,3 @@ const config: StorybookConfig = {
   },
 };
 export default config;
-
-
-
-
-
-  // framework: {
-  //   name: path.dirname(
-  //     require.resolve(path.join("@storybook/react-vite", "package.json"))
-  //   ),
-  //   options: {},
-  // },

.storybook/preview.ts

@@ -1,15 +1,42 @@
-import type { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react';
+import { BrowserRouter } from 'react-router-dom';
+import './style.css';
+
+const customViewports = {
+  iPhone13: {
+    name: 'iPhone 13',
+    styles: {
+      width: '390px',
+      height: '844px'
+    },
+    type: 'mobile'
+  },
+  tablet: {
+    name: 'iPad Pro 11',
+    styles: {
+      width: '834px',
+      height: '1194px',
+    },
+    type: 'tablet',
+  },
+}
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    layout: 'fullscreen',
+    actions: { argTypesRegex: '^on.*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    viewport: { 
+      viewports: customViewports, 
+      defaultViewport: 'iPhone13'
+    },
   },
 };
 
+
 export default preview;

.storybook/style.css

@@ -0,0 +1,76 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+body {
+    font-family: 'SpoqaHanSansNeo', SpoqaHanSansNeo, -apple-system, BlinkMacSystemFont,
+    system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
+    'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', sans-serif !important;
+    box-sizing: border-box;
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background-color:#17171C;
+}
+div{
+    box-sizing: border-box;
+}
+button {
+    background: inherit;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    overflow: visible;
+    cursor: pointer;
+}
+button:focus {
+    outline: none;
+}
+input:focus {
+    outline: none;
+}
+textarea:focus {
+    outline: none;
+}

package.json

@@ -15,8 +15,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
+    "@emotion/serialize": "^1.1.2",
     "@emotion/styled": "^11.11.0",
     "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addons": "^7.0.27",
     "@tanstack/react-query": "^4.29.15",
     "@tanstack/react-query-devtools": "^4.29.15",
     "@types/react-router-dom": "^5.3.3",
@@ -29,6 +31,7 @@
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-styling": "^1.3.4",
     "@storybook/blocks": "^7.0.18",
     "@storybook/builder-vite": "^7.0.22",
     "@storybook/react": "^7.0.18",
@@ -43,6 +46,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.19.9",
     "emotion-reset": "^3.0.1",
+    "emotion-theming": "^11.0.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",