Skip to content

Commit 2116420

Browse files
tech-kms-jaketech-kms-jake
authored
Merge pull request #3 from dlsrks1021/main
style: 방 대기화면, 게임 진행 관련 디자인 추가 수정
2 parents 5b9e99f + 275d044 commit 2116420

File tree

10 files changed

+136
-183
lines changed

10 files changed

+136
-183
lines changed

‎src/layout/game/Sidebar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function Sidebar() {
3737
const isGamePlay = location.pathname.includes("/play")
3838

3939
return (
40-
<aside className="w-72 bg-white border-r border-gray-200 flex flex-col">
40+
<aside className="w-96 bg-white border-r border-gray-200 flex flex-col">
4141
{isGamePlay ? <LiveLeaderboard entries={leaderboardData} /> : <ParticipantsList participants={participants} />}
4242
<ChatSection messages={chatMessages} />
4343
</aside>

‎src/layout/game/components/ChatSection.js‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,43 +14,43 @@ function ChatSection({ messages }) {
1414
}
1515

1616
return (
17-
<div className="flex-1 border-t border-gray-200 flex flex-col">
18-
<div className="p-3 bg-gray-50 border-b border-gray-200">
19-
<h3 className="text-sm font-semibold text-gray-800 flex items-center">
20-
<MessageCircle className="w-4 h-4 mr-2 text-blue-600" />
21-
실시간 채팅
22-
</h3>
23-
</div>
24-
<div className="flex-1 p-3 overflow-y-auto space-y-2">
25-
{messages.map((msg) => (
26-
<div key={msg.id} className="flex items-start space-x-2">
27-
<Car className={`w-3 h-3 mt-1 ${msg.color}`} />
28-
<div>
29-
<div className="text-sm text-gray-500">{msg.user}</div>
30-
<div className="text-sm text-gray-800">{msg.message}</div>
31-
</div>
17+
<div className="flex-1 border-t border-gray-200 flex flex-col">
18+
<div className="p-4 bg-gray-50 border-b border-gray-200">
19+
<h3 className="text-base font-semibold text-gray-800 flex items-center">
20+
<MessageCircle className="w-5 h-5 mr-2 text-blue-600" />
21+
실시간 채팅
22+
</h3>
23+
</div>
24+
<div className="flex-1 p-4 overflow-y-auto space-y-2">
25+
{messages.map((msg) => (
26+
<div key={msg.id} className="flex items-start space-x-3">
27+
<Car className={`w-5 h-5 mt-0.5 ${msg.color}`} />
28+
<div>
29+
<div className="text-sm! font-medium text-gray-600">{msg.user}</div>
30+
<div className="text-sm! text-gray-800">{msg.message}</div>
31+
</div>
32+
</div>
33+
))}
34+
</div>
35+
<div className="p-3 border-t border-gray-200">
36+
<div className="flex space-x-2">
37+
<input
38+
type="text"
39+
placeholder="메시지를 입력하세요..."
40+
value={chatMessage}
41+
onChange={(e) => setChatMessage(e.target.value)}
42+
onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
43+
className="flex-1 px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-red-500"
44+
/>
45+
<button
46+
onClick={handleSendMessage}
47+
className="px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
48+
>
49+
<Send className="w-4 h-4" />
50+
</button>
3251
</div>
33-
))}
34-
</div>
35-
<div className="p-2 border-t border-gray-200">
36-
<div className="flex space-x-2">
37-
<input
38-
type="text"
39-
placeholder="메시지를 입력하세요..."
40-
value={chatMessage}
41-
onChange={(e) => setChatMessage(e.target.value)}
42-
onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
43-
className="flex-1 px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-red-500"
44-
/>
45-
<button
46-
onClick={handleSendMessage}
47-
className="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
48-
>
49-
<Send className="w-3 h-3" />
50-
</button>
5152
</div>
5253
</div>
53-
</div>
5454
)
5555
}
5656

‎src/layout/game/components/F1StartingLights.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function F1StartingLights({ onComplete }) {
3131
if (!isVisible) {
3232
return (
3333
<div className="fixed inset-0 bg-gray-900 z-50 flex flex-col items-center justify-center opacity-0 transition-opacity duration-500">
34-
<div className="text-white text-4xl font-bold mb-8">F1 Quiz Starting...</div>
34+
<div className="text-white text-4xl font-bold mb-8">🏁 시동 거세요, 퀴즈 레이스가 곧 시작됩니다!</div>
3535
<div className="flex gap-10 mb-8">
3636
{[0, 1, 2, 3, 4].map((index) => (
3737
<div
@@ -44,14 +44,14 @@ function F1StartingLights({ onComplete }) {
4444
/>
4545
))}
4646
</div>
47-
<div className="text-white text-xl font-medium">Get Ready!</div>
47+
<div className="text-white text-xl font-medium">출발 신호를 주목하세요!</div>
4848
</div>
4949
)
5050
}
5151

5252
return (
5353
<div className="fixed inset-0 bg-gray-900 z-50 flex flex-col items-center justify-center">
54-
<div className="text-white text-4xl font-bold mb-8">F1 Quiz Starting...</div>
54+
<div className="text-white text-4xl font-bold mb-8">🏁 시동 거세요, 퀴즈 레이스가 곧 시작됩니다!</div>
5555
<div className="flex gap-10 mb-8">
5656
{[0, 1, 2, 3, 4].map((index) => (
5757
<div
@@ -64,7 +64,7 @@ function F1StartingLights({ onComplete }) {
6464
/>
6565
))}
6666
</div>
67-
<div className="text-white text-xl font-medium">Get Ready!</div>
67+
<div className="text-white text-xl font-medium">출발 신호를 주목하세요!</div>
6868
</div>
6969
)
7070
}

‎src/layout/game/components/GameSettings.js‎

Lines changed: 35 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useState } from "react"
44
import { useNavigate } from "react-router-dom"
55
import { Settings } from "lucide-react"
66

7-
function GameSettings({ isHost = false, roomId, isReady = false, onReadyToggle }) {
7+
function GameSettings({ roomId }) {
88
const [timePerQuestion, setTimePerQuestion] = useState("30초")
99
const [questionCount, setQuestionCount] = useState(25)
1010
const navigate = useNavigate()
@@ -22,77 +22,52 @@ function GameSettings({ isHost = false, roomId, isReady = false, onReadyToggle }
2222

2323
<div className="space-y-4">
2424
<div>
25-
<label className="block text-sm font-medium text-gray-700 mb-2">퀴즈 카테고리</label>
26-
{isHost ? (
27-
<button className="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
28-
퀴즈 선택
29-
</button>
30-
) : (
31-
<div className="w-full px-4 py-3 bg-gray-100 text-gray-600 rounded-lg font-medium">
32-
F1 2024 시즌 퀴즈 (방장이 선택함)
33-
</div>
34-
)}
25+
<label className="block text-sm font-medium text-gray-700 mb-2">퀴즈</label>
26+
<button className="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
27+
퀴즈 선택
28+
</button>
3529
</div>
3630

3731
<div className="grid grid-cols-2 gap-4">
3832
<div>
3933
<label className="block text-sm font-medium text-gray-700 mb-2">제한 시간</label>
40-
{isHost ? (
41-
<select
42-
value={timePerQuestion}
43-
onChange={(e) => setTimePerQuestion(e.target.value)}
44-
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 appearance-none bg-white bg-no-repeat bg-right pr-8"
45-
style={{
46-
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
47-
backgroundPosition: "right 0.5rem center",
48-
backgroundSize: "1.5em 1.5em",
49-
}}
50-
>
51-
<option>15초</option>
52-
<option>30초</option>
53-
<option>45초</option>
54-
<option>60초</option>
55-
</select>
56-
) : (
57-
<div className="w-full px-3 py-2 bg-gray-100 text-gray-600 rounded-lg">{timePerQuestion}</div>
58-
)}
34+
<select
35+
value={timePerQuestion}
36+
onChange={(e) => setTimePerQuestion(e.target.value)}
37+
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 appearance-none bg-white bg-no-repeat bg-right pr-8"
38+
style={{
39+
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
40+
backgroundPosition: "right 0.5rem center",
41+
backgroundSize: "1.5em 1.5em",
42+
}}
43+
>
44+
<option>15초</option>
45+
<option>30초</option>
46+
<option>45초</option>
47+
<option>60초</option>
48+
</select>
5949
</div>
6050
<div>
6151
<label className="block text-sm font-medium text-gray-700 mb-2">문제 수</label>
62-
{isHost ? (
63-
<input
64-
type="number"
65-
min="10"
66-
max="80"
67-
value={questionCount}
68-
onChange={(e) => setQuestionCount(Number.parseInt(e.target.value) || 30)}
69-
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
70-
placeholder="문제 수를 입력하세요 (10-80)"
71-
/>
72-
) : (
73-
<div className="w-full px-3 py-2 bg-gray-100 text-gray-600 rounded-lg">{questionCount}문제</div>
74-
)}
52+
<input
53+
type="number"
54+
min="10"
55+
max="80"
56+
value={questionCount}
57+
onChange={(e) => setQuestionCount(Number.parseInt(e.target.value) || 30)}
58+
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
59+
placeholder="문제 수를 입력하세요 (10-80)"
60+
/>
7561
</div>
7662
</div>
7763

7864
<div className="pt-4">
79-
{isHost ? (
80-
<button
81-
onClick={handleStartGame}
82-
className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold"
83-
>
84-
게임 시작
85-
</button>
86-
) : (
87-
<button
88-
onClick={onReadyToggle}
89-
className={`w-full px-6 py-3 rounded-lg transition-colors font-semibold ${
90-
isReady ? "bg-red-600 text-white hover:bg-red-700" : "bg-blue-600 text-white hover:bg-blue-700"
91-
}`}
92-
>
93-
{isReady ? "준비 취소" : "준비 완료"}
94-
</button>
95-
)}
65+
<button
66+
onClick={handleStartGame}
67+
className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold"
68+
>
69+
게임 시작
70+
</button>
9671
</div>
9772
</div>
9873
</div>

‎src/layout/game/components/LiveLeaderboard.js‎

Lines changed: 22 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
import { Trophy, Crown, Medal } from "lucide-react"
22

33
function LiveLeaderboard({ entries }) {
4-
const getRankIcon = (rank) => {
5-
switch (rank) {
6-
case 1:
7-
return <Crown className="w-3 h-3 text-yellow-500" />
8-
case 2:
9-
case 3:
10-
return <Medal className={`w-3 h-3 ${rank === 2 ? "text-gray-500" : "text-orange-500"}`} />
11-
default:
12-
return null
13-
}
14-
}
15-
164
const getRankBg = (rank) => {
175
switch (rank) {
186
case 1:
@@ -31,11 +19,11 @@ function LiveLeaderboard({ entries }) {
3119
case 1:
3220
return "bg-yellow-500"
3321
case 2:
34-
return "bg-gray-500"
22+
return "bg-gray-400"
3523
case 3:
3624
return "bg-orange-500"
3725
default:
38-
return "bg-gray-400"
26+
return "text-gray-500"
3927
}
4028
}
4129

@@ -52,28 +40,27 @@ function LiveLeaderboard({ entries }) {
5240
}
5341

5442
return (
55-
<div className="p-3">
56-
<h3 className="text-sm font-semibold text-gray-800 mb-3 flex items-center">
57-
<Trophy className="w-4 h-4 mr-2 text-yellow-600" />
58-
Live Ranking ({entries.length})
59-
</h3>
60-
<div className="space-y-1">
61-
{entries.map((entry) => (
62-
<div key={entry.rank} className={`flex items-center space-x-2 p-1.5 rounded-md ${getRankBg(entry.rank)}`}>
63-
<div
64-
className={`w-6 h-6 ${getRankColor(entry.rank)} text-white rounded-full flex items-center justify-center text-xs font-bold`}
65-
>
66-
{entry.rank}
67-
</div>
68-
<div className="flex-1 min-w-0">
69-
<div className="text-xs font-medium text-gray-900 truncate">{entry.name}</div>
70-
<div className={`text-xs font-medium ${getScoreColor(entry.rank)}`}>{entry.score} correct</div>
71-
</div>
72-
{getRankIcon(entry.rank)}
73-
</div>
74-
))}
43+
<div className="p-4">
44+
<h3 className="text-base font-semibold text-gray-800 mb-4 flex items-center">
45+
<Trophy className="w-5 h-5 mr-2 text-yellow-600" />
46+
실시간 랭킹 ({entries.length})
47+
</h3>
48+
<div className="space-y-0">
49+
{entries.map((entry) => (
50+
<div key={entry.rank} className={`flex items-center space-x-3 p-1 rounded-md ${getRankBg(entry.rank)}`}>
51+
<div
52+
className={`w-7 h-7 ${getRankColor(entry.rank)} text-white rounded-full flex items-center justify-center text-sm font-bold`}
53+
>
54+
{entry.rank}
55+
</div>
56+
<div className="flex-1 min-w-0">
57+
<div className="text-sm font-medium text-gray-900 truncate">{entry.name}</div>
58+
</div>
59+
<div className={`text-sm font-medium ${getScoreColor(entry.rank)}`}>정답 {entry.score}개</div>
60+
</div>
61+
))}
62+
</div>
7563
</div>
76-
</div>
7764
)
7865
}
7966

‎src/layout/game/components/ParticipantsList.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,42 +30,42 @@ function ParticipantsList({ participants }) {
3030
const getStatusIcon = (status) => {
3131
switch (status) {
3232
case "host":
33-
return <Crown className="w-3 h-3 text-yellow-500" />
33+
return <Crown className="w-4 h-4 text-yellow-500" />
3434
case "ready":
35-
return <CheckCircle className="w-3 h-3 text-green-500" />
35+
return <CheckCircle className="w-4 h-4 text-green-500" />
3636
case "waiting":
37-
return <Clock className="w-3 h-3 text-orange-500" />
37+
return <Clock className="w-4 h-4 text-orange-500" />
3838
default:
3939
return null
4040
}
4141
}
4242

4343
return (
44-
<div className="p-3">
45-
<h3 className="text-sm font-semibold text-gray-800 mb-3 flex items-center">
46-
<Users className="w-4 h-4 mr-2 text-red-600" />
47-
참가자 ({participants.length})
48-
</h3>
49-
<div className="space-y-1">
50-
{participants.map((participant) => (
51-
<div
52-
key={participant.id}
53-
className={`flex items-center space-x-2 p-1.5 rounded-md ${
54-
participant.status === "host" ? "bg-red-50" : "hover:bg-gray-50"
55-
}`}
56-
>
57-
<Car className={`w-4 h-4 ${participant.color}`} />
58-
<div className="flex-1 min-w-0">
59-
<div className="text-xs font-medium text-gray-900 truncate">{participant.name}</div>
60-
<div className={`text-xs font-medium ${getStatusColor(participant.status)}`}>
61-
{getStatusText(participant.status)}
44+
<div className="p-4">
45+
<h3 className="text-base font-semibold text-gray-800 mb-4 flex items-center">
46+
<Users className="w-5 h-5 mr-2 text-red-600" />
47+
참가자 ({participants.length})
48+
</h3>
49+
<div className="space-y-0">
50+
{participants.map((participant) => (
51+
<div
52+
key={participant.id}
53+
className={`flex items-center space-x-3 p-1 rounded-md ${
54+
participant.status === "host" ? "bg-red-50" : "hover:bg-gray-50"
55+
}`}
56+
>
57+
<Car className={`w-5 h-5 ${participant.color}`} />
58+
<div className="flex-1 min-w-0">
59+
<div className="text-sm font-medium text-gray-900 truncate">{participant.name}</div>
60+
</div>
61+
<div className={`text-sm font-medium ${getStatusColor(participant.status)}`}>
62+
{getStatusText(participant.status)}
63+
</div>
64+
{getStatusIcon(participant.status)}
6265
</div>
63-
</div>
64-
{getStatusIcon(participant.status)}
65-
</div>
66-
))}
66+
))}
67+
</div>
6768
</div>
68-
</div>
6969
)
7070
}
7171

0 commit comments

Comments
 (0)