Merge branch 'frontend' into #22-burgerK

OZ-Coding-School · Apr 19, 2024 · 56bdf65 · 56bdf65
2 parents 18c3484 + b5a61d1
commit 56bdf65
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 136 deletions.
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,9 +1,25 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { Container } from '@mui/material'
 
 import _RootLayout from './components/layout/RootLayout'
 import DetailPage from './pages/DetailPage'
 import ErrorPage from './pages/ErrorPage'
 import MainPage from './pages/MainPage'
+import AuthPage from './pages/AuthPage'
+
+const theme = createTheme({
+    palette: {
+        common: {
+            customWhite: '#ffffff',
+            customYellow: '#ffc145',
+            customRed: '#ff6b6c',
+            customPurple: '#b8b8d1',
+            customBlack: '#48495c',
+            customGray: '#a7a7a7',
+        },
+    },
+})
 
 const router = createBrowserRouter([
     {
@@ -13,12 +29,28 @@ const router = createBrowserRouter([
         children: [
             { index: true, element: <MainPage /> },
             { path: 'detail/:id', element: <DetailPage /> },
+            { path: 'auth', element: <AuthPage /> },
         ],
     },
 ])
 
 function App() {
-    return <RouterProvider router={router} />
+    return (
+        <ThemeProvider theme={theme}>
+            <Container
+                maxWidth="md"
+                sx={{
+                    fontSize: {
+                        xs: theme.spacing(1.5), // 모바일
+                        md: theme.spacing(1.7), // 태블릿
+                        lg: theme.spacing(2), // 데스크톱
+                    },
+                }}
+            >
+                <RouterProvider router={router} />
+            </Container>
+        </ThemeProvider>
+    )
 }
 
 export default App
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/layout/RootLayout/Navbar.jsx b/frontend/src/components/layout/RootLayout/Navbar.jsx
@@ -1,13 +1,12 @@
+import { Link } from 'react-router-dom'
 import useLoginStore from '@/store/login'
-import { Button, Container } from '@mui/material'
-import AppBar from '@mui/material/AppBar'
+import Weather from './Weather'
+import navLogo from '/images/nav_logo.png'
 import Box from '@mui/material/Box'
-import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-import * as React from 'react'
-import { Link } from 'react-router-dom'
-import navLogo from '../../../../public/images/nav_logo.png'
-import Weather from './Weather'
+import Avatar from '@mui/material/Avatar'
+import { Button, Container } from '@mui/material'
+import { green } from '@mui/material/colors'
 
 export const _Navbar = () => {
     const { isLogined, setIsLogined } = useLoginStore((state) => state)
@@ -37,59 +36,89 @@ export const _Navbar = () => {
     // }
 
     return (
-        <Box sx={{ flexGrow: 1 }}>
-            <Container maxWidth="md" style={{ padding: 0 }}>
-                <AppBar
-                    position="static"
-                    style={{
-                        backgroundColor: 'white',
-                        boxShadow: 'none',
+        <Container maxWidth="md" style={{ padding: 0 }}>
+            <Box
+                component="div"
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    mt: 2,
+                }}
+            >
+                <Box
+                    component="div"
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 2,
                     }}
                 >
-                    <Toolbar>
-                        <Link to={'/'}>
-                            <img src={navLogo} alt="" />
+                    <Link to={'/'}>
+                        <img src={navLogo} alt="" />
+                    </Link>
+                    <Typography
+                        color={'black'}
+                        variant="h8"
+                        component="div"
+                        sx={{ flexGrow: 1 }}
+                    >
+                        <Weather />
+                    </Typography>
+                </Box>
+                <Box>
+                    {isLogined === false ? (
+                        <Link to="/auth?mode=login">
+                            <Button
+                                style={{
+                                    backgroundColor: '#ffc145',
+                                    borderRadius: '16px',
+                                }}
+                                disableElevation
+                                variant="contained"
+                                size="medium"
+                                // onClick={handleLoginModal}
+                            >
+                                로그인
+                            </Button>
                         </Link>
-                        <Typography
-                            color={'black'}
-                            variant="h6"
-                            component="div"
-                            sx={{ flexGrow: 1 }}
+                    ) : (
+                        <Box
+                            component="section"
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 1,
+                            }}
                         >
-                            <Weather />
-                        </Typography>
-                        <div>
-                            {isLogined === false ? (
-                                <Button
-                                    style={{
-                                        backgroundColor: '#ffc145',
-                                        borderRadius: '16px',
-                                    }}
-                                    disableElevation
-                                    variant="contained"
-                                    size="medium"
-                                    onClick={handleLoginModal}
-                                >
-                                    로그인
-                                </Button>
-                            ) : (
-                                <Button
-                                    style={{
-                                        backgroundColor: '#ffc145',
-                                        borderRadius: '50px',
-                                    }}
-                                    disableElevation
-                                    variant="contained"
-                                    size="medium"
-                                    onClick={handleLogoutUser}
-                                >
-                                    로그아웃
-                                </Button>
-                            )}
-                        </div>
-                    </Toolbar>
-                </AppBar>
-            </Container>
-        </Box>
+                            <Avatar
+                                alt="Remy Sharp"
+                                src="images/nav_logo.png"
+                                sx={{
+                                    width: 36,
+                                    height: 36,
+                                    bgcolor: green[500],
+                                }}
+                            />
+                            <Button
+                                style={{
+                                    backgroundColor: '#ffc145',
+                                    borderRadius: '50px',
+                                }}
+                                disableElevation
+                                variant="contained"
+                                size="medium"
+                                onClick={handleLogoutUser}
+                            >
+                                로그아웃
+                            </Button>
+                        </Box>
+                    )}
+                </Box>
+            </Box>
+        </Container>
     )
 }
diff --git a/frontend/src/components/layout/RootLayout/RootLayout.css b/frontend/src/components/layout/RootLayout/RootLayout.css
diff --git a/frontend/src/components/test.jsx b/frontend/src/components/test.jsx
@@ -0,0 +1,5 @@
+function test() {
+  return <div>test</div>;
+}
+
+export default test;
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,4 +1,5 @@
 * {
+
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -21,4 +22,5 @@
 
 body {
     font-family: 'SUIT Variable', sans-serif;
+
 }
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -1,3 +1,4 @@
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
@@ -25,6 +26,7 @@ enableMocking().then(() => {
     )
 })
 
+
 // https: ReactDOM.createRoot(document.getElementById("root")).render(
 //   <React.StrictMode>
 //     <App />

diff --git a/frontend/src/mocks/browser.js b/frontend/src/mocks/browser.js
@@ -1,4 +1,6 @@
+
 import { setupWorker } from 'msw/browser'
 import { handlers } from './handlers'
 
 export const worker = setupWorker(...handlers)
+
diff --git a/frontend/src/mocks/handlers.js b/frontend/src/mocks/handlers.js
@@ -1,3 +1,4 @@
+
 import { HttpResponse, http } from 'msw'
 export const handlers = [
     // By calling “http.get()” we’re instructing MSW
@@ -11,3 +12,4 @@ export const handlers = [
         return HttpResponse.json({})
     }),
 ]
+
diff --git a/frontend/src/pages/AuthPage.jsx b/frontend/src/pages/AuthPage.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+function AuthPage() {
+    return <div>AuthPage</div>
+}
+
+export default AuthPage
diff --git a/frontend/src/pages/DetailPage.jsx b/frontend/src/pages/DetailPage.jsx
@@ -1,3 +1,4 @@
+
 import { useParams } from 'react-router-dom'
 
 function DetailPage() {
@@ -8,3 +9,4 @@ function DetailPage() {
 }
 
 export default DetailPage
+