프로토타입 | Notion

CSS

각 vue 파일에서 <style scoped>로 작성해서 PR하고 나서 합치기
navbar
메인
- 메인 텍스트, 메인 버튼, 아래 텍스트 모두 가운데 정렬 - 가로 900px
예약창
- 가운데 정렬하고 가로 900px
그라데이션 색 만드는 방법

Vue Project 폴더 구조

App.vue
- template
  - navbar (페이지 내용이 계속 바뀌어도 navbar는 항상 떠있도록)
  - router-view
view 폴더
- HomeView : MainPage.vue, MainCalendar.vue, MainContents.vue가 담김 (컴포넌트)
  - 여기에서 컴포넌트가 숨겨졌다가 버튼 클릭, 캘린더 클릭에 의해서 순차적으로 보여지게 됨
  - 스크롤 이동은 아래 페이지 참고
    - 스크롤 이동 함수
- MyPageView.vue : MyRsvInfo.vue, PersonalInfo.vue가 담김 (컴포넌트)
  - 여기에 컴포넌트를 2개 담고 버튼으로 visibility를 조절함.
  - 아니면 따로 View를 각각 만들고 라우터로 조절해도 되는데, (이렇게 되면 URL이 달라짐)
  - 둘 중 어떤 방식으로 해도 상관 없음
  - 아니면
  - 여기에 왼쪽 박스는 template에 작성해 두는데 router-link를 포함시키고,
  - 오른쪽 박스는 router-view로 해서 mypage 폴더 안의 MyRsvInfoView.vue, PersonalInfoView.vue가 나타나도록
- mypage 폴더
  - MyRsvInfoView.vue, PersonalInfoView.vue
- LogInView.vue : LogIn.vue 가 담김 (컴포넌트)
  - 라우터로 user 폴더의 FindIdView.vue, FindPwdView.vue, SignUpView.vue와 연결
- user 폴더
  - FindIdView.vue, FindPwdView.vue, SignUpView.vue : 직접 template 작성
- RsvCompleteView.vue
  - 예약완료 페이지 작성
  - 라우터로 MyRsvInfoView.vue와 HomeView.vue로 연결
components 폴더
- MainPage.vue
- MainCalendar.vue
- MainContents.vue
- MyRsvInfo.vue (확정 x)
- PersonalInfo.vue (확정 x)
- LogIn.vue (확정 x)
- 이후에 컴포넌트 계속 추가 가능
- 하지만 컴포넌트를 사용하는 의미가 여러 페이지에 겹치는 부분이 있을 때 하나의 컴포넌트로 만들어두고 여러 페이지에 갖다붙이는 것인 만큼, 다른 페이지와 중복되는 게 없다면 컴포넌트 안 만들고 View 파일에서 바로 template 작성해도 될 것 같다는 생각.
css 폴더
- index.css
  - 이 파일에 모든 css가 들어감.
  - 그리고 App.vue에서 이 파일을 @import하고 있기 때문에 모든 파일에 적용될 수 있는 것.

.prettierrc

.prettierrc
eslint, prettier 설정
- 정말로 에러가 난 것이 아니라 코딩 규칙이 맞지 않는 것. eslint config를 사용한 이후부터는 그 규칙에 맞춰줘야 하기 때문에 prettier code formatter의 옵션을 standard config에 맞게 바꿔주는 것. package.json과 동일한 위치 선상에, .prettierrc 파일을 생성한다.
```
{
  "semi": false,  //세미콜론 사용 안 함
  "bracketSpacing": true, 
  "singleQuote": true,
  "useTabs": false, // 탭 사용 안 함
  "trailingComma": "none",
  "printWidth": 80 //한줄에 들어가는 최대 문자열의 길이 80
}
```
- 위의 내용을 붙혀넣는다.
- .prettierrc 는 code formatter와 연결되어 있다. code formatter에 default로 정해진 coding convention rule을 재정의 해주는 역할.
- prettierrc 파일을 읽고 적혀있는 대로 해준다.
- package.json 파일을 열고, rules:{”space-before-function-paren”: “off”} 을 작성해준다.