chore: App.tsx & Header, Footer 등 수정

kakao-tech-campus-2nd-step2 · Jul 7, 2024 · 2f92828 · 2f92828
1 parent da05ff2
commit 2f92828
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,8 +24,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,62 @@
-import { css } from '@emotion/react';
-import React from 'react';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
 
 import Footer from './components/common/Footer/Footer';
 import Header from './components/common/Header/Header';
+import LoginPage from './pages/LoginPage';
+import MainPage from './pages/MainPage';
+import MyAccountPage from './pages/MyAccountPage';
+import ThemePage from './pages/ThemePage';
 
-const appStyle = css`
+const AppWrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 `;
 
-const mainContentStyle = css`
+const ContentWrapper = styled.div`
   flex: 1;
 `;
 
 const App: React.FC = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [loginId, setLoginId] = useState('');
+
+  const handleLogin = (id: string) => {
+    setIsLoggedIn(true);
+    setLoginId(id);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setLoginId('');
+  };
+
   return (
-    <div css={appStyle}>
-      <Header />
-      <main css={mainContentStyle} />
-      <Footer />
-    </div>
+    <Router>
+      <AppWrapper>
+        <Header isLoggedIn={isLoggedIn} />
+        <ContentWrapper>
+          <Routes>
+            <Route path="/" element={<MainPage />} />
+            <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />
+            <Route
+              path="/my-account"
+              element={
+                isLoggedIn ? (
+                  <MyAccountPage onLogout={handleLogout} loginId={loginId} />
+                ) : (
+                  <Navigate to="/login" />
+                )
+              }
+            />
+            <Route path="/theme/:themeKey" element={<ThemePage />} />
+          </Routes>
+        </ContentWrapper>
+        <Footer />
+      </AppWrapper>
+    </Router>
   );
 };
 

diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
@@ -2,26 +2,17 @@ import styled from '@emotion/styled';
 import React from 'react';
 
 const FooterWrapper = styled.footer`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 18px;
-  background-color: #e0e0e0;
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-`;
-
-const FooterInner = styled.div`
+  padding: 20px;
+  background-color: #f8f9fa;
   text-align: center;
-  font-size: 18px;
-  font-family: 'Arial, sans-serif';
+  width: 100%;
+  margin-top: auto;
 `;
 
 const Footer: React.FC = () => {
   return (
     <FooterWrapper>
-      <FooterInner>카카오톡 선물하기</FooterInner>
+      <p>카카오톡 선물하기</p>
     </FooterWrapper>
   );
 };

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
@@ -1,12 +1,18 @@
 import styled from '@emotion/styled';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-const HeaderWrapper = styled.header`
+interface HeaderProps {
+  bgColor?: string;
+  isLoggedIn: boolean;
+}
+
+const HeaderWrapper = styled.header<{ bgColor?: string }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
-  background-color: #ffffff;
+  background-color: ${({ bgColor }) => bgColor || '#ffffff'};
 `;
 
 const HeaderInner = styled.div`
@@ -22,7 +28,7 @@ const LogoText = styled.div`
   font-family: 'Arial, sans-serif';
 `;
 
-const LoginButton = styled.button`
+const NavButton = styled(Link)`
   padding: 8px 16px;
   background-color: transparent;
   color: black;
@@ -31,14 +37,23 @@ const LoginButton = styled.button`
   cursor: pointer;
   font-size: 14px;
   font-family: 'Arial, sans-serif';
+  text-decoration: none;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
 `;
 
-const Header: React.FC = () => {
+const Header: React.FC<HeaderProps> = ({ bgColor, isLoggedIn }) => {
   return (
-    <HeaderWrapper>
+    <HeaderWrapper bgColor={bgColor}>
       <HeaderInner>
         <LogoText>선물하기</LogoText>
-        <LoginButton>로그인</LoginButton>
+        {isLoggedIn ? (
+          <NavButton to="/my-account">내 계정</NavButton>
+        ) : (
+          <NavButton to="/login">로그인</NavButton>
+        )}
       </HeaderInner>
     </HeaderWrapper>
   );