add MobX

react-advanced-tag1/src/App.tsx

@@ -12,6 +12,7 @@ import ZustandCounterPage from './pages/ZustandCounterPage'
 import ModalPage from './pages/ModalPage'
 import { HocPage } from './pages/HocPage'
 import ImmerPage from './pages/ImmerPage'
+import MobXPage from './pages/MobXPage'
 
 function App() {
   return (
@@ -27,6 +28,7 @@ function App() {
         <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
         <Route path="/hoc" element={<HocPage />} />
         <Route path="/immer" element={<ImmerPage />} />
+        <Route path="/mobx" element={<MobXPage />} />
       </Routes>
     </MainLayout>
   )

react-advanced-tag1/src/common/components/Header/Navigation.tsx

@@ -1,6 +1,8 @@
+import './Navigation.css'
+
 export default function Navigation() {
   return (
-    <nav>
+    <nav className="navigation">
       <ul>
         <li>
           <a href="/">Home</a>
@@ -24,7 +26,10 @@ export default function Navigation() {
           <a href="/modalpage">Modal</a>
         </li>
         <li>
-          <a href="/zustandcounterpage">ZustandCounterPage</a>
+          <a href="/zustandcounterpage">Store: Zustand</a>
+        </li>
+        <li>
+          <a href="/mobx">Store: MobX</a>
         </li>
         <li>
           <a href="/hoc">HOC</a>

react-advanced-tag1/src/common/components/Header/navigation.css

@@ -0,0 +1,28 @@
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #282c34;
+}
+.navigation a {
+  color: white;
+  text-decoration: none;
+  padding: 10px;
+}
+.navigation a:hover {
+  background-color: #057e9f;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+  text-decoration: none;
+}
+.navigation ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.navigation ul li {
+  display: inline;
+}

react-advanced-tag1/src/common/stores/mobx-store.ts

@@ -0,0 +1,29 @@
+import { makeAutoObservable } from 'mobx'
+
+class CounterStore {
+  count = 0
+  message = 'Hello, MobX!'
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  increment() {
+    this.count++
+  }
+
+  decrement() {
+    this.count--
+  }
+
+  reset() {
+    this.count = 0
+  }
+
+  updateMessage(newMessage: string) {
+    this.message = newMessage
+  }
+}
+
+const counterStore = new CounterStore()
+export default counterStore

react-advanced-tag1/src/pages/MobXPage.tsx

@@ -0,0 +1,35 @@
+import { observer } from 'mobx-react-lite'
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import counterStore from '../common/stores/mobx-store'
+
+const MobXPage = observer(() => {
+  return (
+    <ComponentWrapper title="MobX">
+      <div>
+        <h3>Counter: {counterStore.count}</h3>
+        <button onClick={() => counterStore.increment()}>Increment</button>
+        <button onClick={() => counterStore.decrement()}>Decrement</button>
+      </div>
+      <div>
+        <h3>Message: {counterStore.message}</h3>
+        <MessageUpdater />
+        <button onClick={() => counterStore.reset()}>Reset</button>
+      </div>
+    </ComponentWrapper>
+  )
+})
+
+export default MobXPage
+
+function MessageUpdater() {
+  return (
+    <div>
+      <h3>Update Message</h3>
+      <input
+        type="text"
+        value={counterStore.message}
+        onChange={(e) => counterStore.updateMessage(e.target.value)}
+      />
+    </div>
+  )
+}