Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

충남대 FE_강병현 4주차 과제 Step3 #101

Open
wants to merge 30 commits into
base: kang-kibong
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
71d6f23
init
kang-kibong Jul 16, 2024
6fa65e6
docs(README): add feature list
kang-kibong Jul 18, 2024
557849e
chore: install chakra-ui
kang-kibong Jul 18, 2024
09fdb47
feat: add Product page
kang-kibong Jul 19, 2024
005f360
feat: add ProductInfo component
kang-kibong Jul 19, 2024
0d87b0f
feat: add ProductOrder component
kang-kibong Jul 19, 2024
c32f37f
feat: add QuantitySelector component
kang-kibong Jul 19, 2024
c092ebf
feat: add Order page
kang-kibong Jul 19, 2024
30491a8
feat: add OrderMessage component
kang-kibong Jul 19, 2024
9bbd119
feat: add GiftDetail component
kang-kibong Jul 19, 2024
032f834
feat: add Gift component
kang-kibong Jul 19, 2024
9f04d9a
feat: add Payment component
kang-kibong Jul 19, 2024
e56e7e1
feat: add ReceiptForm component
kang-kibong Jul 19, 2024
b52480a
feat: implement product detail API
kang-kibong Jul 19, 2024
6439134
feat: implement product options API
kang-kibong Jul 19, 2024
d8ec8f9
feat: redirect to home page if product is not found
kang-kibong Jul 19, 2024
93c3b3c
feat(ProductOrder): redirect to login page if not authenticated
kang-kibong Jul 19, 2024
8870181
feat: implement product page
kang-kibong Jul 19, 2024
2538f69
docs: add feature list
kang-kibong Jul 19, 2024
2707593
feat: disable selection when quantity exceeds giftOrderLimit
kang-kibong Jul 19, 2024
7244e9e
feat: add validation to limit card message to 100 characters
kang-kibong Jul 19, 2024
81a18ed
feat: guide user to input card message if not provided
kang-kibong Jul 19, 2024
7de9397
feat: validate cash receipt number when checkbox is clicked
kang-kibong Jul 19, 2024
e7cf349
feat: validate cash receipt number input to be numeric only
kang-kibong Jul 19, 2024
b100d8e
refactor: add useOrderData hooks
kang-kibong Jul 19, 2024
5654331
refactor: add useProductData hooks
kang-kibong Jul 19, 2024
8418edf
feat: request and display product detail information
kang-kibong Jul 19, 2024
d8f76e6
docs: add feature list
kang-kibong Jul 20, 2024
cb5a8bc
refactor: change existing form/input to use react-hook-form
kang-kibong Jul 20, 2024
d8e7796
feat: add validation for Payment form using react-hook-form
kang-kibong Jul 20, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
REACT_APP_BASE_URL=https://kakao-tech-campus-mock-server.vercel.app
64 changes: 64 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["react-app", "eslint:recommended", "plugin:import/typescript", "airbnb", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"no-var": "error",
"no-multiple-empty-lines": "error",
"no-console": ["error", { "allow": ["warn", "error", "info"] }],
"eqeqeq": "error",
"dot-notation": "error",
"import/extensions": ["error", "ignorePackages", {
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}],
"react/jsx-props-no-spreading": "off",
"import/prefer-default-export": "off",
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
"import/no-extraneous-dependencies": "off",
"import/no-unresolved": "off",
"react/require-default-props": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error", { "variables": false , "functions": false,"classes": false}],
"react/prop-types": "off",
"import/no-cycle": "off",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error",
"jsx-a11y/label-has-associated-control": [ 2, {
"some": [ "nesting", "id" ]
}],
"react-hooks/exhaustive-deps": "off",
"no-alert": "off"
},
"settings": {
"import/resolver": {
"alias": {
"map": [
["@", "./src"],
["@components", "./src/components"],
["@assets", "./src/assets"],
["@hooks", "./src/hooks"],
["@pages", "./src/pages"],
["@routes", "./src/routes"],
["@utils", "./src/utils"],
["@context", "./src/context"],
["@internalTypes", "./src/types"],
["@apis", "./src/apis"]
],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
59 changes: 0 additions & 59 deletions .eslintrc.js

This file was deleted.

28 changes: 28 additions & 0 deletions .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
test:
# Operating System
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v1
- run: yarn
#👇 Adds Chromatic as a step in the workflow
- uses: chromaui/action@v1
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

- name: Create comment PR
uses: thollander/actions-comment-pull-request@v1
env:
TOKEN: ${{ secrets.TOKEN }}
with:
message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
Expand All @@ -22,4 +23,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

.eslintcache
.yaml

*storybook.log
1 change: 1 addition & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
3 changes: 0 additions & 3 deletions .prettierignore

This file was deleted.

5 changes: 3 additions & 2 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{
"singleQuote": true,
"parser": "typescript",
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"printWidth": 120,
"arrowParens": "always"
}
35 changes: 15 additions & 20 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,31 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import path from 'path';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
],
webpackFinal: async (config) => {
config.resolve?.plugins?.push(
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, '../tsconfig.json'),
}),
);

return config;
},
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {
useSWC: true,
},
},
},
docs: {
autodocs: 'tag',
options: {},
},
staticDirs: ['../public'],
webpackFinal: async (config) => {
if (config.resolve) {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
}
return config;
},
};
export default config;
2 changes: 0 additions & 2 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import type { Preview } from '@storybook/react';
import '@/styles';

const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
Expand Down
24 changes: 23 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,23 @@
# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
# 4️⃣ 4주차 상품 주문하기
## 📡 1단계 - 상품 상세 페이지 & 상품 결제하기 Form 구현하기
### ✅ 기능 목록
- [x] chakra-ui 설치
- [x] 상품 상세페이지 UI 구현
- [x] 상품 결제페이지 UI 구현
- [x] `/api/v1/products/{productId}/detail`에 대한 API 구현
- [x] `/api/v1/products/{productId}/options`에 대한 API 구현
- [x] 없는 상품의 경우 메인 페이지로 리다이렉트
- [x] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 리다이렉트

## 👓 2단계 - validation 구현하기
### ✅ 기능 목록
- [x] 상품 상세 페이지에서 상품의 개수를 option API의 giftOrderLimit을 초과할 경우 선택 불가능하게 구현
- [x] 결제 페이지 Form validation 구현
- [x] 카드 메시지를 입력하지 않으면 메시지 입력하도록 안내
- [x] 카드 메시지가 100글자 넘을 경우 100자 이내로 입력하도록 안내
- [x] 현금 영수증 checkbox 클릭시 현금영수증 번호가 입력되었는지 확인
- [x] 현금 영수증 입력은 숫자만 입력하도록 안내

## 👓 3단계 - React Hook Form를 사용하여 기존의 form을 리팩터링 해요.
- [x] 기존에 만든 form / input을 react-hook-form으로 변경
- [x] validate 또한 react-hook-form 기능을 활용 (이 과정에서 zod를 사용해도 좋음.)
11 changes: 10 additions & 1 deletion craco.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,16 @@ const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@': path.resolve(__dirname, 'src/'),
'@components': path.resolve(__dirname, 'src/components'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@pages': path.resolve(__dirname, 'src/pages'),
'@routes': path.resolve(__dirname, 'src/routes'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@context': path.resolve(__dirname, 'src/context'),
'@internalTypes': path.resolve(__dirname, 'src/types'),
'@apis': path.resolve(__dirname, 'src/apis'),
},
},
};
Loading