Refactor/tawilwind layout (#344)

* chore(styles): Move to features/styles

* styles: Change main layout scss to tawilwind

* style: Remove root-container

* style: Remove tags scss

* test: Update test

e2e/__snapshots__/404.spec.ts/desktop/404.html

@@ -1,7 +1,7 @@
-<nav class="nav water-rainbow nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/images/404.webp" alt="surfing" width="720" height="580"></div><pre><code>
+<nav class="nav water-rainbow nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 mx-4 min-[790px]:m-auto flex flex-col items-center"><div><img src="/images/404.webp" alt="surfing" width="720" height="580"></div><pre><code>
 
       404 ERROR
 
  Do you enjoy surfing?
 
-</code><div class="small">Image Copyright:&nbsp;<a class="highlighter" href="https://kr.freepik.com/free-vector/isometric-summer-beach-vacation-concept_9515534.htm" rel="noopener noreferrer" target="_blank">Freepik</a></div></pre></div><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>
+</code><div class="small">Image Copyright:&nbsp;<a class="highlighter" href="https://kr.freepik.com/free-vector/isometric-summer-beach-vacation-concept_9515534.htm" rel="noopener noreferrer" target="_blank">Freepik</a></div></pre></section><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>

e2e/__snapshots__/404.spec.ts/mobile/404.html

@@ -1,7 +1,7 @@
-<nav class="nav water-rainbow nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><div class="not-found-container"><div><img src="/images/404.webp" alt="surfing" width="720" height="580"></div><pre><code>
+<nav class="nav water-rainbow nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 mx-4 min-[790px]:m-auto flex flex-col items-center"><div><img src="/images/404.webp" alt="surfing" width="720" height="580"></div><pre><code>
 
       404 ERROR
 
  Do you enjoy surfing?
 
-</code><div class="small">Image Copyright:&nbsp;<a class="highlighter" href="https://kr.freepik.com/free-vector/isometric-summer-beach-vacation-concept_9515534.htm" rel="noopener noreferrer" target="_blank">Freepik</a></div></pre></div><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>
+</code><div class="small">Image Copyright:&nbsp;<a class="highlighter" href="https://kr.freepik.com/free-vector/isometric-summer-beach-vacation-concept_9515534.htm" rel="noopener noreferrer" target="_blank">Freepik</a></div></pre></section><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>

e2e/__snapshots__/post/dom.spec.ts/desktop/2023.html

@@ -1,4 +1,4 @@
-<div class="nav-loading"><progress value="0" max="1"></progress></div><nav class="nav water-rainbow post-nav-trans nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><div class="post-container"><h1 class="post-header">2023 회고록</h1><section class="post-profile-container"><div class="avatar on-post"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="name" href="/about">1ilsang</a><div class="description">클라이밍 하실래염?</div></div></section><section class="flex flex-wrap mt-2 items-end"><a class="hashtag mr-2" target="_self" href="/tags/retrospect">#<!-- -->retrospect</a><a class="hashtag mr-2" target="_self" href="/tags/2023">#<!-- -->2023</a></section><section><div class="text-date-gray inline">Published <time datetime="2023-12-31 14:27">2023-12-31 14:27</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/b5692eaa-05d7-428c-8356-ba04da3f4e3f" alt="cover"></div></div><p></p>
+<div class="nav-loading"><progress value="0" max="1"></progress></div><nav class="nav water-rainbow post-nav-trans nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 mx-4 min-[790px]:m-auto"><h1 class="post-header">2023 회고록</h1><section class="post-profile-container"><div class="avatar on-post"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="name" href="/about">1ilsang</a><div class="description">클라이밍 하실래염?</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/retrospect">#<!-- -->retrospect</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/2023">#<!-- -->2023</a></section><section><div class="text-date-gray inline">Published <time datetime="2023-12-31 14:27">2023-12-31 14:27</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/b5692eaa-05d7-428c-8356-ba04da3f4e3f" alt="cover"></div></div><p></p>
 <h2 id="2022년의-목표" data-heading="true"><a data-heading="true" href="#2022년의-목표"><span class="icon icon-link"></span></a>2022년의 목표</h2>
 <p>작년에 분명 2022 회고록을 작성했는데 문서를 잃어버렸다(-_-).</p>
 <p>많이 당황했지만 반대로 말하면 1년 동안 쳐다도 안 봤다는 것이니 작년에 세웠던 올해의 목표나 다짐은 사실상 없는 것과 같았다.</p>
@@ -137,4 +137,4 @@ <h2 id="신년-목표" data-heading="true"><a data-heading="true" href="#신년-
 </ul>
 </li>
 </ol>
-<p>2024년 잘 부탁드립니다.</p></div><aside class="floating-container"><ul class="list"><li data-id="2022년의-목표" class="item">2022년의 목표</li><li data-id="keep" class="item">Keep</li><li><ul class="depth-ul"><li data-id="기술적-관심" class="item depth">기술적 관심</li><li data-id="회사" class="item depth">회사</li><li data-id="대외활동" class="item depth">대외활동</li><li data-id="운동" class="item depth">운동</li><li data-id="여행" class="item depth">여행</li><li data-id="독서" class="item depth">독서</li></ul></li><li data-id="problem" class="item">Problem</li><li><ul class="depth-ul"><li data-id="데이터의-파편화" class="item depth">데이터의 파편화</li><li data-id="기술-갈증" class="item depth">기술 갈증</li><li data-id="생활" class="item depth">생활</li></ul></li><li data-id="try" class="item">Try</li><li data-id="총평" class="item">총평</li><li data-id="신년-목표" class="item">신년 목표</li></ul></aside></section><a class="highlighter issue-post" 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></div><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>
+<p>2024년 잘 부탁드립니다.</p></div><aside class="floating-container"><ul class="list"><li data-id="2022년의-목표" class="item">2022년의 목표</li><li data-id="keep" class="item">Keep</li><li><ul class="depth-ul"><li data-id="기술적-관심" class="item depth">기술적 관심</li><li data-id="회사" class="item depth">회사</li><li data-id="대외활동" class="item depth">대외활동</li><li data-id="운동" class="item depth">운동</li><li data-id="여행" class="item depth">여행</li><li data-id="독서" class="item depth">독서</li></ul></li><li data-id="problem" class="item">Problem</li><li><ul class="depth-ul"><li data-id="데이터의-파편화" class="item depth">데이터의 파편화</li><li data-id="기술-갈증" class="item depth">기술 갈증</li><li data-id="생활" class="item depth">생활</li></ul></li><li data-id="try" class="item">Try</li><li data-id="총평" class="item">총평</li><li data-id="신년-목표" class="item">신년 목표</li></ul></aside></section><a class="highlighter issue-post" 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><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>

e2e/__snapshots__/post/dom.spec.ts/desktop/2024-01.html

@@ -1,4 +1,4 @@
-<div class="nav-loading"><progress value="0" max="1"></progress></div><nav class="nav water-rainbow post-nav-trans nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><div class="post-container"><h1 class="post-header">2024년 1월 회고</h1><section class="post-profile-container"><div class="avatar on-post"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="name" href="/about">1ilsang</a><div class="description">클라이밍 하실래염?</div></div></section><section class="flex flex-wrap mt-2 items-end"><a class="hashtag mr-2" target="_self" href="/tags/retrospect">#<!-- -->retrospect</a><a class="hashtag mr-2" target="_self" href="/tags/2024">#<!-- -->2024</a><a class="hashtag mr-2" target="_self" href="/tags/01">#<!-- -->01</a></section><section><div class="text-date-gray inline">Published <time datetime="2024-02-09 15:06">2024-02-09 15:06</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/994f1e84-c960-47fc-91ab-f97faccbde37" alt="cover"></div></div><p></p>
+<div class="nav-loading"><progress value="0" max="1"></progress></div><nav class="nav water-rainbow post-nav-trans nav-shadow"><h2 class="nav-text nav-logo"><a class="hover-underline" href="/">1ilsang</a></h2><div class="flex"><h2 class="nav-text"><a class="hover-underline" href="/posts">posts</a></h2><h2 class="nav-text"><a class="hover-underline" href="/tags">tags</a></h2><div class="avatar on-nav"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div></div></nav><section class="h-auto min-h-full max-w-screen-md py-20 mx-4 min-[790px]:m-auto"><h1 class="post-header">2024년 1월 회고</h1><section class="post-profile-container"><div class="avatar on-post"><a href="/about"><img src="/images/chul.webp" alt="1ilsang"></a></div><div><a class="name" href="/about">1ilsang</a><div class="description">클라이밍 하실래염?</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/retrospect">#<!-- -->retrospect</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/2024">#<!-- -->2024</a><a class="text-highlight print:text-black hover:underline mr-2" target="_self" href="/tags/01">#<!-- -->01</a></section><section><div class="text-date-gray inline">Published <time datetime="2024-02-09 15:06">2024-02-09 15:06</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/994f1e84-c960-47fc-91ab-f97faccbde37" alt="cover"></div></div><p></p>
 <p><a class="underline-highlight-fade" target="_blank" href="/posts/2023" rel="noreferrer noopener">2023년 회고록</a>에서 <u>"데이터" 부재의 아쉬움</u>을 이야기했었다. 따라서 올해는 데이터 드리븐 삶을 살기 위해 월간 회고를 진행하려고 한다.</p>
 <h2 id="2024년-1월의-목표" data-heading="true"><a data-heading="true" href="#2024년-1월의-목표"><span class="icon icon-link"></span></a>2024년 1월의 목표</h2>
 <p>1월의 핵심 키워드는 "절제"였다. 작년의 문제 중 하나로 지목된 <u>"TODO"에 무한히 쌓이기만 하는 것들</u>을 없애기 위한 일환이었다.</p>
@@ -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="floating-container"><ul class="list"><li data-id="2024년-1월의-목표" class="item">2024년 1월의 목표</li><li data-id="2d1r" class="item">2D1R</li><li data-id="월간-다이브" class="item">월간 다이브</li><li data-id="월간-메이커스" class="item">월간 메이커스</li><li data-id="말해보카" class="item">말해보카</li><li data-id="운동하기" class="item">운동하기</li><li data-id="마치며" class="item">마치며</li></ul></aside></section><a class="highlighter issue-post" 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></div><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>
+<p>가보자고!</p></div><aside class="floating-container"><ul class="list"><li data-id="2024년-1월의-목표" class="item">2024년 1월의 목표</li><li data-id="2d1r" class="item">2D1R</li><li data-id="월간-다이브" class="item">월간 다이브</li><li data-id="월간-메이커스" class="item">월간 메이커스</li><li data-id="말해보카" class="item">말해보카</li><li data-id="운동하기" class="item">운동하기</li><li data-id="마치며" class="item">마치며</li></ul></aside></section><a class="highlighter issue-post" 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><footer class="footer"><ul><li><a href="/about">1ilsang</a></li><li><a rel="noopener noreferrer" target="_blank" href="https://github.com/1ilsang">GitHub</a></li><li><a href="https://www.linkedin.com/in/1ilsang" rel="noopener noreferrer" target="_blank">LinkedIn</a></li></ul></footer>