From fede2eda2699c1b19600e4b6855669a7c098b547 Mon Sep 17 00:00:00 2001
From: sheetEasy AI Team <team@sheeteasy.ai>
Date: Wed, 2 Jul 2025 16:36:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Footer/TopBar=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8C=85=20=EB=B0=8F=20=EB=AA=A8=EB=93=A0=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=EA=B0=9C=EC=84=A0,=20Suspense=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EB=8C=80=EC=9D=91,=20sheetEasyAI=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=9E=9C?=
 =?UTF-8?q?=EB=94=A9=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                     | 587 ++++++++++++++++++++++++++
 package.json                          |   8 +
 src/App.tsx                           | 328 +++++++++-----
 src/components/AccountPage.tsx        | 552 ++++++++++++++++++++++++
 src/components/ContactPage.tsx        | 417 ++++++++++++++++++
 src/components/LandingPage.tsx        |  24 +-
 src/components/LicensePage.tsx        | 389 +++++++++++++++++
 src/components/PrivacyPolicyPage.tsx  | 410 ++++++++++++++++++
 src/components/RoadmapPage.tsx        | 258 +++++++++++
 src/components/SupportPage.tsx        | 380 +++++++++++++++++
 src/components/TermsOfServicePage.tsx | 277 ++++++++++++
 src/components/UpdatesPage.tsx        | 244 +++++++++++
 src/components/ui/alert-dialog.tsx    | 141 +++++++
 src/components/ui/badge.tsx           |  36 ++
 src/components/ui/dialog.tsx          | 122 ++++++
 src/components/ui/footer.tsx          | 138 +++---
 src/components/ui/historyPanel.tsx    |  21 +-
 src/components/ui/progress.tsx        |  28 ++
 src/components/ui/select.tsx          | 157 +++++++
 src/components/ui/topbar.tsx          |  22 +-
 src/lib/i18n.tsx                      | 367 ++++++++++++++++
 src/stores/useAppStore.ts             |  21 +
 22 files changed, 4735 insertions(+), 192 deletions(-)
 create mode 100644 src/components/AccountPage.tsx
 create mode 100644 src/components/ContactPage.tsx
 create mode 100644 src/components/LicensePage.tsx
 create mode 100644 src/components/PrivacyPolicyPage.tsx
 create mode 100644 src/components/RoadmapPage.tsx
 create mode 100644 src/components/SupportPage.tsx
 create mode 100644 src/components/TermsOfServicePage.tsx
 create mode 100644 src/components/UpdatesPage.tsx
 create mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/progress.tsx
 create mode 100644 src/components/ui/select.tsx
 create mode 100644 src/lib/i18n.tsx

diff --git a/package-lock.json b/package-lock.json
index 70b0553..5595ebc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,10 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-select": "^2.2.5",
         "@univerjs/core": "^0.8.2",
         "@univerjs/design": "^0.8.2",
         "@univerjs/docs": "^0.8.2",
@@ -29,11 +33,15 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "file-saver": "^2.0.5",
+        "i18next": "^25.3.0",
+        "i18next-browser-languagedetector": "^8.2.0",
         "lucide-react": "^0.468.0",
         "luckyexcel": "^1.0.1",
         "luckysheet": "^2.1.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-i18next": "^15.5.3",
+        "recharts": "^3.0.2",
         "tailwind-merge": "^2.5.4",
         "zustand": "^5.0.2"
       },
@@ -1682,12 +1690,46 @@
       "license": "BSD-3-Clause",
       "peer": true
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
       "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.14.tgz",
+      "integrity": "sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -2143,6 +2185,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
@@ -2174,6 +2240,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
+      "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -2334,6 +2443,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
@@ -2438,6 +2562,47 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
+      "integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
@@ -2752,6 +2917,18 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -2930,6 +3107,69 @@
         "@types/deep-eql": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -3134,6 +3374,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -7831,6 +8077,127 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -7876,6 +8243,12 @@
       "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
       "license": "MIT"
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -8125,6 +8498,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.39.5",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.5.tgz",
+      "integrity": "sha512-z9V0qU4lx1TBXDNFWfAASWk6RNU6c6+TJBKE+FLIg8u0XJ6Yw58Hi0yX8ftEouj6p1QARRlXLFfHbIli93BdQQ==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
@@ -8425,6 +8808,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/expect": {
       "version": "30.0.1",
       "resolved": "https://registry.npmjs.org/expect/-/expect-30.0.1.tgz",
@@ -8995,6 +9384,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -9024,6 +9422,46 @@
         "node": ">= 6"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.0.tgz",
+      "integrity": "sha512-ZSQIiNGfqSG6yoLHaCvrkPp16UejHI8PCDxFYaNG/1qxtmqNmqEg4JlWKlxkrUmrin2sEjsy+Mjy1TRozBhOgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -9073,6 +9511,16 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "license": "MIT"
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -9127,6 +9575,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -11459,6 +11916,32 @@
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.3.tgz",
+      "integrity": "sha512-ypYmOKOnjqPEJZO4m1BI0kS8kWqkBNsKYyhVUfij0gvjy9xJNoG/VcGkxq5dRlVwzmrmY1BQMAmpbbUBLwC4Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -11666,6 +12149,64 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz",
+      "integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts/node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts/node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -11715,6 +12256,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -12835,6 +13382,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12850,6 +13406,28 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -13062,6 +13640,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.17.tgz",
diff --git a/package.json b/package.json
index 5198147..63a8144 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-select": "^2.2.5",
     "@univerjs/core": "^0.8.2",
     "@univerjs/design": "^0.8.2",
     "@univerjs/docs": "^0.8.2",
@@ -38,11 +42,15 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "file-saver": "^2.0.5",
+    "i18next": "^25.3.0",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lucide-react": "^0.468.0",
     "luckyexcel": "^1.0.1",
     "luckysheet": "^2.1.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.5.3",
+    "recharts": "^3.0.2",
     "tailwind-merge": "^2.5.4",
     "zustand": "^5.0.2"
   },
diff --git a/src/App.tsx b/src/App.tsx
index f0ce46c..871fb3f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "./components/ui/button";
 import { TopBar } from "./components/ui/topbar";
 import { lazy, Suspense } from "react";
 import LandingPage from "./components/LandingPage";
 import { SignUpPage } from "./components/auth/SignUpPage";
 import { SignInPage } from "./components/auth/SignInPage";
+import AccountPage from "./components/AccountPage";
+import LicensePage from "./components/LicensePage";
 import { useAppStore } from "./stores/useAppStore";
+import { I18nProvider } from "./lib/i18n";
 import type { TutorialItem } from "./types/tutorial";
+import { startTransition } from "react";
 
 // TutorialSheetViewer 동적 import
 const TutorialSheetViewer = lazy(
@@ -18,6 +22,16 @@ const EditSheetViewer = lazy(
   () => import("./components/sheet/EditSheetViewer"),
 );
 
+// 새로운 페이지들 동적 import
+const RoadmapPage = lazy(() => import("./components/RoadmapPage"));
+const UpdatesPage = lazy(() => import("./components/UpdatesPage"));
+const SupportPage = lazy(() => import("./components/SupportPage"));
+const ContactPage = lazy(() => import("./components/ContactPage"));
+const PrivacyPolicyPage = lazy(() => import("./components/PrivacyPolicyPage"));
+const TermsOfServicePage = lazy(
+  () => import("./components/TermsOfServicePage"),
+);
+
 // 앱 상태 타입 정의
 type AppView =
   | "landing"
@@ -25,7 +39,14 @@ type AppView =
   | "signIn"
   | "editor"
   | "account"
-  | "tutorial";
+  | "tutorial"
+  | "license"
+  | "roadmap"
+  | "updates"
+  | "support"
+  | "contact"
+  | "privacy-policy"
+  | "terms-of-service";
 
 function App() {
   const [currentView, setCurrentView] = useState<AppView>("landing");
@@ -36,8 +57,27 @@ function App() {
     user,
     currentFile,
     startTutorial,
+    setLanguage,
+    setHistoryPanelPosition,
   } = useAppStore();
 
+  // 초기화: localStorage에서 설정 로드
+  useEffect(() => {
+    // 언어 설정 로드
+    const savedLanguage = localStorage.getItem("sheeteasy-language");
+    if (savedLanguage === "ko" || savedLanguage === "en") {
+      setLanguage(savedLanguage);
+    }
+
+    // 히스토리 패널 위치 설정 로드
+    const savedPosition = localStorage.getItem(
+      "sheeteasy-history-panel-position",
+    );
+    if (savedPosition === "left" || savedPosition === "right") {
+      setHistoryPanelPosition(savedPosition);
+    }
+  }, [setLanguage, setHistoryPanelPosition]);
+
   // CTA 버튼 클릭 핸들러 - 인증 상태에 따른 분기 처리
   const handleGetStarted = () => {
     if (isAuthenticated) {
@@ -134,6 +174,45 @@ function App() {
     }, 100);
   };
 
+  // Footer 핸들러들 - 새로운 페이지 네비게이션
+  const handleRoadmapClick = () => {
+    startTransition(() => {
+      setCurrentView("roadmap");
+    });
+  };
+  const handleUpdatesClick = () => {
+    startTransition(() => {
+      setCurrentView("updates");
+    });
+  };
+  const handleSupportClick = () => {
+    if (isAuthenticated) {
+      startTransition(() => {
+        setCurrentView("support");
+      });
+    } else {
+      alert("지원 서비스는 로그인 후 이용 가능합니다.");
+      startTransition(() => {
+        setCurrentView("signIn");
+      });
+    }
+  };
+  const handleContactClick = () => {
+    startTransition(() => {
+      setCurrentView("contact");
+    });
+  };
+  const handlePrivacyPolicyClick = () => {
+    startTransition(() => {
+      setCurrentView("privacy-policy");
+    });
+  };
+  const handleTermsOfServiceClick = () => {
+    startTransition(() => {
+      setCurrentView("terms-of-service");
+    });
+  };
+
   // 튜토리얼 선택 핸들러 - 튜토리얼 시작 후 튜토리얼 페이지로 전환
   const handleTutorialSelect = (tutorial: TutorialItem) => {
     console.log("🎯 튜토리얼 선택됨:", tutorial.metadata.title);
@@ -225,6 +304,11 @@ function App() {
   const handleGoToSignIn = () => setCurrentView("signIn");
   const handleGoToSignUp = () => setCurrentView("signUp");
   const handleGoToEditor = () => setCurrentView("editor");
+  const handleGoToLicense = () => {
+    startTransition(() => {
+      setCurrentView("license");
+    });
+  };
 
   // 에디터에서 홈으로 돌아가기 핸들러 (워닝 포함)
   const handleEditorLogoClick = () => {
@@ -290,110 +374,27 @@ function App() {
               showAuthButtons={false}
               onAccountClick={handleAccountClick}
             />
-            <main className="container mx-auto py-8">
-              <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
-                <h1 className="text-2xl font-bold mb-6">계정 정보</h1>
+            <main>
+              <AccountPage
+                onGoToEditor={handleGoToEditor}
+                onLogout={handleLogout}
+              />
+            </main>
+          </div>
+        );
 
-                {/* 사용자 정보 */}
-                <div className="mb-6">
-                  <h2 className="text-lg font-semibold mb-3">사용자 정보</h2>
-                  <div className="space-y-2">
-                    <p>
-                      <strong>이메일:</strong> {user?.email}
-                    </p>
-                    <p>
-                      <strong>이름:</strong> {user?.name}
-                    </p>
-                    <p>
-                      <strong>가입일:</strong>{" "}
-                      {user?.createdAt?.toLocaleDateString()}
-                    </p>
-                    <p>
-                      <strong>최근 로그인:</strong>{" "}
-                      {user?.lastLoginAt?.toLocaleDateString()}
-                    </p>
-                  </div>
-                </div>
-
-                {/* 구독 정보 */}
-                <div className="mb-6">
-                  <h2 className="text-lg font-semibold mb-3">구독 정보</h2>
-                  <div className="space-y-2">
-                    <p>
-                      <strong>플랜:</strong>{" "}
-                      {user?.subscription?.plan?.toUpperCase()}
-                    </p>
-                    <p>
-                      <strong>상태:</strong> {user?.subscription?.status}
-                    </p>
-                    <p>
-                      <strong>다음 결제일:</strong>{" "}
-                      {user?.subscription?.currentPeriodEnd?.toLocaleDateString()}
-                    </p>
-                  </div>
-                </div>
-
-                {/* 사용량 */}
-                <div className="mb-6">
-                  <h2 className="text-lg font-semibold mb-3">사용량</h2>
-                  <div className="space-y-2">
-                    <p>
-                      <strong>AI 쿼리:</strong>{" "}
-                      {user?.subscription?.usage?.aiQueries} /{" "}
-                      {user?.subscription?.plan === "free"
-                        ? "30"
-                        : user?.subscription?.plan === "lite"
-                          ? "100"
-                          : "500"}
-                    </p>
-                    <p>
-                      <strong>셀 카운트:</strong>{" "}
-                      {user?.subscription?.usage?.cellCount} /{" "}
-                      {user?.subscription?.plan === "free"
-                        ? "300"
-                        : user?.subscription?.plan === "lite"
-                          ? "1000"
-                          : "5000"}
-                    </p>
-                  </div>
-                </div>
-
-                {/* 설정 */}
-                <div className="mb-6">
-                  <h2 className="text-lg font-semibold mb-3">설정</h2>
-                  <div className="space-y-2">
-                    <p>
-                      <strong>언어:</strong>{" "}
-                      {user?.preferences?.language === "ko"
-                        ? "한국어"
-                        : "English"}
-                    </p>
-                    <p>
-                      <strong>히스토리 패널 위치:</strong>{" "}
-                      {user?.preferences?.historyPanelPosition === "right"
-                        ? "우측"
-                        : "좌측"}
-                    </p>
-                  </div>
-                </div>
-
-                {/* 액션 버튼들 */}
-                <div className="flex space-x-4">
-                  <Button
-                    onClick={handleGoToEditor}
-                    className="bg-blue-600 hover:bg-blue-700 text-white"
-                  >
-                    에디터로 이동
-                  </Button>
-                  <Button
-                    onClick={handleLogout}
-                    variant="outline"
-                    className="border-red-500 text-red-500 hover:bg-red-50"
-                  >
-                    로그아웃
-                  </Button>
-                </div>
-              </div>
+      case "license":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+            />
+            <main>
+              <LicensePage onBack={handleBackToLanding} />
             </main>
           </div>
         );
@@ -464,6 +465,108 @@ function App() {
           </div>
         );
 
+      case "roadmap":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <RoadmapPage />
+            </main>
+          </div>
+        );
+
+      case "updates":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <UpdatesPage />
+            </main>
+          </div>
+        );
+
+      case "support":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <SupportPage />
+            </main>
+          </div>
+        );
+
+      case "contact":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <ContactPage />
+            </main>
+          </div>
+        );
+
+      case "privacy-policy":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <PrivacyPolicyPage />
+            </main>
+          </div>
+        );
+
+      case "terms-of-service":
+        return (
+          <div className="min-h-screen bg-gray-50">
+            <TopBar
+              showDownload={false}
+              showAccount={false}
+              showNavigation={false}
+              showAuthButtons={false}
+              onAccountClick={handleAccountClick}
+              onLogoClick={handleBackToLanding}
+            />
+            <main>
+              <TermsOfServicePage />
+            </main>
+          </div>
+        );
+
       case "landing":
       default:
         return (
@@ -473,6 +576,7 @@ function App() {
               showAccount={false}
               showNavigation={true}
               showAuthButtons={true}
+              showTestAccount={true}
               onSignInClick={handleGoToSignIn}
               onGetStartedClick={handleGetStarted}
               onAccountClick={handleAccountClick}
@@ -481,6 +585,7 @@ function App() {
               onFeaturesClick={handleFeaturesClick}
               onFAQClick={handleFAQClick}
               onPricingClick={handlePricingClick}
+              onLogoClick={handleBackToLanding}
             />
             <LandingPage
               onGetStarted={handleGetStarted}
@@ -488,13 +593,24 @@ function App() {
               onAccountClick={handleAccountClick}
               onDemoClick={handleDemoClick}
               onTutorialSelect={handleTutorialSelect}
+              onLicenseClick={handleGoToLicense}
+              onRoadmapClick={handleRoadmapClick}
+              onUpdatesClick={handleUpdatesClick}
+              onSupportClick={handleSupportClick}
+              onContactClick={handleContactClick}
+              onPrivacyPolicyClick={handlePrivacyPolicyClick}
+              onTermsOfServiceClick={handleTermsOfServiceClick}
             />
           </div>
         );
     }
   };
 
-  return <div className="min-h-screen">{renderCurrentView()}</div>;
+  return (
+    <I18nProvider>
+      <div className="min-h-screen">{renderCurrentView()}</div>
+    </I18nProvider>
+  );
 }
 
 export default App;
diff --git a/src/components/AccountPage.tsx b/src/components/AccountPage.tsx
new file mode 100644
index 0000000..5a45a9e
--- /dev/null
+++ b/src/components/AccountPage.tsx
@@ -0,0 +1,552 @@
+import * as React from "react";
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { Progress } from "./ui/progress";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { useAppStore } from "../stores/useAppStore";
+import { useTranslation, formatDate } from "../lib/i18n.tsx";
+import type { User } from "../types/user";
+import type { Language } from "../lib/i18n.tsx";
+
+interface AccountPageProps {
+  onGoToEditor?: () => void;
+  onLogout?: () => void;
+}
+
+/**
+ * 현대적인 shadcn UI를 사용한 Account 페이지 컴포넌트
+ * - 구독 플랜 관리 (Card, Dialog, AlertDialog)
+ * - 사용량 분석 차트 (recharts)
+ * - 사용량 한계 경고 (Badge, Progress)
+ * - 사용자 설정
+ */
+const AccountPage: React.FC<AccountPageProps> = ({
+  onGoToEditor,
+  onLogout,
+}) => {
+  const {
+    user,
+    language,
+    historyPanelPosition,
+    setLanguage,
+    setHistoryPanelPosition,
+  } = useAppStore();
+  const { t } = useTranslation();
+  const [changePlanOpen, setChangePlanOpen] = useState(false);
+  const [cancelSubOpen, setCancelSubOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  // 플랜별 한계값 계산
+  const getPlanLimits = (plan: string) => {
+    switch (plan) {
+      case "free":
+        return { aiQueries: 30, cellCount: 300 };
+      case "lite":
+        return { aiQueries: 100, cellCount: 1000 };
+      case "pro":
+        return { aiQueries: 500, cellCount: 5000 };
+      default:
+        return { aiQueries: 0, cellCount: 0 };
+    }
+  };
+
+  // 플랜 상태 배지 색상
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case "active":
+        return "default";
+      case "trial":
+        return "secondary";
+      case "canceled":
+        return "destructive";
+      default:
+        return "outline";
+    }
+  };
+
+  // 사용량 경고 여부 확인
+  const isUsageWarning = (used: number, limit: number) => {
+    return used / limit >= 0.8; // 80% 이상 사용 시 경고
+  };
+
+  // 사용량 진행률 계산
+  const getUsagePercentage = (used: number, limit: number) => {
+    return Math.min((used / limit) * 100, 100);
+  };
+
+  // 확장된 사용량 데이터 (최근 30일)
+  const generateUsageData = () => {
+    const data = [];
+    const today = new Date();
+    for (let i = 29; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      data.push({
+        date: formatDate(date, language),
+        aiQueries: Math.floor(Math.random() * 10) + 1,
+        cellCount: Math.floor(Math.random() * 50) + 10,
+        promptCount: Math.floor(Math.random() * 8) + 1,
+        editedCells: Math.floor(Math.random() * 40) + 5,
+      });
+    }
+    return data;
+  };
+
+  const usageData = generateUsageData();
+  const limits = getPlanLimits(user?.subscription?.plan || "free");
+
+  if (!user) {
+    return (
+      <div className="container mx-auto py-8">
+        <div className="text-center">
+          <p className="text-gray-600">{t.common.loading}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto py-8 space-y-6">
+      {/* 페이지 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            {t.account.title}
+          </h1>
+          <p className="text-muted-foreground">{t.account.subtitle}</p>
+        </div>
+        <div className="flex space-x-2">
+          <Button onClick={onGoToEditor} variant="outline">
+            {t.account.goToEditor}
+          </Button>
+          <Button onClick={onLogout} variant="destructive">
+            {t.account.logout}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {/* 사용자 정보 카드 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t.account.userInfo}</CardTitle>
+            <CardDescription>{t.account.userInfo}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div>
+              <p className="text-sm font-medium">{t.account.email}</p>
+              <p className="text-sm text-muted-foreground">{user.email}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium">{t.account.name}</p>
+              <p className="text-sm text-muted-foreground">{user.name}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium">{t.account.joinDate}</p>
+              <p className="text-sm text-muted-foreground">
+                {user.createdAt && formatDate(user.createdAt, language)}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm font-medium">{t.account.lastLogin}</p>
+              <p className="text-sm text-muted-foreground">
+                {user.lastLoginAt && formatDate(user.lastLoginAt, language)}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 구독 플랜 카드 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center justify-between">
+              구독 플랜
+              <Badge
+                variant={getStatusBadgeVariant(user.subscription?.status || "")}
+              >
+                {user.subscription?.status?.toUpperCase()}
+              </Badge>
+            </CardTitle>
+            <CardDescription>현재 구독 정보</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <p className="text-2xl font-bold">
+                {user.subscription?.plan?.toUpperCase()} 플랜
+              </p>
+              <p className="text-sm text-muted-foreground">
+                다음 결제일:{" "}
+                {user.subscription?.currentPeriodEnd?.toLocaleDateString(
+                  "ko-KR",
+                )}
+              </p>
+            </div>
+            <div className="flex space-x-2">
+              <Dialog open={changePlanOpen} onOpenChange={setChangePlanOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    플랜 변경
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>플랜 변경</DialogTitle>
+                    <DialogDescription>
+                      새로운 플랜을 선택하세요. 변경 사항은 즉시 적용됩니다.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-3 gap-4">
+                      <Card className="cursor-pointer hover:bg-accent">
+                        <CardHeader className="pb-2">
+                          <CardTitle className="text-sm">Free</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                          <p className="text-2xl font-bold">₩0</p>
+                          <p className="text-xs text-muted-foreground">월</p>
+                        </CardContent>
+                      </Card>
+                      <Card className="cursor-pointer hover:bg-accent">
+                        <CardHeader className="pb-2">
+                          <CardTitle className="text-sm">Lite</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                          <p className="text-2xl font-bold">₩5,900</p>
+                          <p className="text-xs text-muted-foreground">월</p>
+                        </CardContent>
+                      </Card>
+                      <Card className="cursor-pointer hover:bg-accent">
+                        <CardHeader className="pb-2">
+                          <CardTitle className="text-sm">Pro</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                          <p className="text-2xl font-bold">₩14,900</p>
+                          <p className="text-xs text-muted-foreground">월</p>
+                        </CardContent>
+                      </Card>
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button
+                      variant="outline"
+                      onClick={() => setChangePlanOpen(false)}
+                    >
+                      취소
+                    </Button>
+                    <Button onClick={() => setChangePlanOpen(false)}>
+                      변경하기
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+
+              <AlertDialog open={cancelSubOpen} onOpenChange={setCancelSubOpen}>
+                <AlertDialogTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    구독 취소
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      구독을 취소하시겠습니까?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      구독을 취소하면 현재 결제 주기가 끝날 때까지 서비스를
+                      이용할 수 있습니다. 취소 후에는 Free 플랜으로 자동
+                      전환됩니다.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>취소</AlertDialogCancel>
+                    <AlertDialogAction>구독 취소</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 사용량 요약 카드 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>사용량 요약</CardTitle>
+            <CardDescription>현재 사용량 및 한계</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* AI 쿼리 사용량 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-sm font-medium">AI 쿼리</p>
+                {isUsageWarning(
+                  user.subscription?.usage?.aiQueries || 0,
+                  limits.aiQueries,
+                ) && (
+                  <Badge variant="destructive" className="text-xs">
+                    경고
+                  </Badge>
+                )}
+              </div>
+              <Progress
+                value={getUsagePercentage(
+                  user.subscription?.usage?.aiQueries || 0,
+                  limits.aiQueries,
+                )}
+                className={
+                  isUsageWarning(
+                    user.subscription?.usage?.aiQueries || 0,
+                    limits.aiQueries,
+                  )
+                    ? "bg-red-100"
+                    : ""
+                }
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                {user.subscription?.usage?.aiQueries || 0} / {limits.aiQueries}{" "}
+                사용
+              </p>
+            </div>
+
+            {/* 셀 카운트 사용량 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-sm font-medium">셀 카운트</p>
+                {isUsageWarning(
+                  user.subscription?.usage?.cellCount || 0,
+                  limits.cellCount,
+                ) && (
+                  <Badge variant="destructive" className="text-xs">
+                    경고
+                  </Badge>
+                )}
+              </div>
+              <Progress
+                value={getUsagePercentage(
+                  user.subscription?.usage?.cellCount || 0,
+                  limits.cellCount,
+                )}
+                className={
+                  isUsageWarning(
+                    user.subscription?.usage?.cellCount || 0,
+                    limits.cellCount,
+                  )
+                    ? "bg-red-100"
+                    : ""
+                }
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                {user.subscription?.usage?.cellCount || 0} / {limits.cellCount}{" "}
+                사용
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 사용량 분석 차트 */}
+      <Card className="col-span-full">
+        <CardHeader>
+          <CardTitle>{t.account.usageAnalytics}</CardTitle>
+          <CardDescription>
+            {t.account.usageAnalyticsDescription}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[400px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={usageData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip
+                  formatter={(value, name) => [
+                    value,
+                    t.account.tooltipLabels[
+                      name as keyof typeof t.account.tooltipLabels
+                    ] || name,
+                  ]}
+                  labelFormatter={(label) => `${t.account.date}: ${label}`}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="aiQueries"
+                  stroke="#8884d8"
+                  strokeWidth={2}
+                  name="aiQueries"
+                />
+                <Line
+                  type="monotone"
+                  dataKey="cellCount"
+                  stroke="#82ca9d"
+                  strokeWidth={2}
+                  name="cellCount"
+                />
+                <Line
+                  type="monotone"
+                  dataKey="promptCount"
+                  stroke="#ff7300"
+                  strokeWidth={2}
+                  name="promptCount"
+                />
+                <Line
+                  type="monotone"
+                  dataKey="editedCells"
+                  stroke="#00bcd4"
+                  strokeWidth={2}
+                  name="editedCells"
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 설정 카드 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t.account.settings}</CardTitle>
+          <CardDescription>{t.account.settings}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-sm font-medium mb-2">{t.account.language}</p>
+              <Badge variant="outline">
+                {language === "ko" ? t.account.korean : t.account.english}
+              </Badge>
+            </div>
+            <div>
+              <p className="text-sm font-medium mb-2">
+                {t.account.historyPanelPosition}
+              </p>
+              <Badge variant="outline">
+                {historyPanelPosition === "right"
+                  ? t.account.right
+                  : t.account.left}
+              </Badge>
+            </div>
+          </div>
+          <div className="pt-4">
+            <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  {t.account.changeSettings}
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>{t.account.changeSettings}</DialogTitle>
+                  <DialogDescription>{t.account.settings}</DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <label htmlFor="language" className="text-right">
+                      {t.account.language}
+                    </label>
+                    <div className="col-span-3">
+                      <Select
+                        value={language}
+                        onValueChange={(value: Language) => setLanguage(value)}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder={t.account.language} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="ko">{t.account.korean}</SelectItem>
+                          <SelectItem value="en">
+                            {t.account.english}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <label htmlFor="panel-position" className="text-right">
+                      {t.account.historyPanelPosition}
+                    </label>
+                    <div className="col-span-3">
+                      <Select
+                        value={historyPanelPosition}
+                        onValueChange={(value: "left" | "right") =>
+                          setHistoryPanelPosition(value)
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={t.account.historyPanelPosition}
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="left">{t.account.left}</SelectItem>
+                          <SelectItem value="right">
+                            {t.account.right}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setSettingsOpen(false)}
+                  >
+                    {t.common.cancel}
+                  </Button>
+                  <Button onClick={() => setSettingsOpen(false)}>
+                    {t.common.save}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AccountPage;
diff --git a/src/components/ContactPage.tsx b/src/components/ContactPage.tsx
new file mode 100644
index 0000000..97dc16e
--- /dev/null
+++ b/src/components/ContactPage.tsx
@@ -0,0 +1,417 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { cn } from "../lib/utils";
+
+interface ContactPageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const ContactPage = React.forwardRef<HTMLDivElement, ContactPageProps>(
+  ({ className, onBack, ...props }, ref) => {
+    const [formData, setFormData] = useState({
+      name: "",
+      email: "",
+      company: "",
+      subject: "",
+      message: "",
+      contactReason: "",
+    });
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+    const contactReasons = [
+      { value: "sales", label: "영업 문의", icon: "💼" },
+      { value: "partnership", label: "파트너십", icon: "🤝" },
+      { value: "feedback", label: "피드백", icon: "💭" },
+      { value: "media", label: "미디어 문의", icon: "📰" },
+      { value: "general", label: "일반 문의", icon: "💬" },
+      { value: "other", label: "기타", icon: "❓" },
+    ];
+
+    const handleInputChange = (
+      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => {
+      const { name, value } = e.target;
+      setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
+        const emailData = {
+          to: "contact@sheeteasy.ai",
+          from: formData.email,
+          subject: `[${formData.contactReason.toUpperCase()}] ${formData.subject}`,
+          html: `
+            <h2>문의사항</h2>
+            <p><strong>이름:</strong> ${formData.name}</p>
+            <p><strong>이메일:</strong> ${formData.email}</p>
+            <p><strong>회사:</strong> ${formData.company || "개인"}</p>
+            <p><strong>문의 유형:</strong> ${contactReasons.find((r) => r.value === formData.contactReason)?.label}</p>
+            <p><strong>제목:</strong> ${formData.subject}</p>
+            <hr>
+            <p><strong>내용:</strong></p>
+            <p>${formData.message.replace(/\n/g, "<br>")}</p>
+          `,
+        };
+
+        // TODO: 실제 이메일 서비스 연동
+        console.log("문의사항 전송:", emailData);
+
+        setTimeout(() => {
+          alert(
+            "문의사항이 성공적으로 전송되었습니다. 빠른 시일 내에 답변드리겠습니다.",
+          );
+          setFormData({
+            name: "",
+            email: "",
+            company: "",
+            subject: "",
+            message: "",
+            contactReason: "",
+          });
+          setIsSubmitting(false);
+        }, 1000);
+      } catch (error) {
+        alert("문의사항 전송에 실패했습니다. 다시 시도해주세요.");
+        setIsSubmitting(false);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+          className,
+        )}
+        {...props}
+      >
+        <div className="container py-12">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2">
+                문의하기
+              </h1>
+              <p className="text-lg text-gray-600">
+                궁금한 점이나 제안사항이 있으시면 언제든 연락주세요
+              </p>
+            </div>
+            {onBack && (
+              <Button
+                variant="outline"
+                onClick={onBack}
+                className="flex items-center gap-2"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                돌아가기
+              </Button>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Contact Form */}
+            <div className="lg:col-span-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <span className="text-2xl">✉️</span>
+                    문의 보내기
+                  </CardTitle>
+                  <p className="text-gray-600">
+                    아래 양식을 작성해주시면 빠르게 답변드리겠습니다.
+                  </p>
+                </CardHeader>
+                <CardContent>
+                  <form onSubmit={handleSubmit} className="space-y-6">
+                    {/* Contact Reason */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-3">
+                        문의 유형
+                      </label>
+                      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                        {contactReasons.map((reason) => (
+                          <button
+                            key={reason.value}
+                            type="button"
+                            onClick={() =>
+                              setFormData((prev) => ({
+                                ...prev,
+                                contactReason: reason.value,
+                              }))
+                            }
+                            className={cn(
+                              "p-3 rounded-lg border text-left transition-all",
+                              formData.contactReason === reason.value
+                                ? "border-blue-500 bg-blue-50 text-blue-700"
+                                : "border-gray-200 hover:border-gray-300",
+                            )}
+                          >
+                            <div className="flex items-center gap-2">
+                              <span className="text-lg">{reason.icon}</span>
+                              <span className="text-sm font-medium">
+                                {reason.label}
+                              </span>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      {/* Name */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          이름 *
+                        </label>
+                        <input
+                          type="text"
+                          name="name"
+                          value={formData.name}
+                          onChange={handleInputChange}
+                          placeholder="성함을 입력해주세요"
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          required
+                        />
+                      </div>
+
+                      {/* Email */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          이메일 *
+                        </label>
+                        <input
+                          type="email"
+                          name="email"
+                          value={formData.email}
+                          onChange={handleInputChange}
+                          placeholder="답변받을 이메일을 입력해주세요"
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          required
+                        />
+                      </div>
+                    </div>
+
+                    {/* Company */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        회사명 (선택)
+                      </label>
+                      <input
+                        type="text"
+                        name="company"
+                        value={formData.company}
+                        onChange={handleInputChange}
+                        placeholder="소속 회사나 기관을 입력해주세요"
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      />
+                    </div>
+
+                    {/* Subject */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        제목 *
+                      </label>
+                      <input
+                        type="text"
+                        name="subject"
+                        value={formData.subject}
+                        onChange={handleInputChange}
+                        placeholder="문의 제목을 입력해주세요"
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        required
+                      />
+                    </div>
+
+                    {/* Message */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        문의 내용 *
+                      </label>
+                      <textarea
+                        name="message"
+                        value={formData.message}
+                        onChange={handleInputChange}
+                        placeholder="문의 내용을 자세히 작성해주세요"
+                        rows={6}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical"
+                        required
+                      />
+                    </div>
+
+                    <Button
+                      type="submit"
+                      disabled={
+                        !formData.contactReason ||
+                        !formData.name.trim() ||
+                        !formData.email.trim() ||
+                        !formData.subject.trim() ||
+                        !formData.message.trim() ||
+                        isSubmitting
+                      }
+                      className="w-full bg-green-600 hover:bg-green-700 disabled:opacity-50"
+                    >
+                      {isSubmitting ? "전송 중..." : "문의 보내기"}
+                    </Button>
+                  </form>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Contact Information */}
+            <div className="space-y-6">
+              {/* Contact Methods */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">연락처 정보</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
+                        <span className="text-sm">📧</span>
+                      </div>
+                      <div>
+                        <h4 className="font-medium text-gray-900">이메일</h4>
+                        <a
+                          href="mailto:contact@sheeteasy.ai"
+                          className="text-blue-600 hover:underline text-sm"
+                        >
+                          contact@sheeteasy.ai
+                        </a>
+                        <p className="text-xs text-gray-500 mt-1">
+                          24-48시간 내 답변
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-start gap-3">
+                      <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
+                        <span className="text-sm">💬</span>
+                      </div>
+                      <div>
+                        <h4 className="font-medium text-gray-900">
+                          실시간 채팅
+                        </h4>
+                        <p className="text-sm text-gray-600">
+                          평일 9:00 - 18:00
+                        </p>
+                        <p className="text-xs text-gray-500 mt-1">
+                          즉시 답변 가능
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-start gap-3">
+                      <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
+                        <span className="text-sm">📱</span>
+                      </div>
+                      <div>
+                        <h4 className="font-medium text-gray-900">
+                          소셜 미디어
+                        </h4>
+                        <div className="flex gap-2 mt-1">
+                          <a
+                            href="#"
+                            className="text-blue-600 hover:underline text-sm"
+                          >
+                            Twitter
+                          </a>
+                          <a
+                            href="#"
+                            className="text-blue-600 hover:underline text-sm"
+                          >
+                            LinkedIn
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Business Hours */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">운영 시간</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">평일:</span>
+                      <span className="font-medium">09:00 - 18:00</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">토요일:</span>
+                      <span className="font-medium">10:00 - 15:00</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">일요일:</span>
+                      <span className="text-gray-500">휴무</span>
+                    </div>
+                    <p className="text-xs text-gray-500 mt-3">
+                      * 한국 표준시(KST) 기준
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* FAQ Link */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">자주 묻는 질문</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-gray-600 mb-3">
+                    일반적인 질문들에 대한 답변을 미리 확인해보세요.
+                  </p>
+                  <Button variant="outline" className="w-full">
+                    FAQ 보러가기
+                  </Button>
+                </CardContent>
+              </Card>
+
+              {/* Response Time */}
+              <Card className="bg-gradient-to-r from-green-50 to-blue-50">
+                <CardContent className="p-4">
+                  <div className="text-center">
+                    <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                      <span className="text-xl">⚡</span>
+                    </div>
+                    <h3 className="font-semibold text-gray-900 mb-1">
+                      빠른 응답
+                    </h3>
+                    <p className="text-sm text-gray-600">
+                      평균 12시간 이내 답변드립니다
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+ContactPage.displayName = "ContactPage";
+
+export default ContactPage;
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 2471524..3b4c238 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -13,6 +13,13 @@ interface LandingPageProps {
   onAccountClick?: () => void;
   onDemoClick?: () => void;
   onTutorialSelect?: (tutorial: TutorialItem) => void;
+  onLicenseClick?: () => void;
+  onRoadmapClick?: () => void;
+  onUpdatesClick?: () => void;
+  onSupportClick?: () => void;
+  onContactClick?: () => void;
+  onPrivacyPolicyClick?: () => void;
+  onTermsOfServiceClick?: () => void;
 }
 
 /**
@@ -26,6 +33,13 @@ const LandingPage: React.FC<LandingPageProps> = ({
   onGetStarted,
   onDemoClick,
   onTutorialSelect,
+  onLicenseClick,
+  onRoadmapClick,
+  onUpdatesClick,
+  onSupportClick,
+  onContactClick,
+  onPrivacyPolicyClick,
+  onTermsOfServiceClick,
 }) => {
   return (
     <div className="min-h-screen bg-white">
@@ -48,7 +62,15 @@ const LandingPage: React.FC<LandingPageProps> = ({
       </main>
 
       {/* Footer - 푸터 정보 */}
-      <Footer />
+      <Footer
+        onLicenseClick={onLicenseClick}
+        onRoadmapClick={onRoadmapClick}
+        onUpdatesClick={onUpdatesClick}
+        onSupportClick={onSupportClick}
+        onContactClick={onContactClick}
+        onPrivacyPolicyClick={onPrivacyPolicyClick}
+        onTermsOfServiceClick={onTermsOfServiceClick}
+      />
     </div>
   );
 };
diff --git a/src/components/LicensePage.tsx b/src/components/LicensePage.tsx
new file mode 100644
index 0000000..4fb81ee
--- /dev/null
+++ b/src/components/LicensePage.tsx
@@ -0,0 +1,389 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+
+interface LicensePageProps {
+  onBack?: () => void;
+}
+
+interface LibraryInfo {
+  name: string;
+  version: string;
+  license: string;
+  description: string;
+  url?: string;
+}
+
+/**
+ * 오픈소스 라이브러리 라이센스 정보 페이지
+ * - 사용된 모든 오픈소스 라이브러리 목록
+ * - 라이센스 타입별 분류
+ * - 각 라이브러리의 상세 정보
+ */
+const LicensePage: React.FC<LicensePageProps> = ({ onBack }) => {
+  // 사용된 오픈소스 라이브러리 정보
+  const libraries: LibraryInfo[] = [
+    // React 생태계
+    {
+      name: "React",
+      version: "18.3.1",
+      license: "MIT",
+      description: "사용자 인터페이스 구축을 위한 JavaScript 라이브러리",
+      url: "https://reactjs.org/",
+    },
+    {
+      name: "React DOM",
+      version: "18.3.1",
+      license: "MIT",
+      description: "React를 위한 DOM 렌더러",
+      url: "https://reactjs.org/",
+    },
+
+    // UI 프레임워크
+    {
+      name: "Tailwind CSS",
+      version: "3.4.17",
+      license: "MIT",
+      description: "유틸리티 우선 CSS 프레임워크",
+      url: "https://tailwindcss.com/",
+    },
+    {
+      name: "Radix UI",
+      version: "1.0+",
+      license: "MIT",
+      description: "접근 가능한 디자인 시스템 및 컴포넌트 라이브러리",
+      url: "https://www.radix-ui.com/",
+    },
+    {
+      name: "Lucide React",
+      version: "0.468.0",
+      license: "ISC",
+      description: "아름다운 오픈소스 아이콘 라이브러리",
+      url: "https://lucide.dev/",
+    },
+    {
+      name: "class-variance-authority",
+      version: "0.7.1",
+      license: "Apache 2.0",
+      description: "CSS-in-JS 변형 API",
+      url: "https://cva.style/",
+    },
+    {
+      name: "clsx",
+      version: "2.1.1",
+      license: "MIT",
+      description: "조건부 CSS 클래스 이름 구성 유틸리티",
+      url: "https://github.com/lukeed/clsx",
+    },
+    {
+      name: "tailwind-merge",
+      version: "2.5.4",
+      license: "MIT",
+      description: "Tailwind CSS 클래스 병합 유틸리티",
+      url: "https://github.com/dcastil/tailwind-merge",
+    },
+
+    // 차트 라이브러리
+    {
+      name: "Recharts",
+      version: "2.12+",
+      license: "MIT",
+      description: "React용 재사용 가능한 차트 라이브러리",
+      url: "https://recharts.org/",
+    },
+
+    // Excel 처리
+    {
+      name: "Luckysheet",
+      version: "2.1.13",
+      license: "MIT",
+      description: "온라인 스프레드시트 편집기",
+      url: "https://mengshukeji.github.io/LuckysheetDocs/",
+    },
+    {
+      name: "LuckyExcel",
+      version: "1.0.1",
+      license: "MIT",
+      description: "Excel과 Luckysheet 간 변환 라이브러리",
+      url: "https://github.com/mengshukeji/LuckyExcel",
+    },
+    {
+      name: "@zwight/luckyexcel",
+      version: "1.1.6",
+      license: "MIT",
+      description: "LuckyExcel의 개선된 버전",
+      url: "https://github.com/zwight/LuckyExcel",
+    },
+    {
+      name: "FileSaver.js",
+      version: "2.0.5",
+      license: "MIT",
+      description: "클라이언트 사이드 파일 저장 라이브러리",
+      url: "https://github.com/eligrey/FileSaver.js",
+    },
+
+    // Univer 생태계
+    {
+      name: "Univer Core",
+      version: "0.8.2",
+      license: "Apache 2.0",
+      description: "Univer 스프레드시트 엔진 코어",
+      url: "https://univer.ai/",
+    },
+    {
+      name: "Univer Sheets",
+      version: "0.8.2",
+      license: "Apache 2.0",
+      description: "Univer 스프레드시트 컴포넌트",
+      url: "https://univer.ai/",
+    },
+    {
+      name: "Univer Presets",
+      version: "0.8.2",
+      license: "Apache 2.0",
+      description: "Univer 사전 구성 패키지",
+      url: "https://univer.ai/",
+    },
+
+    // 상태 관리
+    {
+      name: "Zustand",
+      version: "5.0.2",
+      license: "MIT",
+      description: "작고 빠른 확장 가능한 상태 관리 솔루션",
+      url: "https://zustand-demo.pmnd.rs/",
+    },
+
+    // 개발 도구
+    {
+      name: "Vite",
+      version: "6.0.1",
+      license: "MIT",
+      description: "빠른 프론트엔드 빌드 도구",
+      url: "https://vitejs.dev/",
+    },
+    {
+      name: "TypeScript",
+      version: "5.6.2",
+      license: "Apache 2.0",
+      description: "JavaScript의 타입 안전 상위 집합",
+      url: "https://www.typescriptlang.org/",
+    },
+    {
+      name: "ESLint",
+      version: "9.15.0",
+      license: "MIT",
+      description: "JavaScript 및 JSX용 정적 코드 분석 도구",
+      url: "https://eslint.org/",
+    },
+    {
+      name: "Prettier",
+      version: "3.4.2",
+      license: "MIT",
+      description: "코드 포맷터",
+      url: "https://prettier.io/",
+    },
+
+    // 테스트
+    {
+      name: "Vitest",
+      version: "3.2.4",
+      license: "MIT",
+      description: "Vite 기반 단위 테스트 프레임워크",
+      url: "https://vitest.dev/",
+    },
+    {
+      name: "Testing Library",
+      version: "16.3.0",
+      license: "MIT",
+      description: "간단하고 완전한 테스트 유틸리티",
+      url: "https://testing-library.com/",
+    },
+  ];
+
+  // 라이센스별 분류
+  const licenseGroups = libraries.reduce(
+    (groups, lib) => {
+      const license = lib.license;
+      if (!groups[license]) {
+        groups[license] = [];
+      }
+      groups[license].push(lib);
+      return groups;
+    },
+    {} as Record<string, LibraryInfo[]>,
+  );
+
+  // 라이센스 타입별 색상
+  const getLicenseBadgeVariant = (license: string) => {
+    switch (license) {
+      case "MIT":
+        return "default";
+      case "Apache 2.0":
+        return "secondary";
+      case "ISC":
+        return "outline";
+      default:
+        return "outline";
+    }
+  };
+
+  return (
+    <div className="container mx-auto py-8 space-y-6">
+      {/* 페이지 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            오픈소스 라이센스
+          </h1>
+          <p className="text-muted-foreground">
+            sheetEasy AI에서 사용된 오픈소스 라이브러리들
+          </p>
+        </div>
+        <Button onClick={onBack} variant="outline">
+          뒤로 가기
+        </Button>
+      </div>
+
+      {/* 라이센스 요약 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>라이센스 요약</CardTitle>
+          <CardDescription>
+            사용된 오픈소스 라이브러리 {libraries.length}개의 라이센스 분포
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-4">
+            {Object.entries(licenseGroups).map(([license, libs]) => (
+              <div key={license} className="flex items-center space-x-2">
+                <Badge variant={getLicenseBadgeVariant(license)}>
+                  {license}
+                </Badge>
+                <span className="text-sm text-muted-foreground">
+                  {libs.length}개
+                </span>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 라이센스별 라이브러리 목록 */}
+      <div className="space-y-6">
+        {Object.entries(licenseGroups).map(([license, libs]) => (
+          <Card key={license}>
+            <CardHeader>
+              <CardTitle className="flex items-center space-x-2">
+                <Badge variant={getLicenseBadgeVariant(license)}>
+                  {license}
+                </Badge>
+                <span>{license} 라이센스</span>
+              </CardTitle>
+              <CardDescription>
+                {libs.length}개의 라이브러리가 {license} 라이센스를 사용합니다
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left py-2 px-4 font-medium">
+                        라이브러리
+                      </th>
+                      <th className="text-left py-2 px-4 font-medium">버전</th>
+                      <th className="text-left py-2 px-4 font-medium">설명</th>
+                      <th className="text-left py-2 px-4 font-medium">링크</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {libs.map((lib, index) => (
+                      <tr key={index} className="border-b last:border-b-0">
+                        <td className="py-3 px-4 font-medium">{lib.name}</td>
+                        <td className="py-3 px-4 text-muted-foreground">
+                          {lib.version}
+                        </td>
+                        <td className="py-3 px-4 text-sm text-muted-foreground max-w-md">
+                          {lib.description}
+                        </td>
+                        <td className="py-3 px-4">
+                          {lib.url && (
+                            <a
+                              href={lib.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-blue-600 hover:text-blue-800 text-sm underline"
+                            >
+                              공식 사이트
+                            </a>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* 추가 정보 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>라이센스 정보</CardTitle>
+          <CardDescription>오픈소스 라이센스에 대한 추가 정보</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h4 className="font-medium mb-2">MIT 라이센스</h4>
+            <p className="text-sm text-muted-foreground">
+              가장 관대한 오픈소스 라이센스 중 하나로, 상업적 사용, 수정, 배포,
+              개인 사용이 모두 허용됩니다. 저작권 표시와 라이센스 표시만
+              유지하면 됩니다.
+            </p>
+          </div>
+          <div>
+            <h4 className="font-medium mb-2">Apache 2.0 라이센스</h4>
+            <p className="text-sm text-muted-foreground">
+              Apache Software Foundation에서 만든 라이센스로, MIT와 유사하게
+              관대하지만 특허권에 대한 명시적인 부여와 보호를 포함합니다.
+            </p>
+          </div>
+          <div>
+            <h4 className="font-medium mb-2">ISC 라이센스</h4>
+            <p className="text-sm text-muted-foreground">
+              MIT 라이센스와 기능적으로 동일하지만 더 간단한 언어로 작성된
+              라이센스입니다.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 면책 조항 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>면책 조항</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            이 페이지에 나열된 모든 오픈소스 라이브러리는 각각의 라이센스 조건에
+            따라 사용됩니다. 각 라이브러리의 정확한 라이센스 조건은 해당
+            프로젝트의 공식 저장소에서 확인하시기 바랍니다. sheetEasy AI는
+            이러한 훌륭한 오픈소스 커뮤니티의 기여에 감사드립니다.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default LicensePage;
diff --git a/src/components/PrivacyPolicyPage.tsx b/src/components/PrivacyPolicyPage.tsx
new file mode 100644
index 0000000..95a4c6e
--- /dev/null
+++ b/src/components/PrivacyPolicyPage.tsx
@@ -0,0 +1,410 @@
+import * as React from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { cn } from "../lib/utils";
+
+interface PrivacyPolicyPageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const PrivacyPolicyPage = React.forwardRef<
+  HTMLDivElement,
+  PrivacyPolicyPageProps
+>(({ className, onBack, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+        className,
+      )}
+      {...props}
+    >
+      <div className="container py-12">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-4xl font-bold text-gray-900 mb-2">
+              개인정보처리방침
+            </h1>
+            <p className="text-lg text-gray-600">
+              sheetEasy AI 개인정보 보호 정책
+            </p>
+          </div>
+          {onBack && (
+            <Button
+              variant="outline"
+              onClick={onBack}
+              className="flex items-center gap-2"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              돌아가기
+            </Button>
+          )}
+        </div>
+
+        {/* Policy Content */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">🔒</span>
+              개인정보처리방침
+            </CardTitle>
+            <div className="text-sm text-gray-600">
+              <p>시행일자: 2025년 1월 1일</p>
+              <p>최종 개정일: 2025년 1월 1일</p>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="prose max-w-none space-y-8">
+              {/* Section 1 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제1조 (개인정보의 처리목적)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    sheetEasy AI(이하 "회사")는 다음의 목적을 위하여 개인정보를
+                    처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의
+                    용도로는 이용되지 않으며, 이용 목적이 변경되는 경우에는
+                    개인정보보호법 제18조에 따라 별도의 동의를 받는 등 필요한
+                    조치를 이행할 예정입니다.
+                  </p>
+                  <div className="bg-blue-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-2">개인정보 처리목적:</h3>
+                    <ul className="space-y-1 text-sm">
+                      <li>• 서비스 회원가입 및 관리</li>
+                      <li>• AI 기반 스프레드시트 편집 서비스 제공</li>
+                      <li>• 고객 문의 및 지원 서비스 제공</li>
+                      <li>• 서비스 개선 및 맞춤형 서비스 제공</li>
+                      <li>• 마케팅 및 광고에의 활용</li>
+                      <li>• 법정의무 이행</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 2 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제2조 (처리하는 개인정보의 항목)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="bg-green-50 p-4 rounded-lg">
+                      <h3 className="font-semibold mb-2">필수항목</h3>
+                      <ul className="space-y-1 text-sm">
+                        <li>• 이메일 주소</li>
+                        <li>• 비밀번호 (암호화 저장)</li>
+                        <li>• 이름 또는 닉네임</li>
+                        <li>• 서비스 이용기록</li>
+                        <li>• 접속 IP 정보</li>
+                      </ul>
+                    </div>
+                    <div className="bg-yellow-50 p-4 rounded-lg">
+                      <h3 className="font-semibold mb-2">선택항목</h3>
+                      <ul className="space-y-1 text-sm">
+                        <li>• 프로필 사진</li>
+                        <li>• 회사명</li>
+                        <li>• 전화번호</li>
+                        <li>• 마케팅 수신 동의</li>
+                      </ul>
+                    </div>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    ※ 업로드된 파일 데이터는 브라우저 내에서만 처리되며 서버에
+                    저장되지 않습니다.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 3 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제3조 (개인정보의 처리 및 보유기간)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    회사는 법령에 따른 개인정보 보유·이용기간 또는
+                    정보주체로부터 개인정보를 수집 시에 동의받은 개인정보
+                    보유·이용기간 내에서 개인정보를 처리·보유합니다.
+                  </p>
+                  <div className="bg-gray-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-3">보유기간</h3>
+                    <div className="space-y-2 text-sm">
+                      <div className="flex justify-between">
+                        <span>회원 정보:</span>
+                        <span className="font-medium">회원 탈퇴시까지</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>서비스 이용기록:</span>
+                        <span className="font-medium">3년</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>결제정보:</span>
+                        <span className="font-medium">5년 (전자상거래법)</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>불만처리 기록:</span>
+                        <span className="font-medium">3년</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 4 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제4조 (개인정보의 제3자 제공)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    회사는 개인정보를 제1조(개인정보의 처리목적)에서 명시한 범위
+                    내에서만 처리하며, 정보주체의 동의, 법률의 특별한 규정 등
+                    개인정보보호법 제17조에 해당하는 경우에만 개인정보를
+                    제3자에게 제공합니다.
+                  </p>
+                  <div className="bg-red-50 p-4 rounded-lg border border-red-200">
+                    <h3 className="font-semibold mb-2 text-red-800">
+                      제3자 제공 현황
+                    </h3>
+                    <p className="text-sm text-red-700">
+                      현재 sheetEasy AI는 개인정보를 제3자에게 제공하지
+                      않습니다. 향후 제공이 필요한 경우 사전에 동의를
+                      받겠습니다.
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 5 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제5조 (개인정보처리의 위탁)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    회사는 원활한 개인정보 업무처리를 위하여 다음과 같이
+                    개인정보 처리업무를 위탁하고 있습니다.
+                  </p>
+                  <div className="overflow-x-auto">
+                    <table className="w-full border border-gray-300 text-sm">
+                      <thead className="bg-gray-100">
+                        <tr>
+                          <th className="border border-gray-300 p-2 text-left">
+                            수탁업체
+                          </th>
+                          <th className="border border-gray-300 p-2 text-left">
+                            위탁업무
+                          </th>
+                          <th className="border border-gray-300 p-2 text-left">
+                            보유기간
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td className="border border-gray-300 p-2">
+                            클라우드 서비스 제공업체
+                          </td>
+                          <td className="border border-gray-300 p-2">
+                            서버 운영 및 데이터 보관
+                          </td>
+                          <td className="border border-gray-300 p-2">
+                            위탁계약 종료시까지
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className="border border-gray-300 p-2">
+                            이메일 서비스 제공업체
+                          </td>
+                          <td className="border border-gray-300 p-2">
+                            이메일 발송 서비스
+                          </td>
+                          <td className="border border-gray-300 p-2">
+                            위탁계약 종료시까지
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 6 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제6조 (정보주체의 권리·의무 및 행사방법)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    정보주체는 회사에 대해 언제든지 다음 각 호의 개인정보 보호
+                    관련 권리를 행사할 수 있습니다.
+                  </p>
+                  <div className="bg-blue-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-2">정보주체의 권리</h3>
+                    <ul className="space-y-2 text-sm">
+                      <li>• 개인정보 처리현황 통지요구</li>
+                      <li>• 개인정보 열람요구</li>
+                      <li>• 개인정보 정정·삭제요구</li>
+                      <li>• 개인정보 처리정지요구</li>
+                    </ul>
+                  </div>
+                  <div className="bg-green-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-2">권리 행사 방법</h3>
+                    <ul className="space-y-1 text-sm">
+                      <li>• 이메일: privacy@sheeteasy.ai</li>
+                      <li>• 서면, 전화, 이메일을 통하여 하실 수 있으며</li>
+                      <li>• 회사는 이에 대해 지체없이 조치하겠습니다.</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 7 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제7조 (개인정보의 안전성 확보조치)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    회사는 개인정보보호법 제29조에 따라 다음과 같이 안전성
+                    확보에 필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.
+                  </p>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="bg-purple-50 p-4 rounded-lg">
+                      <h3 className="font-semibold mb-2">기술적 조치</h3>
+                      <ul className="space-y-1 text-sm">
+                        <li>• SSL/TLS 암호화</li>
+                        <li>• 비밀번호 암호화</li>
+                        <li>• 접근권한 관리</li>
+                        <li>• 보안프로그램 설치</li>
+                      </ul>
+                    </div>
+                    <div className="bg-orange-50 p-4 rounded-lg">
+                      <h3 className="font-semibold mb-2">관리적 조치</h3>
+                      <ul className="space-y-1 text-sm">
+                        <li>• 내부관리계획 수립</li>
+                        <li>• 정기적 직원 교육</li>
+                        <li>• 개인정보 취급자 지정</li>
+                        <li>• 손상·유출 방지</li>
+                      </ul>
+                    </div>
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <h3 className="font-semibold mb-2">물리적 조치</h3>
+                      <ul className="space-y-1 text-sm">
+                        <li>• 전산실, 자료보관실 통제</li>
+                        <li>• 개인정보 보관 시설 물리적 접근 통제</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 8 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제8조 (개인정보보호책임자)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    회사는 개인정보 처리에 관한 업무를 총괄해서 책임지고,
+                    개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을
+                    위하여 아래와 같이 개인정보보호책임자를 지정하고 있습니다.
+                  </p>
+                  <div className="bg-gray-50 p-6 rounded-lg">
+                    <h3 className="font-semibold mb-4">개인정보보호책임자</h3>
+                    <div className="space-y-2 text-sm">
+                      <div className="flex">
+                        <span className="w-20 text-gray-600">성명:</span>
+                        <span className="font-medium">개인정보보호책임자</span>
+                      </div>
+                      <div className="flex">
+                        <span className="w-20 text-gray-600">직책:</span>
+                        <span className="font-medium">개발팀장</span>
+                      </div>
+                      <div className="flex">
+                        <span className="w-20 text-gray-600">이메일:</span>
+                        <span className="font-medium">
+                          privacy@sheeteasy.ai
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 9 */}
+              <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                  제9조 (개인정보 처리방침 변경)
+                </h2>
+                <div className="text-gray-700 space-y-4">
+                  <p>
+                    이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에
+                    따른 변경내용의 추가, 삭제 및 정정이 있는 경우에는
+                    변경사항의 시행 7일 전부터 공지사항을 통하여 고지할
+                    것입니다.
+                  </p>
+                  <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                    <p className="text-sm text-blue-800">
+                      <strong>공지방법:</strong> 서비스 내 공지사항, 이메일 통지
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {/* Contact Info */}
+              <section className="bg-gradient-to-r from-green-50 to-blue-50 p-6 rounded-lg">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">문의처</h2>
+                <div className="space-y-2 text-sm text-gray-700">
+                  <p>
+                    개인정보 처리방침에 대한 문의사항이 있으시면 아래로
+                    연락주시기 바랍니다.
+                  </p>
+                  <div className="space-y-1">
+                    <p>
+                      <strong>이메일:</strong> privacy@sheeteasy.ai
+                    </p>
+                    <p>
+                      <strong>개인정보보호 전담 이메일:</strong>{" "}
+                      dpo@sheeteasy.ai
+                    </p>
+                    <p>
+                      <strong>
+                        개인정보보호위원회 개인정보보호 종합지원 포털:
+                      </strong>{" "}
+                      privacy.go.kr
+                    </p>
+                    <p>
+                      <strong>개인정보 침해신고센터:</strong> privacy.go.kr
+                      (국번없이 182)
+                    </p>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+});
+
+PrivacyPolicyPage.displayName = "PrivacyPolicyPage";
+
+export default PrivacyPolicyPage;
diff --git a/src/components/RoadmapPage.tsx b/src/components/RoadmapPage.tsx
new file mode 100644
index 0000000..79a81d5
--- /dev/null
+++ b/src/components/RoadmapPage.tsx
@@ -0,0 +1,258 @@
+import * as React from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { cn } from "../lib/utils";
+
+interface RoadmapPageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const RoadmapPage = React.forwardRef<HTMLDivElement, RoadmapPageProps>(
+  ({ className, onBack, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+          className,
+        )}
+        {...props}
+      >
+        <div className="container py-12">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2">로드맵</h1>
+              <p className="text-lg text-gray-600">
+                sheetEasy AI의 미래 계획을 확인하세요
+              </p>
+            </div>
+            {onBack && (
+              <Button
+                variant="outline"
+                onClick={onBack}
+                className="flex items-center gap-2"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                돌아가기
+              </Button>
+            )}
+          </div>
+
+          {/* Roadmap Items */}
+          <div className="space-y-8">
+            {/* Q3 2025 */}
+            <Card className="border-l-4 border-l-green-500">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-2xl font-bold text-gray-900">
+                    Q3 2025
+                  </CardTitle>
+                  <Badge variant="default" className="bg-green-500">
+                    계획됨
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-100 text-green-600 mt-1">
+                      <span className="text-sm font-bold">🚀</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        공식 v1.0 출시
+                      </h3>
+                      <p className="text-gray-600">
+                        베타 테스트를 통해 수집된 피드백을 바탕으로 안정화된 첫
+                        번째 정식 버전을 출시합니다. 향상된 성능과 안정성을
+                        제공합니다.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-100 text-green-600 mt-1">
+                      <span className="text-sm font-bold">🔧</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        성능 최적화
+                      </h3>
+                      <p className="text-gray-600">
+                        대용량 스프레드시트 처리 속도 개선 및 메모리 사용량
+                        최적화를 통해 더 원활한 사용자 경험을 제공합니다.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-100 text-green-600 mt-1">
+                      <span className="text-sm font-bold">🌐</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        다국어 지원 확장
+                      </h3>
+                      <p className="text-gray-600">
+                        한국어, 영어 외에 일본어, 중국어 간체/번체 지원을
+                        추가하여 글로벌 사용자들에게 서비스를 확장합니다.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Q4 2025 */}
+            <Card className="border-l-4 border-l-blue-500">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-2xl font-bold text-gray-900">
+                    Q4 2025
+                  </CardTitle>
+                  <Badge
+                    variant="outline"
+                    className="border-blue-500 text-blue-600"
+                  >
+                    계획 중
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-600 mt-1">
+                      <span className="text-sm font-bold">🤖</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        자연어 데이터 분석 기능
+                      </h3>
+                      <p className="text-gray-600">
+                        "지난 3개월 매출 추이를 보여줘"와 같은 자연어 명령으로
+                        복잡한 데이터 분석을 수행할 수 있는 AI 기능을
+                        추가합니다.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-600 mt-1">
+                      <span className="text-sm font-bold">📊</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        애니메이션 시각화
+                      </h3>
+                      <p className="text-gray-600">
+                        시간 기반 데이터를 동적 애니메이션으로 표현하여 데이터의
+                        변화 과정을 직관적으로 이해할 수 있도록 합니다.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-600 mt-1">
+                      <span className="text-sm font-bold">🔗</span>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-gray-900 mb-1">
+                        외부 데이터 연동
+                      </h3>
+                      <p className="text-gray-600">
+                        Google Sheets, Notion, Airtable 등 다양한 외부
+                        플랫폼과의 실시간 데이터 동기화 기능을 제공합니다.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Future Plans */}
+            <Card className="border-l-4 border-l-purple-500 bg-gradient-to-r from-purple-50 to-pink-50">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-2xl font-bold text-gray-900">
+                    장기 계획 (2026+)
+                  </CardTitle>
+                  <Badge
+                    variant="outline"
+                    className="border-purple-500 text-purple-600"
+                  >
+                    연구 중
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  <p className="text-gray-700 font-medium">
+                    다음과 같은 혁신적인 기능들을 연구하고 있습니다:
+                  </p>
+                  <ul className="space-y-2 text-gray-600">
+                    <li className="flex items-center gap-2">
+                      <span className="text-purple-500">•</span>
+                      AI 기반 예측 분석 및 추천 시스템
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <span className="text-purple-500">•</span>
+                      협업 기능 및 실시간 공동 작업
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <span className="text-purple-500">•</span>
+                      모바일 앱 출시 (iOS/Android)
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <span className="text-purple-500">•</span>
+                      음성 인터페이스 및 자동화 워크플로우
+                    </li>
+                  </ul>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* CTA Section */}
+          <div className="mt-12 text-center">
+            <Card className="bg-gradient-to-r from-green-500 to-blue-600 text-white">
+              <CardContent className="p-8">
+                <h2 className="text-2xl font-bold mb-2">
+                  로드맵에 대한 의견이 있으신가요?
+                </h2>
+                <p className="mb-4 opacity-90">
+                  사용자 피드백은 우리 제품 발전의 원동력입니다. 원하는 기능이나
+                  개선사항이 있다면 언제든 알려주세요.
+                </p>
+                <Button
+                  variant="secondary"
+                  className="bg-white text-gray-900 hover:bg-gray-100"
+                >
+                  피드백 보내기
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+RoadmapPage.displayName = "RoadmapPage";
+
+export default RoadmapPage;
diff --git a/src/components/SupportPage.tsx b/src/components/SupportPage.tsx
new file mode 100644
index 0000000..19fdab6
--- /dev/null
+++ b/src/components/SupportPage.tsx
@@ -0,0 +1,380 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { cn } from "../lib/utils";
+import { useAppStore } from "../stores/useAppStore";
+
+interface SupportPageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const SupportPage = React.forwardRef<HTMLDivElement, SupportPageProps>(
+  ({ className, onBack, ...props }, ref) => {
+    const { user, isAuthenticated } = useAppStore();
+    const [selectedCategory, setSelectedCategory] = useState<string>("");
+    const [subject, setSubject] = useState<string>("");
+    const [message, setMessage] = useState<string>("");
+    const [priority, setPriority] = useState<string>("medium");
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+    const categories = [
+      { value: "account", label: "계정 관련 문제", icon: "👤" },
+      { value: "billing", label: "구독 및 결제", icon: "💳" },
+      { value: "bug", label: "버그 신고", icon: "🐛" },
+      { value: "feature", label: "기능 문의", icon: "✨" },
+      { value: "performance", label: "성능 이슈", icon: "⚡" },
+      { value: "data", label: "데이터 관련", icon: "📊" },
+      { value: "other", label: "기타", icon: "❓" },
+    ];
+
+    const priorities = [
+      { value: "low", label: "낮음", color: "bg-green-100 text-green-800" },
+      {
+        value: "medium",
+        label: "보통",
+        color: "bg-yellow-100 text-yellow-800",
+      },
+      { value: "high", label: "높음", color: "bg-orange-100 text-orange-800" },
+      { value: "urgent", label: "긴급", color: "bg-red-100 text-red-800" },
+    ];
+
+    const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      // 실제 이메일 전송 로직 (모의)
+      try {
+        const emailData = {
+          to: "support@sheeteasy.ai",
+          from: user?.email || "anonymous@sheeteasy.ai",
+          subject: `[${selectedCategory.toUpperCase()}] ${subject}`,
+          html: `
+            <h2>지원 요청</h2>
+            <p><strong>사용자:</strong> ${user?.name || "익명"} (${user?.email || "이메일 없음"})</p>
+            <p><strong>카테고리:</strong> ${categories.find((c) => c.value === selectedCategory)?.label}</p>
+            <p><strong>우선순위:</strong> ${priorities.find((p) => p.value === priority)?.label}</p>
+            <p><strong>제목:</strong> ${subject}</p>
+            <hr>
+            <p><strong>내용:</strong></p>
+            <p>${message.replace(/\n/g, "<br>")}</p>
+          `,
+        };
+
+        // TODO: 실제 이메일 서비스 연동
+        console.log("지원 요청 전송:", emailData);
+
+        // 성공 시 폼 초기화
+        setTimeout(() => {
+          alert(
+            "지원 요청이 성공적으로 전송되었습니다. 빠른 시일 내에 답변드리겠습니다.",
+          );
+          setSelectedCategory("");
+          setSubject("");
+          setMessage("");
+          setPriority("medium");
+          setIsSubmitting(false);
+        }, 1000);
+      } catch (error) {
+        alert("지원 요청 전송에 실패했습니다. 다시 시도해주세요.");
+        setIsSubmitting(false);
+      }
+    };
+
+    // 로그인하지 않은 사용자 처리
+    if (!isAuthenticated) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center",
+            className,
+          )}
+          {...props}
+        >
+          <Card className="w-full max-w-md">
+            <CardHeader className="text-center">
+              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <span className="text-2xl">🔒</span>
+              </div>
+              <CardTitle className="text-2xl text-gray-900">
+                로그인이 필요합니다
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-center">
+              <p className="text-gray-600 mb-6">
+                지원 서비스는 로그인한 사용자만 이용할 수 있습니다.
+              </p>
+              <div className="space-y-3">
+                {onBack && (
+                  <Button onClick={onBack} className="w-full">
+                    로그인하러 가기
+                  </Button>
+                )}
+                <p className="text-sm text-gray-500">
+                  일반적인 문의는 <strong>문의하기</strong> 페이지를
+                  이용해주세요.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+          className,
+        )}
+        {...props}
+      >
+        <div className="container py-12">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2">
+                지원 센터
+              </h1>
+              <p className="text-lg text-gray-600">
+                문제가 있으시거나 도움이 필요하시면 언제든 연락주세요
+              </p>
+            </div>
+            {onBack && (
+              <Button
+                variant="outline"
+                onClick={onBack}
+                className="flex items-center gap-2"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                돌아가기
+              </Button>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Support Form */}
+            <div className="lg:col-span-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <span className="text-2xl">📝</span>
+                    지원 요청하기
+                  </CardTitle>
+                  <p className="text-gray-600">
+                    문제를 자세히 설명해주시면 빠르게 도움을 드리겠습니다.
+                  </p>
+                </CardHeader>
+                <CardContent>
+                  <form onSubmit={handleSubmit} className="space-y-6">
+                    {/* Category Selection */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-3">
+                        문의 유형
+                      </label>
+                      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                        {categories.map((category) => (
+                          <button
+                            key={category.value}
+                            type="button"
+                            onClick={() => setSelectedCategory(category.value)}
+                            className={cn(
+                              "p-3 rounded-lg border text-left transition-all",
+                              selectedCategory === category.value
+                                ? "border-blue-500 bg-blue-50 text-blue-700"
+                                : "border-gray-200 hover:border-gray-300",
+                            )}
+                          >
+                            <div className="flex items-center gap-2">
+                              <span className="text-lg">{category.icon}</span>
+                              <span className="text-sm font-medium">
+                                {category.label}
+                              </span>
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Priority */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        우선순위
+                      </label>
+                      <div className="flex gap-2">
+                        {priorities.map((p) => (
+                          <button
+                            key={p.value}
+                            type="button"
+                            onClick={() => setPriority(p.value)}
+                            className={cn(
+                              "px-3 py-1 rounded-full text-sm font-medium transition-all",
+                              priority === p.value
+                                ? p.color
+                                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+                            )}
+                          >
+                            {p.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Subject */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        제목
+                      </label>
+                      <input
+                        type="text"
+                        value={subject}
+                        onChange={(e) => setSubject(e.target.value)}
+                        placeholder="문제를 간단히 요약해주세요"
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        required
+                      />
+                    </div>
+
+                    {/* Message */}
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        상세 내용
+                      </label>
+                      <textarea
+                        value={message}
+                        onChange={(e) => setMessage(e.target.value)}
+                        placeholder="문제에 대해 자세히 설명해주세요. 발생 시점, 브라우저 종류, 에러 메시지 등을 포함하면 더 빠른 해결이 가능합니다."
+                        rows={6}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical"
+                        required
+                      />
+                    </div>
+
+                    <Button
+                      type="submit"
+                      disabled={
+                        !selectedCategory ||
+                        !subject.trim() ||
+                        !message.trim() ||
+                        isSubmitting
+                      }
+                      className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
+                    >
+                      {isSubmitting ? "전송 중..." : "지원 요청 보내기"}
+                    </Button>
+                  </form>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Sidebar */}
+            <div className="space-y-6">
+              {/* User Info */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">계정 정보</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">이름:</span>
+                      <span className="font-medium">{user?.name}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">이메일:</span>
+                      <span className="font-medium">{user?.email}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">플랜:</span>
+                      <Badge variant="outline">
+                        {user?.subscription?.plan?.toUpperCase()}
+                      </Badge>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Quick Help */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">빠른 도움말</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3 text-sm">
+                    <div>
+                      <h4 className="font-medium text-gray-900 mb-1">
+                        일반적인 문제
+                      </h4>
+                      <ul className="space-y-1 text-gray-600">
+                        <li>• 파일 업로드가 안되는 경우</li>
+                        <li>• AI 처리가 느린 경우</li>
+                        <li>• 브라우저 호환성 문제</li>
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-medium text-gray-900 mb-1">
+                        응답 시간
+                      </h4>
+                      <ul className="space-y-1 text-gray-600">
+                        <li>• 긴급: 2시간 이내</li>
+                        <li>• 높음: 24시간 이내</li>
+                        <li>• 보통: 48시간 이내</li>
+                        <li>• 낮음: 72시간 이내</li>
+                      </ul>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Contact Info */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">직접 연락</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3 text-sm">
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg">📧</span>
+                      <a
+                        href="mailto:support@sheeteasy.ai"
+                        className="text-blue-600 hover:underline"
+                      >
+                        support@sheeteasy.ai
+                      </a>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg">💬</span>
+                      <span className="text-gray-600">
+                        실시간 채팅 (평일 9-18시)
+                      </span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+SupportPage.displayName = "SupportPage";
+
+export default SupportPage;
diff --git a/src/components/TermsOfServicePage.tsx b/src/components/TermsOfServicePage.tsx
new file mode 100644
index 0000000..9b73a82
--- /dev/null
+++ b/src/components/TermsOfServicePage.tsx
@@ -0,0 +1,277 @@
+import * as React from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { cn } from "../lib/utils";
+
+interface TermsOfServicePageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const TermsOfServicePage = React.forwardRef<
+  HTMLDivElement,
+  TermsOfServicePageProps
+>(({ className, onBack, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+        className,
+      )}
+      {...props}
+    >
+      <div className="container py-12">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-4xl font-bold text-gray-900 mb-2">
+              서비스 이용약관
+            </h1>
+            <p className="text-lg text-gray-600">
+              sheetEasy AI 서비스 이용 약관
+            </p>
+          </div>
+          {onBack && (
+            <Button
+              variant="outline"
+              onClick={onBack}
+              className="flex items-center gap-2"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              돌아가기
+            </Button>
+          )}
+        </div>
+
+        {/* Terms Content */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span className="text-2xl">📋</span>
+              서비스 이용약관
+            </CardTitle>
+            <div className="text-sm text-gray-600">
+              <p>시행일자: 2025년 1월 1일</p>
+              <p>최종 개정일: 2025년 1월 1일</p>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="prose max-w-none space-y-6">
+              {/* Section 1 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제1조 (목적)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <p>
+                    이 약관은 sheetEasy AI(이하 "회사")가 제공하는 AI 기반
+                    스프레드시트 편집 서비스(이하 "서비스")의 이용조건 및 절차,
+                    회사와 이용자의 권리, 의무, 책임사항을 규정함을 목적으로
+                    합니다.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 2 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제2조 (정의)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <div className="bg-gray-50 p-4 rounded-lg space-y-2">
+                    <div>
+                      <strong>1. "서비스"</strong>: AI 기반 스프레드시트 편집
+                      도구
+                    </div>
+                    <div>
+                      <strong>2. "이용자"</strong>: 본 약관에 동의하고 서비스를
+                      이용하는 자
+                    </div>
+                    <div>
+                      <strong>3. "계정"</strong>: 서비스 이용을 위해 생성된 개인
+                      식별 정보
+                    </div>
+                    <div>
+                      <strong>4. "콘텐츠"</strong>: 이용자가 업로드한 파일 및
+                      데이터
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 3 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제3조 (약관의 효력 및 변경)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <p>
+                    1. 본 약관은 서비스 화면에 게시하여 공시합니다.
+                    <br />
+                    2. 회사는 필요시 관련 법령에 위배되지 않는 범위에서 본
+                    약관을 개정할 수 있습니다.
+                    <br />
+                    3. 개정된 약관은 7일 전 공지하며, 불리한 변경의 경우 30일 전
+                    공지합니다.
+                  </p>
+                </div>
+              </section>
+
+              {/* Section 4 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제4조 (서비스의 제공)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <div className="bg-blue-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-2">제공 서비스:</h3>
+                    <ul className="space-y-1 text-sm">
+                      <li>• AI 기반 스프레드시트 자동 편집</li>
+                      <li>• Excel, CSV 파일 처리 및 변환</li>
+                      <li>• 브라우저 기반 데이터 처리</li>
+                      <li>• 튜토리얼 및 사용자 지원</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 5 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제5조 (이용자의 의무)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <div className="bg-red-50 p-4 rounded-lg border border-red-200">
+                    <h3 className="font-semibold mb-2 text-red-800">
+                      금지사항:
+                    </h3>
+                    <ul className="space-y-1 text-sm text-red-700">
+                      <li>• 타인의 개인정보 무단 수집, 저장, 공개</li>
+                      <li>• 서비스의 안정적 운영을 방해하는 행위</li>
+                      <li>• 불법적인 목적으로 서비스 이용</li>
+                      <li>• 저작권 등 타인의 권리를 침해하는 행위</li>
+                      <li>• 서비스를 상업적으로 재판매하는 행위</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 6 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제6조 (데이터 보안 및 책임)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <div className="bg-green-50 p-4 rounded-lg">
+                    <h3 className="font-semibold mb-2">데이터 처리 원칙:</h3>
+                    <ul className="space-y-1 text-sm">
+                      <li>• 모든 파일은 브라우저 내에서만 처리됩니다</li>
+                      <li>• 업로드된 데이터는 서버에 저장되지 않습니다</li>
+                      <li>• 사용자가 직접 데이터 삭제 및 관리 가능</li>
+                      <li>• 개인정보보호법에 따른 안전조치 준수</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 7 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제7조 (서비스 이용제한)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <p>
+                    회사는 이용자가 다음 각 호에 해당하는 경우 사전 통지 없이
+                    서비스 이용을 제한할 수 있습니다:
+                  </p>
+                  <ul className="space-y-1 text-sm ml-4">
+                    <li>• 본 약관을 위반한 경우</li>
+                    <li>• 서비스의 정상적 운영을 방해한 경우</li>
+                    <li>• 타인의 권리를 침해한 경우</li>
+                    <li>• 기타 관련 법령을 위반한 경우</li>
+                  </ul>
+                </div>
+              </section>
+
+              {/* Section 8 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제8조 (면책사항)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
+                    <h3 className="font-semibold mb-2">
+                      회사는 다음의 경우 책임을 지지 않습니다:
+                    </h3>
+                    <ul className="space-y-1 text-sm">
+                      <li>• 천재지변, 전쟁 등 불가항력적 사유</li>
+                      <li>• 이용자의 귀책사유로 인한 서비스 이용 장애</li>
+                      <li>• 무료 서비스 이용과 관련한 손해</li>
+                      <li>• 이용자가 업로드한 데이터의 내용에 대한 책임</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+
+              {/* Section 9 */}
+              <section>
+                <h2 className="text-xl font-bold text-gray-900 mb-3">
+                  제9조 (분쟁해결)
+                </h2>
+                <div className="text-gray-700 space-y-2">
+                  <p>
+                    1. 본 약관은 대한민국 법률에 따라 해석됩니다.
+                    <br />
+                    2. 서비스 이용과 관련한 분쟁은 회사 소재지 관할법원에서
+                    해결합니다.
+                    <br />
+                    3. 분쟁 발생시 먼저 상호 협의를 통한 해결을 원칙으로 합니다.
+                  </p>
+                </div>
+              </section>
+
+              {/* Contact Info */}
+              <section className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg">
+                <h2 className="text-xl font-bold text-gray-900 mb-4">문의처</h2>
+                <div className="space-y-2 text-sm text-gray-700">
+                  <p>
+                    본 약관에 대한 문의사항이 있으시면 아래로 연락주시기
+                    바랍니다.
+                  </p>
+                  <div className="space-y-1">
+                    <p>
+                      <strong>이메일:</strong> legal@sheeteasy.ai
+                    </p>
+                    <p>
+                      <strong>고객지원:</strong> support@sheeteasy.ai
+                    </p>
+                    <p>
+                      <strong>일반문의:</strong> contact@sheeteasy.ai
+                    </p>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+});
+
+TermsOfServicePage.displayName = "TermsOfServicePage";
+
+export default TermsOfServicePage;
diff --git a/src/components/UpdatesPage.tsx b/src/components/UpdatesPage.tsx
new file mode 100644
index 0000000..c1b0b07
--- /dev/null
+++ b/src/components/UpdatesPage.tsx
@@ -0,0 +1,244 @@
+import * as React from "react";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { cn } from "../lib/utils";
+
+interface UpdatesPageProps {
+  className?: string;
+  onBack?: () => void;
+}
+
+const UpdatesPage = React.forwardRef<HTMLDivElement, UpdatesPageProps>(
+  ({ className, onBack, ...props }, ref) => {
+    const updates = [
+      {
+        version: "1.0.0",
+        date: "2025-07-15",
+        title: "🎉 공식 v1.0 출시",
+        description: "sheetEasy AI의 첫 번째 정식 버전 출시",
+        changes: [
+          "✨ 새로운 기능: AI 기반 스프레드시트 편집",
+          "🎨 사용자 인터페이스 대폭 개선",
+          "🚀 성능 최적화 및 안정성 향상",
+          "🌐 한국어/영어 다국어 지원",
+          "📊 Excel, CSV 파일 완벽 지원",
+          "🔒 브라우저 내 완전한 데이터 보안",
+          "🎯 튜토리얼 시스템 추가",
+        ],
+        isLatest: true,
+        type: "major",
+      },
+    ];
+
+    const getVersionBadge = (type: string, isLatest: boolean) => {
+      if (isLatest) {
+        return <Badge className="bg-green-500">최신</Badge>;
+      }
+
+      switch (type) {
+        case "major":
+          return <Badge variant="default">Major</Badge>;
+        case "minor":
+          return <Badge variant="secondary">Minor</Badge>;
+        case "patch":
+          return <Badge variant="outline">Patch</Badge>;
+        default:
+          return <Badge variant="outline">Update</Badge>;
+      }
+    };
+
+    const formatDate = (dateString: string) => {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("ko-KR", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50",
+          className,
+        )}
+        {...props}
+      >
+        <div className="container py-12">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2">
+                업데이트
+              </h1>
+              <p className="text-lg text-gray-600">
+                sheetEasy AI의 최신 업데이트와 개선사항을 확인하세요
+              </p>
+            </div>
+            {onBack && (
+              <Button
+                variant="outline"
+                onClick={onBack}
+                className="flex items-center gap-2"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                돌아가기
+              </Button>
+            )}
+          </div>
+
+          {/* Version History */}
+          <div className="space-y-6">
+            {updates.map((update, index) => (
+              <Card
+                key={update.version}
+                className={cn(
+                  "transition-all hover:shadow-lg",
+                  update.isLatest &&
+                    "border-l-4 border-l-green-500 bg-gradient-to-r from-green-50 to-blue-50",
+                )}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between flex-wrap gap-2">
+                    <div className="flex items-center gap-3">
+                      <CardTitle className="text-2xl font-bold text-gray-900">
+                        v{update.version}
+                      </CardTitle>
+                      {getVersionBadge(update.type, update.isLatest)}
+                    </div>
+                    <div className="text-gray-500 text-sm">
+                      {formatDate(update.date)}
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <h2 className="text-xl font-semibold text-gray-800">
+                      {update.title}
+                    </h2>
+                    <p className="text-gray-600 mt-1">{update.description}</p>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <h3 className="font-semibold text-gray-900 mb-3">
+                      📝 변경사항
+                    </h3>
+                    <ul className="space-y-2">
+                      {update.changes.map((change, changeIndex) => (
+                        <li
+                          key={changeIndex}
+                          className="flex items-start gap-2 text-gray-700"
+                        >
+                          <span className="text-sm mt-1">•</span>
+                          <span>{change}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Coming Soon Section */}
+          <Card className="mt-8 bg-gradient-to-r from-blue-50 to-purple-50 border-dashed border-2 border-blue-200">
+            <CardContent className="p-8 text-center">
+              <div className="mb-4">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 text-blue-600 mb-4">
+                  <svg
+                    className="w-8 h-8"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">
+                더 많은 업데이트가 곧 출시됩니다!
+              </h3>
+              <p className="text-gray-600 mb-4">
+                우리는 지속적으로 새로운 기능을 개발하고 있습니다. 로드맵을
+                확인하여 예정된 기능들을 미리 살펴보세요.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Button variant="outline" className="flex items-center gap-2">
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H9a2 2 0 01-2-2z"
+                    />
+                  </svg>
+                  로드맵 보기
+                </Button>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  알림 받기
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Newsletter Signup */}
+          <Card className="mt-8">
+            <CardHeader>
+              <CardTitle className="text-center text-gray-900">
+                📮 업데이트 소식 받기
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="max-w-md mx-auto">
+                <p className="text-center text-gray-600 mb-4">
+                  새로운 업데이트와 기능 출시 소식을 이메일로 받아보세요
+                </p>
+                <div className="flex gap-2">
+                  <input
+                    type="email"
+                    placeholder="이메일 주소를 입력하세요"
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <Button className="bg-green-600 hover:bg-green-700">
+                    구독하기
+                  </Button>
+                </div>
+                <p className="text-xs text-gray-500 text-center mt-2">
+                  언제든지 구독을 취소할 수 있습니다. 개인정보는 안전하게
+                  보호됩니다.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  },
+);
+
+UpdatesPage.displayName = "UpdatesPage";
+
+export default UpdatesPage;
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..db29b46
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..b95fd65
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..b87726d
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/components/ui/footer.tsx b/src/components/ui/footer.tsx
index 840f734..db98cd8 100644
--- a/src/components/ui/footer.tsx
+++ b/src/components/ui/footer.tsx
@@ -1,12 +1,35 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";
+import { useAppStore } from "../../stores/useAppStore";
 
 interface FooterProps {
   className?: string;
+  onLicenseClick?: () => void;
+  onRoadmapClick?: () => void;
+  onUpdatesClick?: () => void;
+  onSupportClick?: () => void;
+  onContactClick?: () => void;
+  onPrivacyPolicyClick?: () => void;
+  onTermsOfServiceClick?: () => void;
 }
 
 const Footer = React.forwardRef<HTMLElement, FooterProps>(
-  ({ className, ...props }, ref) => {
+  (
+    {
+      className,
+      onLicenseClick,
+      onRoadmapClick,
+      onUpdatesClick,
+      onSupportClick,
+      onContactClick,
+      onPrivacyPolicyClick,
+      onTermsOfServiceClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isAuthenticated } = useAppStore();
+
     return (
       <footer
         ref={ref}
@@ -36,77 +59,48 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
               <h3 className="text-sm font-semibold text-gray-200 mb-4">제품</h3>
               <ul className="space-y-3 text-sm text-gray-400">
                 <li>
-                  <a
-                    href="#features"
-                    className="hover:text-white transition-colors"
-                  >
-                    기능
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#pricing"
-                    className="hover:text-white transition-colors"
-                  >
-                    가격
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#roadmap"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onRoadmapClick}
+                    className="hover:text-white transition-colors text-left"
                   >
                     로드맵
-                  </a>
+                  </button>
                 </li>
                 <li>
-                  <a
-                    href="#changelog"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onUpdatesClick}
+                    className="hover:text-white transition-colors text-left"
                   >
                     업데이트
-                  </a>
+                  </button>
                 </li>
               </ul>
             </div>
 
-            {/* Resources */}
+            {/* Support */}
             <div>
-              <h3 className="text-sm font-semibold text-gray-200 mb-4">
-                리소스
-              </h3>
+              <h3 className="text-sm font-semibold text-gray-200 mb-4">지원</h3>
               <ul className="space-y-3 text-sm text-gray-400">
                 <li>
-                  <a
-                    href="#docs"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onSupportClick}
+                    disabled={!isAuthenticated}
+                    className={cn(
+                      "hover:text-white transition-colors text-left",
+                      !isAuthenticated && "opacity-50 cursor-not-allowed",
+                    )}
+                    title={!isAuthenticated ? "로그인이 필요합니다" : undefined}
                   >
-                    문서
-                  </a>
+                    🔒 지원 (로그인 필요)
+                  </button>
                 </li>
                 <li>
-                  <a
-                    href="#tutorials"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onContactClick}
+                    className="hover:text-white transition-colors text-left"
                   >
-                    튜토리얼
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#community"
-                    className="hover:text-white transition-colors"
-                  >
-                    커뮤니티
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#support"
-                    className="hover:text-white transition-colors"
-                  >
-                    지원
-                  </a>
+                    문의하기
+                  </button>
                 </li>
               </ul>
             </div>
@@ -118,36 +112,28 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
               </h3>
               <ul className="space-y-3 text-sm text-gray-400">
                 <li>
-                  <a
-                    href="#privacy"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onPrivacyPolicyClick}
+                    className="hover:text-white transition-colors text-left"
                   >
                     개인정보처리방침
-                  </a>
+                  </button>
                 </li>
                 <li>
-                  <a
-                    href="#terms"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onTermsOfServiceClick}
+                    className="hover:text-white transition-colors text-left"
                   >
                     이용약관
-                  </a>
+                  </button>
                 </li>
                 <li>
-                  <a
-                    href="#licenses"
-                    className="hover:text-white transition-colors"
+                  <button
+                    onClick={onLicenseClick}
+                    className="hover:text-white transition-colors text-left"
                   >
-                    라이센스
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#contact"
-                    className="hover:text-white transition-colors"
-                  >
-                    문의
-                  </a>
+                    📄 오픈소스 라이브러리 & 라이센스
+                  </button>
                 </li>
               </ul>
             </div>
diff --git a/src/components/ui/historyPanel.tsx b/src/components/ui/historyPanel.tsx
index 5ee0482..086b634 100644
--- a/src/components/ui/historyPanel.tsx
+++ b/src/components/ui/historyPanel.tsx
@@ -3,6 +3,8 @@ import { Card, CardContent, CardHeader } from "./card";
 import { Button } from "./button";
 import type { HistoryPanelProps, HistoryEntry } from "../../types/ai";
 import { cn } from "../../lib/utils";
+import { useAppStore } from "../../stores/useAppStore";
+import { useTranslation } from "../../lib/i18n";
 
 /**
  * 히스토리 패널 컴포넌트
@@ -15,6 +17,8 @@ const HistoryPanel: React.FC<HistoryPanelProps> = ({
   onReapply,
   onClear,
 }) => {
+  const { historyPanelPosition } = useAppStore();
+  const { t } = useTranslation();
   // 키보드 접근성: Escape 키로 패널 닫기
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -115,13 +119,20 @@ const HistoryPanel: React.FC<HistoryPanelProps> = ({
         className={cn(
           "bg-white shadow-2xl z-50",
           "transform transition-transform duration-300 ease-in-out",
-          "flex flex-col border-l border-gray-200",
-          isOpen ? "translate-x-0" : "translate-x-full",
+          "flex flex-col",
+          historyPanelPosition === "right"
+            ? "border-l border-gray-200"
+            : "border-r border-gray-200",
+          isOpen
+            ? "translate-x-0"
+            : historyPanelPosition === "right"
+              ? "translate-x-full"
+              : "-translate-x-full",
         )}
         style={{
           position: "fixed",
           top: 64, // App.tsx 헤더와 일치 (h-16 = 64px)
-          right: 0,
+          [historyPanelPosition]: 0,
           height: "calc(100vh - 64px)", // 헤더 높이만큼 조정
           width: "384px", // w-96 = 384px
           backgroundColor: "#ffffff",
@@ -141,13 +152,13 @@ const HistoryPanel: React.FC<HistoryPanelProps> = ({
                 id="history-panel-title"
                 className="text-lg font-semibold text-gray-900"
               >
-                📝 작업 히스토리
+                📝 {t.history.title}
               </h2>
               <p
                 id="history-panel-description"
                 className="text-sm text-gray-500 mt-1"
               >
-                AI 프롬프트 실행 기록 ({history.length}개)
+                {t.history.subtitle} ({history.length}개)
               </p>
             </div>
 
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..9cd73b7
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "../../lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..c42a901
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/src/components/ui/topbar.tsx b/src/components/ui/topbar.tsx
index 503bd3d..aa732d1 100644
--- a/src/components/ui/topbar.tsx
+++ b/src/components/ui/topbar.tsx
@@ -19,6 +19,7 @@ interface TopBarProps {
   showAccount?: boolean;
   showNavigation?: boolean;
   showAuthButtons?: boolean;
+  showTestAccount?: boolean;
 }
 
 const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
@@ -39,6 +40,7 @@ const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
       showAccount = true,
       showNavigation = false,
       showAuthButtons = false,
+      showTestAccount = false,
       ...props
     },
     ref,
@@ -135,7 +137,7 @@ const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
         )}
         {...props}
       >
-        <div className="container flex h-16 items-center justify-between">
+        <div className="container flex h-16 items-center relative">
           {/* Logo */}
           <div className="flex items-center">
             <button
@@ -152,9 +154,9 @@ const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
             </button>
           </div>
 
-          {/* Navigation Menu - Vooster.ai 스타일 */}
+          {/* Navigation Menu - 절대 중앙 위치 */}
           {showNavigation && (
-            <nav className="hidden md:flex items-center space-x-8">
+            <nav className="hidden md:flex items-center space-x-8 absolute left-1/2 transform -translate-x-1/2">
               <button
                 onClick={() => handleNavigation("home")}
                 className="text-sm font-medium text-gray-700 hover:text-green-600 transition-colors"
@@ -189,7 +191,7 @@ const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
           )}
 
           {/* Actions */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 ml-auto">
             {/* Auth Buttons - 랜딩 페이지용 */}
             {showAuthButtons && (
               <>
@@ -208,6 +210,18 @@ const TopBar = React.forwardRef<HTMLElement, TopBarProps>(
                 >
                   무료로 시작하기
                 </Button>
+                {/* 테스트용 어카운트 버튼 */}
+                {showTestAccount && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={onAccountClick}
+                    className="border-purple-500 text-purple-600 hover:bg-purple-50 hover:border-purple-600"
+                    aria-label="테스트용 계정 페이지"
+                  >
+                    어카운트
+                  </Button>
+                )}
               </>
             )}
 
diff --git a/src/lib/i18n.tsx b/src/lib/i18n.tsx
new file mode 100644
index 0000000..a343a1a
--- /dev/null
+++ b/src/lib/i18n.tsx
@@ -0,0 +1,367 @@
+import * as React from "react";
+import { createContext, useContext, useState, useEffect } from "react";
+
+// 지원하는 언어 타입
+export type Language = "ko" | "en";
+
+// 번역 키 타입 정의
+export interface Translations {
+  // 공통 UI
+  common: {
+    loading: string;
+    error: string;
+    success: string;
+    cancel: string;
+    confirm: string;
+    save: string;
+    delete: string;
+    edit: string;
+    close: string;
+  };
+
+  // 계정 페이지
+  account: {
+    title: string;
+    subtitle: string;
+    userInfo: string;
+    subscriptionPlan: string;
+    usageSummary: string;
+    usageAnalytics: string;
+    usageAnalyticsDescription: string;
+    settings: string;
+    logout: string;
+    email: string;
+    name: string;
+    joinDate: string;
+    lastLogin: string;
+    currentPlan: string;
+    planStatus: string;
+    nextBilling: string;
+    aiQueries: string;
+    cellCount: string;
+    language: string;
+    historyPanelPosition: string;
+    changeSettings: string;
+    changePlan: string;
+    cancelSubscription: string;
+    confirmCancel: string;
+    goToEditor: string;
+    left: string;
+    right: string;
+    korean: string;
+    english: string;
+    usageWarning: string;
+    dailyUsage: string;
+    last30Days: string;
+    date: string;
+    tooltipLabels: {
+      aiQueries: string;
+      cellCount: string;
+      promptCount: string;
+      editedCells: string;
+    };
+  };
+
+  // 히스토리 패널
+  history: {
+    title: string;
+    subtitle: string;
+    empty: string;
+    emptyDescription: string;
+    clearAll: string;
+    reapply: string;
+    prompt: string;
+    range: string;
+    sheet: string;
+    actions: string;
+    error: string;
+    today: string;
+    yesterday: string;
+    formula: string;
+    style: string;
+    chart: string;
+    other: string;
+  };
+
+  // 프롬프트 입력
+  prompt: {
+    placeholder: string;
+    send: string;
+    processing: string;
+    selectRange: string;
+    insertAddress: string;
+  };
+}
+
+// 한국어 번역
+const koTranslations: Translations = {
+  common: {
+    loading: "로딩 중...",
+    error: "오류",
+    success: "성공",
+    cancel: "취소",
+    confirm: "확인",
+    save: "저장",
+    delete: "삭제",
+    edit: "편집",
+    close: "닫기",
+  },
+  account: {
+    title: "계정 관리",
+    subtitle: "구독 정보와 사용량을 관리하세요",
+    userInfo: "사용자 정보",
+    subscriptionPlan: "구독 플랜",
+    usageSummary: "사용량 요약",
+    usageAnalytics: "사용량 분석",
+    usageAnalyticsDescription: "최근 30일간 사용량 추이",
+    settings: "설정",
+    logout: "로그아웃",
+    email: "이메일",
+    name: "이름",
+    joinDate: "가입일",
+    lastLogin: "최근 로그인",
+    currentPlan: "현재 플랜",
+    planStatus: "플랜 상태",
+    nextBilling: "다음 결제일",
+    aiQueries: "AI 쿼리",
+    cellCount: "셀 수",
+    language: "언어",
+    historyPanelPosition: "히스토리 패널 위치",
+    changeSettings: "설정 변경",
+    changePlan: "플랜 변경",
+    cancelSubscription: "구독 취소",
+    confirmCancel: "정말로 구독을 취소하시겠습니까?",
+    goToEditor: "에디터로 이동",
+    left: "좌측",
+    right: "우측",
+    korean: "한국어",
+    english: "English",
+    usageWarning: "사용량 경고",
+    dailyUsage: "일일 사용량",
+    last30Days: "최근 30일",
+    date: "날짜",
+    tooltipLabels: {
+      aiQueries: "AI 쿼리",
+      cellCount: "셀 카운트",
+      promptCount: "프롬프트 수",
+      editedCells: "편집된 셀",
+    },
+  },
+  history: {
+    title: "작업 히스토리",
+    subtitle: "AI 프롬프트 실행 기록",
+    empty: "아직 실행된 AI 프롬프트가 없습니다.",
+    emptyDescription: "프롬프트를 입력하고 실행해보세요!",
+    clearAll: "전체 삭제",
+    reapply: "다시 적용",
+    prompt: "프롬프트:",
+    range: "범위:",
+    sheet: "시트:",
+    actions: "실행된 액션:",
+    error: "오류:",
+    today: "오늘",
+    yesterday: "어제",
+    formula: "수식",
+    style: "스타일",
+    chart: "차트",
+    other: "기타",
+  },
+  prompt: {
+    placeholder:
+      "AI에게 명령을 입력하세요... (예: A열의 모든 빈 셀을 0으로 채워주세요)",
+    send: "전송",
+    processing: "처리 중...",
+    selectRange: "범위 선택",
+    insertAddress: "주소 삽입",
+  },
+};
+
+// 영어 번역
+const enTranslations: Translations = {
+  common: {
+    loading: "Loading...",
+    error: "Error",
+    success: "Success",
+    cancel: "Cancel",
+    confirm: "Confirm",
+    save: "Save",
+    delete: "Delete",
+    edit: "Edit",
+    close: "Close",
+  },
+  account: {
+    title: "Account Management",
+    subtitle: "Manage your subscription and usage",
+    userInfo: "User Information",
+    subscriptionPlan: "Subscription Plan",
+    usageSummary: "Usage Summary",
+    usageAnalytics: "Usage Analytics",
+    usageAnalyticsDescription: "30-day usage trends",
+    settings: "Settings",
+    logout: "Logout",
+    email: "Email",
+    name: "Name",
+    joinDate: "Join Date",
+    lastLogin: "Last Login",
+    currentPlan: "Current Plan",
+    planStatus: "Plan Status",
+    nextBilling: "Next Billing",
+    aiQueries: "AI Queries",
+    cellCount: "Cell Count",
+    language: "Language",
+    historyPanelPosition: "History Panel Position",
+    changeSettings: "Change Settings",
+    changePlan: "Change Plan",
+    cancelSubscription: "Cancel Subscription",
+    confirmCancel: "Are you sure you want to cancel your subscription?",
+    goToEditor: "Go to Editor",
+    left: "Left",
+    right: "Right",
+    korean: "한국어",
+    english: "English",
+    usageWarning: "Usage Warning",
+    dailyUsage: "Daily Usage",
+    last30Days: "Last 30 Days",
+    date: "Date",
+    tooltipLabels: {
+      aiQueries: "AI Queries",
+      cellCount: "Cell Count",
+      promptCount: "Prompt Count",
+      editedCells: "Edited Cells",
+    },
+  },
+  history: {
+    title: "Work History",
+    subtitle: "AI prompt execution history",
+    empty: "No AI prompts have been executed yet.",
+    emptyDescription: "Try entering and executing a prompt!",
+    clearAll: "Clear All",
+    reapply: "Reapply",
+    prompt: "Prompt:",
+    range: "Range:",
+    sheet: "Sheet:",
+    actions: "Executed Actions:",
+    error: "Error:",
+    today: "Today",
+    yesterday: "Yesterday",
+    formula: "Formula",
+    style: "Style",
+    chart: "Chart",
+    other: "Other",
+  },
+  prompt: {
+    placeholder:
+      "Enter AI command... (e.g., Fill all empty cells in column A with 0)",
+    send: "Send",
+    processing: "Processing...",
+    selectRange: "Select Range",
+    insertAddress: "Insert Address",
+  },
+};
+
+// 번역 데이터
+const translations: Record<Language, Translations> = {
+  ko: koTranslations,
+  en: enTranslations,
+};
+
+// i18n Context 타입
+interface I18nContextType {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: Translations;
+  isLoading: boolean;
+}
+
+// Context 생성
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+// localStorage 키
+const LANGUAGE_STORAGE_KEY = "sheeteasy-language";
+
+// Provider 컴포넌트
+export const I18nProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [language, setLanguageState] = useState<Language>("ko");
+  const [isLoading, setIsLoading] = useState(true);
+
+  // 초기 언어 설정 로드
+  useEffect(() => {
+    const savedLanguage = localStorage.getItem(
+      LANGUAGE_STORAGE_KEY,
+    ) as Language;
+    if (savedLanguage && (savedLanguage === "ko" || savedLanguage === "en")) {
+      setLanguageState(savedLanguage);
+    } else {
+      // 브라우저 언어 감지
+      const browserLanguage = navigator.language.toLowerCase();
+      if (browserLanguage.startsWith("ko")) {
+        setLanguageState("ko");
+      } else {
+        setLanguageState("en");
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  // 언어 변경 함수
+  const setLanguage = (lang: Language) => {
+    setLanguageState(lang);
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, lang);
+  };
+
+  // 현재 번역 객체
+  const t = translations[language];
+
+  const value: I18nContextType = {
+    language,
+    setLanguage,
+    t,
+    isLoading,
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+};
+
+// useTranslation 훅
+export const useTranslation = () => {
+  const context = useContext(I18nContext);
+  if (context === undefined) {
+    throw new Error("useTranslation must be used within an I18nProvider");
+  }
+  return context;
+};
+
+// 편의 함수들
+export const getLanguageDisplayName = (lang: Language): string => {
+  return lang === "ko" ? "한국어" : "English";
+};
+
+export const formatDate = (date: Date, language: Language): string => {
+  const locale = language === "ko" ? "ko-KR" : "en-US";
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(date);
+};
+
+export const formatDateTime = (date: Date, language: Language): string => {
+  const locale = language === "ko" ? "ko-KR" : "en-US";
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+};
diff --git a/src/stores/useAppStore.ts b/src/stores/useAppStore.ts
index 05836ed..c511754 100644
--- a/src/stores/useAppStore.ts
+++ b/src/stores/useAppStore.ts
@@ -8,12 +8,17 @@ import type {
 import type { AIHistory } from "../types/ai";
 import type { User } from "../types/user";
 import type { TutorialSessionState, TutorialItem } from "../types/tutorial";
+import type { Language } from "../lib/i18n.tsx";
 
 interface AppState {
   // 사용자 상태
   user: User | null;
   isAuthenticated: boolean;
 
+  // 언어 및 UI 설정
+  language: Language;
+  historyPanelPosition: "left" | "right";
+
   // 파일 및 시트 상태
   currentFile: {
     name: string;
@@ -48,6 +53,10 @@ interface AppState {
   setUser: (user: User | null) => void;
   setAuthenticated: (authenticated: boolean) => void;
 
+  // 언어 및 UI 설정 액션
+  setLanguage: (language: Language) => void;
+  setHistoryPanelPosition: (position: "left" | "right") => void;
+
   setCurrentFile: (
     file: {
       name: string;
@@ -92,6 +101,8 @@ interface AppState {
 const initialState = {
   user: null,
   isAuthenticated: false,
+  language: "ko" as Language,
+  historyPanelPosition: "right" as "left" | "right",
   currentFile: null,
   sheets: [],
   activeSheetId: null,
@@ -123,6 +134,16 @@ export const useAppStore = create<AppState>()(
       setAuthenticated: (authenticated) =>
         set({ isAuthenticated: authenticated }),
 
+      // 언어 및 UI 설정 액션
+      setLanguage: (language) => {
+        set({ language });
+        localStorage.setItem("sheeteasy-language", language);
+      },
+      setHistoryPanelPosition: (position) => {
+        set({ historyPanelPosition: position });
+        localStorage.setItem("sheeteasy-history-panel-position", position);
+      },
+
       // 파일 및 시트 액션
       setCurrentFile: (file) => set({ currentFile: file }),
       setSheets: (sheets) => set({ sheets }),