20240412 React Couple Diary - Personal Project ver.1

1일차 완성본

 

import React from "react";
import Stack from '@mui/material/Stack';
import { pink } from '@mui/material/colors';
import SvgIcon from '@mui/material/SvgIcon';

function HomeIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </SvgIcon>
  );
}
export default function Home({ user }) {
  return (
    <div style={{ backgroundColor: 'pink', minHeight: '100vh' }}><br />
      <Stack direction="row" spacing={3}>
        <HomeIcon sx={{ color: pink[500] , padding: '30px'}} />
      <h1 style={{ textAlign: 'center', padding: '10px', margin: '10px 0', color: 'red' }}>LoveBridge</h1><br />
      </Stack>
      
      <button style={{ textAlign: 'center', padding: '10px', margin: '10px 0' }}>LoveBridge</button><br />
      <button style={{ textAlign: 'center', padding: '10px', margin: '10px 0' }}>dairy</button><br />
      <button style={{ textAlign: 'center', padding: '10px', margin: '10px 0' }}>album</button><br />
      <button style={{ textAlign: 'center', padding: '10px', margin: '10px 0' }}>calendar</button><br />
      <button style={{ textAlign: 'center', padding: '10px', margin: '10px 0' }}>setting</button>
    </div>
  )
};

home.jsx

import React from "react";

export default function NotFound() {
  return (
    <div style={{margin: '20px'}}>
      <h1>Page Not Found!!!</h1>
      <img src="/img/NotFound404.png" alt="error" />
    </div>
  )
}

notfound404

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App from './App';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import reportWebVitals from './reportWebVitals';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <Home /> },
      { path: 'Home', element: <Home /> },
      // { path: 'Home/:keyword', element: <Home /> },
      // { path: 'Home/main/:HomeId', element: <HomeDetail /> },
    ]
  }
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js