###### tags: `Qrest`
# Qrest Wiki Customer
## ファイル構造

.
├ components
│ ├ common // 共通
│ │ ├ menu
│ │ │ ├ logoutBtn.tsx
│ │ │ ├ menu.tsx
│ │ │ ├ menuItem.tsx
│ │ │ └ menuLinkItem.tsx
│ │ ├ logo.tsx
│ │ └ pageWrapper.tsx
│ ├ shopDetail // 店舗詳細&メニュー一覧画面
│ │ └ menuCard.tsx
│ └ shopList // 店舗一覧画面
│ 　 └ shopCard.tsx
├ contexts
│ ├ AuthProvider.tsx
│ └ ThemeProvider.tsx
├ firebase
│ ├ firebase.ts
│ ├ Menu.ts // メニューのJSON構造
│ └ shop.ts // 店舗のJSON構造
├ pages
│ ├ [event_id]
│ │ ├ [shop_id]
│ │ │ └ [menu_id].tsx // メニュー詳細画面
│ │ └ [shop_id].tsx // 店舗詳細&メニュー一覧画面
│ ├ [event_id].tsx // 店舗一覧画面
│ └ _app.tsx
├ public
│ └ favicon.ico
└ styles
　 ├ common
　 │ ├ menu.module.scss
　 │ └ pageWrapper.module.scss
　 ├ menuDetail // メニュー詳細画面
　 │ └ menuDetail.module.scss
　 ├ shopDetail // 店舗詳細&メニュー一覧画面
　 │ ├ menuCard.module.scss
　 │ └ shopDetail.module.scss
　 ├ shopList // 店舗一覧画面
　 │ ├ index.module.scss
　 │ └ shopCard.module.scss
　 ├ _variables.scss
　 └ globals.css

## URL

| 画面名　| URL | 説明 |
| --- | --- | --- |
| 店舗一覧 | /[event_id] | event_id: イベント識別コード |
| 店舗詳細 | /[event_id]/[shop_id] | event_id: イベント識別コード<br>shop_id: 店舗識別コード |
| 商品詳細 | /[event_id]/[shop_id]/[food_id] | event_id: イベント識別コード<br>shop_id: 店舗識別コード<br>food_id: 商品識別コード |

## テーマカラー
| テーマ | メイン | アクセント |
| --- | --- | --- |
| red | #ffffff | #cb2e27 |
| green | #ffffff | #487c35 |
| yellow | #404040 | #f7d441 |

## エラー識別番号
文章が長くHackMDでは見にくかったためスプレッドシートに移動しました。
[モバイルエラー一覧](https://docs.google.com/spreadsheets/d/1V_ondlt7fMHpyDePO1_EdW4UgoYW1vikH4tXtI5Ozr8/edit?usp=sharing)

## 仕様

### 個数
カートに入れれる上限数は一商品あたり５つまで。
商品詳細画面では１から５が選択可能。
カート画面で商品を０にしたら商品は消える。

## メモ
### ディレクトリ構造を作るサイト
[codogue.com](https://codogue.com/asciitree/)
元になるテキスト

.
	components
		common // 共通
			menu
				logoutBtn.tsx
				menu.tsx
				menuItem.tsx
				menuLinkItem.tsx
			logo.tsx
			pageWrapper.tsx
		shopDetail // 店舗詳細&メニュー一覧画面
			menuCard.tsx
		shopList // 店舗一覧画面
			shopCard.tsx
	contexts
		AuthProvider.tsx
		ThemeProvider.tsx
	firebase
		firebase.ts
		Menu.ts // メニューのJSON構造
		shop.ts // 店舗のJSON構造
	pages
		[event_id]
			[shop_id]
				[menu_id].tsx // メニュー詳細画面
			[shop_id].tsx // 店舗詳細&メニュー一覧画面
		[event_id].tsx // 店舗一覧画面
		_app.tsx
	public
		favicon.ico
	styles
		common
			menu.module.scss
			pageWrapper.module.scss
		menuDetail // メニュー詳細画面
			menuDetail.module.scss
		shopDetail // 店舗詳細&メニュー一覧画面
			menuCard.module.scss
			shopDetail.module.scss
		shopList // 店舗一覧画面
			index.module.scss
			shopCard.module.scss
		_variables.scss
		globals.css

## クラス図

classDiagram
    class AuthProvider {
        +loggedIn
    }
    
    class ThemeProvider {
        +selectTheme
        +accentColor
        +mainColor
        +chageTheme()
    }
    
    class firebase {
        
    }
    
    class PageWrapper {
        +return(children:Props)
    }

    class Menu {
        -isMenuOpen
        -menuOpenToggle()
        +return()
    }
    
    class MenuLinkItem {
        -lock
        -showAlert()
    }
    
    class MenuItem {
        -lock
    }
    
    class LogoutBtn {
        -toLoginPage()
        -logout()
    }
    
    class Logo {
        
    }
    
    class Index {
        -getServerSideProps()
    }
    
    class Card {
        +return(shop:CardProps)
    }
    
    class MenuLinkItemProps {
        <<type>>
        
    }
    
    PageWrapper o-- Logo
    PageWrapper o-- Menu
    Menu o-- MenuLinkItem
    Menu o-- MenuItem
    Menu o-- LogoutBtn
    Index o-- PageWrapper
    Index -- firebase
    LogoutBtn <|-- AuthProvider
    LogoutBtn <|-- ThemeProvider
    MenuItem <|-- AuthProvider
    MenuItem <|-- ThemeProvider
    MenuLinkItem <|-- AuthProvider
    MenuLinkItem <|-- ThemeProvider
    Menu <|-- ThemeProvider
    Index *-- Card

classDiagram
    class Index {
        +return(shops)
        -getServerSideProps(): 店舗情報の取得
    }

<style>

:root {
--main: #00a960;
--sub: #b8d200;
}

h2 {
padding: 1rem 2rem;
color: #fff;
background-image: -webkit-gradient(linear, left top, right top, from(var(--main)), to(var(--sub)));
background-image: -webkit-linear-gradient(left, var(--main) 0%, var(--sub) 100%);
background-image: linear-gradient(to right, var(--main) 0%, var(--sub) 100%);
}

h3 {
position: relative;
padding: 1rem .5rem;
}

h3:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
content: '';
background-image: -webkit-gradient(linear, left top, right top, from(var(--main)), to(var(--sub)));
background-image: -webkit-linear-gradient(left, var(--main) 0%, var(--sub) 100%);
background-image: linear-gradient(to right, var(--main) 0%, var(--sub) 100%);
}
</style>