wanted-business-project4/pages/_app.tsx at main · chltjdrhd777/wanted-business-project4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import type { AppProps } from 'next/app'
import { store } from 'redux/store'
import { ThemeProvider } from 'styled-components'
import { createGlobalStyle } from 'styled-components'
import { Provider as ReduxProvider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

const GlobalStyles = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    body {
        font-size: 1.6rem;
        font-family: 'Inter', 'sans-serif';
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
    }

    a {
        text-decoration: none;
        color:black;
    }
    ul {
        list-style-type: none;
    }
    img{
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    button{
      border:none;
      cursor:pointer;

      &:focus{
        outline:none;
      }
    }
    input {
      outline:none;
      padding: 0 1.5rem;
      &:focus::placeholder{
        color:transparent;
      }
    }
    .flex-center {
      display:flex;
      align-items:center;
      justify-content: center;
    }
    .flex-center-C {
      display:flex;
      align-items:center;
      justify-content: center;
      flex-direction:column;
    }
  `

const persistor = persistStore(store)

function MyApp({ Component, pageProps }: AppProps) {
  const theme = {
    colors: {
      //@ common style
      mainColor: '#FF6363',
      pointColor: '',
      lightblue: '#C5E2EE',
      starColor: '#fd4',
      grayZero: '#d2d2d2',
      grayOne: '#d5d5d5',
      blackOne: '#1c1c1c',
      blackTwo: '#111',
    },
  }

  return (
    <ReduxProvider store={store}>
      <ThemeProvider theme={theme}>
        <PersistGate loading={null} persistor={persistor}>
          <GlobalStyles />
          <Component {...pageProps} />
        </PersistGate>
      </ThemeProvider>
    </ReduxProvider>
  )
}
export default MyApp