---
# System prepended metadata

title: Qrest Wiki Customer
tags: [Qrest]

---

###### 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


```


## クラス図

``` mermaid
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
```

```mermaid
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>