feat[JustOneBite#53]: 글 카테고리 버튼 설정

student/app/mainPage/helpPage/listItem.js

@@ -0,0 +1,58 @@
+'use client'
+import React from 'react';
+import styles from "./listItem.module.css";
+import Link from "next/link";
+import { useState , useEffect } from 'react';
+
+// 게시물 데이터 예시 (실제 데이터는 서버에서 가져와야됨)
+
+
+
+const listItem = () => {
+    const [posts , setPosts] = useState([]);
+
+
+    useEffect(()=>{
+        const fetchPosts = async() => {
+            const res = await fetch('/api/posts');
+            const data = await res.json();
+            console.log(data)
+            if(res.ok){
+                setPosts(data.posts || [])
+
+            }else{
+                console.error('서버오류',res.message)
+            }
+        } 
+
+        fetchPosts();
+    },[]);
+
+
+
+    return (
+        <div className={styles.postList}>
+        {posts.map((post, index) => (
+            <div key={post.id} className={styles.navbar}>
+            <div className={styles.navbarItem}>{index + 1}</div> {/* 번호는 인덱스에 1을 더해서 표시 */}
+            <div className={styles.navbarItem}>{post.category}</div>
+            <Link
+                href={{
+                    pathname: "/studentService/edit",
+                    query: { postId: post.id, title: post.title },
+                }}
+                >
+                <div className={styles.navbarItem} style={{ cursor: "pointer", color: "blue" }}>
+                    {post.title}
+                </div>
+            </Link>
+            <div className={styles.navbarItem}>{post.author}</div>
+            <div className={styles.navbarItem}>{post.date}</div>
+            <div className={styles.navbarItem}>{post.status ? '처리완료' : '답변대기'}</div>
+            </div>
+        ))}
+        </div>
+    );
+    };
+
+export default listItem;

student/app/mainPage/helpPage/page.js

@@ -1,14 +1,21 @@
 'use client'
-import styles from "./helpPage.module.css";
+import { useState } from "react";
 
 import { PageLayout } from '@/app/page.js';
 import SizedBox from "@/app/widgets/structure/SizedBox";
 import { Grid, Column, Row } from "@/app/widgets/structure/Grid";
 import { Button1, Button5 } from "@/app/components/ui/buttons/Regular";
 import TextField from "@/app/components/ui/TextField";
-import { DropdownButton2 } from "@/app/components/ui/buttons/Dropdown";
+import { DropdownButton2 , DropdownElement } from "@/app/components/ui/buttons/Dropdown";
+
 
 export default function studentService(){
+
+    const [selectedCategory, setSelectedCategory] = useState(null);
+    const [selectedOrdering, setSelectedOrdering] = useState(null);
+
+
+
     return(
         <PageLayout>
         <h1>고객센터</h1>
@@ -17,21 +24,23 @@ export default function studentService(){
 
                 {/* 검색 & 필터 Row */}
                 <Row justifyContent="space-between" gap="15px">
-
-                    {/* 카테고리 선택 */}
-                    {/* <select>
-                    <option>카테고리</option>
-                    </select> */}
-
-                    {/* 정렬 선택 */}
-                    {/* <select>
-                    <option>최신순</option>
-                    </select> */}
-
                     <Row justifyContent="center" gap="15px">
-                        <DropdownButton2>최신순</DropdownButton2>
+                    <DropdownButton2 onSelect={(item) => setSelectedCategory(item)} width={140}
+                    allowCustom
+                    search
+                    placeholder="카테고리">           
+                        <DropdownElement label="로그인" value="login"/>
+                        <DropdownElement label="버그 및 오류" value="bug"/>
+                        <DropdownElement label="공지사항" value="alarm"/>
+                        <DropdownElement label="기타문의" value="quest"/>
+                    </DropdownButton2>
+                    <DropdownButton2 onSelect={(item) => setSelectedOrdering(item)} width={140}
+                        placeholder="최신순">           
+                        <DropdownElement label="최신순" value="time"/>
+                        <DropdownElement label="인기순" value="score"/>
+                    </DropdownButton2>
                     </Row>
-                    <Row gap="15px">
+                    <Row justifyContent="end" gap="15px">
                         <TextField placeholder={true} width={360} ></TextField>
                         <SizedBox width={50} height={32}/>
                         <Button5 width={126} text={`찾기`} >찾기</Button5>