(TAM-25) signin/signup

package.json

@@ -20,7 +20,7 @@
     "react-bootstrap": "^2.3.1",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -6,6 +6,8 @@ import Home from "./pages/Home";
 import Project from "./pages/Project";
 import Member from "./pages/Member";
 import Board from "./pages/Board";
+import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
 
 function App() {
   return (
@@ -17,6 +19,8 @@ function App() {
           <Route path="/project" element={<Project />} />
           <Route path="/member" element={<Member />} />
           <Route path="/board" element={<Board />} />
+          <Route path="/signin" element={<SignIn />} />
+          <Route path="/signup" element={<SignUp />} />
         </Routes>
       </Router>
     </div>

src/components/Board/index.tsx

@@ -0,0 +1,45 @@
+import Card from "@mui/material/Card";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Button from "react-bootstrap/Button";
+import "./style.css";
+
+export default function ProjectTile(props: any) {
+  return (
+    <div className="projectCard">
+      <CardMedia
+        className="projectCardImg"
+        component="img"
+        height="170"
+        image="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg"
+        alt="test photo"
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Techeer Site Project
+        </Typography>
+        <Typography variant="caption">Techeer-A</Typography>
+        <Typography
+          className="projectDesc"
+          variant="body2"
+          color="text.secondary"
+        >
+          멘토링 프로그램 테커 사이트를 만드는 프로젝트이며 테커 사이트를 만드는
+          프로젝트이며 프로젝트이다.
+        </Typography>
+      </CardContent>
+      <div className="projectTags">
+        <Button className="projectTagBtn" variant="contained" size="sm">
+          <h6>React</h6>
+        </Button>
+        <Button className="projectTagBtn" variant="contained" size="sm">
+          <h6>Spring Boot</h6>
+        </Button>
+        <Button className="projectTagBtn" variant="contained" size="sm">
+          <h6>Redis</h6>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/Board/style.css

@@ -0,0 +1,43 @@
+.projectCard {
+    width: 350px;
+    height: 380px;
+    margin-left: auto;
+    margin-right: auto;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 13px;
+  }
+
+  .projectCardImg {
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    margin-bottom: 14px;
+    border-top-left-radius: 13px;
+    border-top-right-radius: 13px;
+  }
+
+  .projectDesc {
+    margin-top: 11px;
+  }
+
+  .projectTags {
+    padding: 16px;
+  }
+
+  .projectTags Button {
+    margin-right: 12px;
+    background: #efefef;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 12px;
+  }
+
+  .projectTags Button:hover {
+    background: lightgray;
+  }
+
+  .projectTags h6 {
+    margin-bottom: 0px;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: 400;
+    color: #000000;
+  }
+

src/components/NaviBar/index.tsx

@@ -29,8 +29,8 @@ const Navibar = () => {
         </Nav>
         <Nav>
           <NavDropdown title="Profile" id="collasible-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Login</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">Register</NavDropdown.Item>
+            <NavDropdown.Item href="/signin">Login</NavDropdown.Item>
+            <NavDropdown.Item href="/signup">Register</NavDropdown.Item>
             <NavDropdown.Divider />
             <NavDropdown.Item href="#action/3.4">Logout</NavDropdown.Item>
           </NavDropdown>

src/pages/Board/index.tsx

@@ -1,9 +1,64 @@
 import Grid from "@mui/material/Grid";
 
-export default function Board() {
+//export default function Board() {
+//  return (
+//    <Grid>
+//      <p> Board 페이지입니다</p>
+//    </Grid>
+//  );
+//}
+import * as React from "react";
+//import Grid from "@mui/material/Grid";
+import ProjectTile from "../../components/Board";
+
+export default function Project() {
+  const projectDatas = [
+    {
+      id: "0001",
+      projectTitle: "projectA",
+      projectTeam: "Team A",
+      projectDesc:
+        "멘토링 프로그램 테커 사이트를 만드는 프로젝트이며 테커 사이트를 만드는 프로젝트이며 프로젝트이다.",
+      projectImg:
+        "https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg",
+    },
+    {
+      id: "0002",
+      projectTitle: "projectB",
+      projectTeam: "Team B",
+      projectDesc:
+        "멘토링 프로그램 테커 사이트를 만드는 프로젝트이며 테커 사이트를 만드는 프로젝트이며 프로젝트이다.",
+      projectImg:
+        "https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg",
+    },
+    {
+      id: "0003",
+      projectTitle: "projectC",
+      projectTeam: "Team C",
+      projectDesc:
+        "멘토링 프로그램 테커 사이트를 만드는 프로젝트이며 테커 사이트를 만드는 프로젝트이며 프로젝트이다.",
+      projectImg:
+        "https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+    },
+  ];
+
   return (
-    <Grid>
-      <p> Board 페이지입니다</p>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      style={{ marginTop: "auto" }}
+    >
+      <Grid item xs={4}>
+        <ProjectTile />
+      </Grid>
+      <Grid item xs={4}>
+        <ProjectTile />
+      </Grid>
+      <Grid item xs={4}>
+        <ProjectTile />
+      </Grid>
     </Grid>
   );
 }

src/pages/SignIn/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import logo from '../../assets/images/Techeer_Logo_circle.png';
+
+
+function Copyright(props: any) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="/home">
+        Techeer
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const theme = createTheme();
+
+export default function SignIn() {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    console.log({
+      email: data.get('email'),
+      password: data.get('password'),
+    });
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <img src={logo} width={40} height={40} alt="logo"/>
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2, backgroundColor: '#416043' }}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+              </Grid>
+              <Grid item>
+                <Link href="/signup" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+}