From d497348c019b5fcbe1ac786f17665f8727049b92 Mon Sep 17 00:00:00 2001
From: corpi <lj845854@gmail.com>
Date: Mon, 2 Feb 2026 14:04:32 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=95=84=EC=A7=81=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=EC=9D=B4=20=EC=97=86=EB=8A=94=20=EB=B0=A9=20=EC=9D=B8?=
 =?UTF-8?q?=EC=9B=90,=20=EC=B2=B4=ED=81=AC=EC=9D=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/session/page.tsx | 85 ++++++----------------------------------
 1 file changed, 12 insertions(+), 73 deletions(-)

diff --git a/src/app/session/page.tsx b/src/app/session/page.tsx
index 0f04172..9e790e5 100644
--- a/src/app/session/page.tsx
+++ b/src/app/session/page.tsx
@@ -45,17 +45,6 @@ function formatHHMMSS(totalSeconds: number) {
   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) {
   const selfId = useMemo(() => {
     // 탭 단위 고유 ID
@@ -309,7 +298,6 @@ export default function SessionPage() {
     return formatHHMMSS(remaining);
   }, [elapsed, remaining, mode]);
 
-  const onCheckIn = () => showToast("체크인 기록됨");
   const onEnd = () =>
     router.push(`/session/end?mode=${mode}&elapsed=${elapsed}`);
 
@@ -321,69 +309,35 @@ export default function SessionPage() {
         </div>
       </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 && (
           <div className="mb-4 rounded-2xl border border-[#D7E0EE] bg-white px-4 py-3 text-sm text-slate-700 shadow-sm">
             {toast}
           </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 */}
         <div
           className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
           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">
             {timeMain}
           </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>
 
         {/* Actions */}
-        <div className="mt-5 grid grid-cols-3 gap-3">
+        <div className="mt-5 grid grid-cols-2 gap-3">
           <button
             type="button"
             onClick={() => setIsAway((v) => !v)}
@@ -399,21 +353,6 @@ export default function SessionPage() {
             {isAway ? "복귀" : "자리비움"}
           </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
             type="button"
             onClick={onEnd}