feat(markdown): Update flex scroll images

1ilsang · Nov 26, 2023 · 2d098ce · 2d098ce
1 parent 23a99bf
commit 2d098ce
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 28 deletions.
diff --git a/apps/blog/_posts/activity/jeju-remote.md b/apps/blog/_posts/activity/jeju-remote.md
@@ -68,9 +68,10 @@ ogImage:
 
 ## 벌써 마지막 주
 
-![fire](https://github.com/1ilsang/dev/assets/23524849/aa907040-b2cf-4443-a7fe-9afef3d8209d)
-
-![mountain](https://github.com/1ilsang/dev/assets/23524849/d6510fe9-5ce6-4fe1-8e71-756319ab9e9e)
+<div class="img-horizon-wrap">
+  <img src="https://github.com/1ilsang/dev/assets/23524849/aa907040-b2cf-4443-a7fe-9afef3d8209d" alt="fire" />
+  <img src="https://github.com/1ilsang/dev/assets/23524849/d6510fe9-5ce6-4fe1-8e71-756319ab9e9e" alt="mountain" />
+</div>
 
 당시에 시간이 정말 빠르게 간다고 느꼈다. 하루하루 많은 일이 있었는데 어느덧 마지막 주였던 기억이 난다.
 
@@ -80,18 +81,25 @@ ogImage:
 
 다양한 답변이 속에서 나왔지만 결국 나는 <u>누군가에게 도움이 되고 싶어서 공부한다</u>는 결론이 나왔었다. 정보 공유를 한다거나 가르쳐줄 때 큰 재미를 느꼈고 그 재미가 내 행동 기반이라는 것을 깨닫게 되었다. 회사에서만 보더라도 다양한 정보 혹은 개발기를 공유하고 싶어서 열심히 일을 하게 되었던 것 같다.
 
-이처럼 제주에서 나는 중간중간 스스로에게 질문을 많이 던지면서 천천히 생각해 보는 시간을 많이 가졌다. 이것이 제주에서 느꼈던 가장 좋았던 점이었다. 맨날 퇴근 후 다음 작업을 하느라 스스로에게 질문을 하지 못했는데 이번 기회에 삶의 방향을 한번 돌아보게 되었다.
+이처럼 제주에서 나는 중간중간 스스로에게 질문을 많이 던지면서 천천히 생각해 보는 시간을 많이 가졌다. 이것이 제주에서 느꼈던 가장 좋았던 점이었다.
+
+맨날 퇴근 후 다음 작업을 하느라 스스로에게 질문을 하지 못했는데 이번 기회에 삶의 방향을 한번 돌아보게 되었다.
 
 ![pony](https://github.com/1ilsang/dev/assets/23524849/da21b5d7-dc08-48d1-915c-f7738f7341cd)
 
 ## 마무리
 
-![sunset-mount](https://github.com/1ilsang/dev/assets/23524849/5e184147-7bc7-4a4a-a0a3-14ca9dc01caa)
-![sunset-sea](https://github.com/1ilsang/dev/assets/23524849/88e9d28a-3c85-40aa-9f30-95ec8c379533)
+<div class="img-horizon-wrap">
+  <img src="https://github.com/1ilsang/dev/assets/23524849/5e184147-7bc7-4a4a-a0a3-14ca9dc01caa" alt="sunset-mount" />
+  <img src="https://github.com/1ilsang/dev/assets/23524849/88e9d28a-3c85-40aa-9f30-95ec8c379533" alt="sunset-sea" />
+</div>
 
 워케이션 기간동안 많은 것을 느꼈다.
 
-새로운 환경에서 작업하면서 주위를 환기하는 과정은 상당히 즐거웠다. 무엇보다 나 자신과 스스로 마주할 수 있었기에 조금 더 자신을 알게 되었다. 또한 나는 "서울에서의 바쁜 일상을 즐겼다"는 결론을 가지게 되었다. 제주 생활도 좋았지만 "서울에 올라가면 꼭 ~ 해야지"라고 서울에서의 일정이 마구 생기는 모습을 보면서 나에게 워케이션은 한번씩의 환기 이벤트라고 생각하게 되었다. 워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼 수 있게 되었다.
+- 새로운 환경에서 작업하면서 주위를 환기하는 과정은 상당히 즐거웠다.
+- 나 자신과 스스로 마주할 수 있었기에 조금 더 자신을 알게 되었다.
+- 나는 "서울에서의 바쁜 일상을 즐겼다"는 결론을 가지게 되었다. 제주 생활도 좋았지만 "서울에 올라가면 꼭 ~ 해야지"라고 서울에서의 일정이 마구 생기는 모습을 보면서 나에게 워케이션은 한번씩의 환기 이벤트라고 생각하게 되었다.
+- 워케이션을 통해 평범했던 일상을 더욱 좋아하게 되었고 긍정적으로 삶을 바라볼 수 있게 되었다.
 
 이제 다시 평범한 일상으로 돌아가게 되겠지만 새로운 환경이 필요하다고 생각하면 주저 없이 워케이션을 선택할 것 같다.
 

diff --git a/apps/blog/src/features/styles/markdown/index.scss b/apps/blog/src/features/styles/markdown/index.scss
@@ -1,4 +1,22 @@
 /* stylelint-disable no-descending-specificity */
+
+@mixin image {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 1%;
+  margin-bottom: 1%;
+  min-height: 200px;
+
+  @include mobile {
+    min-height: 100px;
+  }
+
+  @include i-mac {
+    max-width: 1200px;
+  }
+}
+
 .markdown {
   @apply text-lg leading-relaxed;
 
@@ -115,6 +133,15 @@
     @apply text-xl mt-6 leading-snug;
   }
 
+  img {
+    width: 70%;
+    object-fit: contain;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
+
   .cover {
     width: 100%;
     height: 600px;
@@ -123,30 +150,16 @@
   }
 
   .img-wrap {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 1%;
-    margin-bottom: 1%;
-    min-height: 200px;
-
-    @include mobile {
-      min-height: 100px;
-    }
+    @include image;
 
-    @include i-mac {
-      max-width: 1200px;
-    }
+    flex-direction: column;
+  }
 
-    img {
-      width: 70%;
-      object-fit: contain;
+  .img-horizon-wrap {
+    @include image;
 
-      @include mobile {
-        width: 100%;
-      }
-    }
+    overflow-x: scroll;
+    gap: 0.3rem;
   }
 }