diff --git a/e2e/__snapshots__/about.spec.ts/desktop/about.html b/e2e/__snapshots__/about.spec.ts/desktop/about.html
index 30371576..26b5197c 100644
--- a/e2e/__snapshots__/about.spec.ts/desktop/about.html
+++ b/e2e/__snapshots__/about.spec.ts/desktop/about.html
@@ -1 +1 @@
-<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 5년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
+<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/about.spec.ts/mobile/about.html b/e2e/__snapshots__/about.spec.ts/mobile/about.html
index 30371576..26b5197c 100644
--- a/e2e/__snapshots__/about.spec.ts/mobile/about.html
+++ b/e2e/__snapshots__/about.spec.ts/mobile/about.html
@@ -1 +1 @@
-<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 5년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
+<nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%]"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><header class="flex flex-col justify-between items-normal print:flex-row md:flex-row md:items-end print:mt-16"><div class="flex justify-start bg-jumbo bg-clip-text text-transparent text-8xl drop-shadow-[2px_4px_1px_black] tracking-[1px] md:text-9xl font-bold print:text-black print:font-normal print:bg-none print:filter-none">!ILSANG</div><div class="flex flex-col"><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://1ilsang.dev">1ilsang.dev<img class="py-0.5 pl-1.5 w-7 h-7" src="/favicon/favicon-46x46.png" alt="website"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">github.com/1ilsang<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/github-white.webp" alt="github"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="mailto:1ilsangc@gmail.com">1ilsangc@gmail.com<img class="py-0.5 pl-1.5 w-7 h-6" src="/images/logo/gmail.webp" alt="gmail"></a></div><div class="flex justify-end pb-px h-7"><a class="flex items-center text-highlight print:text-black hover:underline" rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/in/1ilsang">linkedin<img class="py-0.5 pl-1.5 w-7 h-7" src="/images/logo/linkedin.webp" alt="linked-in"></a></div></div></header><section class="flex flex-col pb-8"><div class="mt-8 mb-4 leading-8"><div class="my-5">어느덧 6년 차 프런트엔드 개발자가 되었습니다.<br><a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="/posts/quality-of-job-review" rel="noopener noreferrer" target="_blank">"일의 격"</a>을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 고민해 봤습니다.</div><ul><li class="before:content-['❑'] before:mr-2">저는 즐겁게 일하고 싶습니다.</li><li class="before:content-['❑'] before:mr-2">저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.</li></ul><div class="my-5">웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 있을지 늘 탐구하고 있습니다.<br>영향력 있는 동료가 되고 싶습니다. 성장 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 지려고 노력합니다.</div><div class="my-5"><b><a href="#Smilegate">Smilegate</a></b>에서 프런트엔드 인턴을 시작으로<!-- --> <b><a href="#TeamBlind">TeamBlind</a></b>에서 풀스택으로 일했으며 이후<!-- --> <b><a href="#LINE Plus Corp">LINE+</a></b>에서 4년간 프런트엔드 개발자로 전문성을 쌓았습니다. 이제<!-- --> <b><a href="#Woowa Bros">우아한형제들</a></b>에서 또 다른 커리어를 쌓고자 하고 있습니다. 또한<!-- --> <a class="underline-highlight-fade print:text-black print:underline print:decoration-2" href="posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">MDN 한국팀의 Organizer로 활동</a>하고 있습니다.</div></div></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black cursor-pointer hover:text-sub-blue duration-300">WORK EXPERIENCE</div><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/woowa-bros-/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/woowa-bros.webp" alt="Woowa Bros"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Woowa Bros" class="select-none text-2xl leading-9 font-bold">Woowa Bros</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Commerce Admin Platform</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.08">2024.08</time> -<!-- --> <!-- -->Present</div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">서로 다른 커머스 서비스 내 주문/배송/셀러/상품 영역에서 일관된 사용자 경험을 제공할 수 있는 어드민 플랫폼 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">빌드 시스템 패키지 <!-- -->-&gt;<!-- --> 코드 쉐어링 전환<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시스템으로 구축되어 있는 모노레포 패키지를 코드 쉐어링으로 전환</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선(10s -&gt; 1s). 빌드 과정으로 인한 풀 리로딩 문제 해결. 이로써 상태 유지 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">폼 관리가 많은 어드민 특성상 상태 유지는 DX 향상에 중요한 요소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">카탈로그, B마트, 커머스, 셀러 등 어드민 기능 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">속성 범위그룹 설정 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품카테고리 실시간 추천 기능 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">상품 일괄 변경 기능 개발</li></ul></li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/line-messenger/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/line.webp" alt="LINE Plus Corp"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="LINE Plus Corp" class="select-none text-2xl leading-9 font-bold">LINE Plus Corp</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LandPress Content</div><div class="select-none min-w-[119px] mr-2"><time datetime="2024.03">2024.03</time> -<!-- --> <time datetime="2024.07">2024.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">pnpm</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 Headless CMS 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">전체 페이지 성능 개선<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">API 로직 개선, Lazy Loading, Suspense, preload 등 최적화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Speed Index 약 14% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Total Blocking Time 약 72% 단축</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Cumulative Layout Shift 약 95% 감소</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Webpack <!-- -->-&gt;<!-- --> Vite 마이그레이션 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 성능 향상</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">HMR 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">CircleCi 적용 및 Cypress Task 분할 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 시간 16분 -&gt; 5분 단축 성공</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Universal Video Player</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.11">2020.11</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">HTMLVideo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Preact10</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Zustand</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Turborepo</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Storybook</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Cypress</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Webpack</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/uvp.webp" alt="UVP cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">v1: 런타임 <!-- -->-&gt;<!-- --> 컴파일 타임 코드 리팩터링<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">레거시 프로젝트 최신화 작업 주도적 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 및 선언적 컴포넌트 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">런타임 이전에 코드 구성을 이해할 수 있도록 개선</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v2: 배포 안정화 및 DX 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">jsx-dom -&gt; Preact 마이그레이션 및 Zustand, Cypress, Jest 도입</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TSDoc 및 Storybook 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 발표:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></li></ul></li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">v3: 라이브러리 확장성<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Yarn monorepo, Turborepo 적용<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">관련 내용:&nbsp;<a class="highlighter" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 구조 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">플러그인 템플릿 및 라이프사이클 설계</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">성능 향상<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Webpack4 -&gt; Vite 마이그레이션<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드 시간 약 72% 감소</li></ul></li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모노레포 워크스페이스 import 개선</li></ul></li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">VOOM Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.06">2023.06</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/voom-live-cms.webp" alt="VOOM Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">VOOM Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">서비스 아키텍처 설계 및 일정 산출</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Live CMS</div><div class="select-none min-w-[119px] mr-2"><time datetime="2022.08">2022.08</time> -<!-- --> <time datetime="2024.03">2024.03</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">RTL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React-Query</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">WebSocket</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MSW</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Chart.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/oa-live-cms.webp" alt="OA Live CMS cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE Official Account Live 방송 CMS 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React-Query v4 <!-- -->-&gt;<!-- --> v5 작업 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방송 페이지 실시간 채팅 WebSocket 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">시각화 페이지 개발. 데이터 가공 최적화 작업 진행</li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Design System - Calendar</div><div class="select-none min-w-[119px] mr-2"><time datetime="2023.04">2023.04</time> -<!-- --> <time datetime="2023.07">2023.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">React18</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vite</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Jotai</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/lds-calendar.webp" alt="LDS Calendar"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">사내 공용 캘린더 라이브러리의 부재로 자발적 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">다국어 및 Timezone 설정 가능</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">웹 접근성 적용</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">LINE Place</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.10">2020.10</time> -<!-- --> <time datetime="2021.04">2021.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redux-Saga</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swiper</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-place.webp" alt="LINE Place cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">위치 기반 음식점 추천 및 검색 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Home, Profile 페이지 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">위치 기반 API Flow 정리 및 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Swiper 버벅임 성능 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">Koa 커스텀 서버 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">nGrinder 활용, Stress test 진행 후 서버 가용량 산출</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">빌드/배포 개발 환경 세팅</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Official Account Profile</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.08">2020.08</time> -<!-- --> <time datetime="2021.07">2021.07</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Next12</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach" style="width:250px"><button class="min"></button><img class="zoom" src="/images/about/line-account.webp" alt="Official Account cover" width="250"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">라인 공식 계정 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">플러그인 공통화 작업 진행<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">중복 코드 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">일관된 타입 모델 적용</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">React <!-- -->-&gt;<!-- --> Next.js 리팩터링 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">커스텀 서버 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">데이터 이관 작업 진행</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/teamblind/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/blind.webp" alt="TeamBlind"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="TeamBlind" class="select-none text-2xl leading-9 font-bold">TeamBlind</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Full Stack Engineer</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Bleet</div><div class="select-none min-w-[119px] mr-2"><time datetime="2020.05">2020.05</time> -<!-- --> <time datetime="2020.08">2020.08</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Swagger</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Firebase</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/bleet.webp" alt="Bleet cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 소개팅 어플 서버 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">메인 서버 개발자로 주도적 작업. 시스템 및 DB 설계 진행</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Firebase 채팅 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">Swagger 및 문서화 도입. API 사용이 편리하도록 제공<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">클라이언트 팀에서 좋은 평가를 받은 프로젝트</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Mybiskit</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.11">2019.11</time> -<!-- --> <time datetime="2020.04">2020.04</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Nuxt2</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Puppeteer</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/mybiskit.webp" alt="Mybiskit cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 온라인 취미클래스 서비스 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">매주 프로모션 페이지 개발(Vue)</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">쿠폰, 결제 API 개선/개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">테스트 코드로 리팩터링 과정의 사이드 이펙트 최소화하고자 노력</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">트랜잭션 적용 및 결제 플로우 간소화 작업 진행</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">에러 정리 및 로깅 개선</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2 mt-8 print:mt-4">지표 분석용 크롤러 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">Puppeteer로 추출한 데이터 가공 파이프라인 개발(AWS)</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">데이터 시각화 페이지 개발</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">사내 엔지니어링 세미나 "주니어의 반란" 주최, 개발 여정 공유</li></ul></li></ul></div></div></div><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Blind</div><div class="select-none min-w-[119px] mr-2"><time datetime="2019.08">2019.08</time> -<!-- --> <time datetime="2019.12">2019.12</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Node.js</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">PHP</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Docker</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">MySQL</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Redis</div><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">AWS</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="dynamic-image w-full shadow-[1px_1px_8px] shadow-peach"><button class="min"></button><img class="zoom" src="/images/about/blind.webp" alt="Blind cover"></div><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">직장인 익명 앱 API 및 어드민 페이지 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">블라인드 서버 API 개발<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">신고하기 및 패널티 API 개선</li><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']">TypeScript 적용 건의 및 세미나 진행</li></ul></li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">어드민 페이지 개선 작업 진행(PHP)</li></ul></div></div></div></div></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://www.linkedin.com/company/smilegate/"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/smilegate.webp" alt="Smilegate"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.06">2018.06</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex cursor-pointer duration-300 hover:text-highlight"><div id="Smilegate" class="select-none text-2xl leading-9 font-bold">Smilegate</div></div><div class="mb-4 select-none border-dotted border-b-[1px] border-white-blue print:border-black">Frontend Engineer(intern)</div><div class="max-h-[8000px]"><div class="mb-4 pr-1 pl-[0.7rem] pb-3 border-dark border-l-[0.24rem] border-b-[0.01rem] border-b-dotted print:border-black"><div class="group flex flex-col cursor-pointer duration-300 hover:text-highlight select-none"><div class="flex justify-between items-center w-full"><div class="text-xl before:mr-2 before:text-sub-blue before:group-hover:text-highlight before:duration-300 before:content-[&quot;▶&quot;] before:text-[0.9rem]">Stove</div><div class="select-none min-w-[119px] mr-2"><time datetime="2018.03">2018.03</time> -<!-- --> <time datetime="2018.05">2018.05</time></div></div><div class="pl-6 flex w-full select-none flex-wrap"><div class="group-hover:bg-opacity-50 duration-300 bg-base text-sm text-white px-1 mt-1 mr-1 rounded-sm print:bg-transparent print:border-[1px] print:border-black print:text-black">Vue2</div></div></div><div class="flex flex-wrap break-words invisible opacity-0	max-h-0"><div class="mt-4 pl-2 py-4"><ul class="grid leading-7"><span class="ml-1 pb-5">모바일 게임 유저 타임라인 개발</span><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">방명록 CRUD 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">댓글 / 신고하기 기능 개발</li><li class="pl-4 mt-1 before:content-['❑'] print:before:content-['•'] before:mr-2">재밌고 즐겁게 인턴생활 적응<ul class="pl-4 grid"><li class="mt-0.5 pl-4 before:content-['❑'] before:mr-2 print:before:content-['•']"> <a class="highlighter" href="https://blog.naver.com/1ilsang/221313294314" rel="noopener noreferrer" target="_blank">SDC 참여!</a></li></ul></li></ul></div></div></div></div></div></article></section><section class="flex flex-col pb-16"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">ACTIVITY</div><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2024</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/mdn-ko-organizer" rel="noopener noreferrer" target="_blank">Mozilla Developer Network(MDN) @mdn/yari-content-ko 팀 합류</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2023</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Seminar</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/geultto8-open-source-seminar" rel="noopener noreferrer" target="_blank">모여봐요 오픈소스의 숲</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="/posts/junction2023" rel="noopener noreferrer" target="_blank">Junction Asia 2023</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=mjeW7BUaU1c&amp;t=312s&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">프런트엔드 밸런스 게임</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/reactjs/ko.react.dev/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">React.dev</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang" rel="noopener noreferrer" target="_blank">MDN Web Docs</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2022</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Magazine</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo" rel="noopener noreferrer" target="_blank">Turborepo로 모노레포 개발 경험 향상하기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">SNS</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://www.youtube.com/watch?v=zr3WPa_aIcU&amp;ab_channel=%EB%9D%BC%EC%9D%B8%EA%B0%9C%EB%B0%9C%EC%8B%A4%EB%A1%9D" rel="noopener noreferrer" target="_blank">재택 근무하며 회사에서 친구 만들기(feat. 라인 프런트엔드 개발자)</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://teamnexters.com/" rel="noopener noreferrer" target="_blank">Nexters 20th</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2021</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Conference</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook" rel="noopener noreferrer" target="_blank">개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/222517766844" rel="noopener noreferrer" target="_blank">Webpack.kr</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2020</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://geultto.github.io/docs/intro" rel="noopener noreferrer" target="_blank">Geultto 5th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Open Source</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://github.com/Road-of-CODEr" rel="noopener noreferrer" target="_blank">Road of CODEr - Maintainer</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2019</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221542063457" rel="noopener noreferrer" target="_blank">Spoqa 무쓸모톤</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2018</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221546695268" rel="noopener noreferrer" target="_blank">Samsung Software Academy For Youth(SSAFY) 1st</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221325485852" rel="noopener noreferrer" target="_blank">AWS Amathon</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221196038518" rel="noopener noreferrer" target="_blank">UNITHON 6th</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221226071204" rel="noopener noreferrer" target="_blank">Server Dev Camp 3rd</a></div></li></ul></div></article><article class="flex flex-col print:flex-row md:flex-row mt-4 leading-7"><div class="w-48 select-none min-w-20 mt-4 mb-1 md:mt-0 md:mb-0 text-xl hover:drop-shadow-[2px_2px_2px_lightgray] hover:invert-[2%]">2017</div><div class="w-full flex flex-col ml-0 md:ml-6"><ul class="pl-4 border-l-[0.24rem] border-dark"><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Hackathon</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221133223562" rel="noopener noreferrer" target="_blank">NAVER Campus Hackday</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Award</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221169478287" rel="noopener noreferrer" target="_blank">산업융합 아이디어 경진대회 장관상</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://medium.com/depromeet/%EB%94%94%ED%94%84%EB%A7%8C-4%EA%B8%B0-%EB%94%94%ED%94%84%EB%A7%8C-x-%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%B6%81-%EC%84%B8%EB%AF%B8%EB%82%98-89700bfc072b" rel="noopener noreferrer" target="_blank">Depromeet 3rd</a></div></li><li class="flex"><span class="min-w-[120px] text-white-blue print:text-black">Club</span><div class="w-full"><a class="text-progress hover:text-highlight hover:underline duration-300 print:text-black print:underline print:decoration-[1px]" href="https://blog.naver.com/1ilsang/221080023998" rel="noopener noreferrer" target="_blank">WFK ICT Volunteer - 네팔 고등학교 홈페이지 제작</a></div></li></ul></div></article></section><section class="flex flex-col pb-8"><div class="select-none text-white-blue text-2xl font-bold mb-1 leading-10 border-b-[1px] border-base print:text-black">EDUCATION</div><div class="flex flex-col print:flex-row md:flex-row mt-2 py-3"><div class="w-48"><a rel="noopener noreferrer" target="_blank" href="https://catholic.ac.kr"><img class="w-16 h-16 duration-300 ease-in-out hover:drop-shadow-[2px_2px_4px_lightgray] hover:invert-[2%]" src="/images/logo/catholic.webp" alt="가톨릭대학교"></a><div class="select-none min-w-[119px] mr-2 mt-1"><time datetime="2012.03">2012.03</time> -<!-- --> <time datetime="2018.08">2018.08</time></div></div><div class="w-full flex flex-col ml-0 md:ml-6"><div class="flex"><div id="가톨릭대학교" class="select-none text-2xl leading-9 font-bold">가톨릭대학교</div></div><div class="mb-4 select-none">미디어공학, 컴퓨터정보공학 전공</div></div></div></section></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/2023.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/2023.html
index 7a8bdf23..8b8eb933 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/2023.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/2023.html
@@ -137,4 +137,4 @@ <h2 id="신년-목표" data-heading="true"><a data-heading="true" href="#신년-
 </ul>
 </li>
 </ol>
-<p>2024년 잘 부탁드립니다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2022년의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2022년의 목표</li><li data-id="keep" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keep</li><li><ul class="ml-2.5 last:mb-2"><li data-id="기술적-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술적 관심</li><li data-id="회사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">회사</li><li data-id="대외활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">대외활동</li><li data-id="운동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">운동</li><li data-id="여행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">여행</li><li data-id="독서" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">독서</li></ul></li><li data-id="problem" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Problem</li><li><ul class="ml-2.5 last:mb-2"><li data-id="데이터의-파편화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">데이터의 파편화</li><li data-id="기술-갈증" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술 갈증</li><li data-id="생활" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">생활</li></ul></li><li data-id="try" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Try</li><li data-id="총평" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">총평</li><li data-id="신년-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">신년 목표</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2023%20%ED%9A%8C%EA%B3%A0%EB%A1%9D&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>2024년 잘 부탁드립니다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2022년의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2022년의 목표</li><li data-id="keep" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keep</li><li><ul class="ml-2.5 last:mb-2"><li data-id="기술적-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술적 관심</li><li data-id="회사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">회사</li><li data-id="대외활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">대외활동</li><li data-id="운동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">운동</li><li data-id="여행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">여행</li><li data-id="독서" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">독서</li></ul></li><li data-id="problem" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Problem</li><li><ul class="ml-2.5 last:mb-2"><li data-id="데이터의-파편화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">데이터의 파편화</li><li data-id="기술-갈증" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술 갈증</li><li data-id="생활" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">생활</li></ul></li><li data-id="try" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Try</li><li data-id="총평" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">총평</li><li data-id="신년-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">신년 목표</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2023%20%ED%9A%8C%EA%B3%A0%EB%A1%9D&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/2024-01.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/2024-01.html
index 1ede3e7a..1e9b32c9 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/2024-01.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/2024-01.html
@@ -44,4 +44,4 @@ <h2 id="운동하기" data-heading="true"><a data-heading="true" href="#운동
 <p>다음 달에는 좀 더 트레이닝해야겠다.</p>
 <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며"><span class="icon icon-link"></span></a>마치며</h2>
 <p>2월에는 현상 유지하면서 책 한 권만 읽으면 좋을 것 같다.</p>
-<p>가보자고!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2024년-1월의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2024년 1월의 목표</li><li data-id="2d1r" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2D1R</li><li data-id="월간-다이브" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 다이브</li><li data-id="월간-메이커스" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 메이커스</li><li data-id="말해보카" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">말해보카</li><li data-id="운동하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">운동하기</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2024%EB%85%84%201%EC%9B%94%20%ED%9A%8C%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>가보자고!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2024년-1월의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2024년 1월의 목표</li><li data-id="2d1r" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2D1R</li><li data-id="월간-다이브" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 다이브</li><li data-id="월간-메이커스" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 메이커스</li><li data-id="말해보카" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">말해보카</li><li data-id="운동하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">운동하기</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2024%EB%85%84%201%EC%9B%94%20%ED%9A%8C%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/array-prototype-sort.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/array-prototype-sort.html
index 472a5f60..5e19dae2 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/array-prototype-sort.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/array-prototype-sort.html
@@ -398,4 +398,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://timothygu.me/es-howto" rel="noreferrer noopener">https://timothygu.me/es-howto</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://v8.dev/blog/array-sort" rel="noreferrer noopener">https://v8.dev/blog/array-sort</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.youtube.com/watch?v=HHN1axRRKx8" rel="noreferrer noopener">자료구조 Tim 정렬 알고리즘</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="의문의-시작" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">의문의 시작</li><li data-id="arrayprototypesort-공식-명세" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Array.prototype.sort() 공식 명세</li><li><ul class="ml-2.5 last:mb-2"><li data-id="231330-arrayprototypesort-comparefn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">23.1.3.30 Array.prototype.sort (compareFn)</li></ul></li><li data-id="브라우저별-sort-구현체" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">브라우저별 Sort 구현체</li><li><ul class="ml-2.5 last:mb-2"><li data-id="v8" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">V8</li><li data-id="webkit" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Webkit</li><li data-id="spidermonkey" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SpiderMonkey</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Array.prototype.sort()%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="의문의-시작" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">의문의 시작</li><li data-id="arrayprototypesort-공식-명세" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Array.prototype.sort() 공식 명세</li><li><ul class="ml-2.5 last:mb-2"><li data-id="231330-arrayprototypesort-comparefn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">23.1.3.30 Array.prototype.sort (compareFn)</li></ul></li><li data-id="브라우저별-sort-구현체" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">브라우저별 Sort 구현체</li><li><ul class="ml-2.5 last:mb-2"><li data-id="v8" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">V8</li><li data-id="webkit" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Webkit</li><li data-id="spidermonkey" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SpiderMonkey</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Array.prototype.sort()%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/bali-remote-work.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/bali-remote-work.html
index 2ddf4861..9f1ba528 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/bali-remote-work.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/bali-remote-work.html
@@ -204,4 +204,4 @@ <h2 id="추천하는-장소" data-heading="true"><a data-heading="true" href="#
 <p>ETC</p>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://maps.app.goo.gl/nKpy2WibQLfbKvgU8" rel="noreferrer noopener">USAT Liberty Shipwreck</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="알아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">알아보기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="면적" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">면적</li><li data-id="시차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시차</li><li data-id="날씨" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">날씨</li><li data-id="종교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">종교</li><li data-id="물가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">물가</li><li data-id="항공편" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">항공편</li><li data-id="숙소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">숙소</li><li data-id="전기-및-통신" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전기 및 통신</li><li data-id="교통" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">교통</li></ul></li><li data-id="한-달간의-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">한 달간의 여정</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="추천하는-장소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">추천하는 장소</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%B0%9C%EB%A6%AC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="알아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">알아보기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="면적" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">면적</li><li data-id="시차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시차</li><li data-id="날씨" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">날씨</li><li data-id="종교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">종교</li><li data-id="물가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">물가</li><li data-id="항공편" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">항공편</li><li data-id="숙소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">숙소</li><li data-id="전기-및-통신" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전기 및 통신</li><li data-id="교통" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">교통</li></ul></li><li data-id="한-달간의-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">한 달간의 여정</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="추천하는-장소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">추천하는 장소</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%B0%9C%EB%A6%AC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/deploy-eslint-plugin.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/deploy-eslint-plugin.html
index 9c619d93..edbe5daa 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/deploy-eslint-plugin.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/deploy-eslint-plugin.html
@@ -148,4 +148,4 @@ <h2 id="사용하기" data-heading="true"><a data-heading="true" href="#사용
 <h2 id="reference" data-heading="true"><a data-heading="true" href="#reference"><span class="icon icon-link"></span></a>Reference</h2>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://eslint.org/docs/latest/extend/custom-rules" rel="noreferrer noopener">https://eslint.org/docs/latest/extend/custom-rules</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="기본-세팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">기본 세팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="플러그인-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 구조 만들기</li><li data-id="플러그인-rule-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 Rule 구조 만들기</li></ul></li><li data-id="eslint의-소스코드-파싱과-ast" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ESLint의 소스코드 파싱과 AST</li><li data-id="규칙-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">규칙 추가</li><li data-id="테스트-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">테스트 추가</li><li data-id="배포하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">배포하기</li><li data-id="사용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사용하기</li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] ESLint%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="기본-세팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">기본 세팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="플러그인-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 구조 만들기</li><li data-id="플러그인-rule-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 Rule 구조 만들기</li></ul></li><li data-id="eslint의-소스코드-파싱과-ast" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ESLint의 소스코드 파싱과 AST</li><li data-id="규칙-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">규칙 추가</li><li data-id="테스트-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">테스트 추가</li><li data-id="배포하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">배포하기</li><li data-id="사용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사용하기</li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] ESLint%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/geultto8-open-source-seminar.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/geultto8-open-source-seminar.html
index db9046e3..d1b92ca1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/geultto8-open-source-seminar.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/geultto8-open-source-seminar.html
@@ -65,4 +65,4 @@ <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며">
 <p>열정이 솟아난 8월이었다.</p>
 <blockquote>
 <p><a class="underline-highlight-fade" target="_blank" href="https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf" rel="noreferrer noopener">발표 자료 PDF 다운로드</a></p>
-</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="주제-선정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">주제 선정</li><li data-id="준비-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">준비 과정</li><li data-id="발표-당일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">발표 당일</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B8%80%EB%98%90%20%EC%84%B8%EB%AF%B8%EB%82%98%5D%20%EB%AA%A8%EC%97%AC%EB%B4%90%EC%9A%94%20%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4%EC%9D%98%20%EC%88%B2%20%EB%B0%9C%ED%91%9C%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="주제-선정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">주제 선정</li><li data-id="준비-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">준비 과정</li><li data-id="발표-당일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">발표 당일</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B8%80%EB%98%90%20%EC%84%B8%EB%AF%B8%EB%82%98%5D%20%EB%AA%A8%EC%97%AC%EB%B4%90%EC%9A%94%20%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4%EC%9D%98%20%EC%88%B2%20%EB%B0%9C%ED%91%9C%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/google-adsense.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/google-adsense.html
index 0f9484af..ea59e701 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/google-adsense.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/google-adsense.html
@@ -144,4 +144,4 @@ <h2 id="수익-구조" data-heading="true"><a data-heading="true" href="#수익-
 <p>이때 수익 배분은 <a class="underline-highlight-fade" target="_blank" href="https://support.google.com/adsense/answer/180195?hl=ko" rel="noreferrer noopener">사용 중인 제품</a>에 따라 달라지는데 콘텐츠 광고는 게시자가 68%의 수익 지분을 가진다.</p>
 <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리"><span class="icon icon-link"></span></a>마무리</h2>
 <p>이로써 AdSense 사용법을 간단하게 살펴봤다. 사용성이 좋기 때문에 특별히 어려운 부분은 없었다.</p>
-<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="adsense-적용-결과" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 적용 결과</li><li data-id="google-ads-adsense-차이" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Google Ads, AdSense 차이</li><li data-id="adsense-설정하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 설정하기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="사이트-등록" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 등록</li><li data-id="광고-컴포넌트-적용" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 적용</li><li data-id="사이트-소유권-확인" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 소유권 확인</li><li data-id="광고-컴포넌트-영역-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 영역 설정</li><li data-id="지급-정보-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">지급 정보 설정</li></ul></li><li data-id="수익-구조" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수익 구조</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="adsense-적용-결과" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 적용 결과</li><li data-id="google-ads-adsense-차이" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Google Ads, AdSense 차이</li><li data-id="adsense-설정하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 설정하기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="사이트-등록" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 등록</li><li data-id="광고-컴포넌트-적용" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 적용</li><li data-id="사이트-소유권-확인" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 소유권 확인</li><li data-id="광고-컴포넌트-영역-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 영역 설정</li><li data-id="지급-정보-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">지급 정보 설정</li></ul></li><li data-id="수익-구조" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수익 구조</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195687.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195687.html
index f16163fe..71b968ab 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195687.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195687.html
@@ -63,4 +63,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""> </span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">sortedList</span><span style="color:#F07178">[</span><span style="color:#BABED8">K</span><span style="color:#89DDFF"> -</span><span style="color:#F78C6C"> 1</span><span style="color:#F07178">])</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">close</span><span style="color:#F07178">()</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9D%B4%EC%A7%84%EC%88%98%20%EC%A0%95%EB%A0%AC&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9D%B4%EC%A7%84%EC%88%98%20%EC%A0%95%EB%A0%AC&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195692.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195692.html
index af19b923..bce6f7bc 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195692.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195692.html
@@ -142,4 +142,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#C792EA">  const</span><span style="color:#BABED8"> answer</span><span style="color:#89DDFF"> =</span><span style="color:#BABED8"> gScore</span><span style="color:#89DDFF"> &gt;</span><span style="color:#BABED8"> pScore</span><span style="color:#89DDFF"> ?</span><span style="color:#89DDFF"> `</span><span style="color:#C3E88D">goorm </span><span style="color:#89DDFF">${</span><span style="color:#BABED8">gScore</span><span style="color:#89DDFF">}`</span><span style="color:#89DDFF"> :</span><span style="color:#89DDFF"> `</span><span style="color:#C3E88D">player </span><span style="color:#89DDFF">${</span><span style="color:#BABED8">pScore</span><span style="color:#89DDFF">}`</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">answer</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">close</span><span style="color:#F07178">()</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20GameJam&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20GameJam&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195693.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195693.html
index e0b899ce..84b33227 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195693.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195693.html
@@ -80,4 +80,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""> </span>
 <span data-line=""><span style="color:#BABED8">rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">on</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">close</span><span style="color:#89DDFF">'</span><span style="color:#89DDFF">,</span><span style="color:#89DDFF"> ()</span><span style="color:#C792EA"> =&gt;</span><span style="color:#89DDFF"> {</span></span>
 <span data-line=""><span style="color:#676E95;font-style:italic">  // console.log("Hello Goorm! Your input is " + input);</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-완전-탐색" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. 완전 탐색</li><li data-id="2-dp" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. DP</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%ED%86%B5%EC%A6%9D2&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-완전-탐색" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. 완전 탐색</li><li data-id="2-dp" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. DP</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%ED%86%B5%EC%A6%9D2&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195696.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195696.html
index d713b62c..daec7284 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195696.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195696.html
@@ -78,4 +78,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#BABED8">    memo</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">push</span><span style="color:#F07178">(</span><span style="color:#BABED8">last</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span><span style="color:#676E95;font-style:italic"> // 메모에 마지막 노드를 추가한다.</span></span>
 <span data-line=""><span style="color:#89DDFF">  }</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#89DDFF">`${</span><span style="color:#BABED8">memo</span><span style="color:#89DDFF">.</span><span style="color:#BABED8">length</span><span style="color:#89DDFF">}</span><span style="color:#89DDFF"> ${</span><span style="color:#BABED8">last</span><span style="color:#89DDFF">}`</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9E%91%EC%9D%80%20%EB%85%B8%EB%93%9C&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9E%91%EC%9D%80%20%EB%85%B8%EB%93%9C&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195698.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195698.html
index 9be944ac..ff23c170 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195698.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/goorm-195698.html
@@ -144,4 +144,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#676E95;font-style:italic">  // Set의 size는 중복되지 않는 각 노드의 부모(집합)이므로</span></span>
 <span data-line=""><span style="color:#676E95;font-style:italic">  // 연합(집합)의 개수가 된다.</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">answer</span><span style="color:#89DDFF">.</span><span style="color:#BABED8">size</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="bfs로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">BFS로 집합 구성하기</li><li data-id="union-find로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Union-Find로 집합 구성하기</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%97%B0%ED%95%A9&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="bfs로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">BFS로 집합 구성하기</li><li data-id="union-find로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Union-Find로 집합 구성하기</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%97%B0%ED%95%A9&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/implicit-coercion.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/implicit-coercion.html
index c7844bcc..e3bc887e 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/implicit-coercion.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/implicit-coercion.html
@@ -234,4 +234,4 @@ <h3 id="ref" data-heading="true"><a data-heading="true" href="#ref"><span class=
 <li><a class="underline-highlight-fade" target="_blank" href="https://blog.naver.com/sbshw1/221236403574" rel="noreferrer noopener">추상 명령 코드</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.javascript.info/object-toprimitive" rel="noreferrer noopener">객체를 원시형으로 변환하기</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-object-object-%EA%B0%80-%EB%8C%80%EC%B2%B4-%EB%AD%98%EA%B9%8C-fe55b754e709" rel="noreferrer noopener">"[object Object]"</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">TL;DR!</li><li><ul class="ml-2.5 last:mb-2"><li data-id="들어가기-전에" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">들어가기 전에</li><li data-id="암묵적-형변환은-언제-일어나나요" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">암묵적 형변환은 언제 일어나나요?</li><li data-id="동치연산자-한짤로-보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">동치연산자 한짤로 보기</li></ul></li><li data-id="toprimitive-는-동치연산-뿐만-아니라-원시값과-비교가-필요한-모든-순간에-동작한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ToPrimitive 는 동치연산 뿐만 아니라 원시값과 비교가 필요한 모든 순간에 동작한다</li><li><ul class="ml-2.5 last:mb-2"><li data-id="예제로-정리하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">예제로 정리하기</li><li data-id="한발-더-나아가기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한발 더 나아가기</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li><li data-id="ref" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Ref</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%95%8C%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%95%94%EB%AC%B5%EC%A0%81%20%ED%98%95%EB%B3%80%ED%99%98%20%EB%A7%90%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">TL;DR!</li><li><ul class="ml-2.5 last:mb-2"><li data-id="들어가기-전에" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">들어가기 전에</li><li data-id="암묵적-형변환은-언제-일어나나요" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">암묵적 형변환은 언제 일어나나요?</li><li data-id="동치연산자-한짤로-보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">동치연산자 한짤로 보기</li></ul></li><li data-id="toprimitive-는-동치연산-뿐만-아니라-원시값과-비교가-필요한-모든-순간에-동작한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ToPrimitive 는 동치연산 뿐만 아니라 원시값과 비교가 필요한 모든 순간에 동작한다</li><li><ul class="ml-2.5 last:mb-2"><li data-id="예제로-정리하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">예제로 정리하기</li><li data-id="한발-더-나아가기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한발 더 나아가기</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li><li data-id="ref" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Ref</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%95%8C%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%95%94%EB%AC%B5%EC%A0%81%20%ED%98%95%EB%B3%80%ED%99%98%20%EB%A7%90%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/inflearn-meetup-03-dev-career.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/inflearn-meetup-03-dev-career.html
index 6e32e461..499ea97a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/inflearn-meetup-03-dev-career.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/inflearn-meetup-03-dev-career.html
@@ -89,4 +89,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p><u>커리어를 긴 호흡으로</u> 바라보라는 점에 동의하고 있다. 나는 너무 조급한 게 아닐까?</p>
 <p>조금 더 적극적으로 삶을 가꾸고 나를 사랑해야겠다.</p>
 <p>오랜만의 개발자 모임에서 에너지를 많이 받았다. 앞으로도 종종 찾아다녀야겠다.</p>
-<p>Love yourself.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="소개" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">소개</li><li data-id="행사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">행사</li><li><ul class="ml-2.5 last:mb-2"><li data-id="커리어를-바라보는-관점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커리어를 바라보는 관점</li><li data-id="개발자로서-생각해-보면-좋을-10가지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발자로서 생각해 보면 좋을 10가지</li><li data-id="qa" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Q&amp;A</li><li data-id="네트워킹" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">네트워킹</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9D%B8%ED%94%84%EB%9F%B0%20%ED%8C%90%EA%B5%90%20%ED%87%B4%EA%B7%BC%EA%B8%B8%20%EB%B0%8B%EC%97%85%20-%20%EA%B0%9C%EB%B0%9C%EC%9E%90%20%EC%BB%A4%EB%A6%AC%EC%96%B4%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>Love yourself.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="소개" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">소개</li><li data-id="행사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">행사</li><li><ul class="ml-2.5 last:mb-2"><li data-id="커리어를-바라보는-관점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커리어를 바라보는 관점</li><li data-id="개발자로서-생각해-보면-좋을-10가지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발자로서 생각해 보면 좋을 10가지</li><li data-id="qa" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Q&amp;A</li><li data-id="네트워킹" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">네트워킹</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9D%B8%ED%94%84%EB%9F%B0%20%ED%8C%90%EA%B5%90%20%ED%87%B4%EA%B7%BC%EA%B8%B8%20%EB%B0%8B%EC%97%85%20-%20%EA%B0%9C%EB%B0%9C%EC%9E%90%20%EC%BB%A4%EB%A6%AC%EC%96%B4%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/jeju-remote-work.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/jeju-remote-work.html
index e91cdf10..9998e094 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/jeju-remote-work.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/jeju-remote-work.html
@@ -56,4 +56,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li>워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼 수 있게 되었다.</li>
 </ul>
 <p>이제 다시 평범한 일상으로 돌아가게 되겠지만 새로운 환경이 필요하다고 생각하면 주저 없이 워케이션을 선택할 것 같다.</p>
-<p>좋은 경험이었다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="첫-일주일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 일주일</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%A0%9C%EC%A3%BC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>좋은 경험이었다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="첫-일주일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 일주일</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%A0%9C%EC%A3%BC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/junction2023.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/junction2023.html
index 333a6110..3826c6bd 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/junction2023.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/junction2023.html
@@ -55,4 +55,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p>오랜만에 밤새면서 빠르게 작업하니까 재밌었다. 긴 재택근무 간에 떨어진 열정을 다시 채운 느낌이었다.</p>
 <p>기회가 된다면 계속 꾸준히 해커톤에 참여하고 싶다.</p>
 <p>아참 침낭이랑 후드 챙겨갔는데 이거 없었으면 진짜 고통스러울 뻔했다. 진짜 에어컨이 계속 나오기 때문에 너무 추웠다.</p>
-<p>좋은 경험이었다. 그럼, 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="지원-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">지원 과정</li><li data-id="부산-도착" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">부산 도착</li><li data-id="첫날-아이데이션" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫날: 아이데이션</li><li data-id="둘째-날-개발" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">둘째 날: 개발</li><li data-id="셋째-날-발표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">셋째 날: 발표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Junction%20Asia%202023%20%EC%B0%B8%EC%97%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>좋은 경험이었다. 그럼, 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="지원-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">지원 과정</li><li data-id="부산-도착" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">부산 도착</li><li data-id="첫날-아이데이션" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫날: 아이데이션</li><li data-id="둘째-날-개발" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">둘째 날: 개발</li><li data-id="셋째-날-발표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">셋째 날: 발표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Junction%20Asia%202023%20%EC%B0%B8%EC%97%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-easy-2727.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-easy-2727.html
index ee345485..bba541c5 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-easy-2727.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-easy-2727.html
@@ -63,4 +63,4 @@ <h3 id="결론" data-heading="true"><a data-heading="true" href="#결론"><span
 <span data-line=""><span style="color:#BABED8">console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#BABED8">(Object</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">keys</span><span style="color:#BABED8">(m))</span><span style="color:#89DDFF">;</span><span style="color:#676E95;font-style:italic"> // []</span></span></code></pre></figure>
 <p><code>for...in</code> 루프는 객체의 모든 열거 가능한 속성에 대해 반복하며 문자열 키 값을 반환한다. 추가로 인덱스의 순서를 보장하지 않는다.</p>
 <p><code>for...of</code> 구문은 컬렉션 전용이다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복하며 컬렉션을 반환한다.</p>
-<p><code>keys</code>는 해당 키를 가져오지만, 상속된 값은 가져오지 않는다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="-for-in과-for-of의-차이가-무엇일까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">++ for-in과 for-of의 차이가 무엇일까?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="forin" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for...in</li><li data-id="forof" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for..of</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%202727.%20Is%20Object%20Empty&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p><code>keys</code>는 해당 키를 가져오지만, 상속된 값은 가져오지 않는다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="-for-in과-for-of의-차이가-무엇일까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">++ for-in과 for-of의 차이가 무엇일까?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="forin" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for...in</li><li data-id="forof" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for..of</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%202727.%20Is%20Object%20Empty&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-hard-42.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-hard-42.html
index 6e35fe79..89d2e7b8 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-hard-42.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-hard-42.html
@@ -84,4 +84,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#89DDFF">  }</span></span>
 <span data-line=""> </span>
 <span data-line=""><span style="color:#89DDFF;font-style:italic">  return</span><span style="color:#BABED8"> res</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">};</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법-1-stack-on-tn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 1. Stack O(n) T(n)</li><li data-id="접근법-2-two-pointers-on-t1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 2. Two Pointers O(n) T(1)</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%2042.%20Trapping%20Rain%20Water&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">};</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법-1-stack-on-tn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 1. Stack O(n) T(n)</li><li data-id="접근법-2-two-pointers-on-t1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 2. Two Pointers O(n) T(1)</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%2042.%20Trapping%20Rain%20Water&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-medium-238.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-medium-238.html
index 378a3f3d..371d0f5b 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-medium-238.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/leetcode-medium-238.html
@@ -102,4 +102,4 @@ <h2 id="implementationton-so1" data-heading="true"><a data-heading="true" href="
 <p>LeetCode에서 return 배열(answers)이 아닌 추가 배열을 사용하지 않는다는 것으로 O(1)으로 취급하고 있다.</p>
 </blockquote>
 <p>연속되는 곱셈의 합을 이용한 재밌는 문제였다.</p>
-<p>그럼 이만~</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="ideation" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ideation</li><li data-id="implementationton-son" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(n))</li><li data-id="implementationton-so1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(1))</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%20238.%20Product%20of%20Array%20Except%20Self&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만~</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="ideation" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ideation</li><li data-id="implementationton-son" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(n))</li><li data-id="implementationton-so1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(1))</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%20238.%20Product%20of%20Array%20Except%20Self&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/mac-init-apps.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/mac-init-apps.html
index b5f566dc..d70b9c76 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/mac-init-apps.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/mac-init-apps.html
@@ -238,4 +238,4 @@ <h2 id="hidden-bar" data-heading="true"><a data-heading="true" href="#hidden-bar
 </blockquote>
 <h2 id="digital-color-meter" data-heading="true"><a data-heading="true" href="#digital-color-meter"><span class="icon icon-link"></span></a>Digital Color Meter</h2>
 <p></p><div class="img-container"><div class="img-wrap"><img src="https://github.com/1ilsang/dev/assets/23524849/9955b395-4547-40c4-a4c8-daa7eed3a46a" alt="example"></div></div><p></p>
-<p>맥 자체 유용한 앱이다. CSS 작업을 하다 보면 스포이드가 필요한 순간이 있는데 유용하게 사용할 수 있다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="모아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">모아보기</li><li data-id="chrome" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Chrome</li><li data-id="homebrew" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Homebrew</li><li data-id="oh-my-zsh" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Oh My Zsh</li><li data-id="iterm2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Iterm2</li><li data-id="vscode" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">VSCode</li><li data-id="neovim" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NeoVim</li><li data-id="d2-coding" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">D2 Coding</li><li><ul class="ml-2.5 last:mb-2"><li data-id="iterm2에-d2coding을-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">iterm2에 d2coding을 기본 폰트로 적용하기</li><li data-id="vscode-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">VSCode 기본 폰트로 적용하기</li></ul></li><li data-id="nodejs" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Node.js</li><li data-id="nvm" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NVM</li><li data-id="docker" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Docker</li><li data-id="giphy-capture" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">GIPHY Capture</li><li data-id="deepl" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">DeepL</li><li data-id="screenhint" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenHint</li><li data-id="quick-notes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Quick Notes</li><li data-id="calculator-pro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Calculator Pro</li><li data-id="올ㅋ사전" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올ㅋ사전</li><li data-id="codewhisperer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CodeWhisperer</li><li data-id="flycut" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Flycut</li><li data-id="screenbrush" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenBrush</li><li data-id="keycastr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keycastr</li><li data-id="ngrok" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ngrok</li><li data-id="hidden-bar" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Hidden bar</li><li data-id="digital-color-meter" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Digital Color Meter</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9B%B9%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC%20%EC%9C%84%ED%95%9C%20%EB%8F%84%EA%B5%AC%20%EC%B6%94%EC%B2%9C%20-%20%EC%9C%A0%EC%9A%A9%ED%95%9C%20Mac%20%EC%95%B1%EB%93%A4&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>맥 자체 유용한 앱이다. CSS 작업을 하다 보면 스포이드가 필요한 순간이 있는데 유용하게 사용할 수 있다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="모아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">모아보기</li><li data-id="chrome" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Chrome</li><li data-id="homebrew" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Homebrew</li><li data-id="oh-my-zsh" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Oh My Zsh</li><li data-id="iterm2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Iterm2</li><li data-id="vscode" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">VSCode</li><li data-id="neovim" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NeoVim</li><li data-id="d2-coding" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">D2 Coding</li><li><ul class="ml-2.5 last:mb-2"><li data-id="iterm2에-d2coding을-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">iterm2에 d2coding을 기본 폰트로 적용하기</li><li data-id="vscode-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">VSCode 기본 폰트로 적용하기</li></ul></li><li data-id="nodejs" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Node.js</li><li data-id="nvm" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NVM</li><li data-id="docker" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Docker</li><li data-id="giphy-capture" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">GIPHY Capture</li><li data-id="deepl" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">DeepL</li><li data-id="screenhint" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenHint</li><li data-id="quick-notes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Quick Notes</li><li data-id="calculator-pro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Calculator Pro</li><li data-id="올ㅋ사전" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올ㅋ사전</li><li data-id="codewhisperer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CodeWhisperer</li><li data-id="flycut" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Flycut</li><li data-id="screenbrush" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenBrush</li><li data-id="keycastr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keycastr</li><li data-id="ngrok" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ngrok</li><li data-id="hidden-bar" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Hidden bar</li><li data-id="digital-color-meter" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Digital Color Meter</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9B%B9%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC%20%EC%9C%84%ED%95%9C%20%EB%8F%84%EA%B5%AC%20%EC%B6%94%EC%B2%9C%20-%20%EC%9C%A0%EC%9A%A9%ED%95%9C%20Mac%20%EC%95%B1%EB%93%A4&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/mdn-ko-organizer.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/mdn-ko-organizer.html
index 15f460d0..6cd86fd1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/mdn-ko-organizer.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/mdn-ko-organizer.html
@@ -78,4 +78,4 @@ <h2 id="올해-목표" data-heading="true"><a data-heading="true" href="#올해-
 <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리"><span class="icon icon-link"></span></a>마무리</h2>
 <p>번역은 오픈소스 입문의 좋은 시작점이라 생각한다.</p>
 <p>그렇기 때문에 리뷰어로서 사명감을 느끼고 있다. 오픈소스를 시작하려는 분들이 꾸준히 기여하고 생태계를 끌어 나갈 인재로 성장할 수 있도록 좋은 경험을 주고 싶다.</p>
-<p>MDN 문서 번역에 관심이 생겼다면 <a class="underline-highlight-fade" target="_blank" href="https://github.com/mdn/translated-content/blob/main/docs/ko/README.md" rel="noreferrer noopener">첫 기여자들을 위한 안내서</a>를 참고해 주시길 바란다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="mdn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDN?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="임무" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">임무</li><li data-id="역사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">역사</li></ul></li><li data-id="합류-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 여정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="문서화에-대한-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">문서화에 대한 관심</li><li data-id="사내-오픈소스-스프린트-참여" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사내 오픈소스 스프린트 참여</li><li data-id="온보딩-과정-진행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">온보딩 과정 진행</li></ul></li><li data-id="합류-후" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 후</li><li><ul class="ml-2.5 last:mb-2"><li data-id="정기-회의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정기 회의</li><li data-id="공개-논의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">공개 논의</li><li data-id="리뷰어-활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리뷰어 활동</li></ul></li><li data-id="올해-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올해 목표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] @mdn/yari-content-ko%20Organizer%20%ED%95%A9%EB%A5%98%20%EC%97%AC%EC%A0%95&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>MDN 문서 번역에 관심이 생겼다면 <a class="underline-highlight-fade" target="_blank" href="https://github.com/mdn/translated-content/blob/main/docs/ko/README.md" rel="noreferrer noopener">첫 기여자들을 위한 안내서</a>를 참고해 주시길 바란다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="mdn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDN?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="임무" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">임무</li><li data-id="역사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">역사</li></ul></li><li data-id="합류-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 여정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="문서화에-대한-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">문서화에 대한 관심</li><li data-id="사내-오픈소스-스프린트-참여" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사내 오픈소스 스프린트 참여</li><li data-id="온보딩-과정-진행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">온보딩 과정 진행</li></ul></li><li data-id="합류-후" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 후</li><li><ul class="ml-2.5 last:mb-2"><li data-id="정기-회의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정기 회의</li><li data-id="공개-논의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">공개 논의</li><li data-id="리뷰어-활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리뷰어 활동</li></ul></li><li data-id="올해-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올해 목표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] @mdn/yari-content-ko%20Organizer%20%ED%95%A9%EB%A5%98%20%EC%97%AC%EC%A0%95&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/micro-state-management-review.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/micro-state-management-review.html
index 57f78bff..02df2c78 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/micro-state-management-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/micro-state-management-review.html
@@ -168,4 +168,4 @@ <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며">
 <p>기본적으로 React를 어느정도 이해하고 있는 개발자를 대상으로 작성된 책이지만 코드 자체가 어렵진 않아서 초심자도 읽어볼 만하다고 생각한다.</p>
 <p>책을 읽으면서 상태 관리에 대해 시야가 넓어질 수 있었다.</p>
 <p>다음 월간 다이브에는 "상태"를 주제로 해보려고 한다. 책을 통해 배운 것들을 잘 풀어보고 싶다.</p>
-<p>상태 관리의 종류와 기법들에 대해 이해하고 싶다면 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-react-state에-대한-이해" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. React State에 대한 이해</li><li data-id="2-usestate-vs-usereducer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. useState vs useReducer</li><li data-id="3-contextapi-vs-import" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">3. ContextAPI vs Import</li><li data-id="4-zustand-vs-jotai-vs-valtio" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">4. Zustand vs Jotai vs Valtio</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Micro%20State%20Management%20with%20React%20Hooks%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>상태 관리의 종류와 기법들에 대해 이해하고 싶다면 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-react-state에-대한-이해" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. React State에 대한 이해</li><li data-id="2-usestate-vs-usereducer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. useState vs useReducer</li><li data-id="3-contextapi-vs-import" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">3. ContextAPI vs Import</li><li data-id="4-zustand-vs-jotai-vs-valtio" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">4. Zustand vs Jotai vs Valtio</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Micro%20State%20Management%20with%20React%20Hooks%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/prettier3.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/prettier3.html
index e3b7f2b3..51a3ef3d 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/prettier3.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/prettier3.html
@@ -216,4 +216,4 @@ <h3 id="svg-내부-script-린트-향상" data-heading="true"><a data-heading="tr
 <h2 id="reference" data-heading="true"><a data-heading="true" href="#reference"><span class="icon icon-link"></span></a>Reference</h2>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://prettier.io/blog/2023/07/05/3.0.0.html" rel="noreferrer noopener">공식 블로그 글 보기</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="markdown" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Markdown</li><li><ul class="ml-2.5 last:mb-2"><li data-id="한국어-처리의-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한국어 처리의 향상</li><li data-id="인라인-코드-여백-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인라인 코드 여백 유지</li></ul></li><li data-id="javascript--typescript" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">JavaScript / TypeScript</li><li><ul class="ml-2.5 last:mb-2"><li data-id="trailing-comma" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">trailing-comma</li><li data-id="decorated-function-패턴-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Decorated function 패턴 지원</li><li data-id="누락된-await-괄호-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">누락된 await 괄호 추가</li><li data-id="커링과-화살표-함수간-괄호-일관성-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커링과 화살표 함수간 괄호 일관성 개선</li><li data-id="import-attributes를-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Import Attributes를 지원</li><li data-id="주석이-있는-경우-유니온-타입의-개행이-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">주석이 있는 경우 유니온 타입의 개행이 유지</li><li data-id="extends-줄바꿈-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">extends 줄바꿈 개선</li></ul></li><li data-id="html" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">HTML</li><li><ul class="ml-2.5 last:mb-2"><li data-id="svg-내부-script-린트-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SVG 내부 script 린트 향상</li></ul></li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Prettier%20v3%20%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="markdown" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Markdown</li><li><ul class="ml-2.5 last:mb-2"><li data-id="한국어-처리의-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한국어 처리의 향상</li><li data-id="인라인-코드-여백-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인라인 코드 여백 유지</li></ul></li><li data-id="javascript--typescript" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">JavaScript / TypeScript</li><li><ul class="ml-2.5 last:mb-2"><li data-id="trailing-comma" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">trailing-comma</li><li data-id="decorated-function-패턴-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Decorated function 패턴 지원</li><li data-id="누락된-await-괄호-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">누락된 await 괄호 추가</li><li data-id="커링과-화살표-함수간-괄호-일관성-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커링과 화살표 함수간 괄호 일관성 개선</li><li data-id="import-attributes를-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Import Attributes를 지원</li><li data-id="주석이-있는-경우-유니온-타입의-개행이-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">주석이 있는 경우 유니온 타입의 개행이 유지</li><li data-id="extends-줄바꿈-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">extends 줄바꿈 개선</li></ul></li><li data-id="html" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">HTML</li><li><ul class="ml-2.5 last:mb-2"><li data-id="svg-내부-script-린트-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SVG 내부 script 린트 향상</li></ul></li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Prettier%20v3%20%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/proving-ground-review.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/proving-ground-review.html
index 17b68bd8..e089cad0 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/proving-ground-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/proving-ground-review.html
@@ -24,4 +24,4 @@ <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며">
 <p>책의 한 문장을 뽑으라면 역시 나는 최초의 프로그래머를 선언하는 부분을 가져오고 싶다.</p>
 <p><i>이 과정에서 프로그래머라는 직업이 탄생했다. 문제를 가진 사람과 컴퓨터를 연결해 문제를 해결하도록 돕는 역할을 하는 사람이 등장한 것이다. 여섯 여성은 현대 컴퓨터 분야 최초의 직업 프로그래머였다. -289p</i></p>
 <p>우리는 영웅의 그림자에 가려진 또 다른 영웅들을 발굴하고 기억해야 한다고 느꼈다.</p>
-<p>흥미롭게 읽은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="첫-인상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 인상</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%82%AC%EB%9D%BC%EC%A7%84%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%93%A4%22%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>흥미롭게 읽은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="첫-인상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 인상</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%82%AC%EB%9D%BC%EC%A7%84%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%93%A4%22%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/quality-of-job-review.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/quality-of-job-review.html
index c585b004..2a8318d6 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/quality-of-job-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/quality-of-job-review.html
@@ -105,4 +105,4 @@ <h3 id="인간관계와-우연이-삶에-미치는-영향328p" data-heading="tru
 <p>그렇지만 운도 준비된 자가 잡을 수 있다는 말이 있듯 행운이 다가올 때 잡을 수 있도록 늘 준비해야 한다고 생각한다.</p>
 <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며"><span class="icon icon-link"></span></a>맺으며</h2>
 <p>위 격언들을 한 번씩 되돌아보며 더욱 성장한 나. 성공한 삶을 살아갈 수 있도록 노력해야겠다.</p>
-<p>그럼 이만</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="성장하는-나" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성장하는 나</li><li><ul class="ml-2.5 last:mb-2"><li data-id="안타를-맞는다는-것은-스트라이크를-던질-수-있다는-의미이다97p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">안타를 맞는다는 것은 스트라이크를 던질 수 있다는 의미이다(97p)</li><li data-id="즐긴다는-말의-허상128p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">'즐긴다'는 말의 허상(128p)</li><li data-id="자신이-전문가라면-더-말해야-한다147p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자신이 전문가라면 더 말해야 한다(147p)</li><li data-id="당신의-재능이-최고의-재산이다153p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">당신의 재능이 최고의 재산이다(153p)</li></ul></li><li data-id="성공하는-조직" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성공하는 조직</li><li><ul class="ml-2.5 last:mb-2"><li data-id="리더는-체스-플레이어가-아니라-정원사다164p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 체스 플레이어가 아니라 정원사다(164p)</li><li data-id="상사에게-직언을-어떻게-해야-하나187p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상사에게 직언을 어떻게 해야 하나?(187p)</li><li data-id="비효율의-숙달화224p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">비효율의 숙달화(224p)</li><li data-id="좋은-회사란-무엇인가225p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">좋은 회사란 무엇인가?(225p)</li><li data-id="유능한-직원을-무능하게-만드는-간단한-방법233p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">유능한 직원을 무능하게 만드는 간단한 방법(233p)</li><li data-id="내가-말하지-않으면-리더도-나를-잘-모른다235p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 말하지 않으면 리더도 나를 잘 모른다(235p)</li><li data-id="리더는-직원과-어느-정도-개인적-유대를-맺어야-할까246p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 직원과 어느 정도 개인적 유대를 맺어야 할까?(246p)</li><li data-id="상대가-진짜-똑똑한지-허풍인지-구별하는-방법259p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상대가 진짜 똑똑한지 허풍인지 구별하는 방법(259p)</li></ul></li><li data-id="성숙한-삶" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성숙한 삶</li><li><ul class="ml-2.5 last:mb-2"><li data-id="과제의-분리275p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">과제의 분리(275p)</li><li data-id="더-많이-행동하면-더-행복해진다279p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">더 많이 행동하면 더 행복해진다(279p)</li><li data-id="그게-다다285p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">그게 다다(285p)</li><li data-id="내가-나를-좌절시키는-것이다291p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 나를 좌절시키는 것이다(291p)</li><li data-id="자랑할-것-자부심을-가질-것이-무엇인가307p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자랑할 것, 자부심을 가질 것이 무엇인가?(307p)</li><li data-id="억누르지-말고-관점을-재해석-하라324p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">억누르지 말고 관점을 재해석 하라(324p)</li><li data-id="인간관계와-우연이-삶에-미치는-영향328p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인간관계와 우연이 삶에 미치는 영향(328p)</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%9D%BC%EC%9D%98%20%EA%B2%A9%22%EC%9D%84%20%EC%9D%BD%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="성장하는-나" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성장하는 나</li><li><ul class="ml-2.5 last:mb-2"><li data-id="안타를-맞는다는-것은-스트라이크를-던질-수-있다는-의미이다97p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">안타를 맞는다는 것은 스트라이크를 던질 수 있다는 의미이다(97p)</li><li data-id="즐긴다는-말의-허상128p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">'즐긴다'는 말의 허상(128p)</li><li data-id="자신이-전문가라면-더-말해야-한다147p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자신이 전문가라면 더 말해야 한다(147p)</li><li data-id="당신의-재능이-최고의-재산이다153p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">당신의 재능이 최고의 재산이다(153p)</li></ul></li><li data-id="성공하는-조직" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성공하는 조직</li><li><ul class="ml-2.5 last:mb-2"><li data-id="리더는-체스-플레이어가-아니라-정원사다164p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 체스 플레이어가 아니라 정원사다(164p)</li><li data-id="상사에게-직언을-어떻게-해야-하나187p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상사에게 직언을 어떻게 해야 하나?(187p)</li><li data-id="비효율의-숙달화224p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">비효율의 숙달화(224p)</li><li data-id="좋은-회사란-무엇인가225p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">좋은 회사란 무엇인가?(225p)</li><li data-id="유능한-직원을-무능하게-만드는-간단한-방법233p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">유능한 직원을 무능하게 만드는 간단한 방법(233p)</li><li data-id="내가-말하지-않으면-리더도-나를-잘-모른다235p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 말하지 않으면 리더도 나를 잘 모른다(235p)</li><li data-id="리더는-직원과-어느-정도-개인적-유대를-맺어야-할까246p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 직원과 어느 정도 개인적 유대를 맺어야 할까?(246p)</li><li data-id="상대가-진짜-똑똑한지-허풍인지-구별하는-방법259p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상대가 진짜 똑똑한지 허풍인지 구별하는 방법(259p)</li></ul></li><li data-id="성숙한-삶" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성숙한 삶</li><li><ul class="ml-2.5 last:mb-2"><li data-id="과제의-분리275p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">과제의 분리(275p)</li><li data-id="더-많이-행동하면-더-행복해진다279p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">더 많이 행동하면 더 행복해진다(279p)</li><li data-id="그게-다다285p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">그게 다다(285p)</li><li data-id="내가-나를-좌절시키는-것이다291p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 나를 좌절시키는 것이다(291p)</li><li data-id="자랑할-것-자부심을-가질-것이-무엇인가307p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자랑할 것, 자부심을 가질 것이 무엇인가?(307p)</li><li data-id="억누르지-말고-관점을-재해석-하라324p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">억누르지 말고 관점을 재해석 하라(324p)</li><li data-id="인간관계와-우연이-삶에-미치는-영향328p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인간관계와 우연이 삶에 미치는 영향(328p)</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%9D%BC%EC%9D%98%20%EA%B2%A9%22%EC%9D%84%20%EC%9D%BD%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/renovate.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/renovate.html
index 9f728b35..0e4df306 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/renovate.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/renovate.html
@@ -110,4 +110,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p>그렇기 때문에 정말 특정한 이슈가 없는 이상 버전 올릴 생각을 잘 하지 않게 되었고, 그 결과 수많은 Breaking change를 만나며 고생했던 기억이 있다.</p>
 <p>무엇보다 "<strong>사용하고 있는 라이브러리의 최신 근황</strong>"에 대해 궁금해 하지 않았던 점도 한몫 했다.</p>
 <p>이제, Renovate가 제공해주는 지속되는 PR을 통해 놓치지 않고 새로운 버전을 쫓아갈 수 있을거라 생각하고 있다. 또한 changeLog 및 sourceCompare를 통해 각 라이브러리의 근황도 자연스럽게 알게 될거라 기대하고 있다.</p>
-<p>그럼 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="intro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">INTRO</li><li data-id="renovate란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate란?</li><li data-id="renovate의-장점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate의 장점</li><li data-id="적용-방법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">적용 방법</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Renovate%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="intro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">INTRO</li><li data-id="renovate란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate란?</li><li data-id="renovate의-장점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate의 장점</li><li data-id="적용-방법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">적용 방법</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Renovate%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/storybook7.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/storybook7.html
index de6313da..69de2491 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/storybook7.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/storybook7.html
@@ -141,4 +141,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://storybook.js.org/blog/storybook-7-0/" rel="noreferrer noopener">https://storybook.js.org/blog/storybook-7-0/</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://storybook.js.org/blog/storybook-7-docs/" rel="noreferrer noopener">https://storybook.js.org/blog/storybook-7-docs/</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="사전-번들-제공" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사전 번들 제공</li><li data-id="csf-v3" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CSF v3</li><li data-id="mdx-v2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDX v2</li><li data-id="그-외" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그 외</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Storybook%207.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="사전-번들-제공" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사전 번들 제공</li><li data-id="csf-v3" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CSF v3</li><li data-id="mdx-v2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDX v2</li><li data-id="그-외" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그 외</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Storybook%207.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/turborepo.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/turborepo.html
index 10c35537..edfccfeb 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/turborepo.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/turborepo.html
@@ -1,3 +1,3 @@
 <progress class="[&amp;::-webkit-progress-bar]:bg-sub-blue fixed top-0 left-0 z-10 w-full h-[3px] appearance-none [&amp;::-webkit-progress-value]:bg-base-og" value="0" max="1"></progress><nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%] opacity-10	md:opacity-100 shadow-nav shadow-lg"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><h1 class="text-4xl md:text-6xl break-words">Turborepo로 모노레포 개발 경험 향상하기</h1><section class="flex items-center mt-4"><div class="mr-2 w-9	h-9 md:w-12 md:h-12" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-sub-blue" src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="text-lg" href="/about">1ilsang</a><div class="text-sub-blue text-sm">클라이밍 하실래염?</div></div></section><section class="flex flex-wrap mt-2 items-end"><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/monorepo">#<!-- -->monorepo</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/turborepo">#<!-- -->turborepo</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/packageManager">#<!-- -->packageManager</a></section><section><div class="text-date-gray inline">Published <time datetime="2022-04-15 00:00">2022-04-15 00:00</time></div></section><section id="post-body-container" class="relative"><div class="markdown"><p></p><div class="img-container"><div class="img-wrap cover"><img src="https://github.com/1ilsang/dev/assets/23524849/b6999846-c0a3-4889-a4b6-6cf9bc21fa94" alt="cover"></div></div><p></p>
 <p>라인 엔지니어링 블로그에 <a class="underline-highlight-fade" target="_blank" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/" rel="noreferrer noopener">작성한 글</a>이다.</p>
-<p>글쓰면서 정말 많이 배웠던것 같다. 모노레포와 함께할 때 캐싱기능은 너무 경험이 좋았기 때문에 앞으로도 꾸준히 사용해볼 예정이다.</p></div></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Turborepo%EB%A1%9C%20%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%20%EA%B0%9C%EB%B0%9C%20%EA%B2%BD%ED%97%98%20%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>글쓰면서 정말 많이 배웠던것 같다. 모노레포와 함께할 때 캐싱기능은 너무 경험이 좋았기 때문에 앞으로도 꾸준히 사용해볼 예정이다.</p></div></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Turborepo%EB%A1%9C%20%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%20%EA%B0%9C%EB%B0%9C%20%EA%B2%BD%ED%97%98%20%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript-subtyping.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript-subtyping.html
index 1149330c..5faca9a1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript-subtyping.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript-subtyping.html
@@ -176,4 +176,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.mattstobbs.com/object-keys-typescript/" rel="noreferrer noopener">Why Object.keys Returns an Array of Strings in TypeScript (And How To Fix It)</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.yongdam.sh/blog/effective-typescript-structural-typing" rel="noreferrer noopener">타입스크립트의 구조적 타이핑</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208" rel="noreferrer noopener">Object.keys() types refinement, and Object.entries() types bugfix #12253</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="문제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">문제</li><li data-id="구조적-서브-타이핑이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">구조적 서브 타이핑이란</li><li data-id="해결" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">해결</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타입-가드를-통한-타입-좁히기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입 가드를 통한 타입 좁히기</li></ul></li><li data-id="one-more-thing" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ONE MORE THING</li><li><ul class="ml-2.5 last:mb-2"><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Object.keys()%EB%8A%94%20%EC%99%9C%20string%5B%5D%20%ED%83%80%EC%9E%85%EC%9D%BC%EA%B9%8C?&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="문제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">문제</li><li data-id="구조적-서브-타이핑이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">구조적 서브 타이핑이란</li><li data-id="해결" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">해결</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타입-가드를-통한-타입-좁히기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입 가드를 통한 타입 좁히기</li></ul></li><li data-id="one-more-thing" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ONE MORE THING</li><li><ul class="ml-2.5 last:mb-2"><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Object.keys()%EB%8A%94%20%EC%99%9C%20string%5B%5D%20%ED%83%80%EC%9E%85%EC%9D%BC%EA%B9%8C?&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript5.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript5.html
index 5647bc1f..254bc32b 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript5.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/typescript5.html
@@ -367,4 +367,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html" rel="noreferrer noopener">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.javascript.info/call-apply-decorators#ref-634" rel="noreferrer noopener">https://ko.javascript.info/call-apply-decorators#ref-634</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://2ality.com/2022/10/javascript-decorators.html" rel="noreferrer noopener">https://2ality.com/2022/10/javascript-decorators.html</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="decorators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Decorators</li><li><ul class="ml-2.5 last:mb-2"><li data-id="실험적-레거시-데코레이터와의-차이점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실험적 레거시 데코레이터와의 차이점</li></ul></li><li data-id="const-type-parameters" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">const Type Parameters</li><li data-id="supporting-multiple-configuration-files-in-extends" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Supporting Multiple Configuration Files in extends</li><li data-id="all-enums-are-union-enums" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">All enums Are Union enums</li><li data-id="--moduleresolution-bundler" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">--moduleResolution bundler</li><li data-id="support-for-export-type-" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Support for export type *</li><li data-id="overload-support-in-jsdoc" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">@overload Support in JSDoc</li><li data-id="speed-memory-and-package-size-optimizations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Speed, Memory, and Package Size Optimizations</li><li data-id="breaking-changes-and-deprecations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Breaking Changes and Deprecations</li><li><ul class="ml-2.5 last:mb-2"><li data-id="runtime-requirements" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Runtime Requirements</li><li data-id="libdts-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">lib.d.ts Changes</li><li data-id="api-breaking-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">API Breaking Changes</li><li data-id="forbidden-implicit-coercions-in-relational-operators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Forbidden Implicit Coercions in Relational Operators</li><li data-id="enum-overhaul" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Enum Overhaul</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] TypeScript%205.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="decorators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Decorators</li><li><ul class="ml-2.5 last:mb-2"><li data-id="실험적-레거시-데코레이터와의-차이점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실험적 레거시 데코레이터와의 차이점</li></ul></li><li data-id="const-type-parameters" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">const Type Parameters</li><li data-id="supporting-multiple-configuration-files-in-extends" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Supporting Multiple Configuration Files in extends</li><li data-id="all-enums-are-union-enums" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">All enums Are Union enums</li><li data-id="--moduleresolution-bundler" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">--moduleResolution bundler</li><li data-id="support-for-export-type-" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Support for export type *</li><li data-id="overload-support-in-jsdoc" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">@overload Support in JSDoc</li><li data-id="speed-memory-and-package-size-optimizations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Speed, Memory, and Package Size Optimizations</li><li data-id="breaking-changes-and-deprecations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Breaking Changes and Deprecations</li><li><ul class="ml-2.5 last:mb-2"><li data-id="runtime-requirements" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Runtime Requirements</li><li data-id="libdts-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">lib.d.ts Changes</li><li data-id="api-breaking-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">API Breaking Changes</li><li data-id="forbidden-implicit-coercions-in-relational-operators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Forbidden Implicit Coercions in Relational Operators</li><li data-id="enum-overhaul" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Enum Overhaul</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] TypeScript%205.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/udemy-rust-programming.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/udemy-rust-programming.html
index ed3d85f9..e4bdb06a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/udemy-rust-programming.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/udemy-rust-programming.html
@@ -36,4 +36,4 @@ <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며">
 <p>가보자고!</p>
 <blockquote>
 <p>해당 콘텐츠는 유데미로부터 강의 쿠폰을 제공받아 작성되었습니다.</p>
-</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="수강-이유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수강 이유</li><li data-id="과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">과정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="러스또" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">러스또</li><li data-id="정리-및-공유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리 및 공유</li><li data-id="스터디" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">스터디</li></ul></li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%9F%AC%EC%8A%A4%ED%8A%B8%20%EC%8B%9C%EC%9E%91!%20-%20%EC%9C%A0%EB%8D%B0%EB%AF%B8%20Rust%20Programming%EB%A5%BC%20%EC%88%98%EA%B0%95%ED%95%98%EB%A9%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="수강-이유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수강 이유</li><li data-id="과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">과정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="러스또" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">러스또</li><li data-id="정리-및-공유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리 및 공유</li><li data-id="스터디" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">스터디</li></ul></li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%9F%AC%EC%8A%A4%ED%8A%B8%20%EC%8B%9C%EC%9E%91!%20-%20%EC%9C%A0%EB%8D%B0%EB%AF%B8%20Rust%20Programming%EB%A5%BC%20%EC%88%98%EA%B0%95%ED%95%98%EB%A9%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/use-prevent-leave.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/use-prevent-leave.html
index 4201f838..ab99c74c 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/use-prevent-leave.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/use-prevent-leave.html
@@ -241,4 +241,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/User_activation" rel="noreferrer noopener">https://developer.mozilla.org/en-US/docs/Web/Security/User_activation</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://developer.chrome.com/blog/page-lifecycle-api/" rel="noreferrer noopener">https://developer.chrome.com/blog/page-lifecycle-api/</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://heyjiawei.com/block-user-from-leaving-page-on-single-page-app" rel="noreferrer noopener">https://heyjiawei.com/block-user-from-leaving-page-on-single-page-app</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="beforeunload로-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">beforeunload로 페이지 이탈 방지하기</li><li data-id="spa에서-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">SPA에서 페이지 이탈 방지하기</li><li data-id="합본-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합본 코드</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9D%B4%ED%83%88%EC%8B%9C%20%ED%99%95%EC%9D%B8%20%EC%BB%A8%ED%8E%8C%EC%B0%BD%20%EB%A7%8C%EB%93%A4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="beforeunload로-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">beforeunload로 페이지 이탈 방지하기</li><li data-id="spa에서-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">SPA에서 페이지 이탈 방지하기</li><li data-id="합본-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합본 코드</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9D%B4%ED%83%88%EC%8B%9C%20%ED%99%95%EC%9D%B8%20%EC%BB%A8%ED%8E%8C%EC%B0%BD%20%EB%A7%8C%EB%93%A4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/use-transition.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/use-transition.html
index 6c7431ce..92ea1b79 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/use-transition.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/use-transition.html
@@ -200,4 +200,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li><code>transition</code> 표시된 setState는 다른 setState 업데이트시 중단된다.</li>
 <li><code>transition</code> 표시된 상태 업데이트는 <code>Suspense</code>로 컨텐츠를 숨기지 않고 이전 컨텐츠를 계속 표시한다.</li>
 <li>fiber 엔진을 통해 <code>transition</code>된 상태와 다른 상태의 스케줄링이 가능해졌다.</li>
-</ol></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="목차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">목차</li><li data-id="usetransition이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">useTransition이란?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="ispending-starttransition-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">isPending, startTransition 이해하기</li><li data-id="전체-코드로-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전체 코드로 이해하기</li></ul></li><li data-id="suspense와-연계하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Suspense와 연계하기</li><li data-id="그외-자잘한-팁들" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그외 자잘한 팁들</li><li><ul class="ml-2.5 last:mb-2"><li data-id="vs-throttle-debounce" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">vs throttle, debounce</li><li data-id="starttransition에-전달된-함수는-즉시-실행된다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">startTransition에 전달된 함수는 즉시 실행된다</li><li data-id="usedeferredvalue" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">useDeferredValue</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] useTransition%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ol></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="목차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">목차</li><li data-id="usetransition이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">useTransition이란?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="ispending-starttransition-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">isPending, startTransition 이해하기</li><li data-id="전체-코드로-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전체 코드로 이해하기</li></ul></li><li data-id="suspense와-연계하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Suspense와 연계하기</li><li data-id="그외-자잘한-팁들" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그외 자잘한 팁들</li><li><ul class="ml-2.5 last:mb-2"><li data-id="vs-throttle-debounce" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">vs throttle, debounce</li><li data-id="starttransition에-전달된-함수는-즉시-실행된다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">startTransition에 전달된 함수는 즉시 실행된다</li><li data-id="usedeferredvalue" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">useDeferredValue</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] useTransition%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/visual-regression-test.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/visual-regression-test.html
index 2dde1784..bf3bde54 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/visual-regression-test.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/visual-regression-test.html
@@ -378,4 +378,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://techblog.woowahan.com/17081/" rel="noreferrer noopener">우아한형제들 디자인 시스템에 시각적 회귀 테스트 적용하기</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://tv.kakao.com/channel/3693125/cliplink/414129351" rel="noreferrer noopener">UI 테스트를 위한 여정</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="도입-배경" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">도입 배경</li><li data-id="시각적-회귀-테스트란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시각적 회귀 테스트란</li><li data-id="playwright" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Playwright</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dom-snapshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">DOM Snapshot</li><li data-id="screenshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Screenshot</li><li data-id="시각적-회귀-테스트는-다양한-이유로-실패할-수-있다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시각적 회귀 테스트는 다양한 이유로 실패할 수 있다</li></ul></li><li data-id="github-actions" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Github Actions</li><li data-id="성능-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성능 개선</li><li><ul class="ml-2.5 last:mb-2"><li data-id="테스트-방식" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 방식</li><li data-id="테스트-속도" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 속도</li><li data-id="cicd" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">CI/CD</li></ul></li><li data-id="트러블-슈팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">트러블 슈팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="로컬-테스트를-포기해야-할까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">로컬 테스트를 포기해야 할까</li><li data-id="timezone" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Timezone</li><li data-id="테스트-분기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 분기</li><li data-id="1px" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1px</li><li data-id="image-load" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Image load</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%8B%9C%EA%B0%81%EC%A0%81%20%ED%9A%8C%EA%B7%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8%20%EB%8F%84%EC%9E%85%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="도입-배경" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">도입 배경</li><li data-id="시각적-회귀-테스트란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시각적 회귀 테스트란</li><li data-id="playwright" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Playwright</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dom-snapshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">DOM Snapshot</li><li data-id="screenshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Screenshot</li><li data-id="시각적-회귀-테스트는-다양한-이유로-실패할-수-있다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시각적 회귀 테스트는 다양한 이유로 실패할 수 있다</li></ul></li><li data-id="github-actions" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Github Actions</li><li data-id="성능-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성능 개선</li><li><ul class="ml-2.5 last:mb-2"><li data-id="테스트-방식" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 방식</li><li data-id="테스트-속도" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 속도</li><li data-id="cicd" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">CI/CD</li></ul></li><li data-id="트러블-슈팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">트러블 슈팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="로컬-테스트를-포기해야-할까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">로컬 테스트를 포기해야 할까</li><li data-id="timezone" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Timezone</li><li data-id="테스트-분기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 분기</li><li data-id="1px" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1px</li><li data-id="image-load" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Image load</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%8B%9C%EA%B0%81%EC%A0%81%20%ED%9A%8C%EA%B7%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8%20%EB%8F%84%EC%9E%85%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/vite-dev-server.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/vite-dev-server.html
index 4c3b2e6b..b2b69e44 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/vite-dev-server.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/vite-dev-server.html
@@ -482,4 +482,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li><a class="underline-highlight-fade" target="_blank" href="https://webpack.kr/concepts/hot-module-replacement" rel="noreferrer noopener">https://webpack.kr/concepts/hot-module-replacement</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.vitejs.dev/config/server-options.html" rel="noreferrer noopener">https://ko.vitejs.dev/config/server-options.html</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://github.com/vitejs/vite" rel="noreferrer noopener">https://github.com/vitejs/vite</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="1-개발-서버-실행서버-초기화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">1. 개발 서버 실행(서버 초기화)</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dev-server는-아래와-같은-프로세스를-거치며-초기화를-진행한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Dev Server는 아래와 같은 프로세스를 거치며 초기화를 진행한다.</li></ul></li><li data-id="2-indexhtml-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2. index.html 요청</li><li data-id="3-indexhtml-렌더링과-자원-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">3. index.html 렌더링과 자원 요청</li><li data-id="4-렌더링-계속-진행with-websocket" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">4. 렌더링 계속 진행(with WebSocket)</li><li data-id="5-코드-변경-감지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">5. 코드 변경 감지</li><li data-id="6-브라우저-리렌더링" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">6. 브라우저 리렌더링</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Vite%20Dev%20Server%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0%20(feat.%20HMR)&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="1-개발-서버-실행서버-초기화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">1. 개발 서버 실행(서버 초기화)</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dev-server는-아래와-같은-프로세스를-거치며-초기화를-진행한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Dev Server는 아래와 같은 프로세스를 거치며 초기화를 진행한다.</li></ul></li><li data-id="2-indexhtml-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2. index.html 요청</li><li data-id="3-indexhtml-렌더링과-자원-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">3. index.html 렌더링과 자원 요청</li><li data-id="4-렌더링-계속-진행with-websocket" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">4. 렌더링 계속 진행(with WebSocket)</li><li data-id="5-코드-변경-감지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">5. 코드 변경 감지</li><li data-id="6-브라우저-리렌더링" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">6. 브라우저 리렌더링</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Vite%20Dev%20Server%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0%20(feat.%20HMR)&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/desktop/woowa-type-review.html b/e2e/__snapshots__/post/dom.spec.ts/desktop/woowa-type-review.html
index f3208edc..57c8d21a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/desktop/woowa-type-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/desktop/woowa-type-review.html
@@ -115,4 +115,4 @@ <h3 id="실용적인-예제" data-heading="true"><a data-heading="true" href="#
 <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며"><span class="icon icon-link"></span></a>맺으며</h2>
 <p>배민의 공유 문화는 본받을만하다고 생각한다.</p>
 <p>기술업계 특성상 비판적인 시선이 기본적으로 있기 때문에 외부 공개를 꺼릴 수도 있었겠지만, 기술에 대한 공유를 두려워하지 않고 책으로 펴낸 것에 리스펙하게 된다.</p>
-<p>여러 예제가 실제 코딩에 도움이 되기 때문에 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타-언어의-타입-시스템과-비교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타 언어의 타입 시스템과 비교</li><li data-id="타입에-대한-고찰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입에 대한 고찰</li><li data-id="개발팀과의-인터뷰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발팀과의 인터뷰</li><li data-id="친절한-설명" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">친절한 설명</li><li data-id="실용적인-예제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실용적인 예제</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9A%B0%EC%95%84%ED%95%9C%20%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20with%20%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>여러 예제가 실제 코딩에 도움이 되기 때문에 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타-언어의-타입-시스템과-비교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타 언어의 타입 시스템과 비교</li><li data-id="타입에-대한-고찰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입에 대한 고찰</li><li data-id="개발팀과의-인터뷰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발팀과의 인터뷰</li><li data-id="친절한-설명" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">친절한 설명</li><li data-id="실용적인-예제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실용적인 예제</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9A%B0%EC%95%84%ED%95%9C%20%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20with%20%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/2023.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/2023.html
index 7a8bdf23..8b8eb933 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/2023.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/2023.html
@@ -137,4 +137,4 @@ <h2 id="신년-목표" data-heading="true"><a data-heading="true" href="#신년-
 </ul>
 </li>
 </ol>
-<p>2024년 잘 부탁드립니다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2022년의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2022년의 목표</li><li data-id="keep" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keep</li><li><ul class="ml-2.5 last:mb-2"><li data-id="기술적-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술적 관심</li><li data-id="회사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">회사</li><li data-id="대외활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">대외활동</li><li data-id="운동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">운동</li><li data-id="여행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">여행</li><li data-id="독서" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">독서</li></ul></li><li data-id="problem" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Problem</li><li><ul class="ml-2.5 last:mb-2"><li data-id="데이터의-파편화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">데이터의 파편화</li><li data-id="기술-갈증" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술 갈증</li><li data-id="생활" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">생활</li></ul></li><li data-id="try" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Try</li><li data-id="총평" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">총평</li><li data-id="신년-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">신년 목표</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2023%20%ED%9A%8C%EA%B3%A0%EB%A1%9D&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>2024년 잘 부탁드립니다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2022년의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2022년의 목표</li><li data-id="keep" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keep</li><li><ul class="ml-2.5 last:mb-2"><li data-id="기술적-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술적 관심</li><li data-id="회사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">회사</li><li data-id="대외활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">대외활동</li><li data-id="운동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">운동</li><li data-id="여행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">여행</li><li data-id="독서" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">독서</li></ul></li><li data-id="problem" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Problem</li><li><ul class="ml-2.5 last:mb-2"><li data-id="데이터의-파편화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">데이터의 파편화</li><li data-id="기술-갈증" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">기술 갈증</li><li data-id="생활" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">생활</li></ul></li><li data-id="try" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Try</li><li data-id="총평" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">총평</li><li data-id="신년-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">신년 목표</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2023%20%ED%9A%8C%EA%B3%A0%EB%A1%9D&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/2024-01.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/2024-01.html
index 1ede3e7a..1e9b32c9 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/2024-01.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/2024-01.html
@@ -44,4 +44,4 @@ <h2 id="운동하기" data-heading="true"><a data-heading="true" href="#운동
 <p>다음 달에는 좀 더 트레이닝해야겠다.</p>
 <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며"><span class="icon icon-link"></span></a>마치며</h2>
 <p>2월에는 현상 유지하면서 책 한 권만 읽으면 좋을 것 같다.</p>
-<p>가보자고!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2024년-1월의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2024년 1월의 목표</li><li data-id="2d1r" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2D1R</li><li data-id="월간-다이브" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 다이브</li><li data-id="월간-메이커스" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 메이커스</li><li data-id="말해보카" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">말해보카</li><li data-id="운동하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">운동하기</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2024%EB%85%84%201%EC%9B%94%20%ED%9A%8C%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>가보자고!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="2024년-1월의-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2024년 1월의 목표</li><li data-id="2d1r" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2D1R</li><li data-id="월간-다이브" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 다이브</li><li data-id="월간-메이커스" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">월간 메이커스</li><li data-id="말해보카" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">말해보카</li><li data-id="운동하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">운동하기</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] 2024%EB%85%84%201%EC%9B%94%20%ED%9A%8C%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/array-prototype-sort.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/array-prototype-sort.html
index 472a5f60..5e19dae2 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/array-prototype-sort.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/array-prototype-sort.html
@@ -398,4 +398,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://timothygu.me/es-howto" rel="noreferrer noopener">https://timothygu.me/es-howto</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://v8.dev/blog/array-sort" rel="noreferrer noopener">https://v8.dev/blog/array-sort</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.youtube.com/watch?v=HHN1axRRKx8" rel="noreferrer noopener">자료구조 Tim 정렬 알고리즘</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="의문의-시작" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">의문의 시작</li><li data-id="arrayprototypesort-공식-명세" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Array.prototype.sort() 공식 명세</li><li><ul class="ml-2.5 last:mb-2"><li data-id="231330-arrayprototypesort-comparefn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">23.1.3.30 Array.prototype.sort (compareFn)</li></ul></li><li data-id="브라우저별-sort-구현체" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">브라우저별 Sort 구현체</li><li><ul class="ml-2.5 last:mb-2"><li data-id="v8" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">V8</li><li data-id="webkit" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Webkit</li><li data-id="spidermonkey" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SpiderMonkey</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Array.prototype.sort()%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="의문의-시작" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">의문의 시작</li><li data-id="arrayprototypesort-공식-명세" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Array.prototype.sort() 공식 명세</li><li><ul class="ml-2.5 last:mb-2"><li data-id="231330-arrayprototypesort-comparefn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">23.1.3.30 Array.prototype.sort (compareFn)</li></ul></li><li data-id="브라우저별-sort-구현체" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">브라우저별 Sort 구현체</li><li><ul class="ml-2.5 last:mb-2"><li data-id="v8" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">V8</li><li data-id="webkit" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Webkit</li><li data-id="spidermonkey" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SpiderMonkey</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Array.prototype.sort()%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/bali-remote-work.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/bali-remote-work.html
index 2ddf4861..9f1ba528 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/bali-remote-work.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/bali-remote-work.html
@@ -204,4 +204,4 @@ <h2 id="추천하는-장소" data-heading="true"><a data-heading="true" href="#
 <p>ETC</p>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://maps.app.goo.gl/nKpy2WibQLfbKvgU8" rel="noreferrer noopener">USAT Liberty Shipwreck</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="알아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">알아보기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="면적" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">면적</li><li data-id="시차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시차</li><li data-id="날씨" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">날씨</li><li data-id="종교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">종교</li><li data-id="물가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">물가</li><li data-id="항공편" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">항공편</li><li data-id="숙소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">숙소</li><li data-id="전기-및-통신" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전기 및 통신</li><li data-id="교통" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">교통</li></ul></li><li data-id="한-달간의-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">한 달간의 여정</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="추천하는-장소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">추천하는 장소</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%B0%9C%EB%A6%AC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="알아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">알아보기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="면적" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">면적</li><li data-id="시차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시차</li><li data-id="날씨" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">날씨</li><li data-id="종교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">종교</li><li data-id="물가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">물가</li><li data-id="항공편" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">항공편</li><li data-id="숙소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">숙소</li><li data-id="전기-및-통신" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전기 및 통신</li><li data-id="교통" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">교통</li></ul></li><li data-id="한-달간의-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">한 달간의 여정</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="추천하는-장소" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">추천하는 장소</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%B0%9C%EB%A6%AC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/deploy-eslint-plugin.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/deploy-eslint-plugin.html
index 9c619d93..edbe5daa 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/deploy-eslint-plugin.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/deploy-eslint-plugin.html
@@ -148,4 +148,4 @@ <h2 id="사용하기" data-heading="true"><a data-heading="true" href="#사용
 <h2 id="reference" data-heading="true"><a data-heading="true" href="#reference"><span class="icon icon-link"></span></a>Reference</h2>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://eslint.org/docs/latest/extend/custom-rules" rel="noreferrer noopener">https://eslint.org/docs/latest/extend/custom-rules</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="기본-세팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">기본 세팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="플러그인-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 구조 만들기</li><li data-id="플러그인-rule-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 Rule 구조 만들기</li></ul></li><li data-id="eslint의-소스코드-파싱과-ast" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ESLint의 소스코드 파싱과 AST</li><li data-id="규칙-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">규칙 추가</li><li data-id="테스트-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">테스트 추가</li><li data-id="배포하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">배포하기</li><li data-id="사용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사용하기</li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] ESLint%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="기본-세팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">기본 세팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="플러그인-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 구조 만들기</li><li data-id="플러그인-rule-구조-만들기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">플러그인 Rule 구조 만들기</li></ul></li><li data-id="eslint의-소스코드-파싱과-ast" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ESLint의 소스코드 파싱과 AST</li><li data-id="규칙-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">규칙 추가</li><li data-id="테스트-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">테스트 추가</li><li data-id="배포하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">배포하기</li><li data-id="사용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사용하기</li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] ESLint%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/geultto8-open-source-seminar.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/geultto8-open-source-seminar.html
index db9046e3..d1b92ca1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/geultto8-open-source-seminar.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/geultto8-open-source-seminar.html
@@ -65,4 +65,4 @@ <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며">
 <p>열정이 솟아난 8월이었다.</p>
 <blockquote>
 <p><a class="underline-highlight-fade" target="_blank" href="https://github.com/1ilsang/dev/files/12504345/_1ilsang.pdf" rel="noreferrer noopener">발표 자료 PDF 다운로드</a></p>
-</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="주제-선정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">주제 선정</li><li data-id="준비-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">준비 과정</li><li data-id="발표-당일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">발표 당일</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B8%80%EB%98%90%20%EC%84%B8%EB%AF%B8%EB%82%98%5D%20%EB%AA%A8%EC%97%AC%EB%B4%90%EC%9A%94%20%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4%EC%9D%98%20%EC%88%B2%20%EB%B0%9C%ED%91%9C%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="주제-선정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">주제 선정</li><li data-id="준비-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">준비 과정</li><li data-id="발표-당일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">발표 당일</li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B8%80%EB%98%90%20%EC%84%B8%EB%AF%B8%EB%82%98%5D%20%EB%AA%A8%EC%97%AC%EB%B4%90%EC%9A%94%20%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4%EC%9D%98%20%EC%88%B2%20%EB%B0%9C%ED%91%9C%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/google-adsense.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/google-adsense.html
index 0f9484af..ea59e701 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/google-adsense.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/google-adsense.html
@@ -144,4 +144,4 @@ <h2 id="수익-구조" data-heading="true"><a data-heading="true" href="#수익-
 <p>이때 수익 배분은 <a class="underline-highlight-fade" target="_blank" href="https://support.google.com/adsense/answer/180195?hl=ko" rel="noreferrer noopener">사용 중인 제품</a>에 따라 달라지는데 콘텐츠 광고는 게시자가 68%의 수익 지분을 가진다.</p>
 <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리"><span class="icon icon-link"></span></a>마무리</h2>
 <p>이로써 AdSense 사용법을 간단하게 살펴봤다. 사용성이 좋기 때문에 특별히 어려운 부분은 없었다.</p>
-<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="adsense-적용-결과" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 적용 결과</li><li data-id="google-ads-adsense-차이" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Google Ads, AdSense 차이</li><li data-id="adsense-설정하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 설정하기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="사이트-등록" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 등록</li><li data-id="광고-컴포넌트-적용" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 적용</li><li data-id="사이트-소유권-확인" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 소유권 확인</li><li data-id="광고-컴포넌트-영역-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 영역 설정</li><li data-id="지급-정보-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">지급 정보 설정</li></ul></li><li data-id="수익-구조" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수익 구조</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="adsense-적용-결과" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 적용 결과</li><li data-id="google-ads-adsense-차이" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Google Ads, AdSense 차이</li><li data-id="adsense-설정하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 설정하기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="사이트-등록" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 등록</li><li data-id="광고-컴포넌트-적용" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 적용</li><li data-id="사이트-소유권-확인" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 소유권 확인</li><li data-id="광고-컴포넌트-영역-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 영역 설정</li><li data-id="지급-정보-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">지급 정보 설정</li></ul></li><li data-id="수익-구조" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수익 구조</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195687.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195687.html
index f16163fe..71b968ab 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195687.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195687.html
@@ -63,4 +63,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""> </span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">sortedList</span><span style="color:#F07178">[</span><span style="color:#BABED8">K</span><span style="color:#89DDFF"> -</span><span style="color:#F78C6C"> 1</span><span style="color:#F07178">])</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">close</span><span style="color:#F07178">()</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9D%B4%EC%A7%84%EC%88%98%20%EC%A0%95%EB%A0%AC&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9D%B4%EC%A7%84%EC%88%98%20%EC%A0%95%EB%A0%AC&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195692.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195692.html
index af19b923..bce6f7bc 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195692.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195692.html
@@ -142,4 +142,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#C792EA">  const</span><span style="color:#BABED8"> answer</span><span style="color:#89DDFF"> =</span><span style="color:#BABED8"> gScore</span><span style="color:#89DDFF"> &gt;</span><span style="color:#BABED8"> pScore</span><span style="color:#89DDFF"> ?</span><span style="color:#89DDFF"> `</span><span style="color:#C3E88D">goorm </span><span style="color:#89DDFF">${</span><span style="color:#BABED8">gScore</span><span style="color:#89DDFF">}`</span><span style="color:#89DDFF"> :</span><span style="color:#89DDFF"> `</span><span style="color:#C3E88D">player </span><span style="color:#89DDFF">${</span><span style="color:#BABED8">pScore</span><span style="color:#89DDFF">}`</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">answer</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
 <span data-line=""><span style="color:#BABED8">  rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">close</span><span style="color:#F07178">()</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20GameJam&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20GameJam&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195693.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195693.html
index e0b899ce..84b33227 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195693.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195693.html
@@ -80,4 +80,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""> </span>
 <span data-line=""><span style="color:#BABED8">rl</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">on</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">close</span><span style="color:#89DDFF">'</span><span style="color:#89DDFF">,</span><span style="color:#89DDFF"> ()</span><span style="color:#C792EA"> =&gt;</span><span style="color:#89DDFF"> {</span></span>
 <span data-line=""><span style="color:#676E95;font-style:italic">  // console.log("Hello Goorm! Your input is " + input);</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-완전-탐색" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. 완전 탐색</li><li data-id="2-dp" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. DP</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%ED%86%B5%EC%A6%9D2&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-완전-탐색" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. 완전 탐색</li><li data-id="2-dp" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. DP</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%ED%86%B5%EC%A6%9D2&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195696.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195696.html
index d713b62c..daec7284 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195696.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195696.html
@@ -78,4 +78,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#BABED8">    memo</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">push</span><span style="color:#F07178">(</span><span style="color:#BABED8">last</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span><span style="color:#676E95;font-style:italic"> // 메모에 마지막 노드를 추가한다.</span></span>
 <span data-line=""><span style="color:#89DDFF">  }</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#89DDFF">`${</span><span style="color:#BABED8">memo</span><span style="color:#89DDFF">.</span><span style="color:#BABED8">length</span><span style="color:#89DDFF">}</span><span style="color:#89DDFF"> ${</span><span style="color:#BABED8">last</span><span style="color:#89DDFF">}`</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9E%91%EC%9D%80%20%EB%85%B8%EB%93%9C&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%9E%91%EC%9D%80%20%EB%85%B8%EB%93%9C&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195698.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195698.html
index 9be944ac..ff23c170 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195698.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/goorm-195698.html
@@ -144,4 +144,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#676E95;font-style:italic">  // Set의 size는 중복되지 않는 각 노드의 부모(집합)이므로</span></span>
 <span data-line=""><span style="color:#676E95;font-style:italic">  // 연합(집합)의 개수가 된다.</span></span>
 <span data-line=""><span style="color:#BABED8">  console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#F07178">(</span><span style="color:#BABED8">answer</span><span style="color:#89DDFF">.</span><span style="color:#BABED8">size</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="bfs로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">BFS로 집합 구성하기</li><li data-id="union-find로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Union-Find로 집합 구성하기</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%97%B0%ED%95%A9&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">}</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법</li><li><ul class="ml-2.5 last:mb-2"><li data-id="bfs로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">BFS로 집합 구성하기</li><li data-id="union-find로-집합-구성하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Union-Find로 집합 구성하기</li></ul></li><li data-id="정리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">정리</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5B%EA%B5%AC%EB%A6%84%ED%86%A4%20%EC%B1%8C%EB%A6%B0%EC%A7%80%5D%20%EC%97%B0%ED%95%A9&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/implicit-coercion.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/implicit-coercion.html
index c7844bcc..e3bc887e 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/implicit-coercion.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/implicit-coercion.html
@@ -234,4 +234,4 @@ <h3 id="ref" data-heading="true"><a data-heading="true" href="#ref"><span class=
 <li><a class="underline-highlight-fade" target="_blank" href="https://blog.naver.com/sbshw1/221236403574" rel="noreferrer noopener">추상 명령 코드</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.javascript.info/object-toprimitive" rel="noreferrer noopener">객체를 원시형으로 변환하기</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-object-object-%EA%B0%80-%EB%8C%80%EC%B2%B4-%EB%AD%98%EA%B9%8C-fe55b754e709" rel="noreferrer noopener">"[object Object]"</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">TL;DR!</li><li><ul class="ml-2.5 last:mb-2"><li data-id="들어가기-전에" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">들어가기 전에</li><li data-id="암묵적-형변환은-언제-일어나나요" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">암묵적 형변환은 언제 일어나나요?</li><li data-id="동치연산자-한짤로-보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">동치연산자 한짤로 보기</li></ul></li><li data-id="toprimitive-는-동치연산-뿐만-아니라-원시값과-비교가-필요한-모든-순간에-동작한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ToPrimitive 는 동치연산 뿐만 아니라 원시값과 비교가 필요한 모든 순간에 동작한다</li><li><ul class="ml-2.5 last:mb-2"><li data-id="예제로-정리하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">예제로 정리하기</li><li data-id="한발-더-나아가기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한발 더 나아가기</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li><li data-id="ref" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Ref</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%95%8C%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%95%94%EB%AC%B5%EC%A0%81%20%ED%98%95%EB%B3%80%ED%99%98%20%EB%A7%90%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">TL;DR!</li><li><ul class="ml-2.5 last:mb-2"><li data-id="들어가기-전에" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">들어가기 전에</li><li data-id="암묵적-형변환은-언제-일어나나요" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">암묵적 형변환은 언제 일어나나요?</li><li data-id="동치연산자-한짤로-보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">동치연산자 한짤로 보기</li></ul></li><li data-id="toprimitive-는-동치연산-뿐만-아니라-원시값과-비교가-필요한-모든-순간에-동작한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ToPrimitive 는 동치연산 뿐만 아니라 원시값과 비교가 필요한 모든 순간에 동작한다</li><li><ul class="ml-2.5 last:mb-2"><li data-id="예제로-정리하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">예제로 정리하기</li><li data-id="한발-더-나아가기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한발 더 나아가기</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li><li data-id="ref" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Ref</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%95%8C%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%95%94%EB%AC%B5%EC%A0%81%20%ED%98%95%EB%B3%80%ED%99%98%20%EB%A7%90%EB%9E%91%EB%A7%90%EB%9E%91%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/inflearn-meetup-03-dev-career.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/inflearn-meetup-03-dev-career.html
index 6e32e461..499ea97a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/inflearn-meetup-03-dev-career.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/inflearn-meetup-03-dev-career.html
@@ -89,4 +89,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p><u>커리어를 긴 호흡으로</u> 바라보라는 점에 동의하고 있다. 나는 너무 조급한 게 아닐까?</p>
 <p>조금 더 적극적으로 삶을 가꾸고 나를 사랑해야겠다.</p>
 <p>오랜만의 개발자 모임에서 에너지를 많이 받았다. 앞으로도 종종 찾아다녀야겠다.</p>
-<p>Love yourself.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="소개" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">소개</li><li data-id="행사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">행사</li><li><ul class="ml-2.5 last:mb-2"><li data-id="커리어를-바라보는-관점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커리어를 바라보는 관점</li><li data-id="개발자로서-생각해-보면-좋을-10가지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발자로서 생각해 보면 좋을 10가지</li><li data-id="qa" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Q&amp;A</li><li data-id="네트워킹" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">네트워킹</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9D%B8%ED%94%84%EB%9F%B0%20%ED%8C%90%EA%B5%90%20%ED%87%B4%EA%B7%BC%EA%B8%B8%20%EB%B0%8B%EC%97%85%20-%20%EA%B0%9C%EB%B0%9C%EC%9E%90%20%EC%BB%A4%EB%A6%AC%EC%96%B4%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>Love yourself.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="소개" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">소개</li><li data-id="행사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">행사</li><li><ul class="ml-2.5 last:mb-2"><li data-id="커리어를-바라보는-관점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커리어를 바라보는 관점</li><li data-id="개발자로서-생각해-보면-좋을-10가지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발자로서 생각해 보면 좋을 10가지</li><li data-id="qa" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Q&amp;A</li><li data-id="네트워킹" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">네트워킹</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9D%B8%ED%94%84%EB%9F%B0%20%ED%8C%90%EA%B5%90%20%ED%87%B4%EA%B7%BC%EA%B8%B8%20%EB%B0%8B%EC%97%85%20-%20%EA%B0%9C%EB%B0%9C%EC%9E%90%20%EC%BB%A4%EB%A6%AC%EC%96%B4%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/jeju-remote-work.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/jeju-remote-work.html
index e91cdf10..9998e094 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/jeju-remote-work.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/jeju-remote-work.html
@@ -56,4 +56,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li>워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼 수 있게 되었다.</li>
 </ul>
 <p>이제 다시 평범한 일상으로 돌아가게 되겠지만 새로운 환경이 필요하다고 생각하면 주저 없이 워케이션을 선택할 것 같다.</p>
-<p>좋은 경험이었다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="첫-일주일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 일주일</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%A0%9C%EC%A3%BC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>좋은 경험이었다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="시작-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시작 계기</li><li data-id="첫-일주일" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 일주일</li><li data-id="벌써-마지막-주" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">벌써 마지막 주</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%A0%9C%EC%A3%BC%20%ED%95%9C%20%EB%8B%AC%20%EB%A6%AC%EB%AA%A8%ED%8A%B8%20%EC%9B%8C%ED%81%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/junction2023.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/junction2023.html
index 333a6110..3826c6bd 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/junction2023.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/junction2023.html
@@ -55,4 +55,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p>오랜만에 밤새면서 빠르게 작업하니까 재밌었다. 긴 재택근무 간에 떨어진 열정을 다시 채운 느낌이었다.</p>
 <p>기회가 된다면 계속 꾸준히 해커톤에 참여하고 싶다.</p>
 <p>아참 침낭이랑 후드 챙겨갔는데 이거 없었으면 진짜 고통스러울 뻔했다. 진짜 에어컨이 계속 나오기 때문에 너무 추웠다.</p>
-<p>좋은 경험이었다. 그럼, 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="지원-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">지원 과정</li><li data-id="부산-도착" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">부산 도착</li><li data-id="첫날-아이데이션" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫날: 아이데이션</li><li data-id="둘째-날-개발" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">둘째 날: 개발</li><li data-id="셋째-날-발표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">셋째 날: 발표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Junction%20Asia%202023%20%EC%B0%B8%EC%97%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>좋은 경험이었다. 그럼, 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="지원-과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">지원 과정</li><li data-id="부산-도착" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">부산 도착</li><li data-id="첫날-아이데이션" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫날: 아이데이션</li><li data-id="둘째-날-개발" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">둘째 날: 개발</li><li data-id="셋째-날-발표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">셋째 날: 발표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Junction%20Asia%202023%20%EC%B0%B8%EC%97%AC%20%ED%9B%84%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-easy-2727.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-easy-2727.html
index ee345485..bba541c5 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-easy-2727.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-easy-2727.html
@@ -63,4 +63,4 @@ <h3 id="결론" data-heading="true"><a data-heading="true" href="#결론"><span
 <span data-line=""><span style="color:#BABED8">console</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">log</span><span style="color:#BABED8">(Object</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">keys</span><span style="color:#BABED8">(m))</span><span style="color:#89DDFF">;</span><span style="color:#676E95;font-style:italic"> // []</span></span></code></pre></figure>
 <p><code>for...in</code> 루프는 객체의 모든 열거 가능한 속성에 대해 반복하며 문자열 키 값을 반환한다. 추가로 인덱스의 순서를 보장하지 않는다.</p>
 <p><code>for...of</code> 구문은 컬렉션 전용이다. 모든 객체보다는, [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복하며 컬렉션을 반환한다.</p>
-<p><code>keys</code>는 해당 키를 가져오지만, 상속된 값은 가져오지 않는다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="-for-in과-for-of의-차이가-무엇일까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">++ for-in과 for-of의 차이가 무엇일까?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="forin" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for...in</li><li data-id="forof" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for..of</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%202727.%20Is%20Object%20Empty&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p><code>keys</code>는 해당 키를 가져오지만, 상속된 값은 가져오지 않는다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="-for-in과-for-of의-차이가-무엇일까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">++ for-in과 for-of의 차이가 무엇일까?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="forin" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for...in</li><li data-id="forof" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">for..of</li><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%202727.%20Is%20Object%20Empty&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-hard-42.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-hard-42.html
index 6e35fe79..89d2e7b8 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-hard-42.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-hard-42.html
@@ -84,4 +84,4 @@ <h2 id="최종-코드" data-heading="true"><a data-heading="true" href="#최종-
 <span data-line=""><span style="color:#89DDFF">  }</span></span>
 <span data-line=""> </span>
 <span data-line=""><span style="color:#89DDFF;font-style:italic">  return</span><span style="color:#BABED8"> res</span><span style="color:#89DDFF">;</span></span>
-<span data-line=""><span style="color:#89DDFF">};</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법-1-stack-on-tn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 1. Stack O(n) T(n)</li><li data-id="접근법-2-two-pointers-on-t1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 2. Two Pointers O(n) T(1)</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%2042.%20Trapping%20Rain%20Water&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<span data-line=""><span style="color:#89DDFF">};</span></span></code></pre></figure></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="접근법-1-stack-on-tn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 1. Stack O(n) T(n)</li><li data-id="접근법-2-two-pointers-on-t1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">접근법 2. Two Pointers O(n) T(1)</li><li data-id="최종-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">최종 코드</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%2042.%20Trapping%20Rain%20Water&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-medium-238.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-medium-238.html
index 378a3f3d..371d0f5b 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-medium-238.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/leetcode-medium-238.html
@@ -102,4 +102,4 @@ <h2 id="implementationton-so1" data-heading="true"><a data-heading="true" href="
 <p>LeetCode에서 return 배열(answers)이 아닌 추가 배열을 사용하지 않는다는 것으로 O(1)으로 취급하고 있다.</p>
 </blockquote>
 <p>연속되는 곱셈의 합을 이용한 재밌는 문제였다.</p>
-<p>그럼 이만~</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="ideation" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ideation</li><li data-id="implementationton-son" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(n))</li><li data-id="implementationton-so1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(1))</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%20238.%20Product%20of%20Array%20Except%20Self&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만~</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="ideation" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ideation</li><li data-id="implementationton-son" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(n))</li><li data-id="implementationton-so1" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Implementation(T=O(n), S=O(1))</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BLeetCode%5D%20238.%20Product%20of%20Array%20Except%20Self&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/mac-init-apps.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/mac-init-apps.html
index b5f566dc..d70b9c76 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/mac-init-apps.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/mac-init-apps.html
@@ -238,4 +238,4 @@ <h2 id="hidden-bar" data-heading="true"><a data-heading="true" href="#hidden-bar
 </blockquote>
 <h2 id="digital-color-meter" data-heading="true"><a data-heading="true" href="#digital-color-meter"><span class="icon icon-link"></span></a>Digital Color Meter</h2>
 <p></p><div class="img-container"><div class="img-wrap"><img src="https://github.com/1ilsang/dev/assets/23524849/9955b395-4547-40c4-a4c8-daa7eed3a46a" alt="example"></div></div><p></p>
-<p>맥 자체 유용한 앱이다. CSS 작업을 하다 보면 스포이드가 필요한 순간이 있는데 유용하게 사용할 수 있다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="모아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">모아보기</li><li data-id="chrome" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Chrome</li><li data-id="homebrew" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Homebrew</li><li data-id="oh-my-zsh" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Oh My Zsh</li><li data-id="iterm2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Iterm2</li><li data-id="vscode" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">VSCode</li><li data-id="neovim" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NeoVim</li><li data-id="d2-coding" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">D2 Coding</li><li><ul class="ml-2.5 last:mb-2"><li data-id="iterm2에-d2coding을-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">iterm2에 d2coding을 기본 폰트로 적용하기</li><li data-id="vscode-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">VSCode 기본 폰트로 적용하기</li></ul></li><li data-id="nodejs" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Node.js</li><li data-id="nvm" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NVM</li><li data-id="docker" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Docker</li><li data-id="giphy-capture" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">GIPHY Capture</li><li data-id="deepl" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">DeepL</li><li data-id="screenhint" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenHint</li><li data-id="quick-notes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Quick Notes</li><li data-id="calculator-pro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Calculator Pro</li><li data-id="올ㅋ사전" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올ㅋ사전</li><li data-id="codewhisperer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CodeWhisperer</li><li data-id="flycut" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Flycut</li><li data-id="screenbrush" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenBrush</li><li data-id="keycastr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keycastr</li><li data-id="ngrok" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ngrok</li><li data-id="hidden-bar" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Hidden bar</li><li data-id="digital-color-meter" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Digital Color Meter</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9B%B9%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC%20%EC%9C%84%ED%95%9C%20%EB%8F%84%EA%B5%AC%20%EC%B6%94%EC%B2%9C%20-%20%EC%9C%A0%EC%9A%A9%ED%95%9C%20Mac%20%EC%95%B1%EB%93%A4&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>맥 자체 유용한 앱이다. CSS 작업을 하다 보면 스포이드가 필요한 순간이 있는데 유용하게 사용할 수 있다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="모아보기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">모아보기</li><li data-id="chrome" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Chrome</li><li data-id="homebrew" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Homebrew</li><li data-id="oh-my-zsh" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Oh My Zsh</li><li data-id="iterm2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Iterm2</li><li data-id="vscode" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">VSCode</li><li data-id="neovim" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NeoVim</li><li data-id="d2-coding" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">D2 Coding</li><li><ul class="ml-2.5 last:mb-2"><li data-id="iterm2에-d2coding을-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">iterm2에 d2coding을 기본 폰트로 적용하기</li><li data-id="vscode-기본-폰트로-적용하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">VSCode 기본 폰트로 적용하기</li></ul></li><li data-id="nodejs" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Node.js</li><li data-id="nvm" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">NVM</li><li data-id="docker" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Docker</li><li data-id="giphy-capture" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">GIPHY Capture</li><li data-id="deepl" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">DeepL</li><li data-id="screenhint" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenHint</li><li data-id="quick-notes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Quick Notes</li><li data-id="calculator-pro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Calculator Pro</li><li data-id="올ㅋ사전" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올ㅋ사전</li><li data-id="codewhisperer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CodeWhisperer</li><li data-id="flycut" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Flycut</li><li data-id="screenbrush" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ScreenBrush</li><li data-id="keycastr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Keycastr</li><li data-id="ngrok" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Ngrok</li><li data-id="hidden-bar" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Hidden bar</li><li data-id="digital-color-meter" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Digital Color Meter</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9B%B9%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC%20%EC%9C%84%ED%95%9C%20%EB%8F%84%EA%B5%AC%20%EC%B6%94%EC%B2%9C%20-%20%EC%9C%A0%EC%9A%A9%ED%95%9C%20Mac%20%EC%95%B1%EB%93%A4&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/mdn-ko-organizer.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/mdn-ko-organizer.html
index 15f460d0..6cd86fd1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/mdn-ko-organizer.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/mdn-ko-organizer.html
@@ -78,4 +78,4 @@ <h2 id="올해-목표" data-heading="true"><a data-heading="true" href="#올해-
 <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리"><span class="icon icon-link"></span></a>마무리</h2>
 <p>번역은 오픈소스 입문의 좋은 시작점이라 생각한다.</p>
 <p>그렇기 때문에 리뷰어로서 사명감을 느끼고 있다. 오픈소스를 시작하려는 분들이 꾸준히 기여하고 생태계를 끌어 나갈 인재로 성장할 수 있도록 좋은 경험을 주고 싶다.</p>
-<p>MDN 문서 번역에 관심이 생겼다면 <a class="underline-highlight-fade" target="_blank" href="https://github.com/mdn/translated-content/blob/main/docs/ko/README.md" rel="noreferrer noopener">첫 기여자들을 위한 안내서</a>를 참고해 주시길 바란다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="mdn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDN?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="임무" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">임무</li><li data-id="역사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">역사</li></ul></li><li data-id="합류-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 여정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="문서화에-대한-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">문서화에 대한 관심</li><li data-id="사내-오픈소스-스프린트-참여" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사내 오픈소스 스프린트 참여</li><li data-id="온보딩-과정-진행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">온보딩 과정 진행</li></ul></li><li data-id="합류-후" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 후</li><li><ul class="ml-2.5 last:mb-2"><li data-id="정기-회의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정기 회의</li><li data-id="공개-논의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">공개 논의</li><li data-id="리뷰어-활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리뷰어 활동</li></ul></li><li data-id="올해-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올해 목표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] @mdn/yari-content-ko%20Organizer%20%ED%95%A9%EB%A5%98%20%EC%97%AC%EC%A0%95&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>MDN 문서 번역에 관심이 생겼다면 <a class="underline-highlight-fade" target="_blank" href="https://github.com/mdn/translated-content/blob/main/docs/ko/README.md" rel="noreferrer noopener">첫 기여자들을 위한 안내서</a>를 참고해 주시길 바란다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="mdn" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDN?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="임무" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">임무</li><li data-id="역사" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">역사</li></ul></li><li data-id="합류-여정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 여정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="문서화에-대한-관심" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">문서화에 대한 관심</li><li data-id="사내-오픈소스-스프린트-참여" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사내 오픈소스 스프린트 참여</li><li data-id="온보딩-과정-진행" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">온보딩 과정 진행</li></ul></li><li data-id="합류-후" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합류 후</li><li><ul class="ml-2.5 last:mb-2"><li data-id="정기-회의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정기 회의</li><li data-id="공개-논의" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">공개 논의</li><li data-id="리뷰어-활동" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리뷰어 활동</li></ul></li><li data-id="올해-목표" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">올해 목표</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] @mdn/yari-content-ko%20Organizer%20%ED%95%A9%EB%A5%98%20%EC%97%AC%EC%A0%95&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/micro-state-management-review.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/micro-state-management-review.html
index 57f78bff..02df2c78 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/micro-state-management-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/micro-state-management-review.html
@@ -168,4 +168,4 @@ <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며">
 <p>기본적으로 React를 어느정도 이해하고 있는 개발자를 대상으로 작성된 책이지만 코드 자체가 어렵진 않아서 초심자도 읽어볼 만하다고 생각한다.</p>
 <p>책을 읽으면서 상태 관리에 대해 시야가 넓어질 수 있었다.</p>
 <p>다음 월간 다이브에는 "상태"를 주제로 해보려고 한다. 책을 통해 배운 것들을 잘 풀어보고 싶다.</p>
-<p>상태 관리의 종류와 기법들에 대해 이해하고 싶다면 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-react-state에-대한-이해" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. React State에 대한 이해</li><li data-id="2-usestate-vs-usereducer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. useState vs useReducer</li><li data-id="3-contextapi-vs-import" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">3. ContextAPI vs Import</li><li data-id="4-zustand-vs-jotai-vs-valtio" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">4. Zustand vs Jotai vs Valtio</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Micro%20State%20Management%20with%20React%20Hooks%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>상태 관리의 종류와 기법들에 대해 이해하고 싶다면 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="1-react-state에-대한-이해" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1. React State에 대한 이해</li><li data-id="2-usestate-vs-usereducer" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">2. useState vs useReducer</li><li data-id="3-contextapi-vs-import" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">3. ContextAPI vs Import</li><li data-id="4-zustand-vs-jotai-vs-valtio" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">4. Zustand vs Jotai vs Valtio</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Micro%20State%20Management%20with%20React%20Hooks%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/prettier3.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/prettier3.html
index e3b7f2b3..51a3ef3d 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/prettier3.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/prettier3.html
@@ -216,4 +216,4 @@ <h3 id="svg-내부-script-린트-향상" data-heading="true"><a data-heading="tr
 <h2 id="reference" data-heading="true"><a data-heading="true" href="#reference"><span class="icon icon-link"></span></a>Reference</h2>
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://prettier.io/blog/2023/07/05/3.0.0.html" rel="noreferrer noopener">공식 블로그 글 보기</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="markdown" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Markdown</li><li><ul class="ml-2.5 last:mb-2"><li data-id="한국어-처리의-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한국어 처리의 향상</li><li data-id="인라인-코드-여백-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인라인 코드 여백 유지</li></ul></li><li data-id="javascript--typescript" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">JavaScript / TypeScript</li><li><ul class="ml-2.5 last:mb-2"><li data-id="trailing-comma" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">trailing-comma</li><li data-id="decorated-function-패턴-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Decorated function 패턴 지원</li><li data-id="누락된-await-괄호-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">누락된 await 괄호 추가</li><li data-id="커링과-화살표-함수간-괄호-일관성-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커링과 화살표 함수간 괄호 일관성 개선</li><li data-id="import-attributes를-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Import Attributes를 지원</li><li data-id="주석이-있는-경우-유니온-타입의-개행이-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">주석이 있는 경우 유니온 타입의 개행이 유지</li><li data-id="extends-줄바꿈-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">extends 줄바꿈 개선</li></ul></li><li data-id="html" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">HTML</li><li><ul class="ml-2.5 last:mb-2"><li data-id="svg-내부-script-린트-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SVG 내부 script 린트 향상</li></ul></li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Prettier%20v3%20%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="markdown" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Markdown</li><li><ul class="ml-2.5 last:mb-2"><li data-id="한국어-처리의-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">한국어 처리의 향상</li><li data-id="인라인-코드-여백-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인라인 코드 여백 유지</li></ul></li><li data-id="javascript--typescript" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">JavaScript / TypeScript</li><li><ul class="ml-2.5 last:mb-2"><li data-id="trailing-comma" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">trailing-comma</li><li data-id="decorated-function-패턴-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Decorated function 패턴 지원</li><li data-id="누락된-await-괄호-추가" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">누락된 await 괄호 추가</li><li data-id="커링과-화살표-함수간-괄호-일관성-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">커링과 화살표 함수간 괄호 일관성 개선</li><li data-id="import-attributes를-지원" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Import Attributes를 지원</li><li data-id="주석이-있는-경우-유니온-타입의-개행이-유지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">주석이 있는 경우 유니온 타입의 개행이 유지</li><li data-id="extends-줄바꿈-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">extends 줄바꿈 개선</li></ul></li><li data-id="html" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">HTML</li><li><ul class="ml-2.5 last:mb-2"><li data-id="svg-내부-script-린트-향상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">SVG 내부 script 린트 향상</li></ul></li><li data-id="reference" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Reference</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Prettier%20v3%20%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/proving-ground-review.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/proving-ground-review.html
index 17b68bd8..e089cad0 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/proving-ground-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/proving-ground-review.html
@@ -24,4 +24,4 @@ <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며">
 <p>책의 한 문장을 뽑으라면 역시 나는 최초의 프로그래머를 선언하는 부분을 가져오고 싶다.</p>
 <p><i>이 과정에서 프로그래머라는 직업이 탄생했다. 문제를 가진 사람과 컴퓨터를 연결해 문제를 해결하도록 돕는 역할을 하는 사람이 등장한 것이다. 여섯 여성은 현대 컴퓨터 분야 최초의 직업 프로그래머였다. -289p</i></p>
 <p>우리는 영웅의 그림자에 가려진 또 다른 영웅들을 발굴하고 기억해야 한다고 느꼈다.</p>
-<p>흥미롭게 읽은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="첫-인상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 인상</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%82%AC%EB%9D%BC%EC%A7%84%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%93%A4%22%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>흥미롭게 읽은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="첫-인상" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">첫 인상</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%82%AC%EB%9D%BC%EC%A7%84%20%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%93%A4%22%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/quality-of-job-review.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/quality-of-job-review.html
index c585b004..2a8318d6 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/quality-of-job-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/quality-of-job-review.html
@@ -105,4 +105,4 @@ <h3 id="인간관계와-우연이-삶에-미치는-영향328p" data-heading="tru
 <p>그렇지만 운도 준비된 자가 잡을 수 있다는 말이 있듯 행운이 다가올 때 잡을 수 있도록 늘 준비해야 한다고 생각한다.</p>
 <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며"><span class="icon icon-link"></span></a>맺으며</h2>
 <p>위 격언들을 한 번씩 되돌아보며 더욱 성장한 나. 성공한 삶을 살아갈 수 있도록 노력해야겠다.</p>
-<p>그럼 이만</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="성장하는-나" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성장하는 나</li><li><ul class="ml-2.5 last:mb-2"><li data-id="안타를-맞는다는-것은-스트라이크를-던질-수-있다는-의미이다97p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">안타를 맞는다는 것은 스트라이크를 던질 수 있다는 의미이다(97p)</li><li data-id="즐긴다는-말의-허상128p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">'즐긴다'는 말의 허상(128p)</li><li data-id="자신이-전문가라면-더-말해야-한다147p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자신이 전문가라면 더 말해야 한다(147p)</li><li data-id="당신의-재능이-최고의-재산이다153p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">당신의 재능이 최고의 재산이다(153p)</li></ul></li><li data-id="성공하는-조직" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성공하는 조직</li><li><ul class="ml-2.5 last:mb-2"><li data-id="리더는-체스-플레이어가-아니라-정원사다164p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 체스 플레이어가 아니라 정원사다(164p)</li><li data-id="상사에게-직언을-어떻게-해야-하나187p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상사에게 직언을 어떻게 해야 하나?(187p)</li><li data-id="비효율의-숙달화224p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">비효율의 숙달화(224p)</li><li data-id="좋은-회사란-무엇인가225p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">좋은 회사란 무엇인가?(225p)</li><li data-id="유능한-직원을-무능하게-만드는-간단한-방법233p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">유능한 직원을 무능하게 만드는 간단한 방법(233p)</li><li data-id="내가-말하지-않으면-리더도-나를-잘-모른다235p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 말하지 않으면 리더도 나를 잘 모른다(235p)</li><li data-id="리더는-직원과-어느-정도-개인적-유대를-맺어야-할까246p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 직원과 어느 정도 개인적 유대를 맺어야 할까?(246p)</li><li data-id="상대가-진짜-똑똑한지-허풍인지-구별하는-방법259p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상대가 진짜 똑똑한지 허풍인지 구별하는 방법(259p)</li></ul></li><li data-id="성숙한-삶" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성숙한 삶</li><li><ul class="ml-2.5 last:mb-2"><li data-id="과제의-분리275p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">과제의 분리(275p)</li><li data-id="더-많이-행동하면-더-행복해진다279p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">더 많이 행동하면 더 행복해진다(279p)</li><li data-id="그게-다다285p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">그게 다다(285p)</li><li data-id="내가-나를-좌절시키는-것이다291p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 나를 좌절시키는 것이다(291p)</li><li data-id="자랑할-것-자부심을-가질-것이-무엇인가307p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자랑할 것, 자부심을 가질 것이 무엇인가?(307p)</li><li data-id="억누르지-말고-관점을-재해석-하라324p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">억누르지 말고 관점을 재해석 하라(324p)</li><li data-id="인간관계와-우연이-삶에-미치는-영향328p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인간관계와 우연이 삶에 미치는 영향(328p)</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%9D%BC%EC%9D%98%20%EA%B2%A9%22%EC%9D%84%20%EC%9D%BD%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="성장하는-나" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성장하는 나</li><li><ul class="ml-2.5 last:mb-2"><li data-id="안타를-맞는다는-것은-스트라이크를-던질-수-있다는-의미이다97p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">안타를 맞는다는 것은 스트라이크를 던질 수 있다는 의미이다(97p)</li><li data-id="즐긴다는-말의-허상128p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">'즐긴다'는 말의 허상(128p)</li><li data-id="자신이-전문가라면-더-말해야-한다147p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자신이 전문가라면 더 말해야 한다(147p)</li><li data-id="당신의-재능이-최고의-재산이다153p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">당신의 재능이 최고의 재산이다(153p)</li></ul></li><li data-id="성공하는-조직" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성공하는 조직</li><li><ul class="ml-2.5 last:mb-2"><li data-id="리더는-체스-플레이어가-아니라-정원사다164p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 체스 플레이어가 아니라 정원사다(164p)</li><li data-id="상사에게-직언을-어떻게-해야-하나187p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상사에게 직언을 어떻게 해야 하나?(187p)</li><li data-id="비효율의-숙달화224p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">비효율의 숙달화(224p)</li><li data-id="좋은-회사란-무엇인가225p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">좋은 회사란 무엇인가?(225p)</li><li data-id="유능한-직원을-무능하게-만드는-간단한-방법233p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">유능한 직원을 무능하게 만드는 간단한 방법(233p)</li><li data-id="내가-말하지-않으면-리더도-나를-잘-모른다235p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 말하지 않으면 리더도 나를 잘 모른다(235p)</li><li data-id="리더는-직원과-어느-정도-개인적-유대를-맺어야-할까246p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">리더는 직원과 어느 정도 개인적 유대를 맺어야 할까?(246p)</li><li data-id="상대가-진짜-똑똑한지-허풍인지-구별하는-방법259p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">상대가 진짜 똑똑한지 허풍인지 구별하는 방법(259p)</li></ul></li><li data-id="성숙한-삶" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성숙한 삶</li><li><ul class="ml-2.5 last:mb-2"><li data-id="과제의-분리275p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">과제의 분리(275p)</li><li data-id="더-많이-행동하면-더-행복해진다279p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">더 많이 행동하면 더 행복해진다(279p)</li><li data-id="그게-다다285p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">그게 다다(285p)</li><li data-id="내가-나를-좌절시키는-것이다291p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">내가 나를 좌절시키는 것이다(291p)</li><li data-id="자랑할-것-자부심을-가질-것이-무엇인가307p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">자랑할 것, 자부심을 가질 것이 무엇인가?(307p)</li><li data-id="억누르지-말고-관점을-재해석-하라324p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">억누르지 말고 관점을 재해석 하라(324p)</li><li data-id="인간관계와-우연이-삶에-미치는-영향328p" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">인간관계와 우연이 삶에 미치는 영향(328p)</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %22%EC%9D%BC%EC%9D%98%20%EA%B2%A9%22%EC%9D%84%20%EC%9D%BD%EA%B3%A0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/renovate.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/renovate.html
index 9f728b35..0e4df306 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/renovate.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/renovate.html
@@ -110,4 +110,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <p>그렇기 때문에 정말 특정한 이슈가 없는 이상 버전 올릴 생각을 잘 하지 않게 되었고, 그 결과 수많은 Breaking change를 만나며 고생했던 기억이 있다.</p>
 <p>무엇보다 "<strong>사용하고 있는 라이브러리의 최신 근황</strong>"에 대해 궁금해 하지 않았던 점도 한몫 했다.</p>
 <p>이제, Renovate가 제공해주는 지속되는 PR을 통해 놓치지 않고 새로운 버전을 쫓아갈 수 있을거라 생각하고 있다. 또한 changeLog 및 sourceCompare를 통해 각 라이브러리의 근황도 자연스럽게 알게 될거라 기대하고 있다.</p>
-<p>그럼 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="intro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">INTRO</li><li data-id="renovate란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate란?</li><li data-id="renovate의-장점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate의 장점</li><li data-id="적용-방법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">적용 방법</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Renovate%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>그럼 이만!</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="intro" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">INTRO</li><li data-id="renovate란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate란?</li><li data-id="renovate의-장점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Renovate의 장점</li><li data-id="적용-방법" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">적용 방법</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Renovate%20%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/storybook7.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/storybook7.html
index de6313da..69de2491 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/storybook7.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/storybook7.html
@@ -141,4 +141,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://storybook.js.org/blog/storybook-7-0/" rel="noreferrer noopener">https://storybook.js.org/blog/storybook-7-0/</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://storybook.js.org/blog/storybook-7-docs/" rel="noreferrer noopener">https://storybook.js.org/blog/storybook-7-docs/</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="사전-번들-제공" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사전 번들 제공</li><li data-id="csf-v3" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CSF v3</li><li data-id="mdx-v2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDX v2</li><li data-id="그-외" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그 외</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Storybook%207.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="사전-번들-제공" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">사전 번들 제공</li><li data-id="csf-v3" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">CSF v3</li><li data-id="mdx-v2" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">MDX v2</li><li data-id="그-외" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그 외</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Storybook%207.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/turborepo.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/turborepo.html
index 10c35537..edfccfeb 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/turborepo.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/turborepo.html
@@ -1,3 +1,3 @@
 <progress class="[&amp;::-webkit-progress-bar]:bg-sub-blue fixed top-0 left-0 z-10 w-full h-[3px] appearance-none [&amp;::-webkit-progress-value]:bg-base-og" value="0" max="1"></progress><nav class="fixed z-40 flex flex-wrap w-full justify-between justify-items-center hover:animate-rainbow-water hover:bg-nav hover:bg-[length:400%_400%] opacity-10	md:opacity-100 shadow-nav shadow-lg"><h2 class="tracking-tight mr-6 text-2xl	font-bold my-2 ml-3.5"><a class="hover:underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/posts">posts</a></h2><h2 class="tracking-tight mr-6 text-xl mt-2.5"><a class="hover:underline" href="/tags">tags</a></h2><div class="mr-2 w-8 h-8 mt-2" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-white-blue" src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 md:py-28 mx-4 min-[790px]:m-auto print:py-0"><h1 class="text-4xl md:text-6xl break-words">Turborepo로 모노레포 개발 경험 향상하기</h1><section class="flex items-center mt-4"><div class="mr-2 w-9	h-9 md:w-12 md:h-12" role="img" aria-label="1ilsang character"><a href="/about"><img class="border border-solid rounded-full border-sub-blue" src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="text-lg" href="/about">1ilsang</a><div class="text-sub-blue text-sm">클라이밍 하실래염?</div></div></section><section class="flex flex-wrap mt-2 items-end"><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/monorepo">#<!-- -->monorepo</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/turborepo">#<!-- -->turborepo</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/packageManager">#<!-- -->packageManager</a></section><section><div class="text-date-gray inline">Published <time datetime="2022-04-15 00:00">2022-04-15 00:00</time></div></section><section id="post-body-container" class="relative"><div class="markdown"><p></p><div class="img-container"><div class="img-wrap cover"><img src="https://github.com/1ilsang/dev/assets/23524849/b6999846-c0a3-4889-a4b6-6cf9bc21fa94" alt="cover"></div></div><p></p>
 <p>라인 엔지니어링 블로그에 <a class="underline-highlight-fade" target="_blank" href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/" rel="noreferrer noopener">작성한 글</a>이다.</p>
-<p>글쓰면서 정말 많이 배웠던것 같다. 모노레포와 함께할 때 캐싱기능은 너무 경험이 좋았기 때문에 앞으로도 꾸준히 사용해볼 예정이다.</p></div></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Turborepo%EB%A1%9C%20%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%20%EA%B0%9C%EB%B0%9C%20%EA%B2%BD%ED%97%98%20%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>글쓰면서 정말 많이 배웠던것 같다. 모노레포와 함께할 때 캐싱기능은 너무 경험이 좋았기 때문에 앞으로도 꾸준히 사용해볼 예정이다.</p></div></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Turborepo%EB%A1%9C%20%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%20%EA%B0%9C%EB%B0%9C%20%EA%B2%BD%ED%97%98%20%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript-subtyping.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript-subtyping.html
index 1149330c..5faca9a1 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript-subtyping.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript-subtyping.html
@@ -176,4 +176,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.mattstobbs.com/object-keys-typescript/" rel="noreferrer noopener">Why Object.keys Returns an Array of Strings in TypeScript (And How To Fix It)</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.yongdam.sh/blog/effective-typescript-structural-typing" rel="noreferrer noopener">타입스크립트의 구조적 타이핑</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208" rel="noreferrer noopener">Object.keys() types refinement, and Object.entries() types bugfix #12253</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="문제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">문제</li><li data-id="구조적-서브-타이핑이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">구조적 서브 타이핑이란</li><li data-id="해결" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">해결</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타입-가드를-통한-타입-좁히기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입 가드를 통한 타입 좁히기</li></ul></li><li data-id="one-more-thing" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ONE MORE THING</li><li><ul class="ml-2.5 last:mb-2"><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Object.keys()%EB%8A%94%20%EC%99%9C%20string%5B%5D%20%ED%83%80%EC%9E%85%EC%9D%BC%EA%B9%8C?&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="문제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">문제</li><li data-id="구조적-서브-타이핑이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">구조적 서브 타이핑이란</li><li data-id="해결" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">해결</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타입-가드를-통한-타입-좁히기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입 가드를 통한 타입 좁히기</li></ul></li><li data-id="one-more-thing" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">ONE MORE THING</li><li><ul class="ml-2.5 last:mb-2"><li data-id="결론" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">결론</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Object.keys()%EB%8A%94%20%EC%99%9C%20string%5B%5D%20%ED%83%80%EC%9E%85%EC%9D%BC%EA%B9%8C?&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript5.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript5.html
index 5647bc1f..254bc32b 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript5.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/typescript5.html
@@ -367,4 +367,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html" rel="noreferrer noopener">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.javascript.info/call-apply-decorators#ref-634" rel="noreferrer noopener">https://ko.javascript.info/call-apply-decorators#ref-634</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://2ality.com/2022/10/javascript-decorators.html" rel="noreferrer noopener">https://2ality.com/2022/10/javascript-decorators.html</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="decorators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Decorators</li><li><ul class="ml-2.5 last:mb-2"><li data-id="실험적-레거시-데코레이터와의-차이점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실험적 레거시 데코레이터와의 차이점</li></ul></li><li data-id="const-type-parameters" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">const Type Parameters</li><li data-id="supporting-multiple-configuration-files-in-extends" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Supporting Multiple Configuration Files in extends</li><li data-id="all-enums-are-union-enums" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">All enums Are Union enums</li><li data-id="--moduleresolution-bundler" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">--moduleResolution bundler</li><li data-id="support-for-export-type-" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Support for export type *</li><li data-id="overload-support-in-jsdoc" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">@overload Support in JSDoc</li><li data-id="speed-memory-and-package-size-optimizations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Speed, Memory, and Package Size Optimizations</li><li data-id="breaking-changes-and-deprecations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Breaking Changes and Deprecations</li><li><ul class="ml-2.5 last:mb-2"><li data-id="runtime-requirements" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Runtime Requirements</li><li data-id="libdts-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">lib.d.ts Changes</li><li data-id="api-breaking-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">API Breaking Changes</li><li data-id="forbidden-implicit-coercions-in-relational-operators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Forbidden Implicit Coercions in Relational Operators</li><li data-id="enum-overhaul" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Enum Overhaul</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] TypeScript%205.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="decorators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Decorators</li><li><ul class="ml-2.5 last:mb-2"><li data-id="실험적-레거시-데코레이터와의-차이점" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실험적 레거시 데코레이터와의 차이점</li></ul></li><li data-id="const-type-parameters" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">const Type Parameters</li><li data-id="supporting-multiple-configuration-files-in-extends" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Supporting Multiple Configuration Files in extends</li><li data-id="all-enums-are-union-enums" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">All enums Are Union enums</li><li data-id="--moduleresolution-bundler" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">--moduleResolution bundler</li><li data-id="support-for-export-type-" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Support for export type *</li><li data-id="overload-support-in-jsdoc" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">@overload Support in JSDoc</li><li data-id="speed-memory-and-package-size-optimizations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Speed, Memory, and Package Size Optimizations</li><li data-id="breaking-changes-and-deprecations" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Breaking Changes and Deprecations</li><li><ul class="ml-2.5 last:mb-2"><li data-id="runtime-requirements" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Runtime Requirements</li><li data-id="libdts-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">lib.d.ts Changes</li><li data-id="api-breaking-changes" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">API Breaking Changes</li><li data-id="forbidden-implicit-coercions-in-relational-operators" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Forbidden Implicit Coercions in Relational Operators</li><li data-id="enum-overhaul" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Enum Overhaul</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] TypeScript%205.0%20%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/udemy-rust-programming.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/udemy-rust-programming.html
index ed3d85f9..e4bdb06a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/udemy-rust-programming.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/udemy-rust-programming.html
@@ -36,4 +36,4 @@ <h2 id="마치며" data-heading="true"><a data-heading="true" href="#마치며">
 <p>가보자고!</p>
 <blockquote>
 <p>해당 콘텐츠는 유데미로부터 강의 쿠폰을 제공받아 작성되었습니다.</p>
-</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="수강-이유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수강 이유</li><li data-id="과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">과정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="러스또" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">러스또</li><li data-id="정리-및-공유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리 및 공유</li><li data-id="스터디" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">스터디</li></ul></li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%9F%AC%EC%8A%A4%ED%8A%B8%20%EC%8B%9C%EC%9E%91!%20-%20%EC%9C%A0%EB%8D%B0%EB%AF%B8%20Rust%20Programming%EB%A5%BC%20%EC%88%98%EA%B0%95%ED%95%98%EB%A9%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</blockquote></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="수강-이유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수강 이유</li><li data-id="과정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">과정</li><li><ul class="ml-2.5 last:mb-2"><li data-id="러스또" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">러스또</li><li data-id="정리-및-공유" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">정리 및 공유</li><li data-id="스터디" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">스터디</li></ul></li><li data-id="마치며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마치며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EB%9F%AC%EC%8A%A4%ED%8A%B8%20%EC%8B%9C%EC%9E%91!%20-%20%EC%9C%A0%EB%8D%B0%EB%AF%B8%20Rust%20Programming%EB%A5%BC%20%EC%88%98%EA%B0%95%ED%95%98%EB%A9%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/use-prevent-leave.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/use-prevent-leave.html
index 4201f838..ab99c74c 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/use-prevent-leave.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/use-prevent-leave.html
@@ -241,4 +241,4 @@ <h2 id="참고" data-heading="true"><a data-heading="true" href="#참고"><span
 <li><a class="underline-highlight-fade" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Security/User_activation" rel="noreferrer noopener">https://developer.mozilla.org/en-US/docs/Web/Security/User_activation</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://developer.chrome.com/blog/page-lifecycle-api/" rel="noreferrer noopener">https://developer.chrome.com/blog/page-lifecycle-api/</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://heyjiawei.com/block-user-from-leaving-page-on-single-page-app" rel="noreferrer noopener">https://heyjiawei.com/block-user-from-leaving-page-on-single-page-app</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="beforeunload로-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">beforeunload로 페이지 이탈 방지하기</li><li data-id="spa에서-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">SPA에서 페이지 이탈 방지하기</li><li data-id="합본-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합본 코드</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9D%B4%ED%83%88%EC%8B%9C%20%ED%99%95%EC%9D%B8%20%EC%BB%A8%ED%8E%8C%EC%B0%BD%20%EB%A7%8C%EB%93%A4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="beforeunload로-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">beforeunload로 페이지 이탈 방지하기</li><li data-id="spa에서-페이지-이탈-방지하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">SPA에서 페이지 이탈 방지하기</li><li data-id="합본-코드" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">합본 코드</li><li data-id="참고" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">참고</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9D%B4%ED%83%88%EC%8B%9C%20%ED%99%95%EC%9D%B8%20%EC%BB%A8%ED%8E%8C%EC%B0%BD%20%EB%A7%8C%EB%93%A4%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/use-transition.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/use-transition.html
index 6c7431ce..92ea1b79 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/use-transition.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/use-transition.html
@@ -200,4 +200,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li><code>transition</code> 표시된 setState는 다른 setState 업데이트시 중단된다.</li>
 <li><code>transition</code> 표시된 상태 업데이트는 <code>Suspense</code>로 컨텐츠를 숨기지 않고 이전 컨텐츠를 계속 표시한다.</li>
 <li>fiber 엔진을 통해 <code>transition</code>된 상태와 다른 상태의 스케줄링이 가능해졌다.</li>
-</ol></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="목차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">목차</li><li data-id="usetransition이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">useTransition이란?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="ispending-starttransition-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">isPending, startTransition 이해하기</li><li data-id="전체-코드로-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전체 코드로 이해하기</li></ul></li><li data-id="suspense와-연계하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Suspense와 연계하기</li><li data-id="그외-자잘한-팁들" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그외 자잘한 팁들</li><li><ul class="ml-2.5 last:mb-2"><li data-id="vs-throttle-debounce" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">vs throttle, debounce</li><li data-id="starttransition에-전달된-함수는-즉시-실행된다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">startTransition에 전달된 함수는 즉시 실행된다</li><li data-id="usedeferredvalue" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">useDeferredValue</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] useTransition%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ol></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="목차" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">목차</li><li data-id="usetransition이란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">useTransition이란?</li><li><ul class="ml-2.5 last:mb-2"><li data-id="ispending-starttransition-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">isPending, startTransition 이해하기</li><li data-id="전체-코드로-이해하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">전체 코드로 이해하기</li></ul></li><li data-id="suspense와-연계하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Suspense와 연계하기</li><li data-id="그외-자잘한-팁들" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">그외 자잘한 팁들</li><li><ul class="ml-2.5 last:mb-2"><li data-id="vs-throttle-debounce" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">vs throttle, debounce</li><li data-id="starttransition에-전달된-함수는-즉시-실행된다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">startTransition에 전달된 함수는 즉시 실행된다</li><li data-id="usedeferredvalue" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">useDeferredValue</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] useTransition%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/visual-regression-test.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/visual-regression-test.html
index 2dde1784..bf3bde54 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/visual-regression-test.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/visual-regression-test.html
@@ -378,4 +378,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <ul>
 <li><a class="underline-highlight-fade" target="_blank" href="https://techblog.woowahan.com/17081/" rel="noreferrer noopener">우아한형제들 디자인 시스템에 시각적 회귀 테스트 적용하기</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://tv.kakao.com/channel/3693125/cliplink/414129351" rel="noreferrer noopener">UI 테스트를 위한 여정</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="도입-배경" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">도입 배경</li><li data-id="시각적-회귀-테스트란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시각적 회귀 테스트란</li><li data-id="playwright" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Playwright</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dom-snapshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">DOM Snapshot</li><li data-id="screenshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Screenshot</li><li data-id="시각적-회귀-테스트는-다양한-이유로-실패할-수-있다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시각적 회귀 테스트는 다양한 이유로 실패할 수 있다</li></ul></li><li data-id="github-actions" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Github Actions</li><li data-id="성능-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성능 개선</li><li><ul class="ml-2.5 last:mb-2"><li data-id="테스트-방식" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 방식</li><li data-id="테스트-속도" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 속도</li><li data-id="cicd" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">CI/CD</li></ul></li><li data-id="트러블-슈팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">트러블 슈팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="로컬-테스트를-포기해야-할까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">로컬 테스트를 포기해야 할까</li><li data-id="timezone" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Timezone</li><li data-id="테스트-분기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 분기</li><li data-id="1px" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1px</li><li data-id="image-load" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Image load</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%8B%9C%EA%B0%81%EC%A0%81%20%ED%9A%8C%EA%B7%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8%20%EB%8F%84%EC%9E%85%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="도입-배경" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">도입 배경</li><li data-id="시각적-회귀-테스트란" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">시각적 회귀 테스트란</li><li data-id="playwright" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Playwright</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dom-snapshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">DOM Snapshot</li><li data-id="screenshot" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Screenshot</li><li data-id="시각적-회귀-테스트는-다양한-이유로-실패할-수-있다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">시각적 회귀 테스트는 다양한 이유로 실패할 수 있다</li></ul></li><li data-id="github-actions" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Github Actions</li><li data-id="성능-개선" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">성능 개선</li><li><ul class="ml-2.5 last:mb-2"><li data-id="테스트-방식" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 방식</li><li data-id="테스트-속도" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 속도</li><li data-id="cicd" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">CI/CD</li></ul></li><li data-id="트러블-슈팅" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">트러블 슈팅</li><li><ul class="ml-2.5 last:mb-2"><li data-id="로컬-테스트를-포기해야-할까" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">로컬 테스트를 포기해야 할까</li><li data-id="timezone" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Timezone</li><li data-id="테스트-분기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">테스트 분기</li><li data-id="1px" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">1px</li><li data-id="image-load" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Image load</li></ul></li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%8B%9C%EA%B0%81%EC%A0%81%20%ED%9A%8C%EA%B7%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8%20%EB%8F%84%EC%9E%85%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/vite-dev-server.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/vite-dev-server.html
index 4c3b2e6b..b2b69e44 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/vite-dev-server.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/vite-dev-server.html
@@ -482,4 +482,4 @@ <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리">
 <li><a class="underline-highlight-fade" target="_blank" href="https://webpack.kr/concepts/hot-module-replacement" rel="noreferrer noopener">https://webpack.kr/concepts/hot-module-replacement</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://ko.vitejs.dev/config/server-options.html" rel="noreferrer noopener">https://ko.vitejs.dev/config/server-options.html</a></li>
 <li><a class="underline-highlight-fade" target="_blank" href="https://github.com/vitejs/vite" rel="noreferrer noopener">https://github.com/vitejs/vite</a></li>
-</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="1-개발-서버-실행서버-초기화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">1. 개발 서버 실행(서버 초기화)</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dev-server는-아래와-같은-프로세스를-거치며-초기화를-진행한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Dev Server는 아래와 같은 프로세스를 거치며 초기화를 진행한다.</li></ul></li><li data-id="2-indexhtml-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2. index.html 요청</li><li data-id="3-indexhtml-렌더링과-자원-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">3. index.html 렌더링과 자원 요청</li><li data-id="4-렌더링-계속-진행with-websocket" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">4. 렌더링 계속 진행(with WebSocket)</li><li data-id="5-코드-변경-감지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">5. 코드 변경 감지</li><li data-id="6-브라우저-리렌더링" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">6. 브라우저 리렌더링</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Vite%20Dev%20Server%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0%20(feat.%20HMR)&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+</ul></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="tldr" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">TL;DR!</li><li data-id="1-개발-서버-실행서버-초기화" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">1. 개발 서버 실행(서버 초기화)</li><li><ul class="ml-2.5 last:mb-2"><li data-id="dev-server는-아래와-같은-프로세스를-거치며-초기화를-진행한다" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">Dev Server는 아래와 같은 프로세스를 거치며 초기화를 진행한다.</li></ul></li><li data-id="2-indexhtml-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">2. index.html 요청</li><li data-id="3-indexhtml-렌더링과-자원-요청" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">3. index.html 렌더링과 자원 요청</li><li data-id="4-렌더링-계속-진행with-websocket" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">4. 렌더링 계속 진행(with WebSocket)</li><li data-id="5-코드-변경-감지" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">5. 코드 변경 감지</li><li data-id="6-브라우저-리렌더링" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">6. 브라우저 리렌더링</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] Vite%20Dev%20Server%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0%20(feat.%20HMR)&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/dom.spec.ts/mobile/woowa-type-review.html b/e2e/__snapshots__/post/dom.spec.ts/mobile/woowa-type-review.html
index f3208edc..57c8d21a 100644
--- a/e2e/__snapshots__/post/dom.spec.ts/mobile/woowa-type-review.html
+++ b/e2e/__snapshots__/post/dom.spec.ts/mobile/woowa-type-review.html
@@ -115,4 +115,4 @@ <h3 id="실용적인-예제" data-heading="true"><a data-heading="true" href="#
 <h2 id="맺으며" data-heading="true"><a data-heading="true" href="#맺으며"><span class="icon icon-link"></span></a>맺으며</h2>
 <p>배민의 공유 문화는 본받을만하다고 생각한다.</p>
 <p>기술업계 특성상 비판적인 시선이 기본적으로 있기 때문에 외부 공개를 꺼릴 수도 있었겠지만, 기술에 대한 공유를 두려워하지 않고 책으로 펴낸 것에 리스펙하게 된다.</p>
-<p>여러 예제가 실제 코딩에 도움이 되기 때문에 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타-언어의-타입-시스템과-비교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타 언어의 타입 시스템과 비교</li><li data-id="타입에-대한-고찰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입에 대한 고찰</li><li data-id="개발팀과의-인터뷰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발팀과의 인터뷰</li><li data-id="친절한-설명" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">친절한 설명</li><li data-id="실용적인-예제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실용적인 예제</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9A%B0%EC%95%84%ED%95%9C%20%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20with%20%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-1.5 mb-56"><div>☕ 소주 한 잔 후원하기</div><sub>(예금주: 이상철)</sub><img class="w-20 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/toss-pay.webp" alt="toss"><img class="w-12 cursor-pointer object-contain hover:animate-bouncing" src="/images/logo/kakao-pay.webp" alt="kakao"></div></section>
\ No newline at end of file
+<p>여러 예제가 실제 코딩에 도움이 되기 때문에 추천하고 싶은 책이다.</p></div><aside class="absolute inline-block h-full top-0 left-full break-words max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="선택하게-된-계기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">선택하게 된 계기</li><li data-id="간단한-요약" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">간단한 요약</li><li data-id="인상-깊었던-부분" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">인상 깊었던 부분</li><li><ul class="ml-2.5 last:mb-2"><li data-id="타-언어의-타입-시스템과-비교" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타 언어의 타입 시스템과 비교</li><li data-id="타입에-대한-고찰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">타입에 대한 고찰</li><li data-id="개발팀과의-인터뷰" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">개발팀과의 인터뷰</li><li data-id="친절한-설명" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">친절한 설명</li><li data-id="실용적인-예제" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">실용적인 예제</li></ul></li><li data-id="맺으며" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">맺으며</li></ul></aside></section><a class="highlighter mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %EC%9A%B0%EC%95%84%ED%95%9C%20%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20with%20%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EB%A6%AC%EB%B7%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
\ No newline at end of file
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/2023.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/2023.png
index 53e5bce7..7b85c4a5 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/2023.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/2023.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/2024-01.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/2024-01.png
index 6c9cf3c3..8347c8fd 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/2024-01.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/2024-01.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/array-prototype-sort.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/array-prototype-sort.png
index 4a8ec89d..8529b5bc 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/array-prototype-sort.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/array-prototype-sort.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/bali-remote-work.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/bali-remote-work.png
index cf191114..49e69a06 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/bali-remote-work.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/bali-remote-work.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/deploy-eslint-plugin.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/deploy-eslint-plugin.png
index ef7aa67f..065352bc 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/deploy-eslint-plugin.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/deploy-eslint-plugin.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/geultto8-open-source-seminar.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/geultto8-open-source-seminar.png
index bf6b7d61..af290a52 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/geultto8-open-source-seminar.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/geultto8-open-source-seminar.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/google-adsense.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/google-adsense.png
index a93f9831..92fceeab 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/google-adsense.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/google-adsense.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195687.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195687.png
index 8c6abcab..f1f5e882 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195687.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195687.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195692.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195692.png
index 779aed79..fdcaae91 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195692.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195692.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195693.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195693.png
index 21ff7872..5d3f62aa 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195693.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195693.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195696.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195696.png
index 06aa1405..1b24f148 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195696.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195696.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195698.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195698.png
index ff8cbfe1..2b262ffb 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195698.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/goorm-195698.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/implicit-coercion.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/implicit-coercion.png
index 0b5a9748..8db773ba 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/implicit-coercion.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/implicit-coercion.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/inflearn-meetup-03-dev-career.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/inflearn-meetup-03-dev-career.png
index 0e98f0ce..5606c28f 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/inflearn-meetup-03-dev-career.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/inflearn-meetup-03-dev-career.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/jeju-remote-work.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/jeju-remote-work.png
index dd19c4b3..36c68daf 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/jeju-remote-work.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/jeju-remote-work.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/junction2023.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/junction2023.png
index 4f80cd73..6fae7330 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/junction2023.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/junction2023.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-easy-2727.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-easy-2727.png
index b8728280..cab2970b 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-easy-2727.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-easy-2727.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-hard-42.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-hard-42.png
index f6fe9811..73eb6fa4 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-hard-42.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-hard-42.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-medium-238.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-medium-238.png
index 82449ed7..7cf70d19 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-medium-238.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/leetcode-medium-238.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/mac-init-apps.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/mac-init-apps.png
index a14a02e6..fa9bffb5 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/mac-init-apps.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/mac-init-apps.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/mdn-ko-organizer.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/mdn-ko-organizer.png
index e8f93a05..8fe071ee 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/mdn-ko-organizer.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/mdn-ko-organizer.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/micro-state-management-review.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/micro-state-management-review.png
index 4e2d8069..94c79294 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/micro-state-management-review.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/micro-state-management-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/prettier3.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/prettier3.png
index 56ea5ff5..158875c1 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/prettier3.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/prettier3.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/proving-ground-review.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/proving-ground-review.png
index aab5b629..e117443c 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/proving-ground-review.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/proving-ground-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/quality-of-job-review.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/quality-of-job-review.png
index 06668a5c..6c5ff285 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/quality-of-job-review.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/quality-of-job-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/renovate.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/renovate.png
index 8e21608b..612ee814 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/renovate.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/renovate.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/storybook7.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/storybook7.png
index 47e382fd..6657a731 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/storybook7.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/storybook7.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/turborepo.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/turborepo.png
index 3c425263..06ed6625 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/turborepo.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/turborepo.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript-subtyping.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript-subtyping.png
index ca6bb461..8763c0e9 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript-subtyping.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript-subtyping.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript5.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript5.png
index f8a4be22..52e3337b 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript5.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/typescript5.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/udemy-rust-programming.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/udemy-rust-programming.png
index c3e92d18..3c72e6f2 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/udemy-rust-programming.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/udemy-rust-programming.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/use-prevent-leave.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/use-prevent-leave.png
index 2bb9981f..1c4076a4 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/use-prevent-leave.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/use-prevent-leave.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/use-transition.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/use-transition.png
index 525ff706..80d3bd6c 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/use-transition.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/use-transition.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/visual-regression-test.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/visual-regression-test.png
index 8294c88b..715faf85 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/visual-regression-test.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/visual-regression-test.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/vite-dev-server.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/vite-dev-server.png
index cdbfc337..2d8d8b5f 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/vite-dev-server.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/vite-dev-server.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/desktop/woowa-type-review.png b/e2e/__snapshots__/post/screen.spec.ts/desktop/woowa-type-review.png
index 3ae81e26..98cb6bbc 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/desktop/woowa-type-review.png and b/e2e/__snapshots__/post/screen.spec.ts/desktop/woowa-type-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/2023.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/2023.png
index 42f520f0..cd03f7d6 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/2023.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/2023.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/2024-01.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/2024-01.png
index e1b621bc..48bab56f 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/2024-01.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/2024-01.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/array-prototype-sort.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/array-prototype-sort.png
index 0bace2d0..3927c0a1 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/array-prototype-sort.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/array-prototype-sort.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/bali-remote-work.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/bali-remote-work.png
index 9ec1328c..4f6ec15e 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/bali-remote-work.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/bali-remote-work.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/deploy-eslint-plugin.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/deploy-eslint-plugin.png
index 9520a563..7b3d0ffe 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/deploy-eslint-plugin.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/deploy-eslint-plugin.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/geultto8-open-source-seminar.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/geultto8-open-source-seminar.png
index 04aa2b66..9040ee21 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/geultto8-open-source-seminar.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/geultto8-open-source-seminar.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/google-adsense.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/google-adsense.png
index 89958004..c8b7a347 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/google-adsense.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/google-adsense.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195687.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195687.png
index d1899ef7..05e56e12 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195687.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195687.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195692.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195692.png
index 64f2c38a..e33d7c90 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195692.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195692.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195693.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195693.png
index 0e0044b4..c3a12a68 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195693.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195693.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195696.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195696.png
index 6dc806c9..c9772549 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195696.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195696.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195698.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195698.png
index 2d873e10..b4b6b82c 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195698.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/goorm-195698.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/implicit-coercion.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/implicit-coercion.png
index e81f7b38..664351e4 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/implicit-coercion.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/implicit-coercion.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/inflearn-meetup-03-dev-career.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/inflearn-meetup-03-dev-career.png
index 68379f90..961c8c2b 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/inflearn-meetup-03-dev-career.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/inflearn-meetup-03-dev-career.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/jeju-remote-work.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/jeju-remote-work.png
index 992de1ba..dd9146f5 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/jeju-remote-work.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/jeju-remote-work.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/junction2023.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/junction2023.png
index 015b6243..c04051f4 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/junction2023.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/junction2023.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-easy-2727.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-easy-2727.png
index 6527a393..823a376c 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-easy-2727.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-easy-2727.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-hard-42.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-hard-42.png
index 7a303d91..0bb4da42 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-hard-42.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-hard-42.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-medium-238.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-medium-238.png
index c6c198ab..79adf9bc 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-medium-238.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/leetcode-medium-238.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/mac-init-apps.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/mac-init-apps.png
index 733043a0..e27633fd 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/mac-init-apps.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/mac-init-apps.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/mdn-ko-organizer.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/mdn-ko-organizer.png
index c28bbcc9..68d6b4d9 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/mdn-ko-organizer.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/mdn-ko-organizer.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/micro-state-management-review.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/micro-state-management-review.png
index 4ab1c00e..89f84d6e 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/micro-state-management-review.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/micro-state-management-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/prettier3.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/prettier3.png
index 4e3135b7..e38e2d0e 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/prettier3.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/prettier3.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/proving-ground-review.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/proving-ground-review.png
index 9729e05c..6905cf36 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/proving-ground-review.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/proving-ground-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/quality-of-job-review.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/quality-of-job-review.png
index 722cc271..7523a1da 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/quality-of-job-review.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/quality-of-job-review.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/renovate.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/renovate.png
index 7b878af0..c07047cf 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/renovate.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/renovate.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/storybook7.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/storybook7.png
index 1561bb6e..fced594f 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/storybook7.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/storybook7.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/turborepo.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/turborepo.png
index b05fd3eb..ae9a7927 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/turborepo.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/turborepo.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript-subtyping.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript-subtyping.png
index c984b322..b5b24a34 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript-subtyping.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript-subtyping.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript5.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript5.png
index faa870b9..a43a569e 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript5.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/typescript5.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/udemy-rust-programming.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/udemy-rust-programming.png
index 804eee9c..4223e998 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/udemy-rust-programming.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/udemy-rust-programming.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/use-prevent-leave.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/use-prevent-leave.png
index 1d8d54d7..71a3b38f 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/use-prevent-leave.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/use-prevent-leave.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/use-transition.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/use-transition.png
index 88b85893..c7fb0488 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/use-transition.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/use-transition.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/visual-regression-test.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/visual-regression-test.png
index d0a5d47f..fbf289b3 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/visual-regression-test.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/visual-regression-test.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/vite-dev-server.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/vite-dev-server.png
index 8f807307..d131ecee 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/vite-dev-server.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/vite-dev-server.png differ
diff --git a/e2e/__snapshots__/post/screen.spec.ts/mobile/woowa-type-review.png b/e2e/__snapshots__/post/screen.spec.ts/mobile/woowa-type-review.png
index f0fac793..4ed73d06 100644
Binary files a/e2e/__snapshots__/post/screen.spec.ts/mobile/woowa-type-review.png and b/e2e/__snapshots__/post/screen.spec.ts/mobile/woowa-type-review.png differ