개발을 위한 전체 프로젝트 구조 설정
프로젝트 폴더 구조 정의 src 하위에 아래와 같은 폴더를 생성하여 전체적인 구조를 설정 후 작업한다. @types, a11y,common, componets, data-provider, hooks, locales, Providers, routes, store, utils 각각의 폴더를 만들어서 구분함으로써 나중에 유지 보수 적인 측면이나 여러 모로 용도가 분류 되어야 개발 할때 좀 더 명확하다. 프로젝트를 진행 하면서 하나씩 채워 나갈 예정이다. 먼저 최초의 진입점 화면 부터 구현해 보자. 화면을 구현하기 앞서서 기본 css 파일을 먼저 작성 하겠다. client 최상단 폴더에 mobile.css, style.css 파일을 먼저 작성한다. mobile.css mobile.css 내용이다. .hover-button.active { display : block ; visibility : visible ; } .nav-close-button { margin-left : 8px ; } .nav { position : fixed ; z-index : 64 ; top : 0 ; /* max-width: 260px; */ bottom : 0 ; opacity : 0 ; } .nav.active { position : relative ; left : 0 ; opacity : 1 ; } .nav-mask.active { opacity : 0 ; pointer-events : auto ; } @media ( max-width : 767px ) { .nav { width : calc ( 100% - 10px ) ; transition : all 0.15s ; } .nav-mas...