Fishing

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);/*떠있는 느낌*/
+}

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>
+    )
+}

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>

stardew_archive/src/hooks/useLocalStorageState.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+
+// 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];
+}

stardew_archive/src/pages/FishingPage.jsx

@@ -1,15 +1,24 @@
+import FishDetailForm from '../components/FishDetailForm'
+import { useLocalStorageState } from '../hooks/useLocalStorageState'
 import { useState } from 'react'
 import ItemSelectModal from '../components/ItemSelectModal'
 import { fishData } from '../data/fishData'
 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} onClick={() => setEditingFish(fish)}> 
+            <img src = {fish.image} alt = {fish.name} />
+            <p>{fish.name}</p>
+          </div>
+        ))}
         <button className="add-card" onClick={() => setShowModal(true)}>
           +
         </button>
@@ -20,8 +29,15 @@ export default function FishingPage() {
         <ItemSelectModal
           data={fishData}
           onClose={() => setShowModal(false)}
+          onSelect = {(item)=> {
+            setCaughtFish((prev)=>[...prev,item])
+            setShowModal(false)
+          }}
         />
       )}
+      {editingFish && (
+         <FishDetailForm fish={editingFish} onClose={() => setEditingFish(null)} /> // 보여줄 물고기 -> editingFish / 닫힐때는 다시 비우기
+        )}  
     </div>
   )
 }