movie42 / kiosk-frontend Goto Github PK
View Code? Open in Web Editor NEW키오스크 프로젝트
Home Page: https://everyonekiosk.com
키오스크 프로젝트
Home Page: https://everyonekiosk.com
CSS 스타일을 한번 전체적으로 점검하기.
팀 프로젝트를 시작하려고 합니다. 어떤 요구사항들이 있는지 전반적으로 체크합니다.
잘못된 주소를 요청하거나 새로고침을 했을 때, 간혹 userID, storeId가 유실되어 :userId로 주소창에 띄어집니다.
상품 등록하기
서버에 저장한 상품 데이터를 프론트 앤드에서 호출합니다.
readme 정리하기
Form UI 컴포넌트를 정리합니다.
자동 로그인이 문제입니다. JWT의 유효기간을 확인하고 로그아웃을 하는 방법을 백앤드와 이야기해서 해결하는 방법이 좋을지 다른 방법이 좋을지 생각해봐야합니다.
로컬스토리지에 유저 정보를 저장하는게 좋은 방법인지 고민해봐야할것같습니다.
고객 주문 페이지 수정 사항입니다.
CreateProductPage의 옵션에 에러가 있습니다. 기능이 완전하지 않습니다.
Product가 등록된 다음 Option을 등록할 때 옵션이 하나만 등록됩니다.
Layouts 폴더의 스타일과 도메인 분리
파일 경로가 너무 복잡합니다.
파일 절대경로를 설정합니다.
랜딩 페이지
랜딩 페이지에서 회원가입과 로그인 버튼을 누를 수 있다.
회원 가입 버튼을 누르면 회원가입을 할 수 있다.
홈페이지 약관을 확인 후에 다음으로 가기 버튼을 누르면 회원가입 서식 페이지로 이동한다.
서식을 작성한 뒤에 가입하기를 누르면 가입이 완료된다.
윈도우에서 노토산트KR이 적용되지 않는 이슈가 있습니다.
로그인 화면
상품, 상점에서 쓰이는 ListItem 컴포넌트를 만들어 재사용합니다.
관리자 메뉴 화면
자동 로그인 로직 에러
로그인 정보가 로컬스토리지에 저장되어있을 때, recoil로 사용자 정보를 불러오는데 그 사이에 isLogin이 false가 되면서 router에서 로그인 정보가 유실되어 없는 페이지로 사용자에게 출력되는 문제가 있습니다.
어떻게 해결할 수 있을까요?
Message Modal 컴포넌트 생성 및 적용하기
해당 규칙에 대한 자세한 사항은 12월 16일회의록 참조
Express Server를 Typescript로 세팅합니다.
Apollo-server-express를 사용하여 서버를 세팅합니다.
Language : Typescript
Server : Apollo-server, Apollo-server-express
ORM : Prisma
Query : Graphql,
DB : Mongo�DB Atlas
Styled-Components 설계를 변경해야합니다.
interface를 선언한뒤 컴포넌트 props에 type을 interface로 지정해줄 때, styled component를 React.FC로 덮어쓸 필요가 없습니다. 심각한 오류를 발생시키는 것은 아니지만 필요 없는 덮어쓰기를 할 이유도 없습니다.
styled components가 받고 있는 props의 타입이 무엇인지 알려 줄 때, styled component를 React.FC로 만들 필요가 없습니다.
import React, { ReactNode } from "react";
import styled from "styled-components";
// 이 부분의 선언이 불필요 합니다.
const Button: React.FC<IButtonDefaultStyle> = styled.button<IButtonDefaultStyle>`
cursor: pointer;
font-size: 2rem;
border: 0;
padding: 0.8rem 1.3rem;
border-radius: 0.3rem;
color: ${(props) => props.theme.color.fontColorWhite};
background-color: ${(props) => props.theme.color.gray300};
`;
interface IButtonDefaultStyle
extends React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> {
children: ReactNode;
}
const ButtonDefaultStyle: React.FC<IButtonDefaultStyle> = ({
children,
...props
}) => {
return <Button {...props}>{children}</Button>;
};
export default ButtonDefaultStyle;
import React, { ReactNode } from "react";
import styled from "styled-components";
const Button = styled.button<IButtonDefaultStyle>`
cursor: pointer;
font-size: 2rem;
border: 0;
padding: 0.8rem 1.3rem;
border-radius: 0.3rem;
color: ${(props) => props.theme.color.fontColorWhite};
background-color: ${(props) => props.theme.color.gray300};
`;
interface IButtonDefaultStyle extends React.ButtonHTMLAttributes<HTMLButtonElement>
{
children: ReactNode;
// 커스텀 props 작성
}
// React.FC로 선언하는 것은 틀린 문법이 아니지만 코드 스타일 통일을 위해서 아래와 같이 선언하는 것으로 통일합니다.
const ButtonDefaultStyle = ({
children,
...props
}: IButtonDefaultStyle) => {
return <Button {...props}>{children}</Button>;
};
export default ButtonDefaultStyle;
위와 같이 작성했을 때, interface에 커스텀 props를 작성한다면 다음과 같은 에러를 만날 수 있습니다.
No overload matches this call.
Overload 1 of 2, '(props: { color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, price
const Item: StyledComponent<"li", DefaultTheme, IProductItemProps, never>
No overload matches this call.
Overload 1 of 2, '(props: { color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, price
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"li", DefaultTheme, IProductItemProps, never, "li", "li">): ReactElement<StyledComponentPropsWithAs<"li", ... 4 more ..., "li">, string | JSXElementConstructor<...>>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, pricets(2769)
위 에러는 복잡해보입니다. 하지만 메시지는 간단합니다. custom props에서 id, name, price가 필수 값이라고 알려줬는데 styled components에서 id, name, price�가 사용되고 있지 않다는 에러입니다.
해결할 수 있는 방법은 두가지가 있습니다. 커스텀 props를 옵셔널로 지정하는 방법과 stlyed components에서 사용할 props를 알려주기위한 interface를 따로 만들어서 styled-components에 알려주는 것입니다.
styled components에서 커스텀 props를 사용하기 위해서 interface 또는 types를 따로 선언하는 것을 권장하고 싶습니다. 왜냐하면 리액트 컴포넌트에 필수적으로 받는 props가 지정될 필요가 있기 때문입니다.
View와 Domain 분리(컴포넌트 분리하기)
Organisms 안에 있는 컴포넌트의 기능과 뷰를 분리합니다.
main에서 프로젝트를 클론하고 로컬에서 프로젝트 세팅하기
각 페이지에서 필요에 따라 따로 만들었던 버튼을 재사용되는 컴포넌트로 생성한 뒤에 각 페이지, 유기체, 분자 단위에서 재사용합니다.
키오스크 작업 전 테스트입니다.
테스트 코드 작성하기
Modal 컴포넌트 리펙포링
자세한 사항은 12월 16일회의록 참조
뷰, 도메인 분리하기
고객이 보는 화면의 기능 요구 사항입니다.
12월 16일회의록 참조하기
관리자 화면의 기능 요구사항
로그인 화면
관리자 화면
상품 관리 화면
상품 등록하기
고객 주문 관리 화면 기능 요구사항입니다.
main 화면
취소 버튼을 눌렀을 때
완료 버튼을 눌렀을 때
접수 버튼을 눌렀을 때
테스트
테스트
View와 Domain 분리(컴포넌트 분리하기)
폴더 구조 바꾸기
HTTP Client 라이브러리는 Axios 사용하기
Service, Instance
Error 핸들링
주석을 지워도 이해가 되는 코드 작성해보기.
추후에 할 수 있으면 하기 NextJS(SSR, SSG)
재사용 컴포넌트로 만든 버튼을 client 페이지에 적용합니다.
백앤드 기능 요구사항을 정리한 문서입니다. 이 문서에서 이슈를 만들어 코드를 작성합니다.
그밖에 기능을 만들면서 수정해야할 부분이 있다면 논의 후 바로 바로 반영하도록 하겠습니다.
상품 관리 화면의 기능을 만듭니다.
등록한 상품을 전부 볼 수 있다. 각 아이템은 사진과 상품 이름 가격을 보여주어야한다.
상품 등록, 상품 삭제, 상품 수정 버튼이 있다.
상품 관리 화면에서 상품 등록하기 버튼을 누르면 상품 등록 화면으로 이동한다.
- [ ] 많이 팔린 순, 가격순, 이름순으로 상품을 보여줄 수 있어야한다.
- [ ] 초기화 버튼을 누르면 나중에 등록된 순서대로 상품을 보여준다.
판매량 관리는 상품 세부 사항 화면에서 구현해야 할 것 같습니다.
상품 삭제 버튼을 눌렀을 때
상품 수정 버튼을 눌렀을 때
View와 Domain 분리(컴포넌트 분리하기)
뷰, 도메인 분리하기
프레이머 모션 설치후 사용하는데 오류가 생김
v. 100000
어떻게 하는지에 대한 요구사항
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.