Merge pull request #83 from heonq/react-함헌규-sprint5

[함헌규] sprint5

.gitignore

@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+
+### macOS ###
+# General
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+*storybook.log

.storybook/main.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.jsx

@@ -0,0 +1,27 @@
+import { ThemeProvider } from "styled-components";
+import { defaultTheme } from "../src/theme";
+import { GlobalStyle } from "../src/Root";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider theme={defaultTheme}>
+          <GlobalStyle />
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

docs/sprint5.md

@@ -0,0 +1,40 @@
+# 요구사항
+
+## 기본 요구사항
+
+### 공통
+
+- [x] Github에 스프린트 미션 PR을 만들어 주세요.
+- [x] React를 사용해 진행합니다.
+
+### 중고마켓 페이지
+
+- [x] PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
+- [x] 중고마켓 페이지 url path는 별도로 설정하지 않고, ‘/’에 보이도록 합니다.
+- [x] 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 사용해주세요.
+- [x] 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
+- [x] 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 활용해주세요.
+- [x] 상품 목록 페이지네이션 기능을 구현합니다.
+- [x] 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 구현하세요.
+- [x] 상품 목록 검색 기능을 구현합니다.
+- [x] 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products”의 정렬 기준 favorite을 사용해주세요.
+
+## 심화 요구사항
+
+### 공통
+
+- [ ] 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
+
+### 중고마켓 페이지
+
+- [x] 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
+- 베스트 상품
+  - Desktop : 4열
+  - Tablet : 2열
+  - Mobile : 1열
+- 전체 상품
+  - Desktop : 5열
+  - Tablet : 3열
+  - Mobile : 2열
+- 반응형에 따른 페이지 네이션 기능을 구현합니다.
+- 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="kor">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/public/icons/PandaIcon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Panda Market</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>