Merge pull request #6 from Jr-YongFill/feature/base-Route/#3

Feature/base route/#3

package.json

@@ -9,7 +9,9 @@
     "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -35,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3"
   }
-}
+}

src/App.js

@@ -1,23 +1,55 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
+import Member from './components/Member';
+import Signin from './components/auth/Signin';
+import Signup from './components/auth/Signup';
+import ChoiceInterviewMode from './components/interview/ChoiceInterviewMode';
+import Interview from './components/interview/Interview';
+import InterviewChoiceStack from './components/interview/InterviewChoiceStack';
+import InterviewMain from './components/interview/InterviewMain';
+import InterviewNote from './components/interview/InterviewNote';
+import InterviewResult from './components/interview/InterviewResult';
+import PracticeChoiceStack from './components/interview/PracticeChoiceStack';
+import PracticeInterview from './components/interview/PracticeInterview';
+import PracticeInterviewMain from './components/interview/PracticeInterviewMain';
+import InfoPost from './components/posts/InfoPost';
+import Post from './components/posts/Post';
+import QnAPost from './components/posts/QnAPost';
+import UpdatePost from './components/posts/UpdatePost';
+import Community from './components/Community';
+import Home from './components/Home';
+import Store from './components/Store';
+import Vote from './components/Vote';
+import Header from './components/Header'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/member" element={<Member />} />
+          <Route path="/auth/signin" element={<Signin />} />
+          <Route path="/auth/signup" element={<Signup />} />
+          <Route path="/interview/choice-mode" element={<ChoiceInterviewMode />} />
+          <Route path="/interview" element={<Interview />} />
+          <Route path="/interview/choice-stack" element={<InterviewChoiceStack />} />
+          <Route path="/interview/main" element={<InterviewMain />} />
+          <Route path="/interview/note" element={<InterviewNote />} />
+          <Route path="/interview/result" element={<InterviewResult />} />
+          <Route path="/interview/practice-choice-stack" element={<PracticeChoiceStack />} />
+          <Route path="/interview/practice" element={<PracticeInterview />} />
+          <Route path="/interview/practice-main" element={<PracticeInterviewMain />} />
+          <Route path="/post/info" element={<InfoPost />} />
+          <Route path="/post" element={<Post />} />
+          <Route path="/post/qna" element={<QnAPost />} />
+          <Route path="/post/update" element={<UpdatePost />} />
+          <Route path="/community" element={<Community />} />
+          <Route path="/store" element={<Store />} />
+          <Route path="/vote" element={<Vote />} />
+        </Routes>
+      </Router>
     </div>
   );
 }

src/components/Community.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Community = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>커뮤니티</h2>
+      <button onClick={() => navigate('/interview/main')}>면접 메인</button>
+      <button onClick={() => navigate('/vote')}>투표</button>
+
+      <button onClick={() => navigate('/post/info')}>정보 게시물</button>
+      <button onClick={() => navigate('/post/qna')}>Q&A 게시물</button>
+
+
+    </div>
+  );
+};
+
+export default Community;

src/components/Header.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const HeaderContainer = styled.header`
+  top: 0;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 30px;
+  z-index: 9;
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: var(--color);
+  font-size: 18px;
+  cursor: pointer;
+`;
+
+const HeaderGnb = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: 100px;
+`;
+
+const MainLink = styled(StyledLink)`
+  font-size: 34px;
+  font-weight: 700;
+`;
+
+const GnbMenu = styled.div`
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+
+const HeaderSign = styled.div`
+  display: flex;
+  gap: 30px;
+`;
+
+const LogoutButton = styled.span`
+  color: var(--color);
+  font-size: 18px;
+  cursor: pointer;
+`;
+
+const Header = ({ color }) => {
+
+  const style = {
+    'background': color,
+    'color': 'black'
+  };
+
+  return (
+    <HeaderContainer style={style}>
+      <HeaderGnb style={style}>
+        <MainLink to="/">
+          <span>용가리</span>
+        </MainLink>
+        <GnbMenu>
+          <StyledLink to="/interview/main">
+            <span>면접보러가기</span>
+          </StyledLink>
+          <StyledLink to="/store">
+            <span>상점</span>
+          </StyledLink>
+          <StyledLink to="/community">
+            <span>커뮤니티</span>
+          </StyledLink>
+        </GnbMenu>
+      </HeaderGnb>
+      <HeaderSign style={style}>
+
+        <div>
+        <StyledLink to="/auth/signin">로그인</StyledLink>
+        <StyledLink to="/auth/signup">회원가입</StyledLink>
+        </div>
+        <div>
+          <span>닉네임</span>
+          <StyledLink to="/member">마이페이지</StyledLink>
+        </div>
+
+      </HeaderSign>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

src/components/Home.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Home = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+
+  return (
+    <div>
+      <Header />
+      <h2>홈 페이지</h2>
+      <button onClick={() => navigate('/interview/main')}>면접 메인</button>
+      <button onClick={() => navigate('/community')}>커뮤니티</button>
+    </div>
+  );
+};
+
+export default Home;

src/components/Member.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Member = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>마이페이지</h2>
+    </div>
+  );
+};
+
+export default Member;

src/components/Store.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Store = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>상점</h2>
+      <button onClick={() => navigate('/interview/main')}>면접 메인</button>
+    </div>
+  );
+};
+
+export default Store;

src/components/Vote.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Vote = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>투표</h2>
+
+    </div>
+  );
+};
+
+export default Vote;

src/components/auth/Signin.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from '../Header';
+import { useNavigate } from 'react-router-dom';
+
+const Signin = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>로그인 페이지</h2>
+    </div>
+  );
+};
+
+export default Signin;

src/components/auth/Signup.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Header from '../Header';
+import { useNavigate } from 'react-router-dom';
+
+
+const Signup = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>회원가입 페이지</h2>
+      <button onClick={() => navigate('../member/signin')}>회원가입</button>
+    </div>
+  );
+};
+
+export default Signup;

src/components/interview/ChoiceInterviewMode.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header';
+
+const ChoiceInterviewMode = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>면접 모드 선택</h2>     
+      <button onClick={() => navigate('/interview/practice-choice-stack')}>연습 선택 스택</button>
+      <button onClick={() => navigate('/interview/choice-stack')}>면접 선택 스택</button>
+
+    </div>
+  );
+};
+
+export default ChoiceInterviewMode;

src/components/interview/Interview.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header';
+
+const Interview = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+
+  return (
+      <div>
+      <Header />
+      <h2>면접 모드 선택</h2>
+      <button onClick={() => navigate('/interview/result')}>면접 결과</button>
+    </div>
+  );
+};
+
+export default Interview;

src/components/interview/InterviewChoiceStack.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header';
+
+const InterviewChoiceStack = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+
+  return (
+    <div>
+    <Header />
+    <h2>스택선택하기</h2>
+    <button onClick={() => navigate('/interview')}>면접</button>
+  </div>
+);
+};
+
+export default InterviewChoiceStack;

src/components/interview/InterviewMain.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Header from '../Header';
+
+
+const InterviewMain = () => {
+  const navigate = useNavigate(); // useNavigate를 호출
+  return (
+    <div>
+      <Header />
+      <h2>면접 메인 페이지</h2>
+      <button onClick={() => navigate('/interview/practice-choice-stack')}>연습 선택 스택</button>
+      <button onClick={() => navigate('/interview/choice-stack')}>면접 선택 스택</button>
+    </div>
+  );
+};
+
+export default InterviewMain;