Env: Firebase 연동

KDT1-FE · Sep 12, 2023 · 3453f4e · 3453f4e
1 parent 2f8a98e
commit 3453f4e
Show file tree

Hide file tree

Showing 20 changed files with 1,624 additions and 326 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,8 @@
 {
-    "singleQuote": true, // 작은 따옴표 사용
-    "semi": true, // 세미콜론 사용
-    "tabWidth": 4, // 탭 너비 설정
-    "trailingComma": "all", // 행 끝에 콤마 사용 설정
-    "printWidth": 120, // 개행이 일어나는 한 행의 최대 너비
-    "arrowParens": "always" // 화살표 함수 괄호 설정
+    "singleQuote": true, 
+    "semi": true, 
+    "tabWidth": 4, 
+    "trailingComma": "all",
+    "printWidth": 120, 
+    "arrowParens": "always" 
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.5.0",
     "eslint": "^8.49.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "firebase": "^10.3.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,27 @@
-import React  from 'react';
+import React from 'react';
 import GlobalStyle from './GlobalStyle';
 import Header from './common/Header';
 import Footer from './common/Footer';
-import { Route , BrowserRouter, Routes } from 'react-router-dom';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
 import Home from './pages/Home';
 import Wiki from './pages/Wiki';
 import Gallery from './pages/Gallery';
 
-const App:React.FC = () => {
-  return (
-    <BrowserRouter>
-      <GlobalStyle/>
-      <div className="App">
-        <Header/>
-        <Routes>
-          <Route path="/" element={<Home/>}></Route>
-          <Route path="/wiki" element={<Wiki/>}></Route>
-          <Route path="/gallery" element={<Gallery/>}></Route>
-        </Routes>
-        <Footer/>
-      </div>
-    </BrowserRouter>
-  );
-}
+const App: React.FC = () => {
+    return (
+        <BrowserRouter>
+            <GlobalStyle />
+            <div className="App">
+                <Header />
+                <Routes>
+                    <Route path="/" element={<Home />}></Route>
+                    <Route path="/wiki" element={<Wiki />}></Route>
+                    <Route path="/gallery" element={<Gallery />}></Route>
+                </Routes>
+                <Footer />
+            </div>
+        </BrowserRouter>
+    );
+};
 
 export default App;
diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
   *, *::before, *::after {
@@ -32,4 +32,4 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export default GlobalStyle;
+export default GlobalStyle;
diff --git a/src/common/Footer/index.tsx b/src/common/Footer/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { FooterComponent } from './style';
 
-const Footer:React.FC = () => {
-  return (
-    <FooterComponent>@ Footer</FooterComponent>
-  );
-}
+const Footer: React.FC = () => {
+    return <FooterComponent>@ Footer</FooterComponent>;
+};
 
-export default Footer
+export default Footer;
diff --git a/src/common/Footer/style.tsx b/src/common/Footer/style.tsx
@@ -1,12 +1,13 @@
 import styled from '@emotion/styled';
 
-export const FooterComponent= styled.div`  
-    border-top:1px solid #efefef;
+export const FooterComponent = styled.div`
+    border-top: 1px solid #efefef;
     text-align: center;
-    padding-top:10px
+    padding-top: 10px;
 
     position: fixed;
-    bottom: 0; left: 0;
-    height:40px;
+    bottom: 0;
+    left: 0;
+    height: 40px;
     width: 100%;
 `;
diff --git a/src/common/Header/index.tsx b/src/common/Header/index.tsx
@@ -1,27 +1,19 @@
 import React from 'react';
-import { 
-  HeaderComponent, 
-  TitleAnchor, 
-  AnchorContainer,
-  ListAnchor, 
-  RightAnchorContainer,
-  ModalButton
-} from './style';
+import { HeaderComponent, TitleAnchor, AnchorContainer, ListAnchor, RightAnchorContainer, ModalButton } from './style';
 
-const Header:React.FC = () => {
-  return (
-    <HeaderComponent>
-      <TitleAnchor href="/">wiki for fastcampus</TitleAnchor>
-      <AnchorContainer>
-      <RightAnchorContainer>
-        <ListAnchor href="/wiki">wiki</ListAnchor>
-        <ListAnchor href="/gallery">gallery</ListAnchor>
-        <ModalButton>commute</ModalButton>
-      </RightAnchorContainer>
-      </AnchorContainer>
-
-    </HeaderComponent>
-  );
-}
+const Header: React.FC = () => {
+    return (
+        <HeaderComponent>
+            <TitleAnchor href="/">wiki for fastcampus</TitleAnchor>
+            <AnchorContainer>
+                <RightAnchorContainer>
+                    <ListAnchor href="/wiki">wiki</ListAnchor>
+                    <ListAnchor href="/gallery">gallery</ListAnchor>
+                    <ModalButton>commute</ModalButton>
+                </RightAnchorContainer>
+            </AnchorContainer>
+        </HeaderComponent>
+    );
+};
 
-export default Header
+export default Header;
diff --git a/src/common/Header/style.tsx b/src/common/Header/style.tsx
@@ -1,51 +1,51 @@
 import styled from '@emotion/styled';
-export const HeaderComponent= styled.div`  
-    display:flex;
-    align-items:center;
-    justify-content:space-between;
-    background-color: #350D36;
-    
+export const HeaderComponent = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #350d36;
+
     position: fixed;
-    top: 0; left: 0;
+    top: 0;
+    left: 0;
     height: 72px;
     width: 100%;
 `;
 
 export const TitleAnchor = styled.a`
-    margin-left:30px;
+    margin-left: 30px;
     font-size: 32px;
-    font-weight:bold;
-    color: #fff;   
-`
+    font-weight: bold;
+    color: #fff;
+`;
 
 export const AnchorContainer = styled.div`
-    float:right;
-`
+    float: right;
+`;
 
 export const RightAnchorContainer = styled.div`
-    display:flex;
-`
+    display: flex;
+`;
 
 export const ListAnchor = styled.a`
-    margin-right:20px;
-    font-weight:500;
-    font-size:24px;
-    color:#fff;
-`
+    margin-right: 20px;
+    font-weight: 500;
+    font-size: 24px;
+    color: #fff;
+`;
 
 export const ModalButton = styled.button`
     background-color: blue;
-    border:none;
-    border-radius:10px;
-    margin-right:30px;
-    margin-left:10px;
-    padding:5px;
-    font-weight:500;
-    font-size:24px;
-    color:#fff;
+    border: none;
+    border-radius: 10px;
+    margin-right: 30px;
+    margin-left: 10px;
+    padding: 5px;
+    font-weight: 500;
+    font-size: 24px;
+    color: #fff;
 
-    &:hover{
-        background-color:skyblue;
+    &:hover {
+        background-color: skyblue;
     }
-`
-
+`;