Merge pull request #3 from Chatting-App-FE/feature/sidebar

Feature: 사이드바 레이아웃 구현

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -17,6 +18,7 @@
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
     "typescript": "^4.9.5",

src/App.tsx

@@ -1,24 +1,13 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Flex } from '@chakra-ui/react';
+import SideBar from './components/SideBar/SideBar';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Flex>
+        <SideBar />
+      </Flex>
     </div>
   );
 }

src/components/SideBar/SideBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import { AddIcon, EditIcon, ArrowRightIcon, ChatIcon } from '@chakra-ui/icons';
+
+const SideBar = () => {
+  return (
+    <Box
+      w="250px"
+      h="100vh"
+      bg="gray.50"
+      color="black"
+      p={10}
+      position="fixed"
+      left={0}
+      boxShadow="xl"
+    >
+      <Text fontSize="4xl" fontWeight="extrabold" mb={6}>
+        로고자리
+      </Text>
+      <Box color="#828C98">
+        <Text mb={4}>
+          <ArrowRightIcon mr={2} />
+          전체 채팅방 보기
+        </Text>
+
+        <Text mb={4}>
+          <AddIcon mr={2} />
+          새로운 채팅방 생성
+        </Text>
+
+        <Text mb={4}>
+          <EditIcon mr={2} />
+          개인 정보 수정
+        </Text>
+      </Box>
+      <Box mt={100}>
+        <Text fontSize="2xl" fontWeight="bold" mb={6}>
+          나의 채팅방
+        </Text>
+        <Box>
+          <Text>
+            <ChatIcon mr={2} /> 채팅방1 예시
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default SideBar;

src/index.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ChakraProvider } from '@chakra-ui/react';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>
   </React.StrictMode>
 );