[FE] SISC1-215 [FEAT] : 외부페이지 UI

frontend/src/App.jsx

@@ -15,10 +15,19 @@ import QuantBot from './pages/QuantBot';
 
 import OAuthSuccess from './pages/OAuthSuccess.jsx';
 
+import Main from './pages/external/Main.jsx';
+import Intro from './pages/external/Intro.jsx';
+import Leaders from './pages/external/Leaders.jsx';
+import Portfolio from './pages/external/Portfolio.jsx';
+
 function App() {
   return (
     <>
       <Routes>
+        <Route path="/main" element={<Main />} />
+        <Route path="/main/intro" element={<Intro />} />
+        <Route path="/main/leaders" element={<Leaders />} />
+        <Route path="/main/portfolio" element={<Portfolio />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/oauth/success" element={<OAuthSuccess />} />

frontend/src/pages/external/External.module.css

@@ -0,0 +1,27 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  background: url('../../assets/external-detail-image.png') center no-repeat;
+  height: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 100%;
+  color: #ffffff;
+}
+
+.divider {
+  width: 250px;
+}

frontend/src/pages/external/Intro.jsx

@@ -0,0 +1,15 @@
+import styles from './External.module.css';
+
+const Intro = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>동아리 소개</span>
+        <hr className={styles.divider} />
+      </div>
+      <div className={styles.info}></div>
+    </div>
+  );
+};
+
+export default Intro;

frontend/src/pages/external/Leaders.jsx

@@ -0,0 +1,15 @@
+import styles from './External.module.css';
+
+const Leaders = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>임원진 소개</span>
+        <hr className={styles.divider} />
+      </div>
+      <div className={styles.info}></div>
+    </div>
+  );
+};
+
+export default Leaders;

frontend/src/pages/external/Main.jsx

@@ -0,0 +1,37 @@
+import styles from './Main.module.css';
+import image from '../../assets/external-image.png';
+import Logo from '../../assets/logo.png';
+import { Link } from 'react-router-dom';
+
+const Main = () => {
+  return (
+    <div className={styles.container}>
+      <img src={image} alt="메인 사진" className={styles.image} />
+      <nav className={styles.menu}>
+        <ul>
+          <li>
+            <Link to="/main/intro">동아리 소개</Link>
+          </li>
+          <li>
+            <Link to="/main/leaders">임원소개</Link>
+          </li>
+          <li>
+            <Link to="/main/portfolio">운용 포트폴리오</Link>
+          </li>
+          <li>
+            <Link to="/">웹사이트</Link>
+          </li>
+        </ul>
+      </nav>
+      <div className={styles.info}>
+        <img src={Logo} alt="로고" className={styles.logo} />
+        <h1 className={styles.title}>Sejong Investment Scholars Club</h1>
+        <h2 className={styles.subTitle}>
+          세투연과 세상을 읽고 미래에 투자하라
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Main;

frontend/src/pages/external/Main.module.css

@@ -0,0 +1,71 @@
+.container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
+
+.menu {
+  margin-top: 55px;
+  margin-left: 108px;
+  box-sizing: border-box;
+}
+
+.menu ul {
+  display: flex;
+  gap: 80px;
+  list-style: none;
+}
+
+.menu a {
+  text-decoration: none;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: -0.556px;
+}
+
+.info {
+  margin-top: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}
+
+.logo {
+  width: 106px;
+  height: 105px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 80px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #ffffff;
+  margin: 0;
+}
+
+.subTitle {
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 146%;
+  letter-spacing: 0%;
+  color: #ffffff;
+  margin: 0;
+}

frontend/src/pages/external/Portfolio.jsx

@@ -0,0 +1,15 @@
+import styles from './External.module.css';
+
+const Portfolio = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>운용 포트폴리오</span>
+        <hr className={styles.divider} />
+      </div>
+      <div className={styles.info}></div>
+    </div>
+  );
+};
+
+export default Portfolio;