프론트엔드 개발자 김태중

// 호텔 정보는 자주 바뀌지 않으니 5분간 ISR 캐시.
async function fetchHotelInfo(hotelCode: string) {
  const res = await fetch(
    `${apiUrl}/api/hotel?hotel_code=${hotelCode}`,
    { next: { revalidate: 300 } }
  );
  if (!res.ok) return null;
  return ((await res.json()) as ApiResponse<HotelRaw>).data;
}

export async function generateMetadata({ params }: Props) {
  const hotelCode = resolveHotelName(params.hotelName);
  if (!hotelCode) return {};

  const hotel = await fetchHotelInfo(hotelCode);
  if (!hotel) return {};
 
  ...

  return {
    title,
    description,
    openGraph: { title, description, images: image ? [image] : undefined },
  };
}

// 호텔별 차이는 이 객체에만 둔다. 적지 않은 키는 default를 따른다.
const HOTEL_CONFIGS = {
  default: {
    authorizationFields: ['name', 'checkInDate'],
    isConsult: false,
    useMembership: false,
    useCheckout: true,
    hotel_language: 'kr, en',
    brandColor: '#ffffff',
    brandFont: 'Pretendard, sans-serif',
    specialFont: 'Libre BaskerVille, sans-serif',
  },
  A: {
    authorizationFields: ['name'],
    isConsult: true,
    customSplash: 'splashImage',
    customLogo: true,
    brandColor: '#aaaaaa',
    specialFont: 'Optima, sans-serif',
  },
  B: {
    authorizationFields: ['name'],
    isConsult: true,
    hotel_language: 'kr, en, jp, chs',
    useCheckout: false,
    brandColor: '#bbbbbb',
    brandFont: 'Noto Sans KR, sans-serif',
    specialFont: 'Georgia, serif',
  },
};

// default 위에 호텔별 값만 덮어쓴다.
const getHotelConfig = (hotelSeq: number): BrandDefaultConfig => {
  const config =
    HOTEL_CONFIGS[hotelSeq as keyof typeof HOTEL_CONFIGS];
  return config
    ? { ...HOTEL_CONFIGS.default, ...config }
    : HOTEL_CONFIGS.default;
};

// 서버 권한(permission)과 호텔 설정을 합쳐 하나의 ViewModel로 내려준다.
const permissionService = () => {
  const { hotelSeq } = useHotelParams();
  const { data } = usePermissions();

  const permission = useMemo(() => {
    if (!data?.permission || !hotelSeq) return null;
    const brandCustom = getHotelConfig(Number(hotelSeq));
    return {
      permissionWithBrand: { ...data.permission, ...brandCustom },
    };
  }, [data?.permission, hotelSeq]);

  return { permission };
};

// 인증 폼의 입력란 구성은 설정의 authorizationFields만 보고 결정한다.
const { permissionWithBrand } = useHotelData();

const inputFields = useMemo(() => {
  const fields = permissionWithBrand?.authorizationFields ?? [];
  return [
    { type: 'text', label: '객실 번호' },
    ...(fields.includes('phone')
      ? [{ type: 'tel', label: '전화번호' }]
      : []),
    ...(fields.includes('checkInDate')
      ? [{ type: 'datePicker', label: '체크인 날짜' }]
      : []),
    { type: 'text', label: '예약자 이름' },
  ];
}, [permissionWithBrand?.authorizationFields]);

export const ModalRenderer = () => {
  const modals = useModalStore((s) => s.modals);
  const close = useModalStore((s) => s.close);
  useBodyScrollLock(modals.length > 0);

  return modals.map(({ Component, props, id }, index) => {
    const { dimStyle, onBeforeClose, ...rest } = props;
    const onModalClose = () => close(id, onBeforeClose);

    return (
      <ModalProvider key={id} value={{ id, onModalClose }}>
        <Suspense fallback={null}>
          {/* overlay는 맨 위 모달에만 적용 — 겹침 버그를 여기서 끊는다 */}
          <div className={cx(styles.modal_overlay, {
            [dimStyle || styles.dim]: index === modals.length - 1,
          })}>
            <Component id={id} onModalClose={onModalClose} {...rest} />
          </div>
        </Suspense>
      </ModalProvider>
    );
  });
};

open(CleaningRequestModal, { roomNo: '1000' });

function CleaningRequestModal({ roomNo }) {
  return (
    <BaseModal size="large" onSubmit={requestCleaning}>
      <BaseModal.Header title={`${roomNo}호 청소 요청`} />
      <CleaningForm />
      <BaseModal.Footer cancelText="닫기" submitText="요청" />
    </BaseModal>
  );
}

// 두 좌표 사이 거리(m)를 haversine으로 구해 반경 안인지 판단한다.
function isWithinDistance(
  base: number[],
  target: number[],
  scope: number
) {
  return haversine(base[0], base[1], target[0], target[1]) <= scope;
}

// GPS: 위치가 바뀔 때마다 등록된 사무실 반경(scope) 안인지 확인한다.
const id = navigator.geolocation.watchPosition(
  ({ coords: { latitude, longitude } }) => {
    const isWithin = commuteInfo.gps.some((office) =>
      isWithinDistance(
        [latitude, longitude],
        office.gps.split(',').map(Number),
        office.scope
      )
    );
    setIsGps(isWithin);
  },
  () => console.log('위치 가져오기 실패'),
  { enableHighAccuracy: true }
);

// IP: 5초마다 ipify로 공인 IP를 받아 사내망 IP 목록과 비교한다.
const timer = setInterval(() => {
  fetchWiFiPublicIp().then(({ ip }) => {
    setIsWifi(commuteInfo.ip.some((item) => item.ip === ip));
  });
}, 5000);

// 두 근거를 각각 표시하고, 하나라도 통과하면 출퇴근 버튼을 연다.
<ul className={S.status_box}>
  <li>
    <span className={S.title}>WiFi</span>
    <span className={cx(S.status, { [S.active]: isWifi })} />
  </li>
  <li>
    <span className={S.title}>GPS</span>
    <span className={cx(S.status, { [S.active]: isGps })} />
  </li>
</ul>
<CommuteBtn
  employeeId={employee.employee_id}
  isPermit={isWifi || isGps}
/>