(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{1593:function(e,t,s){Promise.resolve().then(s.bind(s,1184))},1184:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return ee}});var a=s(7437),l=s(2265),i=s(3145),n=s(521);let r={initial:{y:"100%",opacity:0},animate:e=>({y:0,opacity:1,transition:{duration:.3,ease:[.2,0,.1,1],delay:e[0]}})},c=e=>{let t=[];return e.split("").forEach((s,l)=>t.push((0,a.jsx)(n.E.span,{variants:r,initial:"initial",whileInView:"animate",custom:[.02*l,(e.length-l)*.01],children:s},l))),t};var o=e=>{let{text:t,textStyles:s}=e;return(0,a.jsx)("div",{className:"".concat(s),children:c(t)})},x=()=>(0,a.jsx)("section",{className:"relative pt-12 pb-24",id:"about",children:(0,a.jsx)("div",{className:"container mx-aito h-full",children:(0,a.jsxs)("div",{className:"h-full flex items-center justify-center",children:[(0,a.jsx)("div",{className:"hidden xl:flex flex-1 pl-8",children:(0,a.jsxs)("div",{className:"relative w-full max-w-[380px]",children:[(0,a.jsx)("div",{className:"w-[160px] h-[160px] bg-accent absolute -left-5 -top-5 -z-10"}),(0,a.jsx)("div",{className:"rounded-tl-[8px] rounded-tr-[120px] w-full bg-[#e5f8f6] ming-h-[480px] flex items-end justify-center",children:(0,a.jsx)(i.default,{src:"/assets/about/junho.png",width:350,height:478,quality:100,priority:!0,alt:""})}),(0,a.jsxs)("div",{className:"absolute top-2/4 -right-[65px] flex items-center justify-center",children:[(0,a.jsx)(n.E.div,{animate:{rotate:[0,360]},transition:{duration:10,ease:"linear",repeat:1/0},children:(0,a.jsx)(i.default,{src:"/assets/about/shape-1.svg",width:160,height:160,alt:""})}),(0,a.jsxs)("div",{className:"absolute text-center text-white",children:[(0,a.jsx)("div",{className:"text-5xl font-bold leading-none",children:"1+"}),(0,a.jsxs)("div",{className:"leading-none text-center",children:["Years of ",(0,a.jsx)("br",{})," Experince"]})]})]})]})}),(0,a.jsxs)("div",{className:"text-center xl:text-left w-full xl:w-[50%] mx-auto xl:mx-0 flex flex-col gap-6",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)(o,{text:"My name is JunHo",textStyles:"h2 mb-2"}),(0,a.jsx)("p",{className:"text-lg",children:"사이버 보안 운영 및 위협 대응 전문가 "})]}),(0,a.jsx)("p",{className:"max-w-[680px] mx-auto xl:mx-0 mb-2",children:"저는 현재 보안 관제 업무를 수행 중입니다. 사이버 보안의 최전선에서 네트워크와 시스템의 안전을 유지하며, 잠재적인 위협을 식별하고 대응하는 역할을 수행합니다. 이 과정에서 기술적 분석, 위협 탐지, 그리고 신속한 의사결정이 요구되는 중요한 위치에서 활동하고 있습니다."}),(0,a.jsxs)("div",{className:"flex flex-col lg:flex-row gap-8 xl:gap-12 max-w-max mx-auto xl:mx-0 items-center",children:[(0,a.jsxs)("div",{className:"max-w-max",children:[(0,a.jsx)("div",{className:"uppercase font-bold text-primary",children:"Age"}),(0,a.jsx)("p",{children:"1998.09.21"})]}),(0,a.jsxs)("div",{className:"max-w-max",children:[(0,a.jsx)("div",{className:"uppercase font-bold text-primary",children:"Born in"}),(0,a.jsx)("p",{children:"Seoul, South Korea"})]}),(0,a.jsxs)("div",{className:"max-w-max",children:[(0,a.jsx)("div",{className:"uppercase font-bold text-primary",children:"Phone"}),(0,a.jsx)("p",{children:"+82 10-3176-2572"})]}),(0,a.jsxs)("div",{className:"max-w-max",children:[(0,a.jsx)("div",{className:"uppercase font-bold text-primary",children:"Email"}),(0,a.jsx)("p",{children:"wns921@naver.com"})]})]})]})]})})}),d=s(6417),m=s(2744),u=s(9089),p=s(3400);let h=[{icon:d.THh,title:"위협 탐지 및 분석",description:"네트워크와 시스템에서 발생하는 이상 징후를 탐지하고, 이를 분석하여 잠재적 위협을 파악."},{icon:m.AXp,title:"보안 사고 대응",description:"침해 사고 발생 시 신속한 대응과 해결책 제공. 사고 원인 분석 및 재발 방지를 위한 체계적인 대응 체계 구축."},{icon:p.eLn,title:"보안 솔루션 운영 및 관리",description:"SIEM 등 보안 솔루션을 활용해 데이터를 분석하고 경고를 처리."},{icon:u.Cq,title:"협업과 커뮤니케이션",description:"다른 IT 부서 및 외부 전문가와 협력하여 통합적 보안 전략 실행."}];var f=()=>(0,a.jsx)("section",{className:"relative z-50 -mt-[5.9rem]",children:(0,a.jsx)("div",{className:"container mx-auto",children:(0,a.jsx)("ul",{className:"relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-[20px] place-items-center lg:place-items-stretch",children:h.map((e,t)=>{let s=e.icon;return(0,a.jsxs)("li",{className:"bg-white shadow-custom p-6 max-w-[350px] md:max-w-none rounded-lg",children:["function"==typeof s?(0,a.jsx)(s,{size:48,className:"mb-4 text-primary"}):(0,a.jsx)(i.default,{src:s,width:48,height:48,alt:"",className:"mb-4"}),(0,a.jsx)("h3",{className:"text-[20px] text-primary font-semibold mb-3",children:e.title}),(0,a.jsx)("p",{className:"text-[15px]",children:e.description})]},t)})})})}),j=e=>{let{type:t,logoUrl:s,position:l,duration:n,description:r,company:c,institution:o,qualification:x,name:d,icon:m}=e;return(0,a.jsx)("div",{className:"w-full h-[300px] overflow-hidden flex items-center sticky top-12",children:(0,a.jsx)("div",{className:"w-full h-[270px] border border-accent/80 bg-[#f4ffff] rounded-[8px]",children:(0,a.jsxs)("div",{className:"flex flex-col h-full",children:[(0,a.jsxs)("div",{className:"h-[80px] xl:h-[68px] bg-white flex flex-col xl:flex-row justify-center xl:justify-between items-center px-6 md:px-[84px] rounded-tl-[8px] rounded-tr-[8px]",children:[(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(i.default,{src:"/assets/journey/shape.svg",width:16,height:16,alt:""}),(0,a.jsx)("h3",{className:"text-lg font-semibold text-primary",children:"experience"===t?l:"education"===t?x:n})]}),(0,a.jsx)("p",{className:"text-base",children:"experience"!==t&&"education"!==t?null:n})]}),(0,a.jsx)("div",{className:"flex-1 flex items-center justify-center xl:justify-start md:py-8 md:px-16",children:(0,a.jsxs)("div",{className:"flex flex-col xl:flex-row items-center xl:items-start gap-4 text-center xl:text-left xl:gap-10 px-4 xl:px-0",children:["skill"===t?(0,a.jsx)("div",{className:"w-max xl:w-[300px] h-full relative flex items-center justify-center",children:(0,a.jsx)("div",{className:"text-5xl text-primary/90",children:m})}):(0,a.jsx)("div",{className:"relative w-[300px] h-[38px] xl:h-[44px]",children:(0,a.jsx)(i.default,{src:s,fill:!0,alt:"",className:"object-contain"})}),(0,a.jsxs)("div",{className:"xl:border-l xl:border-secondary/10 xl:pl-12 w-full",children:[(0,a.jsx)("h3",{className:"hidden xl:flex h3 mb-2 xl:mb-4",children:"experience"===t?c:"education"===t?o:"skill"===t?d:null}),(0,a.jsx)("p",{className:"text-base max-w-[660px]",children:r})]})]})})]})})})},y=s(502),v=s(1994),g=s(3335);function b(){for(var e=arguments.length,t=Array(e),s=0;s<e;s++)t[s]=arguments[s];return(0,g.m6)((0,v.W)(t))}let N=y.fC,w=l.forwardRef((e,t)=>{let{className:s,...l}=e;return(0,a.jsx)(y.aV,{ref:t,className:b("border border-transparent md:border-accent/40 p-1 rounded-full",s),...l})});w.displayName=y.aV.displayName;let S=l.forwardRef((e,t)=>{let{className:s,...l}=e;return(0,a.jsx)(y.xz,{ref:t,className:b("inline-flex items-center justify-center whitespace-nowrap h-[40px] rounded-full px-4 text-sm font-medium transition-all outline-none data-[state=active]:bg-accent data-[state=active]:text-white",s),...l})});S.displayName=y.xz.displayName;let k=l.forwardRef((e,t)=>{let{className:s,...l}=e;return(0,a.jsx)(y.VY,{ref:t,className:b("mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",s),...l})});k.displayName=y.VY.displayName;var C=s(8614);let E=[{type:"experience",company:"SK쉴더스",logoUrl:"/assets/journey/experience/logo-1.svg",position:"정보보안관제",duration:"Sep 2023 - Present",description:"2023년 9월 입사 후 보안관제 직무를 수행하며 금융권 프로젝트에 파견되어 근무 중입니다. 주요 업무로는 정보 보안 이벤트 모니터링 및 분석, 보안 사고 대응, 그리고 금융권 네트워크 및 시스템의 보안 정책 준수를 지원하고 있습니다."},{type:"education",institution:"네트워크관리사 2급",logoUrl:"/assets/journey/education/certification.svg",qualification:"한국정보통신자격협회",duration:"Nov 2021",description:"네트워크 구성 및 관리에 필요한 기본 기술과 지식을 검증하는 자격증으로, 네트워크 유지보수와 트러블슈팅 역량을 갖췄음을 증명합니다."},{type:"education",institution:"정보처리기사",logoUrl:"/assets/journey/education/certification.svg",qualification:"과학기술정보통신부",duration:"Jun 2023",description:"소프트웨어 설계, 구현, 유지보수 등 IT 전반의 지식을 기반으로 시스템 개발 및 관리 능력을 입증하는 국가기술자격증입니다."},{type:"education",institution:"AWS Certified Solutions Architect – Associate (SAA-C03)",logoUrl:"/assets/journey/education/certification.svg",qualification:"aws certified",duration:"Jul 2023 - Jul 2026 ",description:"AWS 클라우드 아키텍처 설계 및 구현 능력을 검증하는 자격증으로, 효율적이고 안전한 클라우드 솔루션 설계 역량을 보유하고 있음을 증명합니다."},{type:"education",institution:"CISA (Certified Information Systems Auditor)",logoUrl:"/assets/journey/education/certification.svg",qualification:"ISACA (Information Systems Audit and Control Association)",duration:"Nov 2024",description:"IT 감사, 정보보안 및 통제, 시스템 거버넌스 분야에서의 전문성을 검증하는 국제적으로 공인된 자격증입니다."},{type:"skill",name:"HTML",icon:(0,a.jsx)(u.gtO,{}),duration:"Learned in 2024",description:"Crafted structured web content using HTML effectively for modern websites, ensuring semanting marckup and accessibility."},{type:"skill",name:"CSS",icon:(0,a.jsx)(u.r8,{}),duration:"Learned in 2024",description:"Styled responsive web pages using CSS, ensuring an appealing user experience with modern design principles and layouts."},{type:"skill",name:"Javascript",icon:(0,a.jsx)(u.zPb,{}),duration:"Learned in 2024",description:"Implemented Javascript for interactivity, enhancing user engagement on websites through dynamic content and features."},{type:"skill",name:"React.js",icon:(0,a.jsx)(u.huN,{}),duration:"Learned in 2024",description:"컴포넌트 기반의 프론트엔드 라이브러리로, 유지보수성과 확장성을 고려한 효율적인 UI 개발 경험을 보유하고 있습니다."},{type:"skill",name:"Splunk",icon:(0,a.jsx)(u.k7O,{}),duration:"Learned in 2023",description:"데이터 분석 및 모니터링 도구로, 로그 및 트래픽 데이터를 실시간으로 시각화하고 분석하여 인사이트를 도출하는 데 능숙합니다."},{type:"skill",name:"HTML",icon:(0,a.jsx)(u.Tyb,{}),duration:"Learned in 2018",description:"Designed user interfaces in Figma, facilitating collaboration and rapid prototyping to meet user needs and project goals."}];var I=()=>(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(N,{defaultValue:"experience",className:"w-full flex flex-col items-center",children:[(0,a.jsxs)(w,{className:"max-w-max mb-[30px]",children:[(0,a.jsx)(S,{value:"experience",children:"Experience"}),(0,a.jsx)(S,{value:"education",children:"Education"}),(0,a.jsx)(S,{value:"skills",children:"My Skills"})]}),(0,a.jsx)(k,{value:"experience",className:"w-full",children:(0,a.jsx)(C.M,{children:(0,a.jsx)(n.E.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.3},children:E.filter(e=>"experience"===e.type).map((e,t)=>(0,a.jsx)(j,{...e},t))})})}),(0,a.jsx)(k,{value:"education",className:"w-full",children:(0,a.jsx)(C.M,{children:(0,a.jsx)(n.E.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.3},children:E.filter(e=>"education"===e.type).map((e,t)=>(0,a.jsx)(j,{...e},t))})})}),(0,a.jsx)(k,{value:"skills",className:"w-full",children:(0,a.jsx)(C.M,{children:(0,a.jsx)(n.E.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.3},children:E.filter(e=>"skill"===e.type).map((e,t)=>(0,a.jsx)(j,{...e},t))})})})]})}),L=()=>(0,a.jsx)("section",{id:"journey",children:(0,a.jsxs)("div",{className:"container mx-auto",children:[(0,a.jsx)(o,{text:"My Proffesional Journey",textStyles:"h2 mb-[30px] text-center"}),(0,a.jsx)(I,{})]})}),T=s(5411),M=s(4189),A=e=>{let{content:t,direction:s,duration:l}=e;return(0,a.jsx)(n.E.div,{variants:{animate:{rotate:"right"===s?360:"left"===s?-360:0,transition:{duration:l,ease:"linear",repeat:1/0}}},animate:"animate",children:t})},O=s(7648),D=e=>{let{light:t=!1}=e;return(0,a.jsx)(O.default,{href:"/",className:"font-primary text-2xl tracking-[4px]",children:(0,a.jsx)("span",{className:t?"text-white":"text-primary",children:" Junho Bae "})})};let q=[{name:"home"},{name:"about"},{name:"journey"},{name:"contact"}];var z=e=>{let{containerStyles:t,listStyles:s,linkStyles:l,spy:i}=e;return(0,a.jsx)("nav",{className:"".concat(t),children:(0,a.jsx)("ul",{className:"".concat(s),children:q.map((e,t)=>(0,a.jsx)("li",{children:(0,a.jsx)(M.rU,{to:e.name,spy:i,smooth:!0,className:"".concat(l),offset:-50,duration:500,children:e.name})},t))})})},_=s(2909);let F=[{icon:(0,a.jsx)(_.vgs,{}),path:"https://bavid98.tistory.com/",active:!0},{icon:(0,a.jsx)(u.hJX,{}),path:"https://github.com/bjh2575",active:!0},{icon:(0,a.jsx)(u.ltd,{}),path:"https://kr.linkedin.com/",active:!1}];var J=e=>{let{containerStyles:t,iconStyles:s}=e;return(0,a.jsx)("div",{className:t,children:F.map((e,t)=>e.active?(0,a.jsx)(O.default,{href:e.path,className:s,target:"_blank",rel:"noopener noreferrer",children:(0,a.jsx)("span",{children:e.icon})},t):null)})},P=()=>(0,a.jsx)("header",{className:"w-full absolute py-8 xl:py-[48px] z-30",children:(0,a.jsx)("div",{className:"container mx-auto",children:(0,a.jsxs)("div",{className:"flex flex-col lg:flex-row items-center gap-4 lg:justify-between",children:[(0,a.jsx)(D,{}),(0,a.jsxs)("div",{className:"flex items-center gap-12",children:[(0,a.jsx)(z,{containerStyles:"hidden xl:flex",listStyles:"flex gap-6",linkStyles:"text-primary font-primary text-lg tracking[1.4px] transition-all duration-300 cursor-pointer"}),(0,a.jsx)(J,{containerStyles:"flex items-center gap-2",iconStyles:"text-base w-[32px] h-[32px] bg-primary text-white flex items-center justify-center rounded-full"})]})]})})}),U=s(498),V=e=>{let{endCountNum:t,endCountText:s,text:l}=e;return(0,a.jsx)("div",{children:(0,a.jsxs)("div",{className:"flex xl:flex-1 flex-col items-center text-center",children:[(0,a.jsxs)("div",{className:"font-primary text-primary text-4xl xl:text-5xl leading-none mb-2",children:[(0,a.jsx)(U.ZP,{end:t,delay:1,duration:4}),(0,a.jsx)("span",{children:s})]}),(0,a.jsx)("p",{className:"text-sm text-secondary font-medium",children:l})]})})};let R=[{endCountNum:2,endCountText:"+",text:"경력"},{endCountNum:3,endCountText:"+",text:"프로젝트"},{endCountNum:100,endCountText:"%",text:"보안 이벤트 처리율"}];var H=()=>(0,a.jsx)("section",{className:"flex justify-center xl:justify-normal mx-auto xl:mx-0 xl:w-[380px] gap-8 xl:gap-6",children:R.map((e,t)=>(0,a.jsx)(V,{endCountNum:e.endCountNum,endCountText:e.endCountText,text:e.text},t))}),W=()=>(0,a.jsxs)("section",{className:"h-[800px] relative bg-accent/10 xl:bg-white",id:"home",children:[(0,a.jsx)(P,{}),(0,a.jsxs)("div",{className:"container mx-auto h-full",children:[(0,a.jsxs)("div",{className:"relative z-20 h-full w-full xl:max-w-[768px] flex flex-col items-center xl:items-start justify-center text-center xl:text-left pt-10",children:[(0,a.jsxs)("h1",{className:"h1 mb-2 max-w-[320px] xl:max-w-none flex flex-col",children:[(0,a.jsx)("span",{className:"text-accent text-[35px] xl:text-[70px]",children:"Security Engineer"}),(0,a.jsx)("div",{className:"h-[45px] xl:h-[90px] flex items-center",children:(0,a.jsx)(T.e,{sequence:["Development",2e3,"Security",2e3,"Operations",2e3],speed:50,repeat:1/0,wrapper:"span",cursor:!1,className:"ml-0 xl:ml-0 text-[35px] xl:text-[70px]"})})]}),(0,a.jsx)("p",{className:"lead max-w-[476px] mb-7",children:"보안관제, 클라우드, DEVOPS 전문가로서 안정적이고 효율적인 IT 인프라를 구축합니다."}),(0,a.jsx)(M.rU,{to:"contact",smooth:!0,children:(0,a.jsx)("button",{className:"btn btn-accent mb-8",children:"Contact me"})}),(0,a.jsx)(H,{})]}),(0,a.jsxs)("div",{className:"hidden xl:flex w-[55vw] h-[800px] absolute top-0 right-0 bg-accent",children:[(0,a.jsx)("div",{className:"absolute w-[558px] h-[642px] bottom-0 z-40 left-[6.5vw]",children:(0,a.jsx)(i.default,{src:"/assets/hero/junho.png",fill:!0,quality:"100",priority:!0,className:"object-contain",alt:""})}),(0,a.jsx)("div",{className:"hidden xl:flex absolute top-48 left-[4vw]","data-scroll":!0,"data-scroll-speed":"0.05",children:(0,a.jsx)(i.default,{src:"/assets/hero/arrow.svg",width:160,height:160,alt:""})}),(0,a.jsx)("div",{className:"absolute top-[600px] left-[3vw]","data-scroll":!0,"data-scroll-speed":"0.2",children:(0,a.jsx)(A,{content:(0,a.jsx)(i.default,{src:"assets/hero/shape-1.svg",width:38,height:38,alt:""}),direction:"left",duration:6})}),(0,a.jsx)("div",{className:"absolute top-[240px] xl:left-[30vw]","data-scroll":!0,"data-scroll-speed":"0.1",children:(0,a.jsx)(A,{content:(0,a.jsx)(i.default,{src:"assets/hero/shape-2.svg",width:34,height:34,alt:""}),direction:"right",duration:5})}),(0,a.jsx)("div",{className:"absolute top-[480px] xl:left-[40vw]","data-scroll":!0,"data-scroll-speed":"0.2",children:(0,a.jsx)(A,{content:(0,a.jsx)(i.default,{src:"assets/hero/shape-2.svg",width:36,height:36,alt:""}),direction:"left",duration:7})})]})]})]}),K=s(392),Y=()=>{let[e,t]=(0,K.cI)("mgvejynb"),[s,n]=(0,l.useState)({firstname:"",lastname:"",email:"",phone:"",message:""}),[r,c]=(0,l.useState)(!1),x=e=>{let{name:t,value:a}=e.target;n({...s,[t]:a})};return(0,l.useEffect)(()=>{e.succeeded&&(c(!0),n({firstname:"",lastname:"",email:"",phone:"",message:""}),setTimeout(()=>{c(!1)},3e3))}),(0,a.jsx)("section",{className:"pt-8 xl:pt-12 pb-32",id:"contact",children:(0,a.jsx)("div",{className:"container mx-auto",children:(0,a.jsxs)("div",{className:"flex flex-col items-center xl:flex-row gap-16",children:[(0,a.jsxs)("div",{className:"flex-1 mx-auto xl:mx-0 flex flex-col",children:[(0,a.jsx)(o,{text:"Let's Work Together",textStyles:"h2 mb-12 text-center xl:text-left"}),(0,a.jsxs)("form",{onSubmit:e=>{e.preventDefault(),t(s)},className:"flex flex-col gap-6 w-full max-w-[480px]",children:[(0,a.jsxs)("div",{className:"flex gap-8",children:[(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsxs)("label",{htmlFor:"firstname",className:"block mb-2 text-sm font-medium text-primary",children:["First Name (이름) ",(0,a.jsx)("span",{className:"text-accent",children:"*"})]}),(0,a.jsx)("input",{onChange:x,type:"text",id:"firstname",name:"firstname",value:s.firstname,className:"input",placeholder:"First Name (이름)",required:!0})]}),(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsxs)("label",{htmlFor:"lastname",className:"block mb-2 text-sm font-medium text-primary",children:["Last Name (성) ",(0,a.jsx)("span",{className:"text-accent",children:"*"})]}),(0,a.jsx)("input",{onChange:x,type:"text",id:"lastname",name:"lastname",value:s.lastname,className:"input",placeholder:"Last Name (성)",required:!0})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("label",{htmlFor:"email",className:"block mb-2 text-sm font-medium text-primary",children:["Email ",(0,a.jsx)("span",{className:"text-accent",children:"*"})]}),(0,a.jsx)("input",{onChange:x,type:"text",id:"email",name:"email",value:s.email,className:"input",placeholder:"youremail@email.com",required:!0}),(0,a.jsx)(K.p8,{prefix:"Email",field:"email",errors:e.errors})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("label",{htmlFor:"phone",className:"block mb-2 text-sm font-medium text-primary",children:["Phone number ",(0,a.jsx)("span",{className:"text-accent",children:"*"})]}),(0,a.jsx)("input",{onChange:x,type:"text",id:"phone",name:"phone",value:s.phone,className:"input",placeholder:"ex) +82 10 000-0000"})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("label",{htmlFor:"message",className:"block mb-2 text-sm font-medium text-primary",children:["Message ",(0,a.jsx)("span",{className:"text-accent",children:"*"})]}),(0,a.jsx)("textarea",{onChange:x,id:"message",name:"message",value:s.message,className:"textarea",placeholder:"Leave ma a message...",rows:"5",required:!0}),(0,a.jsx)(K.p8,{prefix:"Message",field:"message",errors:e.errors})]}),(0,a.jsx)("button",{type:"submit",disabled:e.submitting,className:"btn btn-accent flex items-center justify-center gap-2",children:e.submitting?(0,a.jsx)("span",{children:"Sending..."}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(u.FJM,{className:"absolute text-whtie text-lg transition-opacity duration-500 ease-in-out ".concat(r?"opacity-100":"opacity-0")}),(0,a.jsx)("span",{className:"transition-opacity duration-500 ease-in-out ".concat(r?"opacity-0":"opacity-1000"),children:"Send massage"})]})})]})]}),(0,a.jsx)("div",{className:"hideen xl:flex relative w-[577px] h-[664px] rounded-lg overflow-hidden",children:(0,a.jsx)(i.default,{src:"/assets/contact/img.png",className:"object-cover",fill:!0,quality:100,alt:""})})]})})})},B=s(6186),X=s(722),Z=s(7996),G=()=>{let[e,t]=(0,l.useState)(!1),[s,i]=(0,l.useState)(!1),[r,c]=(0,l.useState)(!1),o=(0,X.ac)({query:"(max-width: 640px)"});return((0,l.useEffect)(()=>{c(!0)},[]),(0,l.useEffect)(()=>{if(r){let e=()=>{t(window.scrollY>150)};if(!o)return window.addEventListener("scroll",e),()=>window.removeEventListener("scroll",e);t(!0)}},[o,r]),r)?(0,a.jsxs)("div",{className:"fixed w-full h-[400px] z-[9999] flex justify-center pointer-events-none bg-transparent",children:[(0,a.jsx)(C.M,{children:s&&e&&(0,a.jsx)(n.E.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:20},exit:{opacity:0,y:20},transition:{duration:.2},className:"relative w-full max-w-md md:max-w-none h-[400px] bottom-[28rem] xl:bottom-[26rem] px-4 pointer-events-auto",children:(0,a.jsxs)("div",{className:"bg-white w-full h-full shadow-custom max-w-[1170px] mx-auto py-12 xl:py-12 px-12 xl:px-32 flex items-center gap-12 rounded-lg",children:[(0,a.jsx)(z,{containerStyles:"md:border-r border-secondary/20 md:pr-12 w-full md:w-auto text-center md:text-left",listStyles:"flex flex-col justify-center gap-4",linkStyles:"font-primary text-4xl text-primary cursor-pointer",spy:!0}),(0,a.jsx)("div",{className:"hidden md:flex mx-auto",children:(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"flex gap-12 mb-12",children:[(0,a.jsxs)("div",{className:"flex flex-col",children:[(0,a.jsx)("div",{className:"text-[28px] text-accent mb-2",children:(0,a.jsx)(Z.i63,{})}),(0,a.jsx)("p",{className:"font-semibold text-primary text-lg",children:"Location"}),(0,a.jsx)("p",{children:"Seoul, South Korea"})]}),(0,a.jsxs)("div",{className:"flex flex-col",children:[(0,a.jsx)("div",{className:"text-[28px] text-accent mb-2",children:(0,a.jsx)(Z.CoD,{})}),(0,a.jsx)("p",{className:"font-semibold text-primary text-lg",children:"Phone"}),(0,a.jsx)("p",{children:"+82 10 3176 2572"})]}),(0,a.jsxs)("div",{className:"flex flex-col",children:[(0,a.jsx)("div",{className:"text-[28px] text-accent mb-2",children:(0,a.jsx)(Z.Imn,{})}),(0,a.jsx)("p",{className:"font-semibold text-primary text-lg",children:"Email"}),(0,a.jsx)("p",{children:"wns921@naver.com"})]})]}),(0,a.jsx)(J,{containerStyles:"flex gap-2",iconStyles:"text-[20px] w-[32px] h-[32px] text-primary flex items-center justify-center rounded-full"})]})})]})})}),o?(0,a.jsx)("div",{className:"fixed z-[9999] bottom-16",children:(0,a.jsx)("button",{onClick:()=>i(!s),className:"bg-accent shadow-custom w-[54px] h-[54px] rounded-lg cursor-pointer flex items-center justify-center select-none pointer-events-auto",children:(0,a.jsx)(B.owA,{className:"text-4xl text-white"})})}):(0,a.jsx)(C.M,{children:e&&(0,a.jsx)(n.E.div,{initial:{y:100,opacity:0},animate:{y:0,opacity:1},exit:{y:100,opacity:0},transition:{type:"spring",stiffness:400,damping:40},className:"fixed z-[9999] bottom-16 pointer-events-auto",children:(0,a.jsx)("button",{onClick:()=>i(!s),className:"bg-accent shadow-custom w-[54px] h-[54px] rounded-lg cursor-pointer flex items-center justify-center select-none",children:(0,a.jsx)(B.owA,{className:"text-4xl text-white"})})})})]}):null},Q=()=>(0,a.jsx)("footer",{className:"py-12 bg-primary",children:(0,a.jsx)("div",{className:"container mx-auto",children:(0,a.jsxs)("div",{className:"flex flex-col xl:flex-row items-center justify-between",children:[(0,a.jsx)(D,{light:!0}),(0,a.jsx)("div",{className:"text-white/70 font-light",children:"Copyright \xa9 2024. All right reserved."})]})})}),$=()=>{let[e,t]=(0,l.useState)({isOpen:!1,errorMessage:"",isLoading:!1,isInputDisabled:!1}),[s,i]=(0,l.useState)([{id:1,text:"궁금한 점을 물어보세요",sender:"bot"}]),[n,r]=(0,l.useState)(""),c=(0,l.useRef)(null),o=(0,l.useRef)(null),x=(0,l.useRef)(null),d=(0,l.useCallback)(e=>{t(t=>({...t,...e}))},[]),m=(0,l.useCallback)(()=>{d({isOpen:!0}),document.body.style.overflow="hidden"},[d]),u=(0,l.useCallback)(()=>{d({isOpen:!1}),document.body.style.overflow=""},[d]),p=(0,l.useCallback)(e=>{d({errorMessage:e}),setTimeout(()=>{d({errorMessage:""})},800)},[d]),h=(0,l.useCallback)(async e=>{try{let t=JSON.parse(localStorage.getItem("chat_history"))||[],s=localStorage.getItem("thread_id"),a=t.find(t=>t.user===e);if(a)return console.log("캐시에서 응답 가져오기:",a.bot),a.bot;let l=await fetch("".concat("http://localhost:5000","/AIChat"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:e,thread_id:s||null})});if(!l.ok)throw Error("HTTP error! status: ".concat(l.status));let i=await l.json();console.log("서버 응답:",i),i.thread_id&&localStorage.setItem("thread_id",i.thread_id);let n=i.response,r=[...t,{user:e,bot:n}];return localStorage.setItem("chat_history",JSON.stringify(r)),n}catch(e){return console.error("API 호출 오류:",e),"봇과의 통신 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요."}},[]),f=(0,l.useCallback)(async()=>{let e=n.trim();if(!e){p("※ 공백은 입력할 수 없습니다.");return}let t={id:Date.now(),text:e,sender:"user"};i(e=>[...e,t]),r(""),d({isInputDisabled:!0,isLoading:!0});try{let t=await h(e),s={id:Date.now()+1,text:t,sender:"bot"};i(e=>[...e,s])}catch(e){console.error("메시지 전송 오류:",e),p("메시지 전송 중 오류가 발생했습니다.")}finally{d({isInputDisabled:!1,isLoading:!1})}},[n,h,d,p]),j=(0,l.useCallback)(t=>{"Enter"!==t.key||e.isInputDisabled||f()},[f,e.isInputDisabled]),y=(0,l.useCallback)(e=>{o.current&&!o.current.contains(e.target)&&u()},[u]);(0,l.useEffect)(()=>{x.current&&x.current.scrollIntoView({behavior:"smooth"})},[s]),(0,l.useEffect)(()=>{let t=t=>{e.isOpen&&t.preventDefault()};return e.isOpen?(document.addEventListener("wheel",t,{passive:!1}),document.addEventListener("mousedown",y)):(document.removeEventListener("wheel",t),document.removeEventListener("mousedown",y)),()=>{document.removeEventListener("wheel",t),document.removeEventListener("mousedown",y)}},[e.isOpen,y]),(0,l.useEffect)(()=>{e.isOpen&&c.current&&c.current.focus()},[e.isOpen]);let v=(0,l.useMemo)(()=>s.map(e=>(0,a.jsx)("div",{className:"".concat("bot"===e.sender?"text-left":"text-right"),children:(0,a.jsx)("span",{className:"inline-block px-4 py-2 rounded-lg ".concat("bot"===e.sender?"bg-gray-200 text-gray-800":"bg-blue-500 text-white"),children:(0,a.jsx)("pre",{style:{fontFamily:"var(--font-inter)"},children:e.text})})},e.id)),[s]);return(0,a.jsxs)("div",{children:[(0,a.jsx)("button",{className:"fixed right-4 bottom-4 bg-blue-500 text-white font-semibold px-6 py-3 rounded-full shadow-lg hover:bg-blue-600 z-[9999] transition-colors duration-200",onClick:m,children:"Open Chat"}),e.isOpen&&(0,a.jsx)("div",{className:"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10000]",onWheel:e=>e.stopPropagation(),children:(0,a.jsxs)("div",{ref:o,className:"bg-white rounded-lg shadow-lg w-[800px] h-[700px] flex flex-col max-h-[90vh] overflow-hidden",children:[(0,a.jsxs)("div",{className:"flex justify-between items-center border-b p-4",children:[(0,a.jsx)("h3",{className:"text-xl font-semibold",children:"Chat Window"}),(0,a.jsx)("button",{className:"text-gray-500 hover:text-gray-800 transition-colors duration-200",onClick:u,children:"✖"})]}),(0,a.jsxs)("div",{className:"flex-1 overflow-y-auto p-4 space-y-4",children:[v,(0,a.jsx)("div",{ref:x})]}),(0,a.jsxs)("div",{className:"p-4 border-t flex items-center space-x-2",children:[(0,a.jsx)("div",{className:"flex-1 border rounded-lg px-3 py-2 flex items-center",children:e.isLoading?(0,a.jsx)("div",{className:"loader border-t-4 border-blue-500 rounded-full w-5 h-5 animate-spin mx-auto"}):(0,a.jsx)("input",{type:"text",className:"w-full outline-none",placeholder:"Type a message...",value:n,onChange:e=>r(e.target.value),onKeyDown:j,ref:c,disabled:e.isInputDisabled})}),(0,a.jsx)("button",{className:"bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed",onClick:f,disabled:e.isInputDisabled,children:"Send"})]}),e.errorMessage&&(0,a.jsx)("div",{className:"text-red-500 mt-2 font-semibold pl-4 pb-4",children:e.errorMessage})]})})]})},ee=()=>((0,l.useEffect)(()=>{(async()=>{new(await s.e(200).then(s.bind(s,7200))).default})()},[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(W,{}),(0,a.jsx)(G,{}),(0,a.jsx)(f,{}),(0,a.jsx)(x,{}),(0,a.jsx)(L,{}),(0,a.jsx)(Y,{}),(0,a.jsx)(Q,{}),(0,a.jsx)($,{})]}))}},function(e){e.O(0,[957,665,51,956,699,694,259,140,971,117,744],function(){return e(e.s=1593)}),_N_E=e.O()}]);