From fb16824c7cd1187d6fb7d3a35f5d9907c9d9be1c Mon Sep 17 00:00:00 2001
From: ihye589 <ihye589@gmail.com>
Date: Wed, 29 Jul 2026 21:29:19 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=EB=AC=BC=EA=B3=A0=EA=B8=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80(=ED=95=9C=EB=A7=88=EB=A6=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stardew_archive/src/components/ItemSelectModal.jsx |  5 +++--
 stardew_archive/src/pages/FishingPage.jsx          | 11 +++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/stardew_archive/src/components/ItemSelectModal.jsx b/stardew_archive/src/components/ItemSelectModal.jsx
index 201ddf1..6630f61 100644
--- a/stardew_archive/src/components/ItemSelectModal.jsx
+++ b/stardew_archive/src/components/ItemSelectModal.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import './ItemSelectModal.css'
 
-export default function ItemSelectModal({ data, onClose }) {
+export default function ItemSelectModal({ data, onClose, onSelect }) {
   const [query, setQuery] = useState('')
 
   const filtered = data.filter((item) =>
@@ -29,7 +29,8 @@ export default function ItemSelectModal({ data, onClose }) {
         <div className="modal__grid">
           {filtered.length > 0 ? (
             filtered.map((item) => (
-              <div key={item.id} className="modal__item">
+              <div key={item.id} className="modal__item"
+                onClick ={ ()=> onSelect(item)}> 
                 <img src={item.image} alt={item.name} draggable={false} />
                 <span>{item.name}</span>
               </div>
diff --git a/stardew_archive/src/pages/FishingPage.jsx b/stardew_archive/src/pages/FishingPage.jsx
index f6a4a12..6c61068 100644
--- a/stardew_archive/src/pages/FishingPage.jsx
+++ b/stardew_archive/src/pages/FishingPage.jsx
@@ -5,11 +5,18 @@ import './PageCommon.css'
 
 export default function FishingPage() {
   const [showModal, setShowModal] = useState(false)
+  const [selectedFish, setSelectedFish] = useState(null)  
 
   return (
     <div className="page">
       <div className="page__grid">
 
+        {selectedFish && (
+          <div className = "fish-card">
+            <img src = {selectedFish.image} alt = {selectedFish.name} />
+            <p>{selectedFish.name}</p>
+          </div>
+        )}
         <button className="add-card" onClick={() => setShowModal(true)}>
           +
         </button>
@@ -20,6 +27,10 @@ export default function FishingPage() {
         <ItemSelectModal
           data={fishData}
           onClose={() => setShowModal(false)}
+          onSelect = {(item)=> {
+            setSelectedFish(item)
+            setShowModal(false)
+          }}
         />
       )}
     </div>

From 2c7b0d9e54579199ee3dbd68c2057c590d9ae27c Mon Sep 17 00:00:00 2001
From: ihye589 <ihye589@gmail.com>
Date: Wed, 29 Jul 2026 21:46:18 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=EB=AC=BC=EA=B3=A0=EA=B8=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80(=EC=97=AC=EB=9F=AC=20=EB=A7=88=EB=A6=AC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stardew_archive/src/pages/FishingPage.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/stardew_archive/src/pages/FishingPage.jsx b/stardew_archive/src/pages/FishingPage.jsx
index 6c61068..c6fb9f6 100644
--- a/stardew_archive/src/pages/FishingPage.jsx
+++ b/stardew_archive/src/pages/FishingPage.jsx
@@ -5,18 +5,18 @@ import './PageCommon.css'
 
 export default function FishingPage() {
   const [showModal, setShowModal] = useState(false)
-  const [selectedFish, setSelectedFish] = useState(null)  
+  const [caughtFish, setCaughtFish] = useState([]) 
 
   return (
     <div className="page">
       <div className="page__grid">
 
-        {selectedFish && (
-          <div className = "fish-card">
-            <img src = {selectedFish.image} alt = {selectedFish.name} />
-            <p>{selectedFish.name}</p>
+        {caughtFish.map((fish) =>(
+          <div className = "fish-card" key={fish.id}>
+            <img src = {fish.image} alt = {fish.name} />
+            <p>{fish.name}</p>
           </div>
-        )}
+        ))}
         <button className="add-card" onClick={() => setShowModal(true)}>
           +
         </button>
@@ -28,7 +28,7 @@ export default function FishingPage() {
           data={fishData}
           onClose={() => setShowModal(false)}
           onSelect = {(item)=> {
-            setSelectedFish(item)
+            setCaughtFish((prev)=>[...prev,item])
             setShowModal(false)
           }}
         />

From 2ec7dfd98ae986e2e231e787a73437db2e11a851 Mon Sep 17 00:00:00 2001
From: ihye589 <ihye589@gmail.com>
Date: Thu, 30 Jul 2026 13:22:36 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8->?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stardew_archive/src/hooks/useLocalStorageState.js | 14 ++++++++++++++
 stardew_archive/src/pages/FishingPage.jsx         |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 stardew_archive/src/hooks/useLocalStorageState.js

diff --git a/stardew_archive/src/hooks/useLocalStorageState.js b/stardew_archive/src/hooks/useLocalStorageState.js
new file mode 100644
index 0000000..b03d1b3
--- /dev/null
+++ b/stardew_archive/src/hooks/useLocalStorageState.js
@@ -0,0 +1,14 @@
+import { useState, useEffect } from "react";
+/* useState : 화면 켜져있는 동안만 기억, useLocalStorageState :  브라우저에서 같이 저장해서 새로고침해도 안 사라짐 */
+export function useLocalStorageState(key, initialValue) {
+  const [value, setValue] = useState(() => {
+    const saved = localStorage.getItem(key); // 저장소에서 예전에서 저장해둔 값 꺼내오기
+    return saved ? JSON.parse(saved) : initialValue; // 있으면 객체로 복원
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}
diff --git a/stardew_archive/src/pages/FishingPage.jsx b/stardew_archive/src/pages/FishingPage.jsx
index c6fb9f6..d78005e 100644
--- a/stardew_archive/src/pages/FishingPage.jsx
+++ b/stardew_archive/src/pages/FishingPage.jsx
@@ -1,3 +1,4 @@
+import { useLocalStorageState } from '../hooks/useLocalStorageState'
 import { useState } from 'react'
 import ItemSelectModal from '../components/ItemSelectModal'
 import { fishData } from '../data/fishData'
@@ -5,7 +6,7 @@ import './PageCommon.css'
 
 export default function FishingPage() {
   const [showModal, setShowModal] = useState(false)
-  const [caughtFish, setCaughtFish] = useState([]) 
+  const [caughtFish, setCaughtFish] = useLocalStorageState('caughtFish', [])
 
   return (
     <div className="page">

From eabb97c555a5cb225d12e908c562dfe23053e485 Mon Sep 17 00:00:00 2001
From: ihye589 <ihye589@gmail.com>
Date: Fri, 31 Jul 2026 23:06:50 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=EB=82=9A=EC=8B=9C=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8F=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FishDetailForm.css         | 19 +++++++++++++++++++
 .../src/components/FishDetailForm.jsx         | 14 ++++++++++++++
 .../src/hooks/useLocalStorageState.js         |  3 ++-
 stardew_archive/src/pages/FishingPage.jsx     |  8 ++++++--
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 stardew_archive/src/components/FishDetailForm.css
 create mode 100644 stardew_archive/src/components/FishDetailForm.jsx

diff --git a/stardew_archive/src/components/FishDetailForm.css b/stardew_archive/src/components/FishDetailForm.css
new file mode 100644
index 0000000..e41a666
--- /dev/null
+++ b/stardew_archive/src/components/FishDetailForm.css
@@ -0,0 +1,19 @@
+.detail-overlay {
+  position: fixed; /*페이지 내려도 배경은 항상 화면에 있음*/
+  inset: 0; /*화면 전체 채우기*/
+  background: rgba(0, 0, 0, 0.45); /*마지막 숫자 투명도*/
+  display: flex; /*정렬 모드-> 아래 두개까지 팝업박스(내용물)를 화면 정중앙에 놓아라*/
+  align-items: center; /*세로 가운데*/
+  justify-content: center; /*가로 가운데*/
+  z-index: 200;/*레이어 정하는 숫자->숫자 높을 수록 더 위에 쌓임*/
+}
+
+.detail-form { /*팝업*/
+  background: #fff;
+  border-radius: 12px;/*모서리 둥글게*/
+  width: 400px; /*박스 가로 폭 고정*/
+  max-height: 70vh;/*세로 높이는 화면 높이의 70%까지만 커지게 제한 -> 내용이 그거보다 많아지면?*/
+  overflow-y: auto;/*넘기면, 세로 스크롤바가 자동으로 생김*/
+  padding: 24px;/*박스 안쪽 여백*/
+  box-shadow: 0 8px 32px rgba(0,0,0,0.25);/*떠있는 느낌*/
+}
\ No newline at end of file
diff --git a/stardew_archive/src/components/FishDetailForm.jsx b/stardew_archive/src/components/FishDetailForm.jsx
new file mode 100644
index 0000000..e7cdd6e
--- /dev/null
+++ b/stardew_archive/src/components/FishDetailForm.jsx
@@ -0,0 +1,14 @@
+import './FishDetailForm.css'
+
+export default function FishDetailForm({fish, onClose}){
+    return(
+        <div className = "detail-overlay" onClick={onClose}>
+            <div className = "detail-form" onClick ={(e) => e.stopPropagation()}>
+                <h3>{fish.name}</h3>
+                <img src = {fish.image} alt ={fish.name} width = {80}/>
+                <p>=상세 정보 입력폼=</p>
+                <button onClick={onClose} >닫기</button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/stardew_archive/src/hooks/useLocalStorageState.js b/stardew_archive/src/hooks/useLocalStorageState.js
index b03d1b3..601bb41 100644
--- a/stardew_archive/src/hooks/useLocalStorageState.js
+++ b/stardew_archive/src/hooks/useLocalStorageState.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-/* useState : 화면 켜져있는 동안만 기억, useLocalStorageState :  브라우저에서 같이 저장해서 새로고침해도 안 사라짐 */
+
+// useLocalStorageState :  브라우저에서 같이 저장해서 새로고침해도 안 사라짐
 export function useLocalStorageState(key, initialValue) {
   const [value, setValue] = useState(() => {
     const saved = localStorage.getItem(key); // 저장소에서 예전에서 저장해둔 값 꺼내오기
diff --git a/stardew_archive/src/pages/FishingPage.jsx b/stardew_archive/src/pages/FishingPage.jsx
index d78005e..cef801b 100644
--- a/stardew_archive/src/pages/FishingPage.jsx
+++ b/stardew_archive/src/pages/FishingPage.jsx
@@ -1,3 +1,4 @@
+import FishDetailForm from '../components/FishDetailForm'
 import { useLocalStorageState } from '../hooks/useLocalStorageState'
 import { useState } from 'react'
 import ItemSelectModal from '../components/ItemSelectModal'
@@ -7,13 +8,13 @@ import './PageCommon.css'
 export default function FishingPage() {
   const [showModal, setShowModal] = useState(false)
   const [caughtFish, setCaughtFish] = useLocalStorageState('caughtFish', [])
-
+  const [editingFish, setEditingFish] = useState(null) // 상세 폼에 띄울 물고기 뭔지 저장
   return (
     <div className="page">
       <div className="page__grid">
 
         {caughtFish.map((fish) =>(
-          <div className = "fish-card" key={fish.id}>
+          <div className = "fish-card" key={fish.id} onClick={() => setEditingFish(fish)}> 
             <img src = {fish.image} alt = {fish.name} />
             <p>{fish.name}</p>
           </div>
@@ -34,6 +35,9 @@ export default function FishingPage() {
           }}
         />
       )}
+      {editingFish && (
+         <FishDetailForm fish={editingFish} onClose={() => setEditingFish(null)} /> // 보여줄 물고기 -> editingFish / 닫힐때는 다시 비우기
+        )}  
     </div>
   )
 }

From 286ed5ab410a75a9cc486215b03c9486018ab91a Mon Sep 17 00:00:00 2001
From: ihye589 <ihye589@gmail.com>
Date: Sat, 1 Aug 2026 21:21:11 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=EB=82=9A=EC=8B=9C=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8F=BC/=EA=B3=84=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FishDetailForm.jsx          | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/stardew_archive/src/components/FishDetailForm.jsx b/stardew_archive/src/components/FishDetailForm.jsx
index e7cdd6e..8f80d2d 100644
--- a/stardew_archive/src/components/FishDetailForm.jsx
+++ b/stardew_archive/src/components/FishDetailForm.jsx
@@ -1,12 +1,28 @@
+import {useState} from 'react'
 import './FishDetailForm.css'
 
+const SEASONS = ['봄','여름','가을','겨울']
+
 export default function FishDetailForm({fish, onClose}){
+    const[seasons, setSeasons ]=useState([])
     return(
         <div className = "detail-overlay" onClick={onClose}>
             <div className = "detail-form" onClick ={(e) => e.stopPropagation()}>
                 <h3>{fish.name}</h3>
                 <img src = {fish.image} alt ={fish.name} width = {80}/>
-                <p>=상세 정보 입력폼=</p>
+                <p>계절</p>
+                {SEASONS.map((season) => (
+                <button
+                key={season} /* 이름표 */
+                onClick={() =>
+                    setSeasons((prev) =>
+                    prev.includes(season) ? prev.filter((s) => s !== season) : [...prev, season]
+                    )
+                }
+                >
+                {season} {seasons.includes(season) ? '✓' : ''}
+                </button>
+            ))}
                 <button onClick={onClose} >닫기</button>
             </div>
         </div>