Skip to content

[Feat] 질문 메인페이지 api 연결 #92 #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kdhye1119 merged 1 commit into from
May 23, 2026
Merged

[Feat] 질문 메인페이지 api 연결 #92 #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"proxy": "http://localhost:8080",
"proxy": "http://13.209.73.127:8080",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
Expand All @@ -41,4 +41,4 @@
"last 1 safari version"
]
}
}
}
28 changes: 14 additions & 14 deletions frontend/src/pages/login/LoginPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import { useNavigate } from 'react-router-dom'; // 추가
import styles from './LoginPage.module.css';

function LoginPage() {
const navigate = useNavigate();
const navigate = useNavigate();
const [focused, setFocused] = useState('');
const [form, setForm] = useState({ name: '', password: '' });
const [form, setForm] = useState({ name: '', password: '' });



const handleChange = (e) => {
setForm({ ...form, [e.target.name]: e.target.value });
};


const handleLogin = async () => {
try {
const response = await fetch('/api/login', {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form),
Expand All @@ -24,8 +24,8 @@ function LoginPage() {
if (response.ok) {
const data = await response.json();
localStorage.setItem('token', data.token);
localStorage.setItem('role', data.role);
navigate('/home');
localStorage.setItem('role', data.role);
navigate('/sessions'); // 로그인 성공 시 이동할 페이지
} else {
alert('이름 또는 비밀번호가 올바르지 않습니다.');
}
Expand All @@ -40,25 +40,25 @@ function LoginPage() {
<div className={styles.form}>
<input
type="text"
name="name"
name="name"
placeholder="이름"
value={form.name}
onChange={handleChange}
value={form.name}
onChange={handleChange}
className={`${styles.input} ${focused === 'name' ? styles.inputFocused : ''}`}
onFocus={() => setFocused('name')}
onBlur={() => setFocused('')}
/>
<input
type="password"
name="password"
name="password"
placeholder="비밀번호"
value={form.password}
onChange={handleChange}
value={form.password}
onChange={handleChange}
className={`${styles.input} ${focused === 'pw' ? styles.inputFocused : ''}`}
onFocus={() => setFocused('pw')}
onBlur={() => setFocused('')}
/>
<button className={styles.button} onClick={handleLogin}>로그인</button>
<button className={styles.button} onClick={handleLogin}>로그인</button>
</div>
</div>
);
Expand Down
150 changes: 108 additions & 42 deletions frontend/src/pages/qna/QnAMainPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,121 @@
import { useState, useEffect } from 'react';
import styles from './QnAMainPage.module.css';
import { FiLogIn } from 'react-icons/fi';

const nowSessions = [ // css 보려고 걍 적어둠
{ id: 1, icon: '☀', title: 'HTML/CSS', week: '1주차 화요일 오전', date: '2026.04.19', time: '10:00 ~ 13:00' }
];
// ─────────────────────────────────────────────
// 📌 목업 데이터
// ─────────────────────────────────────────────
// const MOCK_DATA = {
// activeSessions: [
// { sessionId: 1, week: 1, dayOfWeek: '화요일', dayPart: '오전', sessionDate: '2026.05.23', title: 'HTML/CSS' }
// ],
// pastSessions: [
// { sessionId: 1, week: 1, dayOfWeek: '화요일', dayPart: '오전', sessionDate: '2026.05.23', title: 'HTML/CSS' },
// { sessionId: 2, week: 1, dayOfWeek: '화요일', dayPart: '오후', sessionDate: '2026.05.23', title: 'Git 기초' },
// ]
// };
// ─────────────────────────────────────────────

const pastSessions = [ // css 보려고 걍 적어둠
{ id: 1, icon: '☀', title: 'HTML/CSS', week: '1주차 화요일 오전' },
{ id: 2, icon: '☾', title: 'Git 기초', week: '1주차 화요일 오후' },
{ id: 3, icon: '☀', title: 'HTML/CSS', week: '1주차 화요일 오전' },
{ id: 4, icon: '☾', title: 'Git 기초', week: '1주차 화요일 오후' },
{ id: 5, icon: '☀', title: 'HTML/CSS', week: '1주차 화요일 오전' },
{ id: 6, icon: '☾', title: 'Git 기초', week: '1주차 화요일 오후' },
];
const BASE_URL = '';

const getIcon = (dayPart) => dayPart === '오전' ? '☀' : '☾';
const getTime = (dayPart) => dayPart === '오전' ? '10:00 ~ 13:00' : '14:00 ~ 17:00';

function QNAMainPage() {
const [activeSessions, setActiveSessions] = useState([]);
const [pastSessions, setPastSessions] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchSessions = async () => {
try {
setLoading(true);

const token = localStorage.getItem('token');

const res = await fetch(`${BASE_URL}/api/sessions`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
}
});

if (!res.ok) throw new Error(`서버 오류: ${res.status}`);

const json = await res.json();

if (!json.isSuccess) throw new Error(json.message);

// DB에 데이터 없으면 목업으로 대체
// setActiveSessions(json.result.activeSessions.length > 0 ? json.result.activeSessions : MOCK_DATA.activeSessions);
// setPastSessions(json.result.pastSessions.length > 0 ? json.result.pastSessions : MOCK_DATA.pastSessions);

} catch (err) {
console.error('세션 불러오기 실패:', err);
// setActiveSessions(MOCK_DATA.activeSessions);
// setPastSessions(MOCK_DATA.pastSessions);
} finally {
setLoading(false);
}
};

fetchSessions();
}, []);

if (loading) return <div className={styles.page}>불러오는 중...</div>;
if (error) return <div className={styles.page}>오류: {error}</div>;

return (
<div className={styles.page}>
<section className={styles.section}>
<h2 className={styles.sectionTitle}>Q&A</h2>
{nowSessions.map(session => (
<div key={session.id} className={styles.card}>
<p className={styles.cardTitle}>
<span className={styles.icon}>{session.icon}</span>
{session.title}
</p>
<p className={styles.cardWeek}>{session.week}</p>
<p className={styles.cardDate}>{session.date}</p>
<p className={styles.cardTime}>{session.time}</p>

{/* 진행 중인 세션 있을 때만 표시 */}
{activeSessions.length > 0 && (
<>
<section className={styles.section}>
<h2 className={styles.sectionTitle}>Q&A</h2>
{activeSessions.map(session => (
<div key={session.sessionId} className={styles.card}>
<p className={styles.cardTitle}>
<span className={styles.icon}>{getIcon(session.dayPart)}</span>
{session.title}
</p>
<p className={styles.cardWeek}>{session.week}주차 {session.dayOfWeek} {session.dayPart}</p>
<p className={styles.cardDate}>{session.sessionDate}</p>
<p className={styles.cardTime}>{getTime(session.dayPart)}</p>
</div>
))}
</section>
<hr className={styles.divider} />
</>
)}

{/* 지난 세션 */}
{pastSessions.length > 0 ? (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>지난 세션</h2>
<div className={styles.list}>
{pastSessions.map(session => (
<div key={session.sessionId} className={styles.listItem}>
<span>
<span className={styles.icon}>{getIcon(session.dayPart)}</span>
<span className={styles.listTitle}>{session.title}</span>
<span className={styles.listWeek}> •{session.week}주차 {session.dayOfWeek} {session.dayPart}</span>
</span>
<button className={styles.enterBtn}><FiLogIn size={25} /></button>
</div>
))}
</div>
))}
</section>

<hr className={styles.divider} />

<section className={styles.section}>
<h2 className={styles.sectionTitle}>지난 세션</h2>
<div className={styles.list}>
{pastSessions.map(session => (
<div key={session.id} className={styles.listItem}>
<span>
<span className={styles.icon}>{session.icon}</span>
<span className={styles.listTitle}>{session.title}</span>
<span className={styles.listWeek}> •{session.week}</span>
</span>
<button className={styles.enterBtn}><FiLogIn size={25} /></button>
</div>
))}
</div>
</section>
</section>
) : (
/* 진행 중인 세션도 없고 지난 세션도 없을 때 */
activeSessions.length === 0 && (
<section className={styles.section}>
<p className={styles.empty}>아직 생성된 Q&A가 없어요</p>
</section>
)
)}

</div>
);
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/pages/qna/QnAMainPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,10 @@

.listItem:hover .enterBtn {
color: var(--dark);
}

.empty {
text-align: center;
color: #888;
margin-top: 40px;
}
Loading