경북대 FE_이정민_1주차 과제 Step2,3

README.md

@@ -1,2 +1,36 @@
 # react-gift-react-foundation
 FE 카카오 선물하기 1주차 과제: React 기초
+
+### 2단계 - Storybook을 사용하여 재사용 가능한 컴포넌트 구현
+
+#### Requirements
+- [x] Storybook 추가<br>
+공통 컴포넌트에 아래와 같은 컴포넌트를 구현하고, Storybook에서 확인 할 수 있도록 구현
+  - Button 컴포넌트 구현
+    - [x] Theme Props에 따라 버튼의 컬러와 디자인이 변경되도록 구현
+    - [x] Size Props에 따라 버튼의 size가 변경되도록 구현
+    - [x] Size Props 예외 - value가 responsive인 경우 미디어 쿼리에 따라 사이즈가 변경되도록 구현
+    - [x] Button element의 기본 속성을 모두 사용 가능하도록 구현
+
+  - Input 컴포넌트 구현
+    - [x] disabled Props에 따라 Input이 비활성화 되고, UI에서도 비활성화 됨을 인지 가능하도록 구현
+    - [x] invalid Props 에 따라 Input의 값이 잘 못되었음을 UI에서 인지 가능하도록 구현
+    - [x] Size Props에 따라 버튼의 size가 변경되도록 구현
+    - [x] Size Props 예외 - value가 responsive인 경우 미디어 쿼리에 따라 사이즈가 변경되도록 구현
+    - [x] Input Element의 기본 속성들을 모두 사용 가능하도록 구현
+
+  - Image 컴포넌트 구현
+    - [x] ratio Props에 따라 이미지 비율을 설정 - value가 number로 16/9로 넘겨진 경우
+    - [x] ratio Props에 따라 이미지 비율을 설정 - value가 square로 설정한 경우
+    - [x] radius Props에 따라 모서리가 둥글게 구현 - value가 number인 경우
+    - [x] radius Props에 따라 모서리가 둥글게 구현 - value가 circle인 경우
+    - [x] Img Element의 기본 속성들을 모두 사용 가능하도록 구현
+
+  - GoodsItem 컴포넌트 구현
+    - [x] Default 형태와 Ranking 형태의 컴포넌트를 각각 구현
+    - [x] 공통 Props: imageSrc, subtitle, title, amount 넘겨받도록 구현
+    - 랭킹 형태의 경우 rankingIndex Props를 받도록 구현
+      - [x] rankingIndex가 1~3이면 분홍색 랭킹 배지가 보이도록 구현
+      - [x] rankingIndex가 1~3이 아니면 회색 랭킹 배지가 보이도록 구현
+
+  - [x] Grid, Container 컴포넌트 구현

gift-app/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'prettier'],
+    extends: ['airbnb', 'plugin:import/errors', 'plugin:import/warnings', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
+    rules: {
+        'linebreak-style': 0,
+        'import/prefer-default-export': 0,
+        'prettier/prettier': 0,
+        'import/extensions': 0,
+        'no-use-before-define': 0,
+        'import/no-unresolved': 0,
+        'import/no-extraneous-dependencies': 0,
+        'no-shadow': 0,
+        'react/prop-types': 0,
+        'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+        'jsx-a11y/no-noninteractive-element-interactions': 0,
+        'react/require-default-props': 'off',
+        'react/function-component-definition': 'off',
+        'react/jsx-props-no-spreading': 'off',
+        'react/no-unescaped-entities': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        "react/react-in-jsx-scope": "off",
+    },
+};

gift-app/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Log files
+*.log
+*storybook.log

gift-app/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "semi": true,
+    "useTabs": false,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "arrowParens": "always"
+}

gift-app/.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@components': path.resolve(__dirname, '../src/components'),
+      '@utils': path.resolve(__dirname, '../src/utils'),
+      '@styles': path.resolve(__dirname, '../src/styles'),
+    };
+    return config;
+  },
+};
+
+export default config;

gift-app/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

gift-app/README.md

@@ -0,0 +1,10 @@
+# react-gift-react-foundation
+FE 카카오 선물하기 1주차 과제: React 기초
+
+### Requirements
+- [x] Create React App을 기반으로 프로젝트를 생성
+- [x] Typescript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게 alias를 설정
+- [x] tsconfig에 어떤 항목들로 구성되어 있는지 살펴보고, 필요하다 생각되는 설정들이 있다면 자유롭게 설정
+- [x] ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅
+- [x] emotion 스타일 라이브러리를 추가하고, reset css를 적용
+- [x] gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리

gift-app/config-overrides.js

@@ -0,0 +1,10 @@
+const { override, addWebpackAlias } = require('customize-cra');
+const path = require('path');
+
+module.exports = override(
+    addWebpackAlias({
+        '@components': path.resolve(__dirname, 'src/components'),
+        '@utils': path.resolve(__dirname, 'src/utils'),
+        '@styles': path.resolve(__dirname, 'src/styles')
+    })
+);