// 기존: 모든 UTM 필드가 있어야 저장
if (utmSource && utmMedium && utmCampaign && utmTerm && utmContent) {
  sessionStorage.setItem('utm', JSON.stringify({ ... }));
}
 
// 개선: UTM 필드가 하나라도 있거나 referrer가 있으면 저장
if (utmSource || utmMedium || utmCampaign || utmTerm || utmContent || document.referrer) {
  const trackingData = {
    utm_source: utmSource,
    utm_medium: utmMedium,
    utm_campaign: utmCampaign,
    utm_term: utmTerm,
    utm_content: utmContent,
    referrer: document.referrer
  };
 
  sessionStorage.setItem('tracking', JSON.stringify(trackingData));
}

// 기존 스타일 - 문제가 있는 코드
export const Sidebar = styled.div<SidebarProps>`
  position: fixed;
  top: 0;
  right: ${props => (props.$isOpen ? "0" : "-500px")};
  width: 500px;
  height: 100vh;
  overflow-y: auto;
 
  /* 이것만으로는 부족했습니다 */
  overscroll-behavior: contain;
 
  @media (max-width: 768px) {
    width: 100%;
  }
`;

// useBodyScrollLock.ts
export const useBodyScrollLock = (isLocked: boolean) => {
  useEffect(() => {
    if (isLocked) {
      // 현재 스크롤 위치 저장
      const scrollY = window.scrollY;
 
      // body를 fixed로 고정하여 스크롤 방지
      document.body.style.position = "fixed";
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = "100%";
      document.body.style.overflow = "hidden";
    } else {
      // 저장된 스크롤 위치 가져오기
      const scrollY = document.body.style.top;
 
      // body 스타일 복원
      document.body.style.position = "";
      document.body.style.top = "";
      document.body.style.width = "";
      document.body.style.overflow = "";
 
      // 스크롤 위치 복원
      if (scrollY) {
        window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
      }
    }
 
    // cleanup: 컴포넌트가 unmount 될 때 스타일 복원
    return () => {
      document.body.style.position = "";
      document.body.style.top = "";
      document.body.style.width = "";
      document.body.style.overflow = "";
    };
  }, [isLocked]);
};

const TrialSidebar = ({ isOpen, onClose }: TrialSidebarProps) => {
  // 사이드바가 열렸을 때 body 스크롤 잠금
  useBodyScrollLock(isOpen);
 
  // ... 나머지 코드
};

// useInputScrollIntoView.ts
export const useInputScrollIntoView = <T extends HTMLElement>() => {
  const inputRef = useRef<T>(null);
 
  useEffect(() => {
    const element = inputRef.current;
    if (!element) return;
 
    const handleFocus = () => {
      // 모바일 기기인지 확인 (768px 이하)
      if (!isMobileDevice()) return;
 
      // 키보드 애니메이션 완료 대기 (300ms)
      setTimeout(() => {
        // 부모 스크롤 컨테이너 찾기
        const scrollParent = findScrollParent(element);
 
        if (scrollParent) {
          const elementRect = element.getBoundingClientRect();
          const parentRect = scrollParent.getBoundingClientRect();
 
          // 요소를 컨테이너의 중앙에 위치시키기 위한 스크롤 위치 계산
          const scrollTop =
            scrollParent.scrollTop +
            elementRect.top -
            parentRect.top -
            parentRect.height / 2 +
            elementRect.height / 2;
 
          // 부드러운 스크롤
          scrollParent.scrollTo({
            top: scrollTop,
            behavior: "smooth",
          });
        }
      }, 300);
    };
 
    element.addEventListener("focus", handleFocus);
 
    return () => {
      element.removeEventListener("focus", handleFocus);
    };
  }, []);
 
  return inputRef;
};
 
// 모바일 기기 감지
const isMobileDevice = (): boolean => {
  if (typeof window === "undefined") return false;
  return window.innerWidth <= 768;
};
 
// 스크롤 가능한 부모 요소 찾기
const findScrollParent = (element: HTMLElement): HTMLElement | null => {
  let parent = element.parentElement;
 
  while (parent) {
    const { overflow, overflowY } = window.getComputedStyle(parent);
    if (
      overflow === "auto" ||
      overflow === "scroll" ||
      overflowY === "auto" ||
      overflowY === "scroll"
    ) {
      return parent;
    }
    parent = parent.parentElement;
  }
 
  return null;
};

// Before
const Input = ({ value, id, onChange, ...props }: InputProps) => {
  return <CustomInput id={id} value={value} onChange={onChange} {...props} />;
};
 
// After
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ value, id, onChange, ...props }, ref) => {
    return <CustomInput ref={ref} id={id} value={value} onChange={onChange} {...props} />;
  },
);
 
Input.displayName = "Input";

// TrialLoginComponent.styles.ts
export const LoginContent = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
 
  /* 모바일에서 키보드가 올라올 때를 대비한 여유 공간 확보 */
  @media (max-width: 768px) {
    padding-bottom: 350px;
  }
`;

const TrialLoginComponent = ({ onLoginSuccess }: TrialLoginComponentProps) => {
  // 자동 스크롤을 위한 ref
  const phoneNumberRef = useInputScrollIntoView<HTMLInputElement>();
  const passwordRef = useInputScrollIntoView<HTMLInputElement>();
 
  return (
    <S.LoginContent>
      <S.InputSection>
        <Input
          ref={phoneNumberRef}
          label="휴대전화번호 ('-'제외)"
          // ... props
        />
        <Input
          ref={passwordRef}
          label="비밀번호"
          type="password"
          // ... props
        />
      </S.InputSection>
    </S.LoginContent>
  );
};