Merge branch 'main' into fix/contributor-header-relative-path-support

Author: wo-o29

.pnp.cjs

@@ -20,6 +20,7 @@ https://frontend-fundamentals.com/code-quality/en/
 - [Code Quality Fundamentals](https://frontend-fundamentals.com/code-quality/)
 - [Bundling Fundamentals](https://frontend-fundamentals.com/bundling/)
 - [A11y Fundamentals](https://frontend-fundamentals.com/a11y/)
+- [Debug Fundamentals](https://frontend-fundamentals.com/debug/)
 
 ## Contributing
 

README.md

@@ -92,7 +92,7 @@ function App() {
 
 [`SplitChunksPlugin`](https://webpack.kr/plugins/split-chunks-plugin/)을 사용하면 웹팩에서 코드 스플리팅을 자동화할 수 있어요. 이 플러그인을 활용하면 중복되는 모듈을 하나의 청크로 분리하거나, 특정 크기 이상의 파일을 자동으로 나눠 번들 크기를 최적화할 수 있어요.
 
-Webpack 5부터 name 값을 `false` | `string` | `function` 만 받을 수 있돋록 더 strict하게 강화되었어요.
+Webpack 5부터 name 값을 `false` | `string` | `function` 만 받을 수 있도록 더 strict하게 강화되었어요.
 각각을 좀 더 자세하게 살펴볼게요.
 
 ::: 실습 전에 번들 파일의 이름을 동적으로 설정해주세요!

fundamentals/bundling/deep-dive/optimization/code-splitting.md

@@ -31,7 +31,7 @@ npm install --save-dev dotenv-webpack
 
 `.env` 파일 예시:
 
-```env
+```dotenv
 # API 설정
 API_URL=https://api.example.com
 API_KEY=your-api-key
@@ -108,7 +108,7 @@ const App: React.FC = () => {
    - `dotenv-webpack`의 `safe` 옵션을 사용해요
    - `.env.example` 파일에 필수 변수를 정의해요:
 
-   ```env
+   ```dotenv
    API_URL=
    API_KEY=
    DEBUG_MODE=

fundamentals/bundling/webpack-tutorial/environment.md

@@ -113,7 +113,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
 지금까지 만들어진 파일 구조를 다시 살펴볼게요.
 
-```{6-10}
+```text{6-10}
 example-project/
 ├── index.html
 ├── style.css

fundamentals/bundling/webpack-tutorial/make-first-bundle.md

@@ -19,11 +19,11 @@ export const shared = defineConfig({
       {
         rel: "icon",
         type: "image/x-icon",
-        href: "/code-quality/images/favicon.ico"
+        href: "images/favicon.ico"
       }
     ],
-    ["link", { rel: "manifest", href: "/images/site.webmanifest" }],
-    ["link", { rel: "apple-touch-icon", href: "/images/apple-touch-icon.png" }],
+    ["link", { rel: "manifest", href: "images/site.webmanifest" }],
+    ["link", { rel: "apple-touch-icon", href: "images/apple-touch-icon.png" }],
     [
       "link",
       {
@@ -80,13 +80,12 @@ export const shared = defineConfig({
 
     head.push(["meta", { property: "og:title", content: title }]);
     head.push(["meta", { property: "og:description", content: description }]);
-    head.push(["base", { href: "/code-quality/" }]);
 
     return head;
   },
 
   themeConfig: {
-    logo: "/images/ff-symbol.svg",
+    logo: "images/ff-symbol.svg",
     editLink: {
       pattern:
         "https://github.com/toss/frontend-fundamentals/edit/main/fundamentals/code-quality/:path"

fundamentals/code-quality/.vitepress/shared.mts

@@ -14,6 +14,7 @@ export default defineConfig({
   description: "프론트엔드 접근성의 모든 것",
   ignoreDeadLinks: false,
   base: "/debug/",
+  lastUpdated: true,
   locales: {
     // temporary
     en: {
@@ -130,8 +131,86 @@ export default defineConfig({
             text: "디버깅 실무 사례",
             items: [
               {
-                text: "Suspense Error 디버깅 by.김형규",
-                link: "/pages/contribute/suspense_debug_by_hyungkyu.md"
+                text:"javascript",
+                items:[
+                  {
+                  text: "MAX_SAFE_INTEGER 정밀도 손실",
+                  link: "/pages/contribute/javascript/javascript_max_number_error_debug.md"
+                }]
+              },
+              {
+                text:"react",
+                items:[
+                  {
+                    text: "BroadcastQueryClient SuspenseError",
+                    link: "/pages/contribute/react/broadcast_suspense_error_debug.md"
+                  },
+                  {
+                    text: "React Suspense와 framer-motion UI 충돌",
+                    link: "/pages/contribute/react/react_suspense_and_framer_motion_ui_debug.md"
+                  }
+                ]
+              },
+              {
+                text:'ios',
+                items:[
+                  {
+                    text: "iOS 웹뷰 이미지 업로드 시 페이지가 새로고침 되는 현상",
+                    link: "/pages/contribute/ios/ios_webview_image_upload_refresh_debug.md"
+                  },
+                  {
+                    text: "iOS 웹뷰에서 스와이프 뒤로가기 시 회색 화면이 표시되는 현상",
+                    link: "/pages/contribute/ios/ios_webview_swipe_back_gray_screen_debug.md"
+                  },
+                  {
+                    text: "Safari에서 TradingView iframe 메모리 누수",
+                    link: "/pages/contribute/ios/tradingview_iframe_memory_leak_debug.md"
+                  }
+                ]
+              },
+              {text:'android',
+                items:[
+                  {
+                    text: "Android에서 React Native 번들 로딩 시 SIGBUS 크래시",
+                    link: "/pages/contribute/android/android_react_native_bundle_loading_sigbus_crash_debug.md"
+                  },
+                ]
+              },
+              {
+                text:'public',
+                items:[
+                  {
+                    text: "토스아이디 OG 이미지에 타인의 프로필이 표시되는 현상",
+                    link: "/pages/contribute/public/tossid_og_image_other_profile_debug.md"
+                  },
+                ]
+              },
+              {
+                text:'compile',
+                items:[
+                  {
+                    text: "ESLint/TSC 파싱 콜스택 오버플로우",
+                    link: "/pages/contribute/compile/codegen_callstack_overflow_debug.md"
+                  }
+                ]
+              },
+              {
+                text:'yarn',
+                items:[
+                  {
+                    text: "Yarn Workspace에서 HMR이 동작하지 않는 현상",
+                    link: "/pages/contribute/yarn/yarn_workspace_hmr_debug.md"
+                  },
+                ]
+              },
+              {
+                text:'cursor',
+                items:[
+                  {
+                    text: "Cursor에서 Biome 포맷팅이 동작하지 않는 현상",
+                    link: "/pages/contribute/cursor/cursor_biome_formatting_debug.md"
+                  }
+                ]
               },
               { text: "기여하기 탬플릿", link: "/pages/contribute/template.md" }
             ]
@@ -152,7 +231,7 @@ export default defineConfig({
       {
         rel: "icon",
         type: "image/x-icon",
-        href: "/bundling/images/favicon.ico"
+        href: "/debug/images/favicon.ico"
       }
     ],
     [

fundamentals/debug/.vitepress/config.mts

@@ -72,6 +72,7 @@ export const sharedConfig = defineConfig({
   },
 
   themeConfig: {
+    logo: "/images/ff-symbol.svg",
     socialLinks: [
       { icon: "github", link: "https://github.com/toss/frontend-fundamentals" }
     ],

fundamentals/debug/.vitepress/shared.mts

@@ -4,6 +4,9 @@ import { computed } from "vue";
 const props = defineProps<{
   name: string;
   avatar?: string;
+  githubUrl?: string;
+  date?: string;
+  readingTime?: string;
   size?: number;
 }>();
 
@@ -36,16 +39,92 @@ const avatarSrc = computed(() => {
 </script>
 
 <template>
-  <div
-    style="display: flex; align-items: center; gap: 12px; margin: 8px 0 24px"
-  >
+  <div class="contributor-header">
     <img
       :src="avatarSrc"
-      :width="size ?? 40"
-      :height="size ?? 40"
+      :width="size || 50"
+      :height="size || 50"
       :alt="name"
-      style="border-radius: 50%; object-fit: cover"
+      class="contributor-avatar"
     />
-    <strong>{{ name }}</strong>
+    <div class="contributor-info">
+      <a
+        v-if="githubUrl"
+        :href="githubUrl"
+        target="_blank"
+        class="contributor-name"
+      >
+        {{ name }}
+        <svg
+          viewBox="0 0 16 16"
+          width="14"
+          height="14"
+          fill="currentColor"
+          style="margin-left: 4px"
+        >
+          <path
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+          />
+        </svg>
+      </a>
+      <strong v-else class="contributor-name">{{ name }}</strong>
+      <div class="contributor-meta">
+        <span v-if="date" class="meta-item">{{ date }}</span>
+        <span v-if="readingTime" class="meta-item">{{ readingTime }}</span>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.contributor-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  margin: 24px 0 32px;
+}
+
+.contributor-avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  order: 2;
+}
+
+.contributor-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  align-items: flex-end;
+  order: 1;
+}
+
+.contributor-name {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.1em;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.contributor-name:hover {
+  color: var(--vp-c-text-2);
+}
+
+.contributor-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.9em;
+  color: var(--vp-c-text-2);
+}
+
+.meta-item {
+  display: inline-block;
+}
+</style>