feat: 2024 연말 회고 포스트 릴리즈

apps/blog/next.config.mjs

@@ -1,11 +1,7 @@
-import MillionLint from "@million/lint";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
   transpilePackages: ["next-mdx-remote"],
 };
 
-export default MillionLint.next({
-  enabled: true,
-  rsc: true,
-})(nextConfig);
+export default nextConfig;

apps/blog/package.json

@@ -16,9 +16,7 @@
     "test:type": "tsc --noEmit"
   },
   "dependencies": {
-    "@apollo/client": "^3.11.10",
     "@hookform/resolvers": "^3.9.1",
-    "@million/lint": "^1.0.13",
     "@next/third-parties": "^15.0.3",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-separator": "^1.1.0",
@@ -39,9 +37,10 @@
     "@xionwcfm/utils": "^0.0.3",
     "@xionwcfm/xds": "^0.2.0",
     "arctic": "^2.3.0",
+    "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "next": "15.0.3",
+    "next": "15.1.3",
     "next-mdx-remote": "^5.0.0",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",

apps/blog/posts/retrospect/retrospect-2024.mdx

@@ -0,0 +1,83 @@
+---
+title: 2024 연말 회고
+description: 뭐야 제 한살 돌려줘요
+thumbnail: fallback
+categories: retrospect
+writeDate: 2024-12-29T00:29:07.053Z
+releaseDate: 2024-12-29T20:00:00.053Z
+canView: true
+authority: public
+---
+
+2024년도 어느새 끝나가고 있습니다. 사실 시간이 너무 빨리 흘러버린 것 같아서 너무 무섭긴합니다만 내년에는 어떻게 살아갈지를 생각해봐야겠죠
+
+제 생각에 제 올해는 이것저것 많이 돌아다니고 시도해본 한해였던 것 같습니다. 인생 첫 오프라인 컨퍼런스를 다녀오기도 하고 토스 멘토링에 참가하기도 하고 IT 동아리에 가입하기도 하고 업무적으로는 프론트엔드 팀원이 생기는 변화를 겪기도 했습니다.
+
+그러면서 또 한편으로는 **"아.. 내가 올해는 남들처럼 살아버렸네.."** 라는 후회도 생긴 것 같아요. 무언가를 많이 하기는 했지만 왜 했는가? 에는 물음표가 띄워져 있는 기분입니다.
+
+## 인간으로서의 2024년
+
+인간적으로는 점점 나이들어가는 육신을 체감하고 있습니다. 동일한 생활패턴을 유지하고 있음에도 불구하고 체지방과 체중이 증가하고 있다는 점이 가장 눈에 띄는 변화인 것 같아요 살기위한 운동이 필요해지는 시점인 것 같습니다.
+
+
+또 한편으로는 소시민적인 고민이 깊어졌습니다. 대한민국이라는 나라 자체가 이미 돌이킬 수 없는 하락세에 접어들었다는 생각이 듭니다.
+
+작은 개인이 거대한 흐름 앞에서 할 수 있는 것은 흐름에 몸을 맡기고 적응하는 것 뿐이겠죠 어떻게 해야 잘 적응할 수 있을지는 아직 모르겠습니다
+
+
+
+
+
+## 회사원으로서의 2024년
+
+회사에 들어오고나서 온전한 1년을 보낸 한해였습니다. 여러 팀원들이 떠나고 또 들어오기도 하면서 꽤 많은 변화가 있었던 것 같아요
+
+맡는 업무의 범위가 넓어지면서 백오피스부터 앱 개발, aws 관리, 신규 서비스 개발까지 다양한 업무를 맡게되었습니다.
+
+기존에 맡고 있던 서비스는 소개팅앱이라는 특성으로 인해 이미 연애를 하고 있는 저로서는 dogfooding이 매우 곤란한 도메인이었습니다만 새로 개발하고 있는 서비스는 이런 문제점은 조금 적은 도메인이다보니 저로서는 오히려 좋은 면이 있었습니다.
+
+또 한편으로는 대부분 혼자 개발을 하던 작년과 달리 프론트엔드 팀원이 생겼다는 점이 큰 변화 중 하나였습니다. 혼자 개발하는 것과 N명이 함께 개발하는 것은 업무 프로세스에서 꽤 많은 차이가 존재하게 된다고 생각하는데요
+
+특히 다른 팀원이 작성한 코드에 기능을 추가하거나 수정하는 것은 꽤 어려운 일이었습니다. 이 과정에서의 병목을 줄이기 위해 여러가지 고민이 생기게 되더라구요
+
+
+
+## 개발자로서의 2024년
+
+2024년의 가장 큰 이벤트라고 하면 역시 **토스 멘토링**을 빼놓을 수 없을 것 같습니다. 제가 작성하던 코드가 왜 쓰레기인지를 알게 된 것이 가장 큰 수확인 것 같아요
+
+또 한편으로는 **feconf2024**를 직접 보러 간 것이 기억에 남습니다. 실제로 프론트엔드 개발자들이 그렇게 많이 모여있는 것을 처음보다보니 놀라운 경험이었습니다.
+
+마지막으로는 현재 진행중이긴 합니다만 언젠간 해보고 싶었던 **IT 동아리**에 들어간 점이 기억에 남아요 처음 해보는 경험이라 꽤 즐겁게 참여하고 있는 것 같습니다.
+
+개발적으로는 2023년에 관심을 가졌던 키워드와 기술들을 어느정도 체득한 한해가 된 것 같습니다. 모노레포와 그 외 다양한 프론트엔드 생산성 도구들에 익숙해졌고 다양한 오픈소스 프로젝트에 작게나마 기여하기도 하였습니다.
+
+개인적으로 모노레포를 학습할 때 많이 고생했던 것이 기억에 남는데 좋은 레퍼런스를 찾아보는 것이 어렵다보니 학습곡선이 그만큼 가파른 느낌이어서 그랬던 것 같아요
+
+지금은 똑같은 감정을 **MicroFrontend**에 느끼고있습니다 하하..
+
+
+## 2024년의 내가 생각하는 코드
+
+2023년의 저는 다양한 디자인 패턴을 학습하고 적용하는 것을 중요하게 생각했습니다. 클린 아키텍처, FSD 등의 개발 방법론을 학습하기도 하고 테스트에이블한 구조를 만들기 위해 여러가지 방법들을 고민하기도 했었어요
+
+그렇게 공부했던 것이 무의미했다고는 생각하지 않습니다만 올해에는 구조적인 아름다움보다 실용적이고 쉬운 코드를 더 중요한 가치로 생각하게 된 것 같아요
+
+리더블한 코드, 관심사를 분리하면서도 쉽게 이해할 수 있는 구조와 코드를 작성하기위해 많이 고민하고 있습니다. 개인적으로는 최근 이 고민을 하면서 가장 어려웠던 지점이 있다면 **성능과 리더블함 사이에서의 갈등**이었던 것 같아요
+
+리더블하고 단순한 대신 비효율적인 연산을 수행하게되는 코드와 그런 연산을 피하는 대신 리더블함을 포기해야하는 코드 둘 중 하나를 택해야하는 경우가 있더라구요
+
+
+
+
+## 2025년은 어떻게 살아야할까?
+
+나름대로 이것저것 많이 하면서 2024년을 보낸 것 같습니다. 그러나 그렇다고해서 2024년을 알차게 잘 보냈는가?라고 하면 그것은 잘 모르겠어요 개인적으로는 이것저것 많이 하는 것이 오히려 독이 되는 것 같기도 합니다.
+
+특히 저는 이왕하는거면 열심히 하자..와 같은 마음가짐을 가지고 살다보니 2024년도 처럼 이것저것 많이 하게 되면 그만큼 제게 정말 중요한 것을 놓치게 되는 것 같아요
+
+올해 말에 예전에 추천받았던 **One Thing**이라는 책을 읽으면서 이런 생각이 들었습니다. 2025년도에는 정말 중요한 가치 하나에 에너지를 쏟는 삶을 살아야 겠다는 생각을 해봅니다.
+
+## 마치며
+
+읽어주셔서 감사합니다. 

apps/blog/src/shared/hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+/**
+ * useMediaQuery 훅
+ * @param query - CSS 미디어 쿼리 문자열 (예: '(max-width: 768px)')
+ * @returns boolean - 미디어 쿼리 상태
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    // 초기 상태 설정
+    setMatches(mediaQuery.matches);
+
+    // 이벤트 핸들러
+    const handleChange = () => {
+      setMatches(mediaQuery.matches);
+    };
+
+    // 리스너 추가
+    mediaQuery.addEventListener("change", handleChange);
+
+    // 클린업 - 리스너 제거
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}

apps/blog/src/widgets/header/static-header.tsx

@@ -10,12 +10,12 @@ export const StaticHeader = () => {
   return (
     <Stack className={" z-20  bg-neutral-50  "} w={"screen"} as={"header"} items={"center"}>
       <Stack
+        className=" px-16 md:px-0"
         maxW={{ md: "768", xl: "1024" }}
         w={"screen"}
         direction={"row"}
         items={"center"}
         justify={"between"}
-        px={{ initial: "16", md: "0" }}
         py={"8"}
       >
         <Link href={ROUTES.root()} aria-label={"home 화면으로 돌아갑니다"}>

apps/blog/tailwind.config.ts

@@ -1,25 +1,12 @@
-import { XION_STYLE } from "@xionwcfm/token";
+import defaultConfig from "@repo/tailwindcss-config";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  ...defaultConfig,
   content: [
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "../../packages/mdx/src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-    colors: XION_STYLE.colors,
-    borderRadius: XION_STYLE.borderRadius,
-    spacing: XION_STYLE.spacing,
-    fontSize: XION_STYLE.fontSize,
-    fontWeight: XION_STYLE.fontWeight,
-    lineHeight: XION_STYLE.lineHeight,
-    boxShadow: XION_STYLE.boxShadow,
-    extend: {
-      keyframes: XION_STYLE.keyframes as Config["theme"],
-      animation: XION_STYLE.animation,
-      screens: XION_STYLE.screens,
-    },
-  },
 };
 export default config;

configs/tailwind/package.json

@@ -3,22 +3,35 @@
   "version": "0.0.0",
   "private": true,
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "ci:type": "tsc --noEmit"
   },
   "exports": {
-    "./base": {
-      "default": "./src/base.ts"
-    }
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@xionwcfm/token": "^0.2.0",
+    "@repo/tsup-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "tailwindcss": "^3.4.15",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "latest"
+    "tsup": "^8.3.5"
   },
   "peerDependencies": {
-    "tailwindcss-animate": ">=0.0.0"
+    "tailwindcss-animate": ">=0.0.0",
+    "@xionwcfm/token": ">=0.2.0",
+    "tailwindcss": ">=3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

configs/tailwind/src/index.ts

@@ -0,0 +1,24 @@
+import { vars } from "@xionwcfm/token";
+import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+
+const config: Config = {
+  content: ["./.stories/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {
+    colors: vars.colors,
+    borderRadius: vars.borderRadius,
+    spacing: vars.spacing,
+    fontSize: vars.fontSize,
+    fontWeight: vars.fontWeight,
+    lineHeight: vars.lineHeight,
+    boxShadow: vars.boxShadow,
+    extend: {
+      keyframes: vars.keyframes as Config["theme"],
+      animation: vars.animation,
+      screens: vars.screens,
+    },
+  },
+  plugins: [tailwindcssAnimate],
+  darkMode: "class",
+};
+export default config;

configs/tailwind/tsup.config.ts

@@ -0,0 +1,4 @@
+import { options } from "@repo/tsup-config";
+import { defineConfig } from "tsup";
+
+export default defineConfig(options);

configs/tsup/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@repo/tsup-config",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "ci:type": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "tsup": "^8.3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}