전남대_FE_이은진 2주차 과제 step1

package.json

@@ -24,12 +24,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
     "@craco/craco": "^7.1.0",
     "@emotion/eslint-plugin": "^11.11.0",
     "@storybook/addon-essentials": "^7.6.17",
@@ -65,8 +64,10 @@
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
+    "react-scripts": "5.0.1",
     "storybook": "^7.6.17",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^4.9.5",
     "webpack": "^5.90.3"
   },
   "overrides": {

src/App.tsx

@@ -1,18 +1,24 @@
-import styled from '@emotion/styled';
+import { useState } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import RoutesPage from './router/Router';
 
 const App = () => {
-  const name = 'Josh Perez';
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+  };
 
   return (
-    <div>
-      <Title>Hello, {name}</Title>
-    </div>
+    <Router>
+      <RoutesPage isLoggedIn={isLoggedIn} onLogin={handleLogin} onLogout={handleLogout} />
+    </Router>
   );
 };
 
 export default App;
-
-const Title = styled.h1`
-  font-size: 1.5em;
-  color: gray;
-`;

src/Layout/Footer/index.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <Wrapper>
+      <Content>카카오톡 선물하기</Content>
+    </Wrapper>
+  );
+};
+
+export default Footer;
+
+const Wrapper = styled.footer`
+  padding: 28px 16px 88px;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 100vw;
+  background-color: #fafafc;
+`;
+
+const Content = styled.p`
+  font-size: 20px;
+  font-weight: bold;
+`;

src/Layout/Header/index.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface HeaderProps {
+  isLoggedIn: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({ isLoggedIn }) => {
+  const navigate = useNavigate();
+
+  const handleLoginClick = () => {
+    navigate('/login');
+  };
+
+  const handleAccountClick = () => {
+    navigate('/my-account');
+  };
+
+  return (
+    <HeaderWrapper>
+      <Title>선물하기</Title>
+      {isLoggedIn ? (
+        <Button onClick={handleAccountClick}>내 계정</Button>
+      ) : (
+        <Button onClick={handleLoginClick}>로그인</Button>
+      )}
+    </HeaderWrapper>
+  );
+};
+
+export default Header;
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background-color: #ffffff;
+`;
+
+const Title = styled.h1`
+  font-size: 30px;
+  font-weight: bold;
+`;
+
+const Button = styled.button`
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+`;

src/Layout/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+import Footer from '@/Layout/Footer';
+import Header from '@/Layout/Header';
+
+interface LayoutProps {
+  isLoggedIn: boolean;
+}
+
+const Layout: React.FC<LayoutProps> = ({ isLoggedIn }) => {
+  return (
+    <div>
+      <Header isLoggedIn={isLoggedIn} />
+      <Outlet />
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

src/Pages/Home/index.tsx

@@ -0,0 +1,17 @@
+import AiReference from "@/components/common/HomeComponents/AiReference";
+import Banner from "@/components/common/HomeComponents/Banner";
+import Ranking from "@/components/common/HomeComponents/Ranking";
+import ThemeCategory from "@/components/common/HomeComponents/ThemeCategory";
+
+export const Home = () => {
+  return(
+    <>
+      <Banner></Banner>
+      <ThemeCategory></ThemeCategory>
+      <AiReference></AiReference>
+      <Ranking></Ranking>
+    </>
+  )
+}
+
+export default Home