{
 
// 포트폴리오 최상단의 제목으로 사용됩니다. 
  "resumeTitle": {
    "title": "Hong Gil Dong"
  },
 
 
// 자신의 인적사항에 대해 작성하는 곳입니다.
  "information": {
  
    // 이름을 적어주세요
    "name": "홍길동", 
    
    // 각종 링크를 걸어줄 수 있습니다. id 순서대로 나열됩니다.
    // 가장 대중적인 것 같은 3가지를 미리 작성해뒀어요. 더 추가하거나, 제거해도 됩니다.
    // 단, 이메일은 isEmail을 true로 작성해주세요.
    "contact": [ 
      { "id": 0, "name": "Email", "href": "honggildong@gmail.com", "isEmail": true }, // href에 이메일을 적어주세요.
      { "id": 1, "name": "Github", "href": "https://github.com/honggildong" }, // href에 깃허브 주소를 적어주세요.
      { "id": 2, "name": "Blog", "href": "https://velog.io/@honggildong" } // href에 블로그 주소를 적어주세요.
    ]
  },
 
// 직장 경력에 대해 작성하는 곳입니다.
// 각 직장별 데이터를 배열로 작성해주시면 되는데, 포트폴리오에서 배열 역순으로 배치됩니다.
// 따라서 오래된(예전) 경력을 앞에, 최근 경력을 뒤에 작성해주세요.
  "workExperience": [
    {
      "id": 0,
      "name": "커피프린스 1호점", // 직장명을 적어주세요.
      "position": "Front-end Engineer", // 담당 직무를 적어주세요.
      "period": ["2019. 01", "2019. 09"] // 언제부터 언제까지 일하셨는지 적어주세요.
    },
    {
      "id": 1,
      "name": "커피프린스 2호점",
      "position": "바리스타",
      "period": ["2022. 01", "now"] // 현재 재직중이라면, now나 working 등을 적어주세요.
    }
  ],
 
 
// 프로젝트 경험에 대해 작성하는 곳입니다.
// 직장 데이터와 마찬가지로, 배열 역순으로 배치됩니다.
// 오래된(옛날) 프로젝트를 앞에, 최근 프로젝트를 뒤에 작성해주세요.
// isTeam의 값에 따라서 팀 프로젝트와 개인 프로젝트 각각 나뉘어 보여집니다.
  "project": [
    {
      "id": 0,
      "name": "첫번째 팀 프로젝트", // 프로젝트명을 적어주세요.
      "description": "프로젝트에 대한 간단한 설명을 적을 수 있습니다. 어떤 프로젝트인지 주제나 강조하고 싶은 부분을 적어보세요.",
      "webUrl": "https://github.com/sjoleee/", // 릴리즈된 페이지나 앱스토어 등 원하는 웹페이지 링크가 생성됩니다. 없으면 제거!
      "repoUrl": "https://github.com/sjoleee/", // 깃허브 레포지토리 링크가 생성됩니다. 없으면 제거!
      "isTeam": true, // 팀 프로젝트와 개인 프로젝트를 구분합니다. 팀 프로젝트라면 true로 적어주세요.
      "period": ["2022. 07", "2022. 09"], // 프로젝트 기간을 적어주세요.
      "stack": ["사용한 기술을 적어주세요", "React.js", "JavaScript", "styled-components", "Recoil"] // 사용한 기술을 적어주세요.
    },
    {
      "id": 1,
      "name": "첫번째 개인 프로젝트",
      "description": "프로젝트에 대한 간단한 설명을 적을 수 있습니다. 어떤 프로젝트인지 주제나 강조하고 싶은 부분을 적어보세요.",
      "webUrl": "https://github.com/sjoleee/",
      "repoUrl": "https://github.com/sjoleee/",
      "isTeam": false,
      "period": ["2022. 10", "2022. 11"],
      "stack": ["JavaScript", "HTML/CSS"]
    },
  ],
 
// 각종 경험, 대회 등의 활동에 대해 작성하는 곳입니다.
  "activity": [
    {
      "id": 0,
      "name": "첫번째 활동", // 활동명을 적어주세요.
      "period": ["2022. 06", "2022. 08"], // 활동 기간을 적어주세요.
      "description": "첫번째 활동에 대한 간략한 설명"
    },
    {
      "id": 1,
      "name": "두번째 활동",
      "period": ["2022. 06", "2022. 08"],
      "description": "두번째 활동에 대한 간략한 설명"
    }
  ],
  
// 받았던 교육에 대해 작성하는 곳입니다.
// 수료한 부트캠프, 전공 등을 작성해주세요.
  "education": [
    {
      "id": 0,
      "name": "첫번째 교육", // 교육명을 적어주세요.
      "period": ["2013. 02", "2020. 02"], // 교육 기간을 적어주세요.
      "description": "첫번째 교육에 대한 간략한 설명"
    },
    {
      "id": 1,
      "name": "두번째 교육",
      "period": ["2013. 02", "2020. 02"],
      "description": "두번째 교육에 대한 간략한 설명"
    }
  ],
 
// 자격증에 대해 작성하는 곳입니다.
// 각종 자격증을 작성해주세요.
  "certificate": [
    {
      "id": 0,
      "name": "TOEIC 1000점", // 자격증의 이름과 점수 혹은 등급을 적어주세요.
      "date": "2019. 07. 28", // 취득 날짜를 적어주세요.
      "organizer": "ETS" // 주관처를 적어주세요.
    },
    {
      "id": 1,
      "name": "OPIC IH",
      "date": "2019. 07. 28",
      "organizer": "ETS"
    }
  ]
}
 
 

 
  "resumeTitle": {
    "title": "Hong Gil Dong"
  }
 

 
  "information": {
    "name": "홍길동", 
    "contact": [ 
      { "id": 0, "name": "Email", "href": "honggildong@gmail.com", "isEmail": true },
      { "id": 1, "name": "Github", "href": "https://github.com/honggildong" },
      { "id": 2, "name": "Blog", "href": "https://velog.io/@honggildong" }
    ]
  }
 

 
 
  "workExperience": [
    {
      "id": 0,
      "name": "커피프린스 1호점",
      "position": "Front-end Engineer",
      "period": ["2019. 01", "2019. 09"]
    },
    {
      "id": 1,
      "name": "커피프린스 2호점",
      "position": "바리스타",
      "period": ["2022. 01", "now"]
    }
  ]
 

//간소화된 예시
 
  "project": [
    {
      "name": "팀 프로젝트 1",
      "isTeam": true,
    },
    {
      "name": "개인 프로젝트 1",
      "isTeam": false,
    },
    {
      "name": "팀 프로젝트 2",
      "isTeam": true,
    },
    {
      "name": "개인 프로젝트 2",
      "isTeam": false,
    },
  ],
 

 
  "activity": [
    {
      "id": 0,
      "name": "첫번째 활동",
      "period": ["2022. 06", "2022. 08"],
      "description": "첫번째 활동에 대한 간략한 설명"
    },
    {
      "id": 1,
      "name": "두번째 활동",
      "period": ["2022. 06", "2022. 08"],
      "description": "두번째 활동에 대한 간략한 설명"
    }
  ],
 

 
  "education": [
    {
      "id": 0,
      "name": "첫번째 교육",
      "period": ["2013. 02", "2020. 02"],
      "description": "첫번째 교육에 대한 간략한 설명"
    },
    {
      "id": 1,
      "name": "두번째 교육",
      "period": ["2013. 02", "2020. 02"],
      "description": "두번째 교육에 대한 간략한 설명"
    }
  ],
 

 
  "certificate": [
    {
      "id": 0,
      "name": "TOEIC 1000점",
      "date": "2019. 07. 28",
      "organizer": "ETS" // 주관처를 적어주세요.
    },
    {
      "id": 1,
      "name": "OPIC IH",
      "date": "2019. 07. 28",
      "organizer": "ETS"
    }
  ]
 

 
...
theme: {
    extend: {
      // NOTE: 본 템플릿은 대부분이 모노톤으로 이루어져 있습니다. primary 컬러만 수정하여 사용하시는 것을 권장드립니다.
      colors: {
        GRAY_LIGHT: "#f1f3f5",
        GRAY: "#adb5bd",
        GRAY_HEAVY: "#868e96",
        GRAY_EXTRAHEAVY: "#495057",
        BLACK: "#212529",
        /**
         * @description selection(드래그 블록)에 사용되는 컬러입니다.
         */
        PRIMARY_LIGHT: "#c3fae8",
 
        /**
         * @description 자기소개의 이름 부분, code tag의 darkmode에 사용되는 컬러입니다.
         */
        PRIMARY: "#12b886",
 
        /**
         * @description code tag, link hover icon에 사용되는 컬러입니다.
         */
        PRIMARY_HEAVY: "#087f5b",
 
        /**
         * @description 페이지 최상단 gradient의 시작 컬러입니다.
         */
        GRADIENT_FROM: "#51cf66",
 
        /**
         * @description 페이지 최상단 gradient의 종료 컬러입니다.
         */
        GRADIENT_TO: "#0c8599",
      },
    },
  },
 

 
 
/**
 * @description SEO를 위해 본인의 정보로 수정해주세요.
 */
const DEFAULT_SEO = {
  title: "홍길동 | Front-End Dev",
  description: "안녕하세요, 프론트엔드 개발자 홍길동입니다.",
  canonical: "https://www.naver.com/",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: "https://www.naver.com/",
    title: "홍길동 | Front-End Dev",
    site_name: "홍길동 | Front-End Dev",
    images: [
      {
        url: "/share.png", // 카카오톡을 비롯한 공유용 이미지 경로 public/share.png에 원하는 이미지를 저장해주세요.
        width: 285,
        height: 167,
        alt: "홍길동 | Front-End Dev",
      },
    ],
  },
  additionalLinkTags: [
    {
      rel: "icon",
      href: "/favicon.ico",
    },
  ],
  additionalMetaTags: [
    {
      name: "application-name",
      content: "홍길동 | Front-End Dev",
    },
    {
      name: "msapplication-tooltip",
      content: "홍길동 | Front-End Dev",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
  ],
};
 

 
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
 
export const pageview = (url: URL) => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};
 
interface GTagEvent {
  action: string;
  category?: string;
  label?: string;
  value?: string;
}
 
export const event = ({ action, category, label, value }: GTagEvent) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};
 
 

 
namespace NodeJS {
  interface ProcessEnv extends NodeJS.ProcessEnv {
    NEXT_PUBLIC_GOOGLE_ANALYTICS: string;
  }
}
 

 
import * as gtag from "../lib/gtag";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
 
const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();
 
  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    router.events.on("hashChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
      router.events.off("hashChangeComplete", handleRouteChange);
    };
  }, [router.events]);
 
  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${GA_TRACKING_ID}', {
          page_path: window.location.pathname,
        });
      `,
        }}
      />
      <DefaultSeo {...DEFAULT_SEO} />
      
      ... 후략