Feat/quest api & quest completion/claim reward working on write post page.

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.16.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

src/App.jsx

@@ -2,6 +2,7 @@
 // <div /> tests whether centered layout works.
 // <section className="panel stack-md" /> tests whether reusable panel and vertical spacing classes work.
 // <h1 /> tests title style
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import OpeningPage from "./pages/OpeningPage.jsx";
 import RegisterPage from "./pages/RegisterPage.jsx";
@@ -15,25 +16,16 @@ import ShopPage from "./pages/ShopPage.jsx";
 import MemoryArchivePage from "./pages/MemoryArchivePage.jsx";
 
 function App() {
-  return <InventoryPage />;
-
-  /*
-  return ( 
-    <main className="app-page"> 
-      <div className="page-center">
-        <section className="panel stack-md" style={{ padding: "2rem", maxWidth: "520px" }}>
-          <h1 className="page-title">Nacimiento - My Egg</h1>
-          <p className="muted-text">
-            Frontend setup is ready.
-          </p>
-          <button className="btn" type="button">
-            Continue
-          </button>
-        </section>
-      </div>
-    </main>
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<WritePostPage />} />
+        <Route path="/write" element={<WritePostPage />} />
+        <Route path="/archive" element={<MemoryArchivePage />} />
+        <Route path="/posts/:id" element={<ViewPostPage />} />
+      </Routes>
+    </BrowserRouter>
   );
-  */
 }
 
 export default App;

src/api/mockData.js

@@ -0,0 +1,32 @@
+export const mockPosts = [
+    {
+    post_id: 1,
+    user_id: 1,
+    title: "The First Crack",
+    content:
+      "This morning, I found a tiny crack on the surface of the egg. Is it a sign that my will is starting to take shape?",
+    image_url: null,
+    tag: "growth",
+    visibility: "public",
+    word_count: 24,
+    will_reward: 12,
+    created_at: "2026-05-29",
+    updated_at: "2026-05-29",
+  },
+  {
+    post_id: 2,
+    user_id: 1,
+    title: "Study Day",
+    content:
+      "I studied React today. Hooks are still confusing, but I am starting to understand how state controls the page.",
+    image_url: null,
+    tag: "study",
+    visibility: "private",
+    word_count: 19,
+    will_reward: 10,
+    created_at: "2026-05-29",
+    updated_at: "2026-05-29",
+  },
+];
+
+

src/api/postsApi.js

@@ -0,0 +1,126 @@
+const STORAGE_KEY = "memory_egg_posts";
+
+const defaultPosts = [
+  {
+    post_id: 1,
+    user_id: 1,
+    title: "The First Crack",
+    content:
+      "This morning, I found a tiny crack on the surface of the egg. Is it a sign that my will is starting to take shape?",
+    image_url: null,
+    tag: "growth",
+    visibility: "public",
+    word_count: 24,
+    will_reward: 12,
+    created_at: "2026-05-29",
+    updated_at: "2026-05-29",
+  },
+  {
+    post_id: 2,
+    user_id: 1,
+    title: "Study Day",
+    content:
+      "I studied React today. Hooks are still confusing, but I am starting to understand how state controls the page.",
+    image_url: null,
+    tag: "study",
+    visibility: "private",
+    word_count: 19,
+    will_reward: 10,
+    created_at: "2026-05-29",
+    updated_at: "2026-05-29",
+  },
+];
+
+
+/* localStorage for testing WritePostPage and MemoryARchivePage interaction */
+
+function loadPostsFromStorage() {
+  const savedPosts = localStorage.getItem(STORAGE_KEY);
+
+  if (!savedPosts) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultPosts));
+    return defaultPosts;
+  }
+
+  const parsedPosts = JSON.parse(savedPosts);
+
+  if (!Array.isArray(parsedPosts)) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultPosts));
+    return defaultPosts;
+  }
+
+  return parsedPosts;
+}
+
+function savePostsToStorage(posts) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(posts));
+}
+
+
+
+
+function countWords(text) {
+  const trimmed = text.trim();
+
+  if (!trimmed) {
+    return 0;
+  }
+
+  return trimmed.split(/\s+/).length;
+}
+
+function calculateWillReward(wordCount) {
+  return Math.max(1, Math.floor(wordCount / 10));
+}
+
+export async function getAllPosts() {
+  return loadPostsFromStorage();
+}
+
+export async function getPostById(postId) {
+  const posts = loadPostsFromStorage();
+
+  return posts.find((post) => post.post_id === Number(postId));
+}
+
+export async function createPost(postData) {
+  const posts = loadPostsFromStorage();
+  const wordCount = countWords(postData.content);
+
+  const newPost = {
+    post_id: Date.now(),
+    user_id: 1,
+    title: postData.title,
+    content: postData.content,
+    image_url: postData.image_url || null,
+    tag: postData.tag,
+    visibility: postData.visibility,
+    word_count: wordCount,
+    will_reward: calculateWillReward(wordCount),
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+
+  const updatedPosts = [newPost, ...posts];
+
+  savePostsToStorage(updatedPosts);
+
+  return newPost;
+}
+
+export async function deletePost(postId) {
+  const posts = loadPostsFromStorage();
+  /*
+  console.log("Before delete:", posts);
+  console.log("Trying to delete postId:", postId);
+  */
+  const updatedPosts = posts.filter(
+    (post) => Number(post.post_id) !== Number(postId)
+  );
+  /*
+  console.log("After delete:", updatedPosts);
+  */
+  savePostsToStorage(updatedPosts);
+
+  return true;
+}