fix(space): recovery 트레이 공통 레이아웃 정리

src/widgets/space-focus-hud/ui/GoalCompleteSheet.tsx

@@ -13,6 +13,7 @@ import {
   HUD_REVEAL_BASE,
   HUD_REVEAL_COMPLETE,
   HUD_REVEAL_HIDDEN,
+  HUD_TRAY_CONTENT,
   HUD_TEXT_LINK,
   HUD_TEXT_LINK_STRONG,
   HUD_TRAY_HAIRLINE,
@@ -149,132 +150,134 @@ export const GoalCompleteSheet = ({
         <div aria-hidden className={HUD_TRAY_LAYER} />
         <div aria-hidden className={HUD_TRAY_HAIRLINE} />
 
-        <header className="relative flex items-start justify-between gap-2">
-          <div>
-            <p className="text-[11px] font-medium tracking-[0.08em] text-white/38">목표 완료</p>
-            <h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
-            <p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">{description}</p>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={isSubmitting}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/14 text-[11px] text-white/72 backdrop-blur-md transition-all hover:bg-black/20 hover:text-white disabled:cursor-not-allowed disabled:border-white/6 disabled:bg-black/10 disabled:text-white/26"
-            aria-label={copy.space.goalComplete.closeAriaLabel}
-          >
-            ✕
-          </button>
-        </header>
+        <div className={HUD_TRAY_CONTENT}>
+          <header className="flex items-start justify-between gap-2">
+            <div>
+              <p className="text-[11px] font-medium tracking-[0.08em] text-white/38">목표 완료</p>
+              <h3 className="mt-1 max-w-[22rem] text-[1rem] font-medium tracking-tight text-white/94">{title}</h3>
+              <p className="mt-1 max-w-[21rem] text-[12px] leading-[1.55] text-white/56">{description}</p>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/14 text-[11px] text-white/72 backdrop-blur-md transition-all hover:bg-black/20 hover:text-white disabled:cursor-not-allowed disabled:border-white/6 disabled:bg-black/10 disabled:text-white/26"
+              aria-label={copy.space.goalComplete.closeAriaLabel}
+            >
+              ✕
+            </button>
+          </header>
 
-        {view === 'choice' ? (
-          <div className="relative mt-3 space-y-3">
-            {trimmedCurrentGoal ? (
-              <div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
-                <p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
-                  {copy.space.goalComplete.currentGoalLabel}
-                </p>
-                <p className="mt-1 truncate text-[14px] text-white/86">{trimmedCurrentGoal}</p>
-              </div>
-            ) : null}
-
-            <footer className="mt-4 space-y-2">
-              <button
-                type="button"
-                onClick={() => setView('next')}
-                disabled={isSubmitting}
-                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
-              >
-                <div className="max-w-[20.5rem]">
-                  <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
-                    {copy.space.goalComplete.chooseNextButton}
-                  </p>
-                  <p className="mt-1 text-[12px] leading-[1.55] text-white/48">
-                    {copy.space.goalComplete.chooseNextDescription}
+          {view === 'choice' ? (
+            <div className="mt-3 space-y-3">
+              {trimmedCurrentGoal ? (
+                <div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
+                  <p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
+                    {copy.space.goalComplete.currentGoalLabel}
                   </p>
+                  <p className="mt-1 truncate text-[14px] text-white/86">{trimmedCurrentGoal}</p>
                 </div>
-                <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
-              </button>
-              <button
-                type="button"
-                onClick={onRest}
-                disabled={isSubmitting}
-                className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
-              >
-                <div className="max-w-[20.5rem]">
-                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
-                    {copy.space.goalComplete.restButton}
-                  </p>
-                  <p className="mt-1 text-[12px] leading-[1.55] text-emerald-50/56">
-                    {copy.space.goalComplete.restDescription}
-                  </p>
-                </div>
-                <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
-              </button>
-              <button
-                type="button"
-                onClick={handleFinish}
-                disabled={isSubmitting}
-                className={HUD_OPTION_ROW}
-              >
-                <div className="max-w-[20.5rem]">
-                  <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
-                    {submissionMode === 'finish'
-                      ? copy.space.goalComplete.finishPending
-                      : copy.space.goalComplete.finishButton}
-                  </p>
-                  <p className="mt-1 text-[12px] leading-[1.55] text-white/44">
-                    {copy.space.goalComplete.finishDescription}
-                  </p>
-                </div>
-                <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
-              </button>
-            </footer>
-          </div>
-        ) : (
-          <form className="relative mt-3 space-y-3" onSubmit={handleSubmit}>
-            {trimmedCurrentGoal ? (
-              <div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
-                <p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
-                  {copy.space.goalComplete.currentGoalLabel}
-                </p>
-                <p className="mt-1 truncate text-[14px] text-white/86">{trimmedCurrentGoal}</p>
-              </div>
-            ) : null}
+              ) : null}
 
-            <label className="block">
-              <span className="mb-2 block text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
-                {copy.space.goalComplete.nextGoalLabel}
-              </span>
-              <input
-                ref={inputRef}
-                value={draft}
-                onChange={(event) => setDraft(event.target.value)}
-                placeholder={placeholder}
-                className={HUD_FIELD}
-              />
-            </label>
+              <footer className="mt-4 space-y-2">
+                <button
+                  type="button"
+                  onClick={() => setView('next')}
+                  disabled={isSubmitting}
+                  className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_PRIMARY)}
+                >
+                  <div className="max-w-[20.5rem]">
+                    <p className="text-[13px] font-semibold tracking-[0.01em] text-white/90">
+                      {copy.space.goalComplete.chooseNextButton}
+                    </p>
+                    <p className="mt-1 text-[12px] leading-[1.55] text-white/48">
+                      {copy.space.goalComplete.chooseNextDescription}
+                    </p>
+                  </div>
+                  <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={onRest}
+                  disabled={isSubmitting}
+                  className={cn(HUD_OPTION_ROW, HUD_OPTION_ROW_BREAK)}
+                >
+                  <div className="max-w-[20.5rem]">
+                    <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
+                      {copy.space.goalComplete.restButton}
+                    </p>
+                    <p className="mt-1 text-[12px] leading-[1.55] text-emerald-50/56">
+                      {copy.space.goalComplete.restDescription}
+                    </p>
+                  </div>
+                  <span aria-hidden className={cn(HUD_OPTION_CHEVRON, 'text-emerald-100/34 group-hover:text-emerald-100/58')}>→</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleFinish}
+                  disabled={isSubmitting}
+                  className={HUD_OPTION_ROW}
+                >
+                  <div className="max-w-[20.5rem]">
+                    <p className="text-[13px] font-medium tracking-[0.01em] text-white/78">
+                      {submissionMode === 'finish'
+                        ? copy.space.goalComplete.finishPending
+                        : copy.space.goalComplete.finishButton}
+                    </p>
+                    <p className="mt-1 text-[12px] leading-[1.55] text-white/44">
+                      {copy.space.goalComplete.finishDescription}
+                    </p>
+                  </div>
+                  <span aria-hidden className={HUD_OPTION_CHEVRON}>→</span>
+                </button>
+              </footer>
+            </div>
+          ) : (
+            <form className="mt-3 space-y-3" onSubmit={handleSubmit}>
+              {trimmedCurrentGoal ? (
+                <div className="rounded-[18px] border border-white/8 bg-black/10 px-3.5 py-3">
+                  <p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
+                    {copy.space.goalComplete.currentGoalLabel}
+                  </p>
+                  <p className="mt-1 truncate text-[14px] text-white/86">{trimmedCurrentGoal}</p>
+                </div>
+              ) : null}
 
-            <footer className="mt-3 flex items-center justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setView('choice')}
-                disabled={isSubmitting}
-                className={HUD_TEXT_LINK}
-              >
-                {copy.space.goalComplete.backButton}
-              </button>
-              <button
-                type="submit"
-                disabled={!canConfirm || isSubmitting}
-                className={HUD_TEXT_LINK_STRONG}
-              >
-                {submissionMode === 'next'
-                  ? copy.space.goalComplete.confirmPending
-                  : copy.space.goalComplete.confirmButton}
-              </button>
-            </footer>
-          </form>
-        )}
+              <label className="block">
+                <span className="mb-2 block text-[11px] font-medium uppercase tracking-[0.16em] text-white/36">
+                  {copy.space.goalComplete.nextGoalLabel}
+                </span>
+                <input
+                  ref={inputRef}
+                  value={draft}
+                  onChange={(event) => setDraft(event.target.value)}
+                  placeholder={placeholder}
+                  className={HUD_FIELD}
+                />
+              </label>
+
+              <footer className="mt-3 flex items-center justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => setView('choice')}
+                  disabled={isSubmitting}
+                  className={HUD_TEXT_LINK}
+                >
+                  {copy.space.goalComplete.backButton}
+                </button>
+                <button
+                  type="submit"
+                  disabled={!canConfirm || isSubmitting}
+                  className={HUD_TEXT_LINK_STRONG}
+                >
+                  {submissionMode === 'next'
+                    ? copy.space.goalComplete.confirmPending
+                    : copy.space.goalComplete.confirmButton}
+                </button>
+              </footer>
+            </form>
+          )}
+        </div>
       </section>
     </div>
   );

src/widgets/space-focus-hud/ui/NextMicroStepPrompt.tsx

@@ -9,6 +9,7 @@ import {
   HUD_REVEAL_BASE,
   HUD_REVEAL_HIDDEN,
   HUD_REVEAL_NEXT_BEAT,
+  HUD_TRAY_CONTENT,
   HUD_TRAY_HAIRLINE,
   HUD_TRAY_LAYER,
   HUD_TRAY_SHELL,
@@ -45,7 +46,7 @@ export const NextMicroStepPrompt = ({
         <div aria-hidden className={HUD_TRAY_LAYER} />
         <div aria-hidden className={HUD_TRAY_HAIRLINE} />
 
-        <div className="relative px-6 py-5">
+        <div className={HUD_TRAY_CONTENT}>
           <p className="text-[11px] font-medium tracking-[0.08em] text-white/42">
             {copy.space.focusHud.microStepPromptEyebrow}
           </p>

src/widgets/space-focus-hud/ui/PauseRefocusPrompt.tsx

@@ -12,6 +12,7 @@ import {
   HUD_REVEAL_BASE,
   HUD_REVEAL_HIDDEN,
   HUD_REVEAL_PAUSE,
+  HUD_TRAY_CONTENT,
   HUD_TRAY_HAIRLINE,
   HUD_TRAY_LAYER,
   HUD_TRAY_SHELL,
@@ -42,7 +43,7 @@ export const PauseRefocusPrompt = ({
         <div aria-hidden className={HUD_TRAY_LAYER} />
         <div aria-hidden className={HUD_TRAY_HAIRLINE} />
 
-        <div className="relative px-6 py-5 md:px-6 md:py-5">
+        <div className={HUD_TRAY_CONTENT}>
           <p className={HUD_PAUSE_EYEBROW}>
             {copy.space.focusHud.pausePromptEyebrow}
           </p>

src/widgets/space-focus-hud/ui/ReturnPrompt.tsx

@@ -13,6 +13,7 @@ import {
   HUD_REVEAL_RETURN_FOCUS,
   HUD_RETURN_BODY,
   HUD_RETURN_TITLE,
+  HUD_TRAY_CONTENT,
   HUD_TRAY_HAIRLINE_BREAK,
   HUD_TRAY_HAIRLINE,
   HUD_TRAY_LAYER_BREAK,
@@ -58,7 +59,7 @@ export const ReturnPrompt = ({
         <div aria-hidden className={isBreakReturn ? HUD_TRAY_LAYER_BREAK : HUD_TRAY_LAYER} />
         <div aria-hidden className={isBreakReturn ? HUD_TRAY_HAIRLINE_BREAK : HUD_TRAY_HAIRLINE} />
 
-        <div className="relative px-6 py-5">
+        <div className={HUD_TRAY_CONTENT}>
           <p className={cn(
             'text-[11px] font-medium tracking-[0.12em]',
             isBreakReturn ? 'text-emerald-100/54' : 'text-white/42',

src/widgets/space-focus-hud/ui/overlayStyles.ts

@@ -14,6 +14,8 @@ export const HUD_TRAY_HAIRLINE = 'pointer-events-none absolute inset-x-0 top-0 h
 
 export const HUD_TRAY_HAIRLINE_BREAK = 'pointer-events-none absolute inset-x-0 top-0 h-px bg-emerald-200/18';
 
+export const HUD_TRAY_CONTENT = 'relative px-6 py-5';
+
 export const HUD_REVEAL_BASE =
   'pointer-events-none w-full origin-top-left overflow-hidden transition-[max-height,opacity,transform] motion-reduce:transition-none';