diff --git a/src/api/question/question.api.ts b/src/api/question/question.api.ts index b63e68b..690f236 100644 --- a/src/api/question/question.api.ts +++ b/src/api/question/question.api.ts @@ -1,9 +1,25 @@ /* 일대일 문의 전체 조회 */ -import { getRequest } from '../request'; -import { QuestionType } from '../types/question'; +import { getRequest, postRequest } from '../request'; +import { + PostQuestionTypeResponse, + QuestionPost, + GetQuestionType +} from '../types/question'; -export const userinfo = async () => { - const response = await getRequest('privatePosts'); +export const questioninfo = async () => { + const response = await getRequest( + `privatePosts?page=1&size=100&sort=string` + ); + return response; +}; + +/* 일대일 문의 등록 */ + +export const registerquestion = async ({ title, content, branchName }: QuestionPost) => { + const response = await postRequest( + 'privatePosts', + { title, content, branchName } + ); return response; }; diff --git a/src/api/types/question.ts b/src/api/types/question.ts index 3d900cc..7ae4575 100644 --- a/src/api/types/question.ts +++ b/src/api/types/question.ts @@ -1,6 +1,12 @@ +// import { Branch } from './branch'; import { ICommon } from './common'; +export interface QuestionPost { + title: string; + content: string; + branchName: string | undefined; +} -interface QuestionPost { +interface QuestionGet { id: number; title: string; content: string; @@ -8,13 +14,15 @@ interface QuestionPost { createdDate: string; } -interface QuestionPosttResponse { - privatePostList: QuestionPost[]; +interface QuestionGetResponse { + privatePostList: QuestionGet[]; hasNext: boolean; } -interface Message { - message: string; +interface QuestionMessage { + id: number; } -export type QuestionType = ICommon; +export type GetQuestionType = ICommon; + +export type PostQuestionTypeResponse = ICommon; diff --git a/src/pages/mypage/question/index.tsx b/src/pages/mypage/question/index.tsx index 211ebd4..83eed29 100644 --- a/src/pages/mypage/question/index.tsx +++ b/src/pages/mypage/question/index.tsx @@ -1,5 +1,8 @@ -import { questiongetmock, questionpostmock } from '@/api/mock.api'; +import { questioninfo, registerquestion } from '@/api/question/question.api'; +import { Branch } from '@/api/types/branch'; import { BackArrow } from '@/components/backarrow/BackArrow'; +import SearchModal from '@/components/home/SearchModal'; +import { useQuestionBranchStore } from '@/store/questionBranch.store'; import { useQuery } from '@tanstack/react-query'; import React, { useState } from 'react'; @@ -8,22 +11,45 @@ const InquiryForm = () => { const [content, setContent] = useState(''); const isButtonActive = title && content; + const [showSearchModal, setShowSearchModal] = useState(false); + const branch = useQuestionBranchStore((state) => state.selectedQuestionBranch); + const branchName = branch?.branchName; + + const setSelectedQuestionBranch = useQuestionBranchStore( + (state) => state.setSelectedQuestionBranch + ); + const handleSearchClick = () => { + setShowSearchModal(true); + }; + + const handleBranchSelect = (branch: Branch) => { + setSelectedQuestionBranch(branch, Date.now()); + setShowSearchModal(false); + }; const handleSubmit = () => { if (isButtonActive) { - questionpostmock({ title, content }); - setTitle(''); - setContent(''); - alert('문의등록이 완료되었습니다!'); + try { + registerquestion({ title, content, branchName }); + setTitle(''); + setContent(''); + alert('문의등록이 완료되었습니다!'); + } catch { + alert('문의등록에 실패했습니다.'); + } } }; return ( -
-
+
+
map {/* api */} -
강남1호점
+
+ {branch ? branch.branchName : '지점을 설정해주세요'} +
제목
@@ -52,6 +78,12 @@ const InquiryForm = () => { 등록
+ {showSearchModal && ( + setShowSearchModal(false)} + onBranchSelect={handleBranchSelect} + /> + )}
); }; @@ -63,14 +95,14 @@ const InquiryHistory = () => { }; const { data, isLoading } = useQuery({ - queryKey: ['inquiries'], - queryFn: questiongetmock + queryKey: ['questioninfo'], + queryFn: questioninfo }); - const inquiriesData = data?.data.value.data; - console.log(data?.data.value.data); + const inquiriesData = data?.data.privatePostList; + console.log(data); return ( -
+
{isLoading ? (
Loading...
) : ( @@ -84,31 +116,57 @@ const InquiryHistory = () => { ) )} - {inquiriesData?.map((data: { title: string; content: string }, index: number) => ( -
toggleInquiry(index)}> -
-
{data.title}
- arrow -
-
2024.05.16
- {openInquiry === index && ( -
- {data.content} + {inquiriesData?.map( + ( + data: { title: string; content: string; createdDate: string }, + index: number + ) => { + const openAnswer = inquiriesData.length - index; + return ( +
toggleInquiry(index)}> +
+
{data.title}
+ arrow +
+
+ {data.createdDate} +
+ {openInquiry === index && ( +
+
+
+
+
+ {data.content} +
+
+
+ +
+
+
+ {openAnswer} +
+
+
+
+
+ )}
- )} -
- ))} + ); + } + )}
); }; @@ -122,7 +180,7 @@ const InquiryPage = () => { // }; return ( -
+
diff --git a/src/store/questionBranch.store.ts b/src/store/questionBranch.store.ts new file mode 100644 index 0000000..5bf5d7c --- /dev/null +++ b/src/store/questionBranch.store.ts @@ -0,0 +1,25 @@ +// branch.store.ts +/* eslint-disable no-unused-vars */ +import { create } from 'zustand'; +import { Branch } from '@/api/types/branch'; +import { persist } from 'zustand/middleware'; + +interface QuestionBranch { + selectedQuestionBranch: Branch | null; + setSelectedQuestionBranch: (branch: Branch | null, time: number) => void; + updatedTimeSelected: number | null; +} + +export const useQuestionBranchStore = create( + persist( + (set) => ({ + selectedQuestionBranch: null, + setSelectedQuestionBranch: (branch: Branch | null, time: number) => + set({ selectedQuestionBranch: branch, updatedTimeSelected: time }), + updatedTimeSelected: null + }), + { + name: 'selectedBranch' + } + ) +);