Weekly/5th week (#18)

* week5/harugi7 (#14)

* chore: install emotion

* chore: 폴더 구조 수정

* feat: ESLint에 맞춰 CamelCase로 변환

* feat: Container 컴포넌트 구현

* Base component: Grid, Spacing (#17)

* chore: emotion 설치

* chore: storybook 설치

* feat: Grid 컴포넌트 가져오기

- storybook 파일 생성

* feat: Spacing 컴포넌트 가져오기

* fix: Grid eslint 에러 해결

- react/require-default-props 비활성화

* fix: storybook 파일 eslint 해제

* fix: Spacing eslint 에러 해결

* style: 함수 내보내기 코드 수정

* fix: height 처리 및 반응형 스타일링 개선

* refactor: export Grid 및 Spacing 모듈 추가

* fix: eslint 에러 수정

- dist 폴더, stories.tsx 파일 검사 제외

* fix: 빌드 에러 fix

---------

Co-authored-by: cla6shade <[email protected]>

* Base Components (#16)

* chore: add support for the css prop

* refactor: ignore eslint

* refactor: styled 대신 serialized css 사용하도록 수정

* chore: deprecated 패턴과 css prop 관련 eslint 설정

* refactor: index 모듈로 변경

* chore: setup storybook

* chore: configure svgr, emotion

* chore: add packages

* feat: shared components

* chore: ignore build info file

* feat: avatar

* chore: add configuration of the router and query client

* refactor: 현재의 폴더 구조에 맞게 컴포넌트 경로 수정

---------

Co-authored-by: harugi7 <[email protected]>
Co-authored-by: Lee Minkyeong <[email protected]>

.eslintrc.cjs

@@ -1,60 +1,59 @@
-module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "airbnb", "airbnb/hooks", "airbnb-typescript", "@feature-sliced"
-  ],
-  "ignorePatterns": ["*.pnp.*", "*.config.ts", "node_modules", ".yarn", ".eslintrc.cjs"],
-  "overrides": [
-    {
-      "env": {
-        "node": true
-      },
-      "files": [
-        ".eslintrc.{js,cjs}"
-      ],
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    }
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "project": "./tsconfig.app.json"
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "react"
-  ],
-  "settings": {
-    "import/resolver": {
-      "typescript": {
-        "alwaysTryTypes": true
-      }
-    },
-  },
-  "rules": {
-    "react/react-in-jsx-scope": 'off',
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        '': 'never',
-        'js': 'never',
-        'jsx': 'never',
-        'ts': 'never',
-        'tsx': 'never'
-      }
-    ],
-    'import/no-internal-modules': [
-      'error',
-      {
-        forbid: ["@*/**/*"],
-      },
-    ],
-  }
-}
+module.exports = {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": ["*.pnp.*", "*.config.ts", "node_modules", ".yarn", ".eslintrc.cjs", "dist/**", "**/*.stories.tsx"],
+  "overrides": [
+    {
+      "env": {
+        "node": true
+      },
+      "files": [
+        ".eslintrc.{js,cjs}"
+      ],
+      "parserOptions": {
+        "sourceType": "script"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.app.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        '': 'never',
+        'js': 'never',
+        'jsx': 'never',
+        'ts': 'never',
+        'tsx': 'never'
+      }
+    ],
+    'react/require-default-props': 'off',
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: ['css'],
+      }
+    ],
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/no-use-before-define': 'off'
+  },
+}

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.tsbuildinfo
 
 node_modules
 dist
@@ -24,3 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import type { Preview } from "@storybook/react";
+import PassportProvider from '../src/providers/PassportProvider';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <PassportProvider>
+        <Story />
+      </PassportProvider>
+    )
+  ],
+};
+
+export default preview;

index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/app/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -10,15 +10,32 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:ci": "vitest run",
-    "ci": "yarn lint && yarn test:ci && yarn build"
+    "ci": "yarn lint && yarn test:ci && yarn build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@tanstack/react-query": "^5.59.0",
+    "emotion-normalize": "^11.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "1.9.0",
+    "@emotion/babel-plugin": "^11.12.0",
     "@eslint/js": "^9.9.0",
     "@feature-sliced/eslint-config": "^0.1.1",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.4",
+    "@storybook/addon-onboarding": "8.3.4",
+    "@storybook/blocks": "8.3.4",
+    "@storybook/react": "8.3.4",
+    "@storybook/react-vite": "8.3.4",
+    "@storybook/test": "8.3.4",
     "@types/eslint-plugin-jsx-a11y": "^6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -35,12 +52,15 @@
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-storybook": "^0.9.0",
     "globals": "^15.9.0",
+    "storybook": "8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1"
   },
-  "packageManager": "[email protected]+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39"
+  "packageManager": "[email protected]"
 }

src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from '@components/avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    css: { control: 'object' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const AvatarImage: Story = {
+  args: {
+    src: 'https://picsum.photos/200',
+  },
+};
+
+export const DefaultAvatar: Story = {
+  args: {
+  },
+};

src/components/avatar/index.tsx

@@ -0,0 +1,21 @@
+import { ImgHTMLAttributes } from 'react';
+import useAvatarStyle from '@components/avatar/useAvatarStyle';
+import { CSSObject } from '@emotion/react';
+import defaultAvatar from '@assets/icons/default-avatar.svg';
+
+interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+  src?: string;
+  alt?: string;
+  css?: CSSObject;
+}
+
+function Avatar({
+  src, alt, css, ...rest
+}: AvatarProps) {
+  const { avatarStyle } = useAvatarStyle();
+  return (
+    <img src={src || defaultAvatar} css={[avatarStyle, css]} alt={alt || 'avatar'} {...rest} />
+  );
+}
+
+export default Avatar;

src/components/avatar/useAvatarStyle.ts

@@ -0,0 +1,16 @@
+import useTheme from '@hooks/useTheme';
+import { css } from '@emotion/react';
+
+function useAvatarStyle() {
+  const theme = useTheme();
+
+  const avatarStyle = css`
+    border-radius: ${theme.corners.round};
+    width: 60px;
+    height: 60px;
+  `;
+
+  return { avatarStyle };
+}
+
+export default useAvatarStyle;

src/components/button/button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from '@components/button';
+import icon from '@assets/icons/eye.svg';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+
+    buttonTheme: {
+      control: 'radio',
+      options: ['default', 'dark', 'light-outlined'],
+    },
+    children: {
+      control: 'text',
+      defaultValue: 'Button Text',
+    },
+    css: { control: 'object' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    buttonTheme: 'default',
+    children: 'Default Button',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    buttonTheme: 'dark',
+    children: 'Dark Button',
+    icon,
+  },
+};
+
+export const CustomStyled: Story = {
+  args: {
+    buttonTheme: 'default',
+    children: 'Custom Styled Button',
+    css: {
+      backgroundColor: 'lightblue',
+      padding: '10px 20px',
+      borderRadius: '5px',
+      border: 'none',
+      cursor: 'pointer',
+    },
+  },
+};