Skip to content

Commit 5f26e1a

Browse files
sojeongP0415sojeongP0415
committed
App.js, Link 등 라우팅 작업, 일부 css 수정
1 parent ab83cea commit 5f26e1a

15 files changed

Lines changed: 114 additions & 80 deletions

File tree

‎src/App.js‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,42 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import {BrowserRouter, Route, Routes} from "react-router-dom";
2+
3+
import Header from "./components/header/Header";
4+
import Footer from "./components/footer/Footer";
5+
import Main from "./components/mainpage/Main";
6+
import Login from "./components/login/Login";
7+
import SignUp from "./components/signup/SignUp";
8+
import Codecast from "./components/codecast/Codecast";
9+
import Community from "./components/community/Community";
10+
import IDE from "./components/ide/IDE";
11+
import StartCodecast from "./components/codecast/StartCodecast";
12+
import Mypage from "./components/mypage/Mypage";
13+
import Settings from "./components/mypage/Settings";
14+
import Shared from "./components/mypage/Shared";
15+
import MyProject from "./components/mypage/MyProject";
16+
import MyCommunity from "./components/mypage/MyCommunity";
317

418
function App() {
519
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
20+
<BrowserRouter>
21+
<Header />
22+
<Routes>
23+
<Route path="/" element={<Main />} />
24+
<Route path="/login" element={<Login />} />
25+
<Route path="/signup" element={<SignUp />} />
26+
<Route path="/ide" element={<IDE />} />
27+
<Route path="/community" element={<Community />} />
28+
<Route path="/broadcast" element={<Codecast />} />
29+
<Route path="/startbroadcast" element={<StartCodecast />} />
30+
<Route path="/mypage">
31+
<Route index element={<Mypage />} />
32+
<Route path="project" element={<MyProject />} />
33+
<Route path="community" element={<MyCommunity />} />
34+
<Route path="setting" element={<Settings />} />
35+
<Route path="shared" element={<Shared />} />
36+
</Route>
37+
</Routes>
38+
<Footer />
39+
</BrowserRouter>
2240
);
2341
}
2442

‎src/components/codecast/Codecast.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
background-color: white;
3232
padding: 40px 30px;
3333
border-radius: 12px;
34-
max-width: 500px;
34+
max-width: 550px;
3535
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
3636
}
3737

@@ -86,6 +86,8 @@
8686
justify-content: center;
8787
gap: 6px;
8888
font-weight: bold;
89+
text-decoration: none;
90+
font-size: 15px;
8991
}
9092

9193
.start-btn:hover {

‎src/components/codecast/Codecast.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { FaPlus, FaArrowRight, FaDesktop } from "react-icons/fa";
33
import "./Codecast.css";
44
import Header from "../header/Header";
5+
import {Link} from "react-router-dom";
56

67
const Codecast = () => {
78
return (
@@ -35,10 +36,10 @@ const Codecast = () => {
3536
<div className="broadcast-start">
3637
<h3>새 방송 시작하기</h3>
3738
<p>새로운 코드 방송을 시작하여 다른 사용자들과 실시간으로 코드를 공유하세요.</p>
38-
<button className="start-btn">
39+
<Link to="/startbroadcast" className="start-btn">
3940
<FaPlus/>
4041
새 방송 시작
41-
</button>
42+
</Link>
4243
</div>
4344
</div>
4445
</section>

‎src/components/header/Header.css‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,39 @@
44
padding: 12px 24px;
55
background-color: white;
66
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
7-
display: flex;
7+
display: grid;
8+
grid-template-columns: 1fr auto 1fr;
89
align-items: center;
9-
justify-content: space-between;
1010
box-sizing: border-box;
1111
font-family: 'Segoe UI', sans-serif;
1212
position: fixed;
1313
z-index: 1000;
1414
}
1515

16-
/* 왼쪽: 로고 + 사이트명 */
16+
/* 왼쪽: 로고 */
1717
.header-left {
18+
justify-self: start;
1819
display: flex;
1920
align-items: center;
2021
}
2122

22-
.logo {
23-
width: 32px;
24-
height: 32px;
25-
margin-right: 8px;
26-
}
27-
2823
.site-name {
2924
font-size: 20px;
3025
font-weight: 600;
3126
color: #333;
3227
}
3328

29+
/* 오른쪽: 로그인/회원가입 */
30+
.header-right {
31+
justify-self: end;
32+
display: flex;
33+
align-items: center;
34+
gap: 10px;
35+
}
36+
3437
/* 가운데: 네비게이션 */
3538
.header-nav {
39+
justify-self: center;
3640
display: flex;
3741
gap: 20px;
3842
}
@@ -59,11 +63,11 @@
5963
}
6064

6165
/* 오른쪽: 버튼들 또는 닉네임 */
62-
.header-right {
66+
/*.header-right {
6367
display: flex;
6468
align-items: center;
6569
gap: 10px;
66-
}
70+
}*/
6771

6872
/* 로그인/회원가입 버튼 */
6973
.btn {

‎src/components/header/Header.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import { NavLink } from "react-router-dom";
2+
import { NavLink, Link } from "react-router-dom";
33
import { FaMoon, FaSun } from "react-icons/fa";
44
import "./Header.css";
55

@@ -36,8 +36,8 @@ const Header = ({ isLoggedIn, nickname }) => {
3636
<span className="user-nickname">👤 {nickname}</span>
3737
) : (
3838
<>
39-
<NavLink to="/login" className="btn btn-outline">로그인</NavLink>
40-
<NavLink to="/signup" className="btn btn-filled">회원가입</NavLink>
39+
<Link to="/login" className="btn btn-outline">로그인</Link>
40+
<Link to="/signup" className="btn btn-filled">회원가입</Link>
4141
</>
4242
)}
4343
</div>

‎src/components/mainpage/Main.jsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from "react";
22

3-
import Header from "../header/Header";
4-
import Footer from "../footer/Footer";
53
import Intro from "./intro/Intro";
64
import Features from "./features/Features";
75
import DemoView from "./demoview/DemoView";
@@ -10,14 +8,12 @@ import StartNow from "./startnow/StartNow";
108
const Main = () => {
119
return (
1210
<div>
13-
<Header />
1411
<main>
1512
<Intro />
1613
<Features />
1714
<DemoView />
1815
<StartNow />
1916
</main>
20-
<Footer />
2117
</div>
2218
);
2319
};

‎src/components/mainpage/intro/Intro.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import "./Intro.css";
3-
import introImage from "./intro.png"; // 오른쪽 이미지
3+
import introImage from "./intro.png";
4+
import {Link} from "react-router-dom"; // 오른쪽 이미지
45

56
const Intro = () => {
67
return (
@@ -15,8 +16,8 @@ const Intro = () => {
1516
코드 방송 기능을 통해 실시간으로 지식을 공유할 수 있습니다.
1617
</p>
1718
<div className="intro-buttons">
18-
<button className="btn primary">시작하기</button>
19-
<button className="btn secondary">기능 살펴보기</button>
19+
<Link to="ide" className="btn primary">시작하기</Link>
20+
<Link to="" className="btn secondary">기능 살펴보기</Link>
2021
</div>
2122
</div>
2223

‎src/components/mainpage/startnow/StartNow.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
font-weight: 500;
2929
cursor: pointer;
3030
transition: background-color 0.2s ease;
31+
text-decoration: none;
3132
}
3233

3334
.start-button:hover {

‎src/components/mainpage/startnow/StartNow.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from "react";
22
import "./StartNow.css";
3+
import {Link} from "react-router-dom";
34

45
const StartNow = () => {
56
return (
67
<section className="start-section">
78
<h2 className="start-title">지금 바로 시작하세요</h2>
89
<p className="start-description">
9-
코드 시각화 플랫폼으로 알고리즘과 데이터 구조를 더 쉽게 이해하고 학습하세요.
10+
코드 시각화 플랫폼으로 알고리즘과 데이터 구조를 더 쉽게 이해하고 학습하세요.<br/>
1011
지금 바로 무료로 시작할 수 있습니다.
1112
</p>
12-
<button className="start-button">무료로 시작하기</button>
13+
<Link to="/ide" className="start-button">무료로 시작하기</Link>
1314
</section>
1415
);
1516
};

‎src/components/mypage/MyCommunity.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030
margin-bottom: 20px;
3131
}
3232

33-
.tab {
33+
.commu-tab {
3434
padding: 8px 16px;
3535
border-radius: 6px;
3636
border: none;
3737
background-color: #eee;
3838
cursor: pointer;
3939
}
4040

41-
.tab.active {
41+
.commu-tab.active {
4242
background-color: #7a52c6;
4343
color: white;
4444
font-weight: bold;

0 commit comments

Comments
 (0)