Merge pull request #86 from k-impossible/main

[FE] Enter 컴포넌트 스타일 완료, 기타사항 수정

client/.eslintrc.json

@@ -13,7 +13,7 @@
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:import/typescript",
-    "plugin:@typescript-eslint/eslint-recommended", 
+    "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "parser": "@typescript-eslint/parser",
@@ -31,13 +31,14 @@
     }
   },
   "rules": {
-    "indent": ["error",2],
+    "indent": ["warn", 2],
     "camelcase": 1,
     "no-var": "error",
     "react/react-in-jsx-scope": 0,
     "react/jsx-uses-react": 0,
     "comma-dangle": 0,
     "react/prop-types": 0,
-    "no-unused-vars": "off"
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off"
   }
-}
+}

client/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@mui/styled-engine-sc": "^5.14.7",
@@ -53,6 +55,8 @@
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "eslint": "^8.48.0",
+    "@types/styled-components": "^5.1.26",
+    "@types/react-redux": "^7.1.26",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",

client/src/App.tsx

@@ -1,10 +1,20 @@
 import { Routes, Route } from 'react-router-dom';
 import MainPage from './pages/Main/MainPage';
+import { Container } from '@mui/material';
 function App() {
   return (
-    <Routes>
-      <Route path="/" element={<MainPage />} />
-    </Routes>
+    <Container
+      sx={{
+        display: 'flex',
+        width: '100%'
+      }}
+      maxWidth={false}
+      disableGutters
+    >
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+      </Routes>
+    </Container>
   );
 }
 

client/src/components/Enter/Enter.tsx

@@ -0,0 +1,55 @@
+import { Box, Button, Container, Typography } from '@mui/material';
+import GuideBook from '../GuideBook/GuideBook';
+
+function Enter() {
+  const imgSrc = `images/chapter${1}.png`;
+  return (
+    <Container
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}
+    >
+      <Box marginRight={20}>
+        <Typography
+          variant="h4"
+          align="center"
+          marginBottom={1}
+          fontWeight={600}
+        >
+          Chapter 1
+        </Typography>
+        <Typography paragraph align="center" color="text.secondary">
+          인사나누기
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: 10
+          }}
+        >
+          <img
+            src={imgSrc}
+            style={{ width: '400px', height: '370px' }}
+            alt="enterImg"
+          />
+          <Button
+            variant="contained"
+            size="large"
+            color="primary"
+            sx={{ marginTop: 10 }}
+          >
+            학습하기
+          </Button>
+        </Box>
+      </Box>
+      <GuideBook />
+    </Container>
+  );
+}
+
+export default Enter;

client/src/components/GuideBook/GuideBook.tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+
+export default function GuideBook() {
+  return (
+    <Box sx={{ width: '100%', background: grey[200] }}>
+      <Typography variant="h4" fontWeight={600}>
+        Guide Book 자리
+      </Typography>
+    </Box>
+  );
+}

client/src/components/Nav/Nav.tsx

@@ -0,0 +1,35 @@
+import { Box, List, ListItemButton, ListItemText, Avatar } from '@mui/material';
+import DoneIcon from '@mui/icons-material/Done';
+import { grey } from '@mui/material/colors';
+
+function Nav() {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth: 300,
+        height: '100vh',
+        borderRight: 1,
+        borderColor: grey[300]
+      }}
+    >
+      <List>
+        <ListItemButton sx={{ borderBottom: 1, borderColor: grey[200] }}>
+          <ListItemText
+            primary="Chapter 1"
+            primaryTypographyProps={{ style: { overflowWrap: 'break-word' } }}
+            secondary="인사 나누기"
+          />
+          <Avatar sx={{ bgcolor: 'success.light' }}>
+            <DoneIcon />
+          </Avatar>
+        </ListItemButton>
+        <ListItemButton sx={{ borderBottom: 1, borderColor: grey[200] }}>
+          <ListItemText primary="Chapter 2" secondary="활동에 대해 말하기" />
+        </ListItemButton>
+      </List>
+    </Box>
+  );
+}
+
+export default Nav;