Seunghye

gomgom/src/components/GomGomBoard/GominCategory.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import axios from 'axios';
 
-function GominCategory({ category }){
+function GominCategory({ category, onClick }){
     const box = { 
         display: "inline-block", 
         padding: "0.625rem 1.25rem",
@@ -22,9 +22,9 @@ function GominCategory({ category }){
     }
 
     return (
-        <div style={box}>
+        <button onClick={onClick} style={box}>
            <p style={text}>{category}</p>
-        </div>
+        </button>
     );
 }
 

gomgom/src/components/GomGomBoard/TodayGomin.jsx

@@ -1,7 +1,10 @@
 import React, {useState} from 'react';
 import GominCategory from "../GomGomBoard/GominCategory";
+import axios from 'axios';
 
 function TodayGomin(){
+    const [board, setBoard] = useState(''); 
+
     const text = { 
         margin:"0", 
         color: "var(--67594-c, #67594C)",
@@ -13,20 +16,44 @@ function TodayGomin(){
         marginBottom:"2.19rem"
     }
 
+    const categoryToBoardId = {
+        "전체": 0,
+        "대인관계": 1,
+        "연애": 2,
+        "교육": 3,
+        "생활": 4,
+        "건강": 5,
+        "반려동물": 6,
+        "여행": 7,
+        "쇼핑": 8,
+        "기타": 9
+    };
+
+    const handleClick = (category) => {
+        const boardId = categoryToBoardId[category];
+        console.log(`Button clicked. category: ${category}, boardId: ${boardId}`); 
+        axios.get(`/board/${boardId}`) 
+            .then(response => {
+                console.log(response.data);
+                setBoard(response.data);
+            })
+            .catch(error => console.log(error));
+    };
+
     return (
         <div style={{paddingTop:"3.81rem"}}>
             <p style={text}>고민을 한 곳에 모았어요</p>
                 <div style={{ display: "flex", gap: "1.25rem", justifyContent:"center"}}>
-                <GominCategory category="전체" />
-                <GominCategory category="대인관계" />
-                <GominCategory category="연애" />
-                <GominCategory category="교육" />
-                <GominCategory category="생활" />
-                <GominCategory category="건강" />
-                <GominCategory category="반려동물" />
-                <GominCategory category="여행" />
-                <GominCategory category="쇼핑" />
-                <GominCategory category="기타" />
+                <GominCategory category="전체" onClick={() => handleClick("전체")} />
+                <GominCategory category="대인관계" onClick={() => handleClick("대인관계")}/>
+                <GominCategory category="연애" onClick={() => handleClick("연애")}/>
+                <GominCategory category="교육" onClick={() => handleClick("교육")}/>
+                <GominCategory category="생활" onClick={() => handleClick("생활")}/>
+                <GominCategory category="건강" onClick={() => handleClick("건강")}/>
+                <GominCategory category="반려동물" onClick={() => handleClick("반려동물")}/>
+                <GominCategory category="여행" onClick={() => handleClick("여행")}/>
+                <GominCategory category="쇼핑" onClick={() => handleClick("쇼핑")}/>
+                <GominCategory category="기타" onClick={() => handleClick("기타")}/>
             </div>
         </div>
     );

gomgom/src/pages/GomGomBoard.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import axios from 'axios';
 import Header from "../components/Header";
 import Nav from "../components/Nav";
@@ -8,19 +9,21 @@ import TodayGomin from "../components/GomGomBoard/TodayGomin";
 import GominBoxContainer from "../components/GomGomBoard/GominBoxContainer"; 
 
 function GomGomBoard(){
-    const [board, setBoard] = useState('')
-
-    // useEffect(() => { //통신코드
-    //     axios.get('/board') 
-    //     .then(response => setBoard(response.data))
-    //     .catch(error => console.log(error))
-    // }, []);
+    const [board, setBoard] = useState(''); 
+    const { boardId } = useParams();
 
+    // useEffect(() => { //특정 -> 확인 완료
+    //     axios.get(`/board/${boardId}`) 
+    //         .then(response => {
+    //             console.log(response.data); // 데이터 형태 확인
+    //             setBoard(response.data); // JSON.parse()를 호출하지 않습니다.
+    //         })
+    //         .catch(error => console.log(error));
+    //   }, [boardId]);
 
-    useEffect(() => {
+    useEffect(() => { //전체 -> 확인 완료 
         axios.get('/api/board') 
             .then(response => {
-                // 응답 데이터를 JSON 객체로 파싱하여 상태로 설정
                 const parsedData = JSON.parse(response.data);
                 setBoard(parsedData);
             })

gomgom/src/setupProxy.js

@@ -2,7 +2,7 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
     app.use(
-        '/api/board',
+        '/board',
         createProxyMiddleware({
             target: 'http://localhost:8080',
             changeOrigin: true,