Feat/#10

src/features/auth/model/useKakaoAuth.ts

@@ -27,8 +27,7 @@ export const useKakaoAuth = () => {
       // 로그인 성공 후 원하는 페이지로 이동
       navigate("/home");
     } else {
-      // 로그인 실패 시 자동으로 카카오 로그인 실행
-      handleKakaoLogin();
+      navigate("/login")
     }
   }, [navigate]);
 

src/features/diary-history/model/useDiaryHistory.ts

@@ -1,39 +1,60 @@
-import { useState } from "react";
-import noteImage from "@/shared/assets/images/note.png"; // ✅ import된 이미지
+// useDiaryHistory.js
+import { useState } from 'react';
+
+const exampleDiaryImages = [
+  {
+    id: 1,
+    imageUrl: "https://via.placeholder.com/150",
+    date: "0월 0일 0요일",
+    content: "일기 내용 일기 내용 일...",
+  },
+  {
+    id: 2,
+    imageUrl: "https://via.placeholder.com/150",
+    date: "1월 1일 1요일",
+    content: "새해 첫날의 일기...",
+  },
+  {
+    id: 3,
+    imageUrl: "https://via.placeholder.com/150",
+    date: "2월 2일 2요일",
+    content: "빼빼로데이",
+  },
+];
 
 export const useDiaryHistory = () => {
-  const [selectedMonth, setSelectedMonth] = useState({ year: 2025, month: 2 });
-  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [diaryImages, setDiaryImages] = useState(exampleDiaryImages); // 예시 데이터 사용
+  const [selectedMonth, setSelectedMonth] = useState({ year: new Date().getFullYear(), month: new Date().getMonth() + 1 });
+  const [selectedImage, setSelectedImage] = useState(null);
 
-  /**  월 변경 함수 */
-  const changeMonth = (direction: "prev" | "next") => {
-    setSelectedMonth((prev) => {
-      let newYear = prev.year;
-      let newMonth = direction === "prev" ? prev.month - 1 : prev.month + 1;
+  const changeMonth = (direction) => {
+    setSelectedMonth((prevMonth) => {
+      let newYear = prevMonth.year;
+      let newMonth = prevMonth.month;
 
-      if (newMonth === 0) {
-        newMonth = 12;
-        newYear -= 1;
-      } else if (newMonth === 13) {
-        newMonth = 1;
-        newYear += 1;
+      if (direction === "prev") {
+        newMonth--;
+        if (newMonth < 1) {
+          newMonth = 12;
+          newYear--;
+        }
+      } else if (direction === "next") {
+        newMonth++;
+        if (newMonth > 12) {
+          newMonth = 1;
+          newYear++;
+        }
       }
 
       return { year: newYear, month: newMonth };
     });
   };
 
-  //  임시 이미지 데이터 (월별로 다르게 설정 가능)
-  const diaryImages = Array.from({ length: 9 }, (_, index) => ({
-    id: index + 1,
-    imageUrl: noteImage, //   import된 이미지 사용
-  }));
-
   return {
+    diaryImages,
     selectedMonth,
     selectedImage,
     setSelectedImage,
     changeMonth,
-    diaryImages,
   };
-};
+};

src/features/diary-history/ui/DiaryImageGrid.tsx

@@ -1,24 +1,46 @@
 import React from "react";
 
 interface DiaryImageGridProps {
-  diaryImages: { id: number; imageUrl: string }[];
+  diaryImages: { id: number; imageUrl: string; date: string; content: string }[];
   onSelectImage: (imageUrl: string) => void;
 }
 
 export const DiaryImageGrid: React.FC<DiaryImageGridProps> = ({ diaryImages, onSelectImage }) => {
   return (
-    <div className="mt-4 w-full max-w-4xl grid grid-cols-2 md:grid-cols-3 gap-4">
-      {diaryImages.map((entry) => (
-        <div
-          key={entry.id}
-          className="relative cursor-pointer transition-transform transform hover:scale-105"
-          onClick={() => onSelectImage(entry.imageUrl)}
-        >
-          <img src={entry.imageUrl} alt={`일기 ${entry.id}`} className="w-full h-auto rounded-lg" />
+    <div className="mt-4 w-full max-w-4xl grid grid-cols-1 place-items-center"> {/* grid-cols-1, place-items-center 추가 */}
+      {diaryImages.length === 0 ? (
+        // 일기가 없을 때 메시지 표시
+        <div className="w-full h-[236px] flex items-center justify-center text-center text-[#201f1e] text-xl font-normal font-['SD PixelGoodmorning TT']">
+          앗, 아직 작성된 일기가 없어요...★
         </div>
-      ))}
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4"> {/* 일기가 있을 때만 그리드 표시 */}
+          {diaryImages.map((entry) => (
+            <div
+              key={entry.id}
+              className="w-[157px] h-[236px] p-1.5 bg-[#eaf4ce] rounded-xl border border-black flex flex-col items-center gap-1.5 cursor-pointer transition-transform transform hover:scale-105"
+              onClick={() => onSelectImage(entry.imageUrl)}
+            >
+              {/* 날짜 영역 */}
+              <div className="w-[145px] py-1 bg-white rounded-[14px] border border-black flex justify-center items-center">
+                <span className="text-center text-[#201f1e] text-base font-normal font-['SD PixelGoodmorning TT'] leading-snug">
+                  {entry.date}
+                </span>
+              </div>
+
+              {/* 이미지 영역 */}
+              <img className="w-[145px] h-[145px] rounded-2xl border border-black" src={entry.imageUrl} alt={`일기 ${entry.id}`} />
+
+              {/* 내용 영역 */}
+              <div className="w-[145px] h-[38px] text-[#201f1e] text-sm font-normal font-['SD PixelGoodmorning TT'] leading-[18.76px] text-center">
+                {entry.content}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
 
-export default DiaryImageGrid;
+export default DiaryImageGrid;

src/features/diary-history/ui/MonthSelector.tsx

@@ -8,16 +8,22 @@ interface MonthSelectorProps {
 
 export const MonthSelector: React.FC<MonthSelectorProps> = ({ selectedMonth, changeMonth }) => {
   return (
-    <div className="flex items-center justify-between w-full max-w-md mt-6">
-      <button className="btn btn-outline btn-sm" onClick={() => changeMonth("prev")}>
+    <div className="flex items-center justify-between w-full max-w-md mt-6 relative top-[30px]">
+      <button 
+        className="btn btn-outline btn-sm bg-gray-300 border-gray-500 text-gray-700 hover:bg-gray-400" 
+        onClick={() => changeMonth("prev")}
+      >
         <FaChevronLeft className="w-4 h-4" />
       </button>
 
-      <div className="text-lg sm:text-xl font-bold">
+      <div className="text-lg sm:text-xl font-bold text-black">
         {selectedMonth.year}년 {selectedMonth.month}월
       </div>
 
-      <button className="btn btn-outline btn-sm" onClick={() => changeMonth("next")}>
+      <button 
+        className="btn btn-outline btn-sm bg-gray-300 border-gray-500 text-gray-700 hover:bg-gray-400" 
+        onClick={() => changeMonth("next")}
+      >
         <FaChevronRight className="w-4 h-4" />
       </button>
     </div>

src/index.css

@@ -4,7 +4,12 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
-  font-weight: 400; 
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255);
+  background-color: #242424;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

src/pages/DiaryHistoryPage.tsx

@@ -1,29 +1,30 @@
+// DiaryHistoryPage.js
 import React from "react";
 import { useNavigate } from "react-router-dom";
-
 import { useDiaryHistory } from "@/features/diary-history";
+import ArchiveLogo from "@/shared/ui/ArchiveLogo"; 
 import { MonthSelector, DiaryImageGrid, DiaryImagePopup } from "@/features/diary-history";
 import Header from "@/shared/ui/MainHeader";
+
 const DiaryHistoryPage: React.FC = () => {
   const navigate = useNavigate();
-  const { selectedMonth, selectedImage, setSelectedImage, changeMonth, diaryImages } = useDiaryHistory();
+  const { diaryImages, selectedMonth, selectedImage, setSelectedImage, changeMonth } = useDiaryHistory();
 
   return (
-    <div className="flex flex-col items-center min-h-screen bg-white px-6">
+    <div className="flex flex-col items-center min-h-screen">
       {/* 헤더 */} 
-      <div className="z-30 w-full flex items-center justify-center">
-        <Header />
-      </div>
-      {/* 🗓️ 월별 선택 네비게이션 */}
+      <Header />
+      {/* ️ 월별 선택 네비게이션 */}
+      <ArchiveLogo />
       <MonthSelector selectedMonth={selectedMonth} changeMonth={changeMonth} />
-
-      {/* 📌 반응형 그리드 (일기 이미지 목록) */}
+      {/* 반응형 그리드 (일기 이미지 목록) */}
+      <div className="relative top-[19px]">
       <DiaryImageGrid diaryImages={diaryImages} onSelectImage={setSelectedImage} />
-
-      {/* 🖼️ 선택한 이미지 팝업 */}
+      </div>
+      {/* ️ 선택한 이미지 팝업 */}
       <DiaryImagePopup selectedImage={selectedImage} onClose={() => setSelectedImage(null)} />
     </div>
   );
 };
 
-export default DiaryHistoryPage;
+export default DiaryHistoryPage;