Skip to content

Instantly share code, notes, and snippets.

@coleea
Created July 17, 2024 23:49
Show Gist options
  • Save coleea/c05495c94c0da41f46633392856d4341 to your computer and use it in GitHub Desktop.
Save coleea/c05495c94c0da41f46633392856d4341 to your computer and use it in GitHub Desktop.
import type { NextPage } from "next";
import FrameComponent36 from "../components/frame-component36";
import FrameComponent35 from "../components/frame-component35";
const Frame: NextPage = () => {
return (
<div className="w-full h-[1222px] relative bg-white overflow-hidden tracking-[normal] text-left text-sm text-default-black font-body1 mq450:h-auto mq450:min-h-[1222]">
<img
className="absolute top-[132px] left-[402.5px] w-[1517.5px] h-[1.5px]"
loading="lazy"
alt=""
src="/vector-1381.svg"
/>
<h2 className="m-0 absolute top-[60px] left-[503px] text-7xl tracking-[0.2px] leading-[32px] uppercase font-bold font-inherit mq450:text-2xl mq450:leading-[26px]">
호텔 - 예약 내역
</h2>
<div className="absolute top-[0px] left-[0px] bg-whitesmoke-100 w-[403px] flex flex-col items-start justify-start pt-[38px] px-10 pb-[50px] box-border gap-[421px] max-w-full z-[1] font-apple-sd-gothic-neo">
<div className="w-[403px] h-[1222px] relative bg-whitesmoke-100 hidden max-w-full" />
<div className="self-stretch flex flex-col items-start justify-start gap-[60px]">
<FrameComponent36 />
<FrameComponent35 />
</div>
<div className="self-stretch flex flex-row items-start justify-between gap-[20px] mq450:flex-wrap">
<div className="flex flex-col items-start justify-start pt-px px-0 pb-0">
<div className="relative [text-decoration:underline] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px] z-[2]">
로그아웃
</div>
</div>
<img
className="h-[20.8px] w-11 relative object-cover z-[2]"
loading="lazy"
alt=""
src="/[email protected]"
/>
</div>
</div>
<div className="absolute top-[506px] left-[524px] tracking-[0.2px] uppercase inline-block min-w-[39px]">
12331
</div>
<div className="absolute top-[436px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12332
</div>
<div className="absolute top-[366px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[42px]">
12333
</div>
<div className="absolute top-[296px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[42px]">
12334
</div>
<div className="absolute top-[576px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12330
</div>
<div className="absolute top-[646px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12329
</div>
<div className="absolute top-[716px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12329
</div>
<div className="absolute top-[786px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12328
</div>
<div className="absolute top-[856px] left-[524px] tracking-[0.2px] uppercase inline-block min-w-[40px]">
12327
</div>
<div className="absolute top-[926px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12326
</div>
<div className="absolute top-[996px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12325
</div>
<b className="absolute top-[233px] left-[531px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[25px]">
번호
</b>
<div className="absolute top-[1066px] left-[523px] tracking-[0.2px] uppercase inline-block min-w-[41px]">
12324
</div>
<b className="absolute top-[233px] left-[652px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[25px]">
상태
</b>
<b className="absolute top-[233px] left-[875px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[105px]">
고객명/ID(뒷자리)
</b>
<b className="absolute top-[233px] left-[1040px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[37px]">
호텔명
</b>
<b className="absolute top-[233px] left-[765px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[37px]">
접수일
</b>
<b className="absolute top-[233px] left-[1319px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[37px]">
숙박일
</b>
<b className="absolute top-[233px] left-[1540px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[53px]">
결제 금액
</b>
<div className="absolute top-[786px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[74px]">
조효진_1452
</div>
<div className="absolute top-[716px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[77px]">
이민선_0526
</div>
<div className="absolute top-[856px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[76px]">
이지영_4414
</div>
<div className="absolute top-[436px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[72px]">
김금희_1251
</div>
<div className="absolute top-[506px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[75px]">
김미소_5163
</div>
<div className="absolute top-[366px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[78px]">
박지원_9599
</div>
<div className="absolute top-[296px] left-[875px] tracking-[0.2px] leading-[18px] uppercase font-apple-sd-gothic-neo inline-block min-w-[59px]">
최설_1234
</div>
<div className="absolute top-[576px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[77px]">
박수한_7756
</div>
<div className="absolute top-[646px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[77px]">
나하나_2250
</div>
<div className="absolute top-[996px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[75px]">
장성규_8012
</div>
<div className="absolute top-[926px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[74px]">
양미란_1246
</div>
<div className="absolute top-[786px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[94px]">
킴튼 말라이 방콕
</div>
<div className="absolute top-[716px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[119px]">
플로리드 에투알 호텔
</div>
<div className="absolute top-[856px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[110px]">
풀먼 파리 투르 에펠
</div>
<div className="absolute top-[436px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[66px]">
안다즈 발리
</div>
<div className="absolute top-[506px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[94px]">
킴튼 말라이 방콕
</div>
<div className="absolute top-[1066px] left-[875px] tracking-[0.2px] uppercase inline-block min-w-[76px]">
최지연_9813
</div>
<div className="absolute top-[366px] left-[1040px] tracking-[0.2px] uppercase">
르 브리스톨 파리 언 외트커 컬렉션 호텔
</div>
<div className="absolute top-[296px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[66px]">
안다즈 발리
</div>
<div className="absolute top-[576px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[66px]">
츠바키 일본
</div>
<div className="absolute top-[646px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[90px]">
안다즈 싱가포르
</div>
<div className="absolute top-[996px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[66px]">
안다즈 발리
</div>
<div className="absolute top-[926px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[66px]">
츠바키 일본
</div>
<div className="absolute top-[1066px] left-[1040px] tracking-[0.2px] uppercase inline-block min-w-[94px]">
킴튼 말라이 방콕
</div>
<div className="absolute top-[296px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (3박)
</div>
<div className="absolute top-[366px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (1박)
</div>
<div className="absolute top-[436px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (2박)
</div>
<div className="absolute top-[506px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (1박)
</div>
<div className="absolute top-[576px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (1박)
</div>
<div className="absolute top-[576px] left-[1538px] tracking-[0.2px] uppercase text-right inline-block min-w-[54px]">
374,500
</div>
<div className="absolute top-[646px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (1박)
</div>
<div className="absolute top-[646px] left-[1537px] tracking-[0.2px] uppercase text-right inline-block min-w-[56px]">
489,000
</div>
<div className="absolute top-[716px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (1박)
</div>
<div className="absolute top-[716px] left-[1531px] tracking-[0.2px] uppercase text-right inline-block min-w-[61px]">
1,100,000
</div>
<div className="absolute top-[786px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (2박)
</div>
<div className="absolute top-[786px] left-[1537px] tracking-[0.2px] uppercase text-right inline-block min-w-[55px]">
920,000
</div>
<div className="absolute top-[856px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (4박)
</div>
<div className="absolute top-[856px] left-[1528px] tracking-[0.2px] uppercase text-right inline-block min-w-[64px]">
1,500,000
</div>
<div className="absolute top-[926px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (3박)
</div>
<div className="absolute top-[926px] left-[1537px] tracking-[0.2px] uppercase text-right inline-block min-w-[55px]">
365,000
</div>
<div className="absolute top-[996px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (3박)
</div>
<div className="absolute top-[996px] left-[1539px] tracking-[0.2px] uppercase text-right inline-block min-w-[53px]">
135,000
</div>
<div className="absolute top-[1066px] left-[1319px] tracking-[0.2px] uppercase">
22.07.11 - 22.07.14 (5박)
</div>
<div className="absolute top-[1066px] left-[1537px] tracking-[0.2px] uppercase text-right inline-block min-w-[55px]">
389,020
</div>
<div className="absolute top-[295px] left-[765px] tracking-[0.2px] leading-[22px] uppercase font-apple-sd-gothic-neo inline-block min-w-[49px]">
22.07.11
</div>
<div className="absolute top-[365px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[435px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[505px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[575px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[645px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[715px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[785px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[855px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[925px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[995px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<div className="absolute top-[1065px] left-[765px] tracking-[0.2px] leading-[22px] uppercase inline-block min-w-[50px]">
22.07.11
</div>
<b className="absolute top-[436px] left-[640px] tracking-[0.2px] uppercase inline-block min-w-[50px]">
예약문의
</b>
<b className="absolute top-[856px] left-[640px] tracking-[0.2px] uppercase inline-block text-lightblue min-w-[50px]">
결제완료
</b>
<b className="absolute top-[296px] left-[640px] tracking-[0.2px] uppercase inline-block min-w-[50px]">
예약문의
</b>
<b className="absolute top-[716px] left-[640px] tracking-[0.2px] uppercase inline-block min-w-[50px]">
견적발송
</b>
<b className="absolute top-[506px] left-[640px] tracking-[0.2px] uppercase inline-block text-warning min-w-[50px]">
견적불가
</b>
<b className="absolute top-[366px] left-[640px] tracking-[0.2px] uppercase inline-block min-w-[50px]">
예약문의
</b>
<b className="absolute top-[576px] left-[640px] tracking-[0.2px] uppercase inline-block text-green min-w-[50px]">
호텔회신
</b>
<b className="absolute top-[646px] left-[640px] tracking-[0.2px] uppercase inline-block text-green min-w-[50px]">
호텔회신
</b>
<b className="absolute top-[786px] left-[640px] tracking-[0.2px] uppercase inline-block min-w-[50px]">
견적발송
</b>
<b className="absolute top-[926px] left-[640px] tracking-[0.2px] uppercase inline-block text-lightblue min-w-[50px]">
결제완료
</b>
<b className="absolute top-[1066px] left-[640px] tracking-[0.2px] uppercase inline-block text-lightblue min-w-[50px]">
결제완료
</b>
<b className="absolute top-[996px] left-[640px] tracking-[0.2px] uppercase inline-block text-placeholder-txt min-w-[50px]">
결제취소
</b>
<img
className="absolute top-[270px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[900px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[760px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[830px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[480px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[550px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[410px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[340px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[620px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[1110px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[690px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[970px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<img
className="absolute top-[1040px] left-[503px] w-[1317px] h-px"
loading="lazy"
alt=""
src="/vector-1382.svg"
/>
<b className="absolute top-[233px] left-[1649px] tracking-[0.2px] uppercase inline-block text-additional-txt min-w-[25px]">
메모
</b>
<div className="absolute top-[295px] left-[1639px] rounded-xl bg-gold flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs">
<div className="h-5 w-[46px] relative rounded-xl bg-gold hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[435px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[365px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[505px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[575px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[645px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[715px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[785px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[855px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[925px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[995px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[1065px] left-[1639px] rounded-xl bg-placeholder-txt flex flex-row items-start justify-start pt-[3px] px-[7px] pb-[5px] text-center text-3xs text-white">
<div className="h-5 w-[46px] relative rounded-xl bg-placeholder-txt hidden" />
<b className="w-8 relative [text-decoration:line-through] uppercase inline-block min-w-[32px] z-[1]">
MEMO
</b>
</div>
<div className="absolute top-[168px] left-[600px] [text-decoration:underline] font-apple-sd-gothic-neo text-additional-txt inline-block min-w-[37px]">
초기화
</div>
<button className="cursor-pointer py-[7px] px-[15px] bg-[transparent] absolute top-[162px] left-[503px] rounded-11xl box-border w-[77px] overflow-hidden flex flex-row items-start justify-start whitespace-nowrap border-[1px] border-solid border-gainsboro-100 hover:bg-silver-300 hover:box-border hover:border-[1px] hover:border-solid hover:border-silver-100">
<b className="relative text-xs inline-block font-apple-sd-gothic-neo text-additional-txt text-left min-w-[45px]">
예약 상태
</b>
</button>
<img
className="absolute top-[289px] left-[1676px] w-3.5 h-3.5 z-[2]"
loading="lazy"
alt=""
src="/group-44433.svg"
/>
<button className="cursor-pointer py-[9px] px-[19px] bg-[transparent] absolute top-[53px] left-[1558px] rounded flex flex-row items-start justify-start whitespace-nowrap border-[1px] border-solid border-ovcolor hover:bg-orangered-300 hover:box-border hover:border-[1px] hover:border-solid hover:border-orangered-200">
<div className="h-10 w-[127px] relative rounded box-border hidden border-[1px] border-solid border-ovcolor" />
<b className="relative text-base tracking-[0.2px] leading-[22px] uppercase inline-block font-apple-sd-gothic-neo text-ovcolor text-left min-w-[89px] z-[1]">
예약문의 생성
</b>
</button>
<b className="absolute top-[62px] left-[1448px] [text-decoration:underline] tracking-[0.2px] leading-[22px] uppercase inline-block font-apple-sd-gothic-neo text-additional-txt min-w-[90px]">
취소환불 템플릿
</b>
</div>
);
};
export default Frame;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment