EP8. NextJS 메인페이지 구현 with Copilot

단축 URL 서비스를 만들거야. redirectURL을 입력받을 수 있는 TextField와 서버로 요청을 보낼 수 있는 버튼이 있는 메인페이지를 만들어줘. 단축URL을 만드는 API 정보 URL: https://zksnirpbgoppgoprlfdw.supabase.co/functions/v1/api/shortPath/v1/shortPath body는 { "redirectURL" : "URL" } Response는 { "shortPath": "rH8unM" } 이렇게 생겼어.

"use client"; import { useState } from "react"; import Image from "next/image"; export default function Home() { const [redirectURL, setRedirectURL] = useState(""); const [shortenedURL, setShortenedURL] = useState(""); const handleSubmit = async () => { if (!redirectURL) { alert("URL을 입력해주세요."); return; } try { const response = await fetch( "https://zksnirpbgoppgoprlfdw.supabase.co/functions/v1/api/shortPath/v1/shortPath", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ redirectURL }), } ); if (!response.ok) { throw new Error("URL 단축에 실패했습니다."); } const data = await response.json(); setShortenedURL(`${window.location.origin}/${data.shortPath}`); } catch (error) { console.error(error); alert("오류가 발생했습니다. 다시 시도해주세요."); } }; return ( <div className="flex flex-col items-center justify-center min-h-screen p-8"> <h1 className="text-2xl font-bold mb-4">단축 URL 생성기</h1> <input type="text" placeholder="단축할 URL을 입력하세요" value={redirectURL} onChange={(e) => setRedirectURL(e.target.value)} className="border border-gray-300 rounded px-4 py-2 w-full max-w-md mb-4" /> <button onClick={handleSubmit} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" > 단축 URL 생성 </button> {shortenedURL && ( <div className="mt-4"> <p>단축된 URL:</p> <a href={shortenedURL} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline" > {shortenedURL} </a> </div> )} </div> ); }