경북대 FE_정서현_2주차 과제 Step 1/2/3

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "themekey"
+  ]
+}

README.md

@@ -1,15 +1,28 @@
-# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+<h1> 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편 </h1>
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa)
+<h3>2주차 체크 리스트</h3>
 
-## Week 1. 1단계 - 프로젝트 세팅
+- [x] Header, Footer 와 같은 공통 컴포넌트 작성
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzgHvzRM)
+- [x] 각 Url Path 별로 페이지 만들기
 
-## Week 1. 2단계 - Storybook을 사용하여 재사용 가능한 컴포넌트 구현
+  - Main page (`/`)
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/4wYFPW1K)
+    - [x] Theme 카테고리 섹션 추가
 
-## Week 2. 1단계 - 페이지 만들기
+    - [x] Theme 카테고리 Item 클릭 시 Theme page(`/theme/:themekey`) 로 이동 
+
+  - Theme page (`/theme/:themekey`)
+
+    - [x] 재사용성을 고려하여 Header 섹션 추가 
+
+    - [x] 상품 목록 섹션 추가
+
+  - Login page (`/login`)
+
+    - [x] ID와 PW를 입력하면 로그인이 되도록 구현
+
+  - My page (`/my-account`)
+
+    - [x] 로그아웃이 가능한 버튼 추가
 
-[🔗 link](https://edu.nextstep.camp/s/hazAC9xa/ls/QzV1ncxk)

package.json

@@ -6,6 +6,7 @@
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
+    "lint": "eslint --fix src/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -25,11 +26,10 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "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,46 @@
-import styled from '@emotion/styled';
+import { type ReactNode } from 'react';
+import { BrowserRouter, Navigate,Route, Routes } from 'react-router-dom';
 
-const App = () => {
-  const name = 'Josh Perez';
+import { AuthProvider, useAuth } from '@/components/AuthContext';
+import LoginPage from "@/pages/LoginPage";
+import MainPage from "@/pages/MainPage";
+import MyAccountPage from "@/pages/MyAccountPage";
+import ThemePage from "@/pages/ThemePage";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
 
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const { isAuth } = useAuth();
+
+  if (!isAuth) {
+    return <Navigate to={'/login'} replace />
+  } else {
+    return <>{children}</>;
+  }
+};
+
+const App = () => {
   return (
-    <div>
-      <Title>Hello, {name}</Title>
-    </div>
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path={'/'} element={<MainPage />} />
+          <Route path={'/login'} element={<LoginPage />} />
+          <Route path={'/theme/:themeKey'} element={<ThemePage />} />
+          <Route
+            path={'/my-account'}
+            element={
+              <ProtectedRoute>
+                <MyAccountPage />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
   );
 };
 
 export default App;
-
-const Title = styled.h1`
-  font-size: 1.5em;
-  color: gray;
-`;

src/components/AuthContext.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect,useState } from 'react';
+
+interface AuthContextType {
+  isAuth: boolean;
+  login: (userName: string) => void;
+  logout: () => void;
+}
+
+const initAuthContext: AuthContextType = {
+  isAuth: false,
+  login: () => {},
+  logout: () => {},
+};
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+const AuthContext = createContext<AuthContextType>(initAuthContext);
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [isAuth, setIsAuth] = useState(false);
+
+  useEffect(() => {
+    const token = sessionStorage.getItem('authToken');
+    if (token) {
+      setIsAuth(true);
+    }
+  }, []);
+
+  const login = (userName: string) => {
+    sessionStorage.setItem('authToken', userName);
+    setIsAuth(true);
+  };
+
+  const logout = () => {
+    sessionStorage.removeItem('authToken');
+    setIsAuth(false);
+  };
+
+  return <AuthContext.Provider value={{ isAuth, login, logout }}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};

src/components/common/Button/index.stories.tsx → src/components/common/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from './index';
+import { Button } from './Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

src/components/common/GoodsItem/Default.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Image } from '@/components/common/Image';
+import { Image } from '@/components/common/Image/Image';
 
 export type DefaultGoodsItemsProps = {
   imageSrc: string;

src/components/common/Image/index.stories.tsx → src/components/common/Image/Image.stories.tsx

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Image } from '.';
+import { Image } from './Image';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: 'Common/Image',
   component: Image,
   tags: ['autodocs'],
   args: {
+
     src: 'https://t1.kakaocdn.net/friends/www/talk/kakaofriends_talk_2018.png',
   },
 } satisfies Meta<typeof Image>;

src/components/common/layouts/Container/index.stories.tsx → src/components/common/layouts/Container/Container.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Container } from '.';
+import { Container } from './Container';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

src/components/common/layouts/Footer/Footer.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled'
+
+const Footer: React.FC = () => {
+  return (
+    <Wrapper>
+      <FooterContainer>
+        <FooterInner className='inner'>
+          <FooterLogo src="https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fgift-s.kakaocdn.net%2Fdn%2Fgift%2Fimages%2Fm640%2Fpc_smallbi_201223.png" alt="카카오톡 선물하기 로고2" />
+        </FooterInner>
+      </FooterContainer>
+    </Wrapper>
+  )
+}
+
+export default Footer
+
+const Wrapper = styled.footer`
+  position: fixed;
+  width: 100%;
+  margin-top: auto;
+  z-index: 9;
+  padding: 28px 16px 88px;
+  background-color: rgb(250, 250, 252);
+  bottom: 0;
+
+  @media screen and (min-width: 768px) {
+    padding: 40px 16px 120px;
+  }
+`;
+
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const FooterInner = styled.div`
+  width: 100%;
+  max-width: 1024px;
+  height: 21px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;  
+`;
+
+const FooterLogo = styled.img`
+  height: 20px;
+`;

src/components/common/layouts/Grid/index.stories.tsx → src/components/common/layouts/Grid/Grid.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Grid } from '.';
+import { Grid } from './Grid';
 
 const ChildComponent = () => (
   <>