충남대 FE_박건민 2주차 과제제출

README.md

@@ -1,15 +1,11 @@
-# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+- 질문 1. CRA 기반의 SPA프로젝트에서 React Router를 사용하지 않는다면 어떤 문제가 발생하나요?
+  앞으로 가기, 뒤로 가기가 불가함. UX 저하됨 (네비게이션이 어려워지기 때문)
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa)
+- 질문 2. 리액트 Context 나 Redux는 언제 사용하면 좋을까요? (로그인을 제외한 예시와 이유를 함께 적어주세요.)
+  Context: 전역적으로 필요한 설정일 경우 사용. (테마 등)
+  Redux: 상태관리가 복잡한 경우. (계속해서 변화하는 데이터를 다룰 필요가 있는 경우 등)
 
-## Week 1. 1단계 - 프로젝트 세팅
-
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzgHvzRM)
-
-## Week 1. 2단계 - Storybook을 사용하여 재사용 가능한 컴포넌트 구현
-
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/4wYFPW1K)
-
-## Week 2. 1단계 - 페이지 만들기
-
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzV1ncxk)
+- 질문 3. Local Storage, Session Storage 와 Cookies의 차이가 무엇이며 각각 어떨때 사용하면 좋을까요?
+  Local Storage: 장기간 필요한 데이터를 다룰 때 이용.
+  Session Storage: Session이 종료되면 필요없는 데이터를 다룰 때 이용.
+  Cookies: 인증에 유용. 서버와 클라이언트 간 데이터 전송에 이용하기 적합.

package.json

@@ -24,12 +24,12 @@
   "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": {
-    "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 +65,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,55 @@
 import styled from '@emotion/styled';
+import React from 'react';
+import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
 
-const App = () => {
-  const name = 'Josh Perez';
+import Footer from './components/common/Footer/Footer';
+import Header from './components/common/Header/Header';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import LoginPage from './pages/LoginPage';
+import MainPage from './pages/MainPage';
+import MyAccountPage from './pages/MyAccountPage';
+import ThemePage from './pages/ThemePage';
 
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+const MainContent = styled.div`
+  flex: 1;
+  background-color: #f9f9f9;
+`;
+
+const CustomHeader: React.FC = () => {
+  const { isLoggedIn } = useAuth();
+  return <Header isLoggedIn={isLoggedIn} />;
+};
+
+const ProtectedRoute: React.FC<{ element: JSX.Element }> = ({ element }) => {
+  const { isLoggedIn } = useAuth();
+  return isLoggedIn ? element : <Navigate to="/login" />;
+};
+
+const App: React.FC = () => {
   return (
-    <div>
-      <Title>Hello, {name}</Title>
-    </div>
+    <AuthProvider>
+      <Router>
+        <AppContainer>
+          <CustomHeader />
+          <MainContent>
+            <Routes>
+              <Route path="/" element={<MainPage />} />
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/my-account" element={<ProtectedRoute element={<MyAccountPage />} />} />
+              <Route path="/theme/:themeKey" element={<ThemePage />} />
+            </Routes>
+          </MainContent>
+          <Footer />
+        </AppContainer>
+      </Router>
+    </AuthProvider>
   );
 };
 
 export default App;
-
-const Title = styled.h1`
-  font-size: 1.5em;
-  color: gray;
-`;

src/components/common/Footer/Footer.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+const FooterWrapper = styled.footer`
+  padding: 20px;
+  background-color: #f8f9fa;
+  text-align: center;
+  width: 100%;
+  margin-top: auto;
+`;
+
+const Footer: React.FC = () => {
+  return (
+    <FooterWrapper>
+      <p>카카오톡 선물하기</p>
+    </FooterWrapper>
+  );
+};
+
+export default Footer;