refactor: 아직 기능이 없는 방 인원, 체크인 삭제
This commit is contained in:
@@ -45,17 +45,6 @@ function formatHHMMSS(totalSeconds: number) {
|
|||||||
return `${hh}:${mm}:${ss}`;
|
return `${hh}:${mm}:${ss}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 로컬 Presence (Supabase 교체 전용)
|
|
||||||
* - 같은 브라우저에서 여러 탭/창을 열면 "인원 점"이 늘어남
|
|
||||||
* - BroadcastChannel 미지원 환경은 localStorage 이벤트로 fallback
|
|
||||||
*
|
|
||||||
* 교체 포인트:
|
|
||||||
* const { participants } = useLocalPresence(roomKey, status)
|
|
||||||
* 를
|
|
||||||
* const { participants } = useSupabasePresence(roomKey, status)
|
|
||||||
* 같은 형태로 바꾸면 UI는 그대로 유지 가능
|
|
||||||
*/
|
|
||||||
function useLocalPresence(roomKey: string, status: PresenceStatus) {
|
function useLocalPresence(roomKey: string, status: PresenceStatus) {
|
||||||
const selfId = useMemo(() => {
|
const selfId = useMemo(() => {
|
||||||
// 탭 단위 고유 ID
|
// 탭 단위 고유 ID
|
||||||
@@ -309,7 +298,6 @@ export default function SessionPage() {
|
|||||||
return formatHHMMSS(remaining);
|
return formatHHMMSS(remaining);
|
||||||
}, [elapsed, remaining, mode]);
|
}, [elapsed, remaining, mode]);
|
||||||
|
|
||||||
const onCheckIn = () => showToast("체크인 기록됨");
|
|
||||||
const onEnd = () =>
|
const onEnd = () =>
|
||||||
router.push(`/session/end?mode=${mode}&elapsed=${elapsed}`);
|
router.push(`/session/end?mode=${mode}&elapsed=${elapsed}`);
|
||||||
|
|
||||||
@@ -321,69 +309,35 @@ export default function SessionPage() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="mx-auto flex min-h-[calc(100vh-64px)] max-w-lg flex-col px-5 pb-10 pt-6">
|
<section className="mx-auto justify-center flex min-h-[calc(100vh-64px)] max-w-lg flex-col px-5 pb-10 pt-6">
|
||||||
{toast && (
|
{toast && (
|
||||||
<div className="mb-4 rounded-2xl border border-[#D7E0EE] bg-white px-4 py-3 text-sm text-slate-700 shadow-sm">
|
<div className="mb-4 rounded-2xl border border-[#D7E0EE] bg-white px-4 py-3 text-sm text-slate-700 shadow-sm">
|
||||||
{toast}
|
{toast}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="text-sm font-semibold text-slate-600">
|
|
||||||
{modeLabel(mode)}
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 text-base leading-relaxed text-slate-700">
|
|
||||||
{mode === "freeflow"
|
|
||||||
? "원할 때 종료"
|
|
||||||
: "한 번 실행되고 끝나면 요약으로 이동"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Timer */}
|
{/* Timer */}
|
||||||
<div
|
<div
|
||||||
className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
|
className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
|
||||||
style={{ borderColor: BORDER }}
|
style={{ borderColor: BORDER }}
|
||||||
>
|
>
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="text-sm font-semibold text-slate-600">
|
||||||
|
{modeLabel(mode)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-base leading-relaxed text-slate-700">
|
||||||
|
{mode === "freeflow"
|
||||||
|
? "원할 때 종료"
|
||||||
|
: "한 번 실행되고 끝나면 요약으로 이동"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className="text-[44px] font-semibold leading-none text-slate-900 tabular-nums">
|
<div className="text-[44px] font-semibold leading-none text-slate-900 tabular-nums">
|
||||||
{timeMain}
|
{timeMain}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-6">
|
|
||||||
<label className="text-sm font-semibold text-slate-600">
|
|
||||||
목표(선택)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
value={goal}
|
|
||||||
onChange={(e) => setGoal(e.target.value)}
|
|
||||||
placeholder="이번 세션 목표(선택)"
|
|
||||||
className="mt-2 w-full rounded-2xl border px-4 py-3 text-base text-slate-900 outline-none"
|
|
||||||
style={{ borderColor: BORDER }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Presence */}
|
|
||||||
<div
|
|
||||||
className="mt-4 rounded-3xl border bg-white px-6 py-5 shadow-sm"
|
|
||||||
style={{ borderColor: BORDER }}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="text-sm font-semibold text-slate-700">방</div>
|
|
||||||
<div className="text-sm text-slate-600">{roomKey}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex items-center justify-between">
|
|
||||||
<div className="text-sm font-semibold text-slate-700">인원</div>
|
|
||||||
<div className="text-sm text-slate-600">{participants.length}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<PresenceDots participants={participants} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="mt-5 grid grid-cols-3 gap-3">
|
<div className="mt-5 grid grid-cols-2 gap-3">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setIsAway((v) => !v)}
|
onClick={() => setIsAway((v) => !v)}
|
||||||
@@ -399,21 +353,6 @@ export default function SessionPage() {
|
|||||||
{isAway ? "복귀" : "자리비움"}
|
{isAway ? "복귀" : "자리비움"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onCheckIn}
|
|
||||||
className="rounded-3xl border bg-white px-4 py-4 text-base font-semibold text-slate-800 shadow-sm transition active:scale-[0.99]"
|
|
||||||
style={{ borderColor: BORDER }}
|
|
||||||
onMouseEnter={(e) =>
|
|
||||||
(e.currentTarget.style.backgroundColor = HOVER)
|
|
||||||
}
|
|
||||||
onMouseLeave={(e) =>
|
|
||||||
(e.currentTarget.style.backgroundColor = "#FFFFFF")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
체크인
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onEnd}
|
onClick={onEnd}
|
||||||
|
|||||||
Reference in New Issue
Block a user