비행기 안에서

src/components/animation/three/Globe.tsx

@@ -0,0 +1,71 @@
+import { Environment, Lightformer } from "@react-three/drei";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Physics } from "@react-three/rapier";
+import { useRef } from "react";
+import { Euler, Vector3, type Mesh } from "three";
+import * as THREE from "three";
+const Earth = () => {
+  const meshRef = useRef<Mesh>(null);
+
+  useFrame(() => {
+    if (!meshRef.current) {
+      return;
+    }
+
+    meshRef.current.rotation.y += 0.01;
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <sphereGeometry args={[3, 11, 9]} />
+      <meshStandardMaterial color="blue" />
+    </mesh>
+  );
+};
+
+const Airplane = () => {
+  const meshRef = useRef<Mesh>(null);
+
+  useFrame(({ clock }) => {
+    if (!meshRef.current) {
+      return;
+    }
+
+    const radius = 3.5;
+    const speed = 1;
+    const angle = clock.getElapsedTime() * speed;
+    const x = Math.cos(angle) * radius;
+    const z = Math.sin(angle) * radius;
+    meshRef.current.position.set(x, 0, z);
+    // meshRef.current.rotateOnWorldAxis(new Vector3(0, 1, 0), 0.01);
+  });
+
+  return (
+    <mesh ref={meshRef} rotation={[0, 0, Math.PI / 2]}>
+      <coneGeometry args={[0.5, 1.5, 6]} />
+      <meshStandardMaterial color="red" />
+    </mesh>
+  );
+};
+
+export default function Globe() {
+  return (
+    <Canvas
+      style={{
+        height: "500px",
+      }}
+      camera={{ position: [0, 0, 5], fov: 120 }}
+    >
+      <ambientLight intensity={0.5} />
+      <directionalLight
+        position={[2, 2, -5]}
+        intensity={1}
+        castShadow
+        shadow-mapSize-width={1024}
+        shadow-mapSize-height={1024}
+      />
+      <Earth />
+      <Airplane />
+    </Canvas>
+  );
+}

src/content/blog/비행기안에서.mdx

@@ -0,0 +1,43 @@
+---
+title: "비행기 안에서"
+description: ""
+author: "Yongseok"
+categories: ["life"]
+date: "2024-05-10 18:46"
+series: "미국 여행기"
+---
+import Globe from '../../components/animation/three/Globe'
+
+
+
+고도 33,000피트 태평양 상공 어딘가에서\
+와이파이를 쓸 수 있을 줄 몰랐다. 잔뜩 오프라인 저장 해온 유튜브 영상들이 무색해졌다.
+
+비행중에 커밋 한줄 남겨보고자 글을 써보고 있다. 
+
+<figure>
+<img src="/post/images/비행기안에서/airplane_1.jpeg" />
+<figcaption>창문이 닫히기 전</figcaption>
+</figure>
+
+노이즈 캔슬링 까지 장착하고나니. 그냥 고요하고 좁은 카페가 되었다.\
+다만 16인치를 펼치기엔 너무 비좁다.
+
+방금 앞 자리 사람이 등받이를 젖혀서 노트북을 하기엔 더 비좁아져버렸다.
+
+<figure>
+<img src="/post/images/비행기안에서/airplane_3.jpeg" />
+<figcaption>조만간 닫고 한숨 자야겠다.</figcaption>
+</figure>
+
+
+<Globe client:only="react" />
+
+좁은 자리에서 지구와 비행기를 표현..해봤다. 너무 힘들어서 한숨 자야겠다.
+
+
+
+<figure>
+<img src="/post/images/비행기안에서/airplane_2.jpeg" />
+<figcaption>그라데이션이 정말 이쁘다</figcaption>
+</figure>

src/content/blog/출국.mdx

@@ -2,8 +2,9 @@
 title: "출국"
 description: "오늘은 출국일이다. React Conf를 보러 미국으로 간다. 어제 무사히 PR을 머지하고 배포도 완료했으니, 머리는 가벼운데, 문제가 있을까 마음은 무겁다 큰 일정이 없는 한 연차를 잘 쓰지 않았던 편이라 올해 첫 연차이기도 하고, 본래 FOMO가 심한 편이라, 뭔가 놓치는 것이 있을까 걱정이다. 일로 부터 잘 떨어져 회복하고 오는 것도 효율적인 개발자이겠지..."
 author: "Yongseok"
-categories: [""]
+categories: ["life"]
 date: "2024-05-10"
+series: "미국 여행기"
 ---
 
 
@@ -34,4 +35,4 @@ React Conf를 보러 미국으로 간다.
 React PR에서만 보던 사람들을 실물로 본다니, 신기하다.\
 그들을 신성시하는 것은 아니지만, Dan Abramov와 한마디 해본다던지, Kent C. Dodds와 악수를 한다던지, 신기한 경험이 될 것 같다.
 
-공항에 일찍 도착한 김에, 블로그에 남겨 보았다. 산호세에 무사히 도착하기를.
+공항에 일찍 도착한 김에, 블로그에 남겨 보았다. 산호세에 무사히 도착하기를.

src/content/config.ts

@@ -10,6 +10,7 @@ const blog = defineCollection({
     heroImage: z.string().optional(),
     categories: z.array(z.string()).optional(),
     draft: z.boolean().optional(),
+    series: z.string().optional(),
   }),
 });
 

src/pages/blog/[...slug].astro

@@ -18,6 +18,11 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
+
+// const seriesPosts = (await getCollection("blog"))
+//   .filter((_post) => _post.data.series === post.data.series)
+//   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+
 const { Content } = await post.render();
 ---
 
@@ -26,6 +31,22 @@ const { Content } = await post.render();
     <div class="animate">
       <BackToPrev href="/blog"> 돌아가기 </BackToPrev>
     </div>
+    <!-- series -->
+    <!-- <div class="animate flex items-center gap-1.5" >
+      <div class="font-base text-sm">
+        {post.data.series}
+      </div>
+      &bull;
+      <div>
+        <ul>
+          {
+            seriesPosts.map((seriesPost) => {
+              return seriesPost.slug;
+            })
+          }
+        </ul>
+      </div>
+    </div> -->
     <div class="space-y-1 my-10">
       <div class="animate flex items-center gap-1.5">
         <div class="font-base text-sm">