diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9903a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["autoincrement"]
+}
diff --git a/app/create/page.tsx b/app/create/page.tsx
index 8fc0afd..9eec296 100644
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@@ -1,27 +1,17 @@
 "use client";
 
+import { createDiary } from "@/src/features/diary/actions/createDiary";
+import Moods from "@/src/features/diary/ui/moods";
 import Link from "next/link";
-import { useState } from "react";
-
-export default function CreateDiary() {
-  const [formData, setFormData] = useState({
-    title: "",
-    content: "",
-    mood: "",
-    weather: "",
-    categoryId: "",
-    tags: "",
-    isPublic: false,
-  });
+import { useActionState, useEffect } from "react";
 
-  const moods = [
-    { value: "happy", label: "😊 행복", emoji: "😊" },
-    { value: "sad", label: "😢 슬픔", emoji: "😢" },
-    { value: "angry", label: "😠 화남", emoji: "😠" },
-    { value: "excited", label: "🤩 신남", emoji: "🤩" },
-    { value: "calm", label: "😌 평온", emoji: "😌" },
-    { value: "nervous", label: "😰 긴장", emoji: "😰" },
-  ];
+const initialState = {
+  success: false,
+  message: "",
+};
+
+export default function CreateDiaryPage() {
+  const [state, formAction] = useActionState(createDiary, initialState);
 
   const weathers = [
     { value: "sunny", label: "☀️ 맑음", emoji: "☀️" },
@@ -38,15 +28,12 @@ export default function CreateDiary() {
     { id: "5", name: "꿈", color: "#F59E0B" },
   ];
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // 실제 저장 로직은 나중에 구현
-    console.log("일기 저장:", formData);
-  };
+  useEffect(() => {
+    console.log(state);
+  });
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Navigation */}
       <nav className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
@@ -59,59 +46,39 @@ export default function CreateDiary() {
               <Link href="/" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
                 홈
               </Link>
-              <Link href="/about" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
-                소개
-              </Link>
             </div>
           </div>
         </div>
       </nav>
 
-      {/* Main Content */}
       <main className="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">새로운 일기 작성</h1>
           <p className="mt-2 text-gray-600 dark:text-gray-400">오늘의 소중한 순간을 기록해보세요</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-6">
+        <form action={formAction} className="space-y-6">
+          {/* 숨겨진 필수 필드들 */}
+          <input type="hidden" name="userId" value="1" />
+
           <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
-            {/* Title */}
             <div className="mb-6">
-              <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                제목 *
-              </label>
+              <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"></label>
               <input
                 type="text"
                 id="title"
                 name="title"
-                value={formData.title}
-                onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                 placeholder="오늘의 일기 제목을 입력하세요"
                 className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                 required
               />
             </div>
 
-            {/* Mood & Weather */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
               <div>
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">기분 *</label>
                 <div className="grid grid-cols-3 gap-2">
-                  {moods.map((mood) => (
-                    <button
-                      key={mood.value}
-                      type="button"
-                      onClick={() => setFormData((prev) => ({ ...prev, mood: mood.value }))}
-                      className={`p-3 rounded-lg border text-sm font-medium transition-colors ${
-                        formData.mood === mood.value
-                          ? "border-blue-500 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
-                          : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 dark:bg-gray-700"
-                      }`}
-                    >
-                      {mood.label}
-                    </button>
-                  ))}
+                  <Moods />
                 </div>
               </div>
 
@@ -122,9 +89,8 @@ export default function CreateDiary() {
                     <button
                       key={weather.value}
                       type="button"
-                      onClick={() => setFormData((prev) => ({ ...prev, weather: weather.value }))}
                       className={`p-3 rounded-lg border text-sm font-medium transition-colors ${
-                        formData.weather === weather.value
+                        weather.value === weather.value
                           ? "border-blue-500 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
                           : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 dark:bg-gray-700"
                       }`}
@@ -136,7 +102,6 @@ export default function CreateDiary() {
               </div>
             </div>
 
-            {/* Content */}
             <div className="mb-6">
               <label htmlFor="content" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 내용 *
@@ -145,15 +110,12 @@ export default function CreateDiary() {
                 id="content"
                 name="content"
                 rows={8}
-                value={formData.content}
-                onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
                 placeholder="오늘 하루는 어땠나요? 자유롭게 작성해보세요..."
                 className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white resize-none"
                 required
               />
             </div>
 
-            {/* Category */}
             <div className="mb-6">
               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">카테고리</label>
               <div className="flex flex-wrap gap-2">
@@ -161,9 +123,8 @@ export default function CreateDiary() {
                   <button
                     key={category.id}
                     type="button"
-                    onClick={() => setFormData((prev) => ({ ...prev, categoryId: category.id }))}
                     className={`px-4 py-2 rounded-full text-sm font-medium text-white transition-opacity ${
-                      formData.categoryId === category.id ? "opacity-100 ring-2 ring-offset-2 ring-blue-500" : "opacity-70 hover:opacity-100"
+                      category.id === category.id ? "opacity-100 ring-2 ring-offset-2 ring-blue-500" : "opacity-70 hover:opacity-100"
                     }`}
                     style={{ backgroundColor: category.color }}
                   >
@@ -173,7 +134,6 @@ export default function CreateDiary() {
               </div>
             </div>
 
-            {/* Tags */}
             <div className="mb-6">
               <label htmlFor="tags" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 태그
@@ -182,30 +142,34 @@ export default function CreateDiary() {
                 type="text"
                 id="tags"
                 name="tags"
-                value={formData.tags}
-                onChange={(e) => setFormData((prev) => ({ ...prev, tags: e.target.value }))}
                 placeholder="태그를 쉼표로 구분해서 입력하세요 (예: 친구, 카페, 행복)"
                 className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
               />
               <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">태그는 쉼표(,)로 구분해서 입력하세요</p>
             </div>
 
-            {/* Public/Private */}
             <div className="mb-6">
               <label className="flex items-center space-x-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={formData.isPublic}
-                  onChange={(e) => setFormData((prev) => ({ ...prev, isPublic: e.target.checked }))}
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-                />
+                <input type="checkbox" checked={false} className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
                 <span className="text-sm font-medium text-gray-700 dark:text-gray-300">이 일기를 공개로 설정</span>
               </label>
               <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">공개로 설정하면 다른 사용자들이 볼 수 있습니다</p>
             </div>
           </div>
 
-          {/* Action Buttons */}
+          {/* 서버 응답 상태 표시 */}
+          {state.message && (
+            <div
+              className={`rounded-lg p-4 ${
+                state.success
+                  ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"
+                  : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300"
+              }`}
+            >
+              <p className="font-medium">{state.message}</p>
+            </div>
+          )}
+
           <div className="flex justify-end space-x-4">
             <Link
               href="/"
diff --git a/app/diary/[id]/page.tsx b/app/diary/[id]/page.tsx
index 0aacd18..9d65d39 100644
--- a/app/diary/[id]/page.tsx
+++ b/app/diary/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { handleDeleteDiary } from "@/src/features/diary/actions/deleteDiary";
 import Link from "next/link";
 
 export default function DiaryDetail({ params }: { params: { id: string } }) {
@@ -60,14 +61,6 @@ export default function DiaryDetail({ params }: { params: { id: string } }) {
     console.log("일기 수정");
   };
 
-  const handleDelete = async () => {
-    "use server";
-    // 삭제 확인 및 삭제 로직
-    if (confirm("정말로 이 일기를 삭제하시겠습니까?")) {
-      console.log("일기 삭제");
-    }
-  };
-
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Navigation */}
@@ -83,9 +76,6 @@ export default function DiaryDetail({ params }: { params: { id: string } }) {
               <Link href="/" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
                 홈
               </Link>
-              <Link href="/about" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium">
-                소개
-              </Link>
               <Link href="/create" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
                 ✏️ 일기 쓰기
               </Link>
@@ -150,7 +140,7 @@ export default function DiaryDetail({ params }: { params: { id: string } }) {
                 ✏️ 수정
               </button>
               <button
-                onClick={handleDelete}
+                onClick={() => handleDeleteDiary(diaryId)}
                 className="px-4 py-2 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-800 font-medium transition-colors"
               >
                 🗑️ 삭제
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..6ad27e3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,11 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 328a4b9..1307d88 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+import { getMoodEmoji } from "@/src/shared/libs/getMoodEmoji";
+import { getWeatherEmoji } from "@/src/shared/libs/getWeatherEmoji";
 import Link from "next/link";
 
 export default function Home() {
@@ -40,31 +42,8 @@ export default function Home() {
     },
   ];
 
-  const getMoodEmoji = (mood: string) => {
-    const moodMap: { [key: string]: string } = {
-      happy: "😊",
-      sad: "😢",
-      angry: "😠",
-      excited: "🤩",
-      calm: "😌",
-      nervous: "😰",
-    };
-    return moodMap[mood] || "😐";
-  };
-
-  const getWeatherEmoji = (weather: string) => {
-    const weatherMap: { [key: string]: string } = {
-      sunny: "☀️",
-      rainy: "🌧️",
-      cloudy: "☁️",
-      snowy: "❄️",
-    };
-    return weatherMap[weather] || "🌤️";
-  };
-
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Navigation */}
       <nav className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-16">
@@ -85,20 +64,16 @@ export default function Home() {
         </div>
       </nav>
 
-      {/* Main Content */}
       <main className="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-        {/* Header */}
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">나의 일기장</h1>
           <p className="mt-2 text-gray-600 dark:text-gray-400">소중한 순간들을 기록해보세요</p>
         </div>
 
-        {/* Diary List */}
         <div className="space-y-6">
           {dummyDiaries.map((diary) => (
             <div key={diary.id} className="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border border-gray-200 dark:border-gray-700">
               <div className="p-6">
-                {/* Header */}
                 <div className="flex items-start justify-between mb-4">
                   <div className="flex-1">
                     <Link href={`/diary/${diary.id}`} className="block hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
@@ -123,10 +98,8 @@ export default function Home() {
                   </div>
                 </div>
 
-                {/* Content Preview */}
                 <p className="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">{diary.content}</p>
 
-                {/* Tags */}
                 <div className="flex items-center justify-between">
                   <div className="flex flex-wrap gap-2">
                     {diary.tags.map((tag, index) => (
@@ -144,7 +117,6 @@ export default function Home() {
           ))}
         </div>
 
-        {/* Empty State (일기가 없을 때) */}
         {dummyDiaries.length === 0 && (
           <div className="text-center py-12">
             <div className="text-6xl mb-4">📝</div>
diff --git a/app/template.tsx b/app/template.tsx
new file mode 100644
index 0000000..4f80191
--- /dev/null
+++ b/app/template.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  const [navigationDirection, setNavigationDirection] = useState<"forward" | "backward">("forward");
+
+  useEffect(() => {
+    const handlePopState = () => {
+      setNavigationDirection("backward");
+    };
+
+    const handleClick = () => {
+      setNavigationDirection("forward");
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    document.addEventListener("click", handleClick);
+
+    console.log("새 페이지 진입:", new Date().toISOString(), "방향:", navigationDirection);
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+      document.removeEventListener("click", handleClick);
+    };
+  }, [navigationDirection]);
+
+  const animations = {
+    forward: {
+      initial: { opacity: 0, x: "100%" },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: "-100%" },
+    },
+    backward: {
+      initial: { opacity: 0, x: "-100%" },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: "100%" },
+    },
+  };
+
+  const currentAnimation = animations[navigationDirection];
+
+  return (
+    <motion.div
+      key={navigationDirection}
+      initial={currentAnimation.initial}
+      animate={currentAnimation.animate}
+      exit={currentAnimation.exit}
+      transition={{
+        type: "spring",
+        stiffness: 400,
+        damping: 40,
+        mass: 1,
+        duration: 0.4,
+      }}
+      className="min-h-screen"
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 5bab43f..1045f35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@prisma/client": "^6.10.1",
         "@prisma/extension-accelerate": "^2.0.1",
+        "dotenv": "^17.0.0",
+        "motion": "^12.20.4",
         "next": "15.3.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -20,6 +22,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "dotenv-cli": "^8.0.0",
         "eslint": "^9",
         "eslint-config-next": "15.3.4",
         "prisma": "^6.10.1",
@@ -3062,6 +3065,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.0.0.tgz",
+      "integrity": "sha512-A0BJ5lrpJVSfnMMXjmeO0xUnoxqsBHWCoqqTnGwGYVdnctqXXUEhJOO7LxmgxJon9tEZFGpe0xPRX0h2v3AANQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-cli": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-8.0.0.tgz",
+      "integrity": "sha512-aLqYbK7xKOiTMIRf1lDPbI+Y+Ip/wo5k3eyp6ePysVaSqbyxjyK3dK35BTxG+rmd7djf5q2UPs4noPNH+cj0Qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "dotenv": "^16.3.0",
+        "dotenv-expand": "^10.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "dotenv": "cli.js"
+      }
+    },
+    "node_modules/dotenv-cli/node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
+      "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3896,6 +3950,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.20.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.20.4.tgz",
+      "integrity": "sha512-wV3I/BbHVVrTKmvB3hxfkoOocAD79IGsFCqsJzv8wvmKOiU2fxhpOo29xdRSJ5SVcZ+6yFkgRZl+9qbUGX5k4g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.20.3",
+        "motion-utils": "^12.19.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5183,6 +5264,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion": {
+      "version": "12.20.4",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.20.4.tgz",
+      "integrity": "sha512-NOFQGGhFdq+3uK2n8g8lUe5Iz3ZQYzztIvLaO27esJ21AZeSXyUFKWKCaqvrTB1U3XsDnd4GT6HpSqWzt0S25Q==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.20.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.20.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.20.3.tgz",
+      "integrity": "sha512-lcwmMrkNtPVq0KrOPln5+ZNlICy6x/VsxckQ+sSvmak6rTAi50RaOv7lKyc6lepMO6PIVRMSaU9TENGnOmvmAw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.19.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.19.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.19.0.tgz",
+      "integrity": "sha512-BuFTHINYmV07pdWs6lj6aI63vr2N4dg0vR+td0rtrdpWOhBzIkEklZyLcvKBoEtwSqx8Jg06vUB5RS0xDiUybw==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 39bc04a..577603c 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,26 @@
   "name": "diary",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "db:pull": "dotenv -e .env prisma db pull",
+    "db:push": "dotenv -e .env prisma db push",
+    "db:studio": "dotenv -e .env prisma studio",
+    "db:generate": "dotenv -e .env prisma generate",
+    "db:migrate": "dotenv -e .env prisma migrate dev",
+    "db:migrate:reset": "dotenv -e .env prisma migrate reset",
+    "db:seed": "dotenv -e .env prisma db seed",
+    "db:reset": "dotenv -e .env prisma migrate reset && dotenv -e .env prisma db seed"
   },
   "dependencies": {
     "@prisma/client": "^6.10.1",
     "@prisma/extension-accelerate": "^2.0.1",
+    "dotenv": "^17.0.0",
+    "motion": "^12.20.4",
     "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -21,6 +32,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "dotenv-cli": "^8.0.0",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
     "prisma": "^6.10.1",
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 20742ce..651c640 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -1,6 +1,3 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
 generator client {
   provider = "prisma-client-js"
 }
@@ -10,101 +7,75 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-// 사용자 모델
 model User {
-  id        Int      @id @default(autoincrement())
-  email     String   @unique
-  name      String?
-  password  String   // 실제 프로덕션에서는 해시된 패스워드 저장
-  avatar    String?  // 프로필 이미지 URL
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  // 관계
-  diaries    Diary[]
+  id         Int        @id @default(autoincrement())
+  email      String     @unique
+  name       String?
+  password   String
+  avatar     String?
+  createdAt  DateTime   @default(now())
+  updatedAt  DateTime   @updatedAt
   categories Category[]
+  diaries    Diary[]
   tags       Tag[]
 
   @@map("users")
 }
 
-// 다이어리 엔트리 모델
 model Diary {
-  id        Int      @id @default(autoincrement())
-  title     String
-  content   String   // 일기 내용
-  mood      String?  // 기분 (happy, sad, angry, excited, calm, etc.)
-  weather   String?  // 날씨 (sunny, rainy, cloudy, snowy, etc.)
-  isPublic  Boolean  @default(false) // 공개/비공개 설정
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  // 외래키
+  id         Int        @id @default(autoincrement())
+  title      String
+  content    String
+  mood       String?
+  weather    String?
+  isPublic   Boolean    @default(false)
+  createdAt  DateTime   @default(now())
+  updatedAt  DateTime   @updatedAt
   userId     Int
   categoryId Int?
-
-  // 관계
-  user     User      @relation(fields: [userId], references: [id], onDelete: Cascade)
-  category Category? @relation(fields: [categoryId], references: [id], onDelete: SetNull)
-  tags     DiaryTag[]
+  category   Category?  @relation(fields: [categoryId], references: [id])
+  user       User       @relation(fields: [userId], references: [id], onDelete: Cascade)
+  tags       DiaryTag[]
 
   @@map("diaries")
 }
 
-// 카테고리 모델
 model Category {
   id          Int      @id @default(autoincrement())
   name        String
   description String?
-  color       String   @default("#3B82F6") // 헥스 컬러 코드
+  color       String   @default("#3B82F6")
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
+  userId      Int
+  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  diaries     Diary[]
 
-  // 외래키
-  userId Int
-
-  // 관계
-  user    User    @relation(fields: [userId], references: [id], onDelete: Cascade)
-  diaries Diary[]
-
-  // 사용자별로 카테고리명 중복 방지
   @@unique([userId, name])
   @@map("categories")
 }
 
-// 태그 모델
 model Tag {
-  id        Int      @id @default(autoincrement())
+  id        Int        @id @default(autoincrement())
   name      String
-  color     String   @default("#10B981") // 헥스 컬러 코드
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  // 외래키
-  userId Int
+  color     String     @default("#10B981")
+  createdAt DateTime   @default(now())
+  updatedAt DateTime   @updatedAt
+  userId    Int
+  diaries   DiaryTag[]
+  user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-  // 관계
-  user    User       @relation(fields: [userId], references: [id], onDelete: Cascade)
-  diaries DiaryTag[]
-
-  // 사용자별로 태그명 중복 방지
   @@unique([userId, name])
   @@map("tags")
 }
 
-// 다이어리-태그 중간 테이블 (다대다 관계)
 model DiaryTag {
-  id Int @id @default(autoincrement())
-
-  // 외래키
+  id      Int   @id @default(autoincrement())
   diaryId Int
   tagId   Int
+  diary   Diary @relation(fields: [diaryId], references: [id], onDelete: Cascade)
+  tag     Tag   @relation(fields: [tagId], references: [id], onDelete: Cascade)
 
-  // 관계
-  diary Diary @relation(fields: [diaryId], references: [id], onDelete: Cascade)
-  tag   Tag   @relation(fields: [tagId], references: [id], onDelete: Cascade)
-
-  // 같은 다이어리에 같은 태그 중복 방지
   @@unique([diaryId, tagId])
   @@map("diary_tags")
 }
diff --git a/src/features/diary/actions/createDiary.ts b/src/features/diary/actions/createDiary.ts
new file mode 100644
index 0000000..c3319fd
--- /dev/null
+++ b/src/features/diary/actions/createDiary.ts
@@ -0,0 +1,56 @@
+"use server";
+
+import prisma from "@/src/shared/db/db";
+import { Diary } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+
+interface ActionState {
+  success: boolean;
+  message: string;
+  diary?: Diary;
+}
+
+export async function createDiary(prevState: ActionState, formData: FormData): Promise<ActionState> {
+  try {
+    const title = formData.get("title") as string;
+    const content = formData.get("content") as string;
+    const mood = formData.get("mood") as string;
+    const weather = formData.get("weather") as string;
+    const userId = parseInt(formData.get("userId") as string) || 1;
+    const categoryId = formData.get("categoryId") as string;
+
+    console.log("일기 저장:", {
+      title,
+      content,
+      mood,
+      weather,
+      userId,
+      categoryId: categoryId ? parseInt(categoryId) : null,
+    });
+
+    const diary = await prisma.diary.create({
+      data: {
+        title,
+        content,
+        mood,
+        weather,
+        userId,
+        categoryId: categoryId ? parseInt(categoryId) : null,
+      },
+    });
+
+    revalidatePath("/diary");
+
+    return {
+      success: true,
+      message: "일기가 성공적으로 저장되었습니다!",
+      diary,
+    };
+  } catch (error) {
+    console.error("일기 저장 오류:", error);
+    return {
+      success: false,
+      message: "일기 저장에 실패했습니다.",
+    };
+  }
+}
diff --git a/src/features/diary/actions/deleteDiary.ts b/src/features/diary/actions/deleteDiary.ts
new file mode 100644
index 0000000..a644585
--- /dev/null
+++ b/src/features/diary/actions/deleteDiary.ts
@@ -0,0 +1,4 @@
+export async function handleDeleteDiary(id: string) {
+  "use server";
+  console.log("deleted id: ", id);
+}
diff --git a/src/features/diary/hooks/useSelectedItem.tsx b/src/features/diary/hooks/useSelectedItem.tsx
new file mode 100644
index 0000000..06558e1
--- /dev/null
+++ b/src/features/diary/hooks/useSelectedItem.tsx
@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export default function useSelectedItem() {
+  const [internalSelectedItem, setInternalSelectedItem] = useState<string[]>([]);
+
+  const currentSelectedItem = internalSelectedItem.length > 0 ? internalSelectedItem : internalSelectedItem;
+
+  const handleSelectItem = (itemValue: string) => {
+    if (currentSelectedItem.includes(itemValue)) {
+      setInternalSelectedItem((prev) => prev.filter((item) => item !== itemValue));
+    } else {
+      setInternalSelectedItem((prev) => [...prev, itemValue]);
+    }
+  };
+
+  return { currentSelectedItem, handleSelectItem };
+}
diff --git a/src/features/diary/ui/moods.tsx b/src/features/diary/ui/moods.tsx
new file mode 100644
index 0000000..4be8155
--- /dev/null
+++ b/src/features/diary/ui/moods.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+
+const moods = [
+  { value: "happy", label: "😊 행복", emoji: "😊" },
+  { value: "sad", label: "😢 슬픔", emoji: "😢" },
+  { value: "angry", label: "😠 화남", emoji: "😠" },
+  { value: "excited", label: "🤩 신남", emoji: "🤩" },
+  { value: "calm", label: "😌 평온", emoji: "😌" },
+  { value: "nervous", label: "😰 긴장", emoji: "😰" },
+];
+
+interface MoodsProps {
+  selectedMood?: string;
+  onMoodChange?: (mood: string) => void;
+  name?: string;
+}
+
+export default function Moods({ selectedMood, onMoodChange, name = "mood" }: MoodsProps) {
+  const [internalMood, setInternalMood] = useState<string>("");
+
+  // 제어 컴포넌트 vs 비제어 컴포넌트 처리
+  const currentMood = selectedMood !== undefined ? selectedMood : internalMood;
+
+  const handleMoodClick = (moodValue: string) => {
+    if (onMoodChange) {
+      onMoodChange(moodValue);
+    } else {
+      setInternalMood(moodValue);
+    }
+  };
+
+  return (
+    <>
+      {/* 숨겨진 input으로 form 데이터 전송 */}
+      <input type="hidden" name={name} value={currentMood} />
+
+      <div className="grid grid-cols-3 gap-2">
+        {moods.map((mood) => (
+          <button
+            key={mood.value}
+            type="button"
+            onClick={() => handleMoodClick(mood.value)}
+            className={`p-3 rounded-lg border text-sm font-medium transition-colors ${
+              currentMood === mood.value
+                ? "border-blue-500 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+            }`}
+          >
+            {mood.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/db/db.ts b/src/shared/db/db.ts
similarity index 100%
rename from src/app/db/db.ts
rename to src/shared/db/db.ts
diff --git a/src/shared/libs/getMoodEmoji.ts b/src/shared/libs/getMoodEmoji.ts
new file mode 100644
index 0000000..59c6533
--- /dev/null
+++ b/src/shared/libs/getMoodEmoji.ts
@@ -0,0 +1,11 @@
+export const getMoodEmoji = (mood: string) => {
+  const moodMap: { [key: string]: string } = {
+    happy: "😊",
+    sad: "😢",
+    angry: "😠",
+    excited: "🤩",
+    calm: "😌",
+    nervous: "😰",
+  };
+  return moodMap[mood] || "😐";
+};
diff --git a/src/shared/libs/getWeatherEmoji.ts b/src/shared/libs/getWeatherEmoji.ts
new file mode 100644
index 0000000..a66c347
--- /dev/null
+++ b/src/shared/libs/getWeatherEmoji.ts
@@ -0,0 +1,9 @@
+export const getWeatherEmoji = (weather: string) => {
+  const weatherMap: { [key: string]: string } = {
+    sunny: "☀️",
+    rainy: "🌧️",
+    cloudy: "☁️",
+    snowy: "❄️",
+  };
+  return weatherMap[weather] || "🌤️";
+};
diff --git a/src/shared/types/db.ts b/src/shared/types/db.ts
new file mode 100644
index 0000000..ff234e6
--- /dev/null
+++ b/src/shared/types/db.ts
@@ -0,0 +1,9 @@
+import { Prisma } from "@prisma/client";
+
+export type Diary = Prisma.DiaryGetPayload<{
+  include: {
+    category: true;
+    tags: true;
+    user: true;
+  };
+}>;