From 6ccdadeb2780e001775b00ec58ca1a1da515fb40 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Tue, 6 May 2025 18:15:17 +0900 Subject: [PATCH 1/8] =?UTF-8?q?design:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20css=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mypage/myProfile/MyProfile.styled.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/mypage/myProfile/MyProfile.styled.ts b/src/components/mypage/myProfile/MyProfile.styled.ts index 017ee3b6..b02942ff 100644 --- a/src/components/mypage/myProfile/MyProfile.styled.ts +++ b/src/components/mypage/myProfile/MyProfile.styled.ts @@ -31,8 +31,5 @@ export const Container = styled.div` `; export const SectionContainer = styled.section` - background-color: ${({ theme }) => theme.color.lightgrey}; - border-radius: ${({ theme }) => theme.borderRadius.large} 0 0 - ${({ theme }) => theme.borderRadius.large}; padding: 2rem; `; From 2ce5426b915da8bd0455c8d6aab05af54887ed44 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Tue, 6 May 2025 23:16:09 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20FAQ=20api=20=EC=97=B0=EA=B2=B0,=20u?= =?UTF-8?q?i=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/customerService.api.ts | 13 +++++ .../customerService/faq/FAQ.styled.ts | 26 ++++++++++ src/components/customerService/faq/FAQ.tsx | 35 ++++++++++++++ .../customerService/faq/FAQContent.styled.ts | 48 +++++++++++++++++++ .../customerService/faq/FAQContent.tsx | 31 ++++++++++++ .../customerService/inquiry/Inquiry.styled.ts | 0 .../customerService/inquiry/Inquiry.tsx | 0 .../customerService/notice/Notice.styled.ts | 0 .../customerService/notice/Notice.tsx | 2 +- src/hooks/queries/keys.ts | 5 ++ src/hooks/useGetFAQ.ts | 12 +++++ src/models/customerService.ts | 11 +++++ src/pages/customerService/faq/FAQ.styled.ts | 3 -- src/pages/customerService/faq/FAQ.tsx | 11 ----- src/routes/AppRoutes.tsx | 10 ++-- 15 files changed, 189 insertions(+), 18 deletions(-) create mode 100644 src/api/customerService.api.ts create mode 100644 src/components/customerService/faq/FAQ.styled.ts create mode 100644 src/components/customerService/faq/FAQ.tsx create mode 100644 src/components/customerService/faq/FAQContent.styled.ts create mode 100644 src/components/customerService/faq/FAQContent.tsx rename src/{pages => components}/customerService/inquiry/Inquiry.styled.ts (100%) rename src/{pages => components}/customerService/inquiry/Inquiry.tsx (100%) rename src/{pages => components}/customerService/notice/Notice.styled.ts (100%) rename src/{pages => components}/customerService/notice/Notice.tsx (68%) create mode 100644 src/hooks/useGetFAQ.ts create mode 100644 src/models/customerService.ts delete mode 100644 src/pages/customerService/faq/FAQ.styled.ts delete mode 100644 src/pages/customerService/faq/FAQ.tsx diff --git a/src/api/customerService.api.ts b/src/api/customerService.api.ts new file mode 100644 index 00000000..7e27c330 --- /dev/null +++ b/src/api/customerService.api.ts @@ -0,0 +1,13 @@ +import { ApiFAQ } from '../models/customerService'; +import { httpClient } from './http.api'; + +export const getFAQ = async () => { + try { + const response = await httpClient.get(`/faq`); + + return response.data.data; + } catch (e) { + console.error(e); + throw e; + } +}; diff --git a/src/components/customerService/faq/FAQ.styled.ts b/src/components/customerService/faq/FAQ.styled.ts new file mode 100644 index 00000000..04de34a5 --- /dev/null +++ b/src/components/customerService/faq/FAQ.styled.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +export const SpinnerWrapper = styled.div` + height: 60vh; +`; + +export const Container = styled.section` + margin-top: 2rem; + margin-bottom: 5rem; + width: 100%; + display: flex; + justify-content: center; +`; + +export const Wrapper = styled.div` + width: 75%; + display: flex; + flex-direction: column; + gap: 1.5rem; +`; + +export const ContentBorder = styled.div` + width: 100%; + height: 0.5px; + background: ${({ theme }) => theme.color.placeholder}; +`; diff --git a/src/components/customerService/faq/FAQ.tsx b/src/components/customerService/faq/FAQ.tsx new file mode 100644 index 00000000..b14cf6fd --- /dev/null +++ b/src/components/customerService/faq/FAQ.tsx @@ -0,0 +1,35 @@ +import { Fragment } from 'react/jsx-runtime'; +import { useGetFAQ } from '../../../hooks/useGetFAQ'; +import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader'; +import Spinner from '../../mypage/Spinner'; +import * as S from './FAQ.styled'; +import FAQContent from './FAQContent'; + +export default function FAQ() { + const { faqData, isLoading } = useGetFAQ(); + + if (!faqData || faqData.length === 0) return; + + if (isLoading) + return ( + + + + ); + + return ( + <> + + + + {faqData.map((list) => ( + + + + + ))} + + + + ); +} diff --git a/src/components/customerService/faq/FAQContent.styled.ts b/src/components/customerService/faq/FAQContent.styled.ts new file mode 100644 index 00000000..5b6cfcf5 --- /dev/null +++ b/src/components/customerService/faq/FAQContent.styled.ts @@ -0,0 +1,48 @@ +import styled, { css } from 'styled-components'; + +export const ListContainer = styled.div``; + +export const ListWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const ListTitle = styled.div` + font-size: 1.3rem; + padding-left: 1.5rem; + font-weight: bold; +`; + +export const ListPlusButton = styled.button<{ $isOpen: boolean }>` + transition: transform 500ms ease-in-out; + ${({ $isOpen }) => + $isOpen && + css` + transform: rotate(45deg); + `} + svg { + width: 1.5rem; + height: 1.5rem; + } +`; + +export const ListContentWrapper = styled.div` + margin: 0.5rem; + display: flex; + gap: 0.5rem; +`; + +export const ListButtonWrapper = styled.div` + margin-top: 0.1rem; + + svg { + width: 1.5rem; + height: 1.5rem; + } +`; + +export const ListContent = styled.div` + font-size: 1.1rem; + padding-right: 1.5rem; +`; diff --git a/src/components/customerService/faq/FAQContent.tsx b/src/components/customerService/faq/FAQContent.tsx new file mode 100644 index 00000000..0667d8c0 --- /dev/null +++ b/src/components/customerService/faq/FAQContent.tsx @@ -0,0 +1,31 @@ +import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline'; +import { FAQ } from '../../../models/customerService'; +import * as S from './FAQContent.styled'; +import { useState } from 'react'; + +interface FAQContentProps { + list: FAQ; +} + +export default function FAQContent({ list }: FAQContentProps) { + const [isFAQContentOpen, setIsFAQContentOpen] = useState(false); + + return ( + + setIsFAQContentOpen((prev) => !prev)}> + {list.title} + + + + + {isFAQContentOpen && ( + + + + + {list.content} + + )} + + ); +} diff --git a/src/pages/customerService/inquiry/Inquiry.styled.ts b/src/components/customerService/inquiry/Inquiry.styled.ts similarity index 100% rename from src/pages/customerService/inquiry/Inquiry.styled.ts rename to src/components/customerService/inquiry/Inquiry.styled.ts diff --git a/src/pages/customerService/inquiry/Inquiry.tsx b/src/components/customerService/inquiry/Inquiry.tsx similarity index 100% rename from src/pages/customerService/inquiry/Inquiry.tsx rename to src/components/customerService/inquiry/Inquiry.tsx diff --git a/src/pages/customerService/notice/Notice.styled.ts b/src/components/customerService/notice/Notice.styled.ts similarity index 100% rename from src/pages/customerService/notice/Notice.styled.ts rename to src/components/customerService/notice/Notice.styled.ts diff --git a/src/pages/customerService/notice/Notice.tsx b/src/components/customerService/notice/Notice.tsx similarity index 68% rename from src/pages/customerService/notice/Notice.tsx rename to src/components/customerService/notice/Notice.tsx index 36dc211b..5d9d5782 100644 --- a/src/pages/customerService/notice/Notice.tsx +++ b/src/components/customerService/notice/Notice.tsx @@ -1,4 +1,4 @@ -import CustomerServiceHeader from '../CustomerServiceHeader'; +import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader'; import * as S from './Notice.styled'; export default function Notice() { diff --git a/src/hooks/queries/keys.ts b/src/hooks/queries/keys.ts index d538e460..ff60eec7 100644 --- a/src/hooks/queries/keys.ts +++ b/src/hooks/queries/keys.ts @@ -43,3 +43,8 @@ export const ActivityLog = { myComments: ['MyComments'], myInquiries: ['MyInquiries'], }; + +export const CustomerService = { + faq: ['faq'], + notice: ['notice'], +}; diff --git a/src/hooks/useGetFAQ.ts b/src/hooks/useGetFAQ.ts new file mode 100644 index 00000000..2a114ef8 --- /dev/null +++ b/src/hooks/useGetFAQ.ts @@ -0,0 +1,12 @@ +import { useQuery } from '@tanstack/react-query'; +import { getFAQ } from '../api/customerService.api'; +import { CustomerService } from './queries/keys'; + +export const useGetFAQ = () => { + const { data: faqData, isLoading } = useQuery({ + queryKey: [CustomerService.faq], + queryFn: () => getFAQ(), + }); + + return { faqData, isLoading }; +}; diff --git a/src/models/customerService.ts b/src/models/customerService.ts new file mode 100644 index 00000000..95404b8d --- /dev/null +++ b/src/models/customerService.ts @@ -0,0 +1,11 @@ +import { ApiCommonType } from './apiCommon'; + +export interface FAQ { + id: number; + title: string; + content: string; +} + +export interface ApiFAQ extends ApiCommonType { + data: FAQ[]; +} diff --git a/src/pages/customerService/faq/FAQ.styled.ts b/src/pages/customerService/faq/FAQ.styled.ts deleted file mode 100644 index 926ed2ed..00000000 --- a/src/pages/customerService/faq/FAQ.styled.ts +++ /dev/null @@ -1,3 +0,0 @@ -import styled from 'styled-components'; - -export const Container = styled.section``; diff --git a/src/pages/customerService/faq/FAQ.tsx b/src/pages/customerService/faq/FAQ.tsx deleted file mode 100644 index 6f0c93f2..00000000 --- a/src/pages/customerService/faq/FAQ.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import CustomerServiceHeader from '../CustomerServiceHeader'; -import * as S from './FAQ.styled'; - -export default function FAQ() { - return ( - <> - - - - ); -} diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index e2624297..0261d4ca 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -21,9 +21,13 @@ const ChangePassword = lazy( const Main = lazy(() => import('../pages/main/Index')); const Layout = lazy(() => import('../components/common/layout/Layout')); const Home = lazy(() => import('../pages/home/Home')); -const FAQ = lazy(() => import('../pages/customerService/faq/FAQ')); -const Notice = lazy(() => import('../pages/customerService/notice/Notice')); -const Inquiry = lazy(() => import('../pages/customerService/inquiry/Inquiry')); +const FAQ = lazy(() => import('../components/customerService/faq/FAQ')); +const Notice = lazy( + () => import('../components/customerService/notice/Notice') +); +const Inquiry = lazy( + () => import('../components/customerService/inquiry/Inquiry') +); const MyPage = lazy(() => import('../pages/mypage/MyPage')); const UserPage = lazy(() => import('../pages/userpage/UserPage')); const Apply = lazy(() => import('../pages/apply/ApplyStep')); From 382eb4ab3f4c00378442b15ca1dcc019bb72f853 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Tue, 6 May 2025 23:38:30 +0900 Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81,=20=EC=95=8C=EB=A6=BC=20=ED=95=84=ED=84=B0=EC=8B=9C?= =?UTF-8?q?=20filter=20=EB=B0=B0=EC=97=B4=200=20=EC=9D=BC=EB=95=8C=20noCon?= =?UTF-8?q?tent=20=EB=9D=84=20=EC=9A=B0=EA=B2=8C=20=EC=88=98=EC=A0=95,=20p?= =?UTF-8?q?rofile=20=EB=AC=B8=EA=B5=AC=EC=88=98=EC=A0=95&constant=EA=B4=80?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mypage/myProfile/profile/Profile.tsx | 11 ++++++----- src/components/mypage/notifications/all/All.tsx | 11 ++++++++++- src/constants/myPageProfile.ts | 7 +++++++ src/hooks/useGetFAQ.ts | 2 +- 4 files changed, 24 insertions(+), 7 deletions(-) create mode 100644 src/constants/myPageProfile.ts diff --git a/src/components/mypage/myProfile/profile/Profile.tsx b/src/components/mypage/myProfile/profile/Profile.tsx index a35cda43..9c00dcd2 100644 --- a/src/components/mypage/myProfile/profile/Profile.tsx +++ b/src/components/mypage/myProfile/profile/Profile.tsx @@ -8,6 +8,7 @@ import { Radar } from 'react-chartjs-2'; import { UserInfo } from '../../../../models/userInfo'; import { useEffect } from 'react'; import MyProfileWrapper from '../MyProfileWrapper'; +import { PROFILE_DEFAULT_MESSAGE } from '../../../../constants/myPageProfile'; export default function Profile() { const { @@ -52,7 +53,7 @@ export default function Profile() { )) ) : ( -
  • 스킬을 선택해주세요.
    • +
  • {PROFILE_DEFAULT_MESSAGE.skills}
    • )} @@ -68,7 +69,7 @@ export default function Profile() { {position.name} )) ) : ( - 포지션을 선택해주세요. + {PROFILE_DEFAULT_MESSAGE.positions} )} @@ -76,7 +77,7 @@ export default function Profile() { - {myData.github || '깃허브 링크를 올려보세요.'} + {myData.github || PROFILE_DEFAULT_MESSAGE.github} @@ -92,7 +93,7 @@ export default function Profile() { )) ) : ( -
  • 경력을 기록하세요.
    • +
  • {PROFILE_DEFAULT_MESSAGE.career}
    • )} @@ -100,7 +101,7 @@ export default function Profile() { - {myData.bio || '내 소개를 적어주세요.'} + {myData.bio || PROFILE_DEFAULT_MESSAGE.bio} diff --git a/src/components/mypage/notifications/all/All.tsx b/src/components/mypage/notifications/all/All.tsx index af7c190c..aa494266 100644 --- a/src/components/mypage/notifications/all/All.tsx +++ b/src/components/mypage/notifications/all/All.tsx @@ -32,7 +32,16 @@ export default function All() { return ; } - if (!alarmListData || alarmListData.length === 0) { + const filterLength = alarmListData?.filter((list) => { + if (filterId === 0) { + return true; + } else if (list.alarmFilterId === filterId) { + return true; + } + return false; + }).length; + + if (!alarmListData || alarmListData.length === 0 || filterLength === 0) { return ( diff --git a/src/constants/myPageProfile.ts b/src/constants/myPageProfile.ts new file mode 100644 index 00000000..d9ea3c55 --- /dev/null +++ b/src/constants/myPageProfile.ts @@ -0,0 +1,7 @@ +export const PROFILE_DEFAULT_MESSAGE = { + github: '깃허브를 공유하세요.', + positions: '포지션을 선택해주세요.', + skills: '스킬을 선택해주세요.', + career: '경력을 기록하세요.', + bio: '소개를 적어주세요.', +}; diff --git a/src/hooks/useGetFAQ.ts b/src/hooks/useGetFAQ.ts index 2a114ef8..2547cc71 100644 --- a/src/hooks/useGetFAQ.ts +++ b/src/hooks/useGetFAQ.ts @@ -4,7 +4,7 @@ import { CustomerService } from './queries/keys'; export const useGetFAQ = () => { const { data: faqData, isLoading } = useQuery({ - queryKey: [CustomerService.faq], + queryKey: CustomerService.faq, queryFn: () => getFAQ(), }); From 823e9b8a8f4f2bc8179ca9c0e3f89b3c801c42ef Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Wed, 7 May 2025 11:48:43 +0900 Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=EB=82=B4=20=EB=AC=B8=EC=9D=98,?= =?UTF-8?q?=20FAQ=20=ED=86=A0=EA=B8=80=EB=B0=95=EC=8A=A4=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../customerService/faq/FAQ.styled.ts | 5 ++++- src/components/customerService/faq/FAQ.tsx | 11 +++++----- .../customerService/faq/FAQContent.styled.ts | 14 +++++++------ .../customerService/faq/FAQContent.tsx | 6 +++--- src/components/mypage/ScrollWrapper.styled.ts | 1 + .../activityLog/inquiries/Inquiries.styled.ts | 21 ++++++++++++++++--- .../activityLog/inquiries/Inquiries.tsx | 17 +++++++++------ .../inquiries/inquiry/Inquiry.styled.ts | 8 ++++--- .../activityLog/inquiries/inquiry/Inquiry.tsx | 5 ++++- src/hooks/useMyInfo.ts | 1 + 10 files changed, 61 insertions(+), 28 deletions(-) diff --git a/src/components/customerService/faq/FAQ.styled.ts b/src/components/customerService/faq/FAQ.styled.ts index 04de34a5..a8fea151 100644 --- a/src/components/customerService/faq/FAQ.styled.ts +++ b/src/components/customerService/faq/FAQ.styled.ts @@ -16,7 +16,10 @@ export const Wrapper = styled.div` width: 75%; display: flex; flex-direction: column; - gap: 1.5rem; +`; + +export const ToggleWrapper = styled.button` + text-align: start; `; export const ContentBorder = styled.div` diff --git a/src/components/customerService/faq/FAQ.tsx b/src/components/customerService/faq/FAQ.tsx index b14cf6fd..3c832445 100644 --- a/src/components/customerService/faq/FAQ.tsx +++ b/src/components/customerService/faq/FAQ.tsx @@ -8,14 +8,15 @@ import FAQContent from './FAQContent'; export default function FAQ() { const { faqData, isLoading } = useGetFAQ(); - if (!faqData || faqData.length === 0) return; - - if (isLoading) + if (isLoading) { return ( ); + } + + if (!faqData || faqData.length === 0) return; return ( <> @@ -23,10 +24,10 @@ export default function FAQ() { {faqData.map((list) => ( - + - + ))} diff --git a/src/components/customerService/faq/FAQContent.styled.ts b/src/components/customerService/faq/FAQContent.styled.ts index 5b6cfcf5..c9d476ff 100644 --- a/src/components/customerService/faq/FAQContent.styled.ts +++ b/src/components/customerService/faq/FAQContent.styled.ts @@ -1,8 +1,12 @@ import styled, { css } from 'styled-components'; -export const ListContainer = styled.div``; +export const ListContainer = styled.div` + width: 100%; + padding: 1.5rem 0; +`; export const ListWrapper = styled.div` + width: 100%; display: flex; justify-content: space-between; align-items: center; @@ -14,7 +18,7 @@ export const ListTitle = styled.div` font-weight: bold; `; -export const ListPlusButton = styled.button<{ $isOpen: boolean }>` +export const ListPlusButton = styled.div<{ $isOpen: boolean }>` transition: transform 500ms ease-in-out; ${({ $isOpen }) => $isOpen && @@ -34,11 +38,9 @@ export const ListContentWrapper = styled.div` `; export const ListButtonWrapper = styled.div` - margin-top: 0.1rem; - svg { - width: 1.5rem; - height: 1.5rem; + width: 1.3rem; + height: 1.3rem; } `; diff --git a/src/components/customerService/faq/FAQContent.tsx b/src/components/customerService/faq/FAQContent.tsx index 0667d8c0..54e5c186 100644 --- a/src/components/customerService/faq/FAQContent.tsx +++ b/src/components/customerService/faq/FAQContent.tsx @@ -11,10 +11,10 @@ export default function FAQContent({ list }: FAQContentProps) { const [isFAQContentOpen, setIsFAQContentOpen] = useState(false); return ( - - setIsFAQContentOpen((prev) => !prev)}> + setIsFAQContentOpen((prev) => !prev)}> + {list.title} - + diff --git a/src/components/mypage/ScrollWrapper.styled.ts b/src/components/mypage/ScrollWrapper.styled.ts index dc69ea1b..ed937b57 100644 --- a/src/components/mypage/ScrollWrapper.styled.ts +++ b/src/components/mypage/ScrollWrapper.styled.ts @@ -4,6 +4,7 @@ export const ScrollWrapper = styled.div<{ $height: string }>` width: 100%; height: calc(100% - ${({ $height }) => $height}); overflow-y: auto; + overflow-x: hidden; background: ${({ theme }) => theme.color.lightgrey}; border-radius: ${({ theme }) => theme.borderRadius.large}; diff --git a/src/components/mypage/activityLog/inquiries/Inquiries.styled.ts b/src/components/mypage/activityLog/inquiries/Inquiries.styled.ts index c1a3d2c5..b278bef1 100644 --- a/src/components/mypage/activityLog/inquiries/Inquiries.styled.ts +++ b/src/components/mypage/activityLog/inquiries/Inquiries.styled.ts @@ -2,20 +2,34 @@ import styled from 'styled-components'; export const container = styled.div` height: 100%; + padding: 0 0.5rem 0 0.8rem; `; export const InquiriesContainer = styled.div` - padding: 1rem; width: 100%; `; +export const InquiriesTableHeadContainer = styled.div` + width: 100%; + position: sticky; + padding-top: 1rem; + top: 0; + background: ${({ theme }) => theme.color.lightgrey}; +`; + export const InquiriesTableHeadWrapper = styled.div` width: 100%; display: grid; - grid-template-columns: 8% 18% 62% 12%; + grid-template-columns: 8% 15% 65% 17%; font-size: 1.3rem; font-weight: 600; - margin-bottom: 1rem; + margin-bottom: 0.5rem; +`; + +export const ContentBorder = styled.div` + width: 100%; + height: 0.5px; + background: ${({ theme }) => theme.color.placeholder}; `; export const InquiriesTableHeaderNo = styled.div` @@ -36,6 +50,7 @@ export const InquiriesTableHeaderState = styled.div` `; export const InquiriesWrapper = styled.div` + margin-top: 1rem; display: flex; flex-direction: column; gap: 1.5rem; diff --git a/src/components/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/mypage/activityLog/inquiries/Inquiries.tsx index 99b4d414..57a3addf 100644 --- a/src/components/mypage/activityLog/inquiries/Inquiries.tsx +++ b/src/components/mypage/activityLog/inquiries/Inquiries.tsx @@ -21,12 +21,17 @@ export default function Inquiries() { return ( - - No - 구별 - 제목 - 상태 - + + + No + + 구별 + + 제목 + 상태 + + + {myInquiriesData.map((list, index) => ( - setIsOpen((prev) => !prev)}> + setIsOpen((prev) => !prev)} + > {no} {`[${list.category}]`} {list.title} diff --git a/src/hooks/useMyInfo.ts b/src/hooks/useMyInfo.ts index 435c46f3..cbe715fe 100644 --- a/src/hooks/useMyInfo.ts +++ b/src/hooks/useMyInfo.ts @@ -25,6 +25,7 @@ export const useMyProfileInfo = () => { queryKey: myInfoKey.myProfile, queryFn: () => getMyInfo(), staleTime: Infinity, + gcTime: Infinity, enabled: isLoggedIn, }); From 939587f695669bb6c4cbbf57348b0b15f559a0cf Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Wed, 7 May 2025 11:54:48 +0900 Subject: [PATCH 5/8] =?UTF-8?q?chore:=20FAQ=20keyword=20=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=EC=8B=9C=20=EC=BF=BC=EB=A6=AC=ED=82=A4=EC=97=90=20=EA=B0=99?= =?UTF-8?q?=EC=9D=B4=20=EB=84=A3=EC=9D=84=20=EC=88=98=20=EC=9E=88=EA=B2=8C?= =?UTF-8?q?=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/keys.ts | 4 ++-- src/hooks/useGetFAQ.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/queries/keys.ts b/src/hooks/queries/keys.ts index ff60eec7..2ab0e945 100644 --- a/src/hooks/queries/keys.ts +++ b/src/hooks/queries/keys.ts @@ -45,6 +45,6 @@ export const ActivityLog = { }; export const CustomerService = { - faq: ['faq'], - notice: ['notice'], + faq: 'faq', + notice: 'notice', }; diff --git a/src/hooks/useGetFAQ.ts b/src/hooks/useGetFAQ.ts index 2547cc71..2560302d 100644 --- a/src/hooks/useGetFAQ.ts +++ b/src/hooks/useGetFAQ.ts @@ -4,7 +4,8 @@ import { CustomerService } from './queries/keys'; export const useGetFAQ = () => { const { data: faqData, isLoading } = useQuery({ - queryKey: CustomerService.faq, + // keyword 조회시 keyword 키 추가 + queryKey: [CustomerService.faq], queryFn: () => getFAQ(), }); From b00e337597f9c934932d7e1dc2d5088e5ecd0f8c Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Wed, 7 May 2025 12:36:10 +0900 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/customerService/faq/FAQ.tsx | 1 - .../customerService/faq/FAQContent.styled.ts | 10 ++++++---- src/components/customerService/faq/FAQContent.tsx | 11 +++++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/customerService/faq/FAQ.tsx b/src/components/customerService/faq/FAQ.tsx index 3c832445..9890429d 100644 --- a/src/components/customerService/faq/FAQ.tsx +++ b/src/components/customerService/faq/FAQ.tsx @@ -1,4 +1,3 @@ -import { Fragment } from 'react/jsx-runtime'; import { useGetFAQ } from '../../../hooks/useGetFAQ'; import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader'; import Spinner from '../../mypage/Spinner'; diff --git a/src/components/customerService/faq/FAQContent.styled.ts b/src/components/customerService/faq/FAQContent.styled.ts index c9d476ff..9102c28b 100644 --- a/src/components/customerService/faq/FAQContent.styled.ts +++ b/src/components/customerService/faq/FAQContent.styled.ts @@ -2,14 +2,14 @@ import styled, { css } from 'styled-components'; export const ListContainer = styled.div` width: 100%; - padding: 1.5rem 0; `; -export const ListWrapper = styled.div` +export const ListWrapper = styled.button` width: 100%; display: flex; justify-content: space-between; align-items: center; + padding: 1.5rem 0; `; export const ListTitle = styled.div` @@ -18,7 +18,7 @@ export const ListTitle = styled.div` font-weight: bold; `; -export const ListPlusButton = styled.div<{ $isOpen: boolean }>` +export const ListPlusIcon = styled.div<{ $isOpen: boolean }>` transition: transform 500ms ease-in-out; ${({ $isOpen }) => $isOpen && @@ -32,7 +32,9 @@ export const ListPlusButton = styled.div<{ $isOpen: boolean }>` `; export const ListContentWrapper = styled.div` - margin: 0.5rem; + cursor: auto; + background: ${({ theme }) => theme.color.lightgrey}; + padding: 1rem 0.5rem 1.5rem 1rem; display: flex; gap: 0.5rem; `; diff --git a/src/components/customerService/faq/FAQContent.tsx b/src/components/customerService/faq/FAQContent.tsx index 54e5c186..785e7278 100644 --- a/src/components/customerService/faq/FAQContent.tsx +++ b/src/components/customerService/faq/FAQContent.tsx @@ -11,12 +11,15 @@ export default function FAQContent({ list }: FAQContentProps) { const [isFAQContentOpen, setIsFAQContentOpen] = useState(false); return ( - setIsFAQContentOpen((prev) => !prev)}> - + + setIsFAQContentOpen((prev) => !prev)} + > {list.title} - + - + {isFAQContentOpen && ( From bcbca64debedbb25e491dd839f89314a37791f06 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Thu, 8 May 2025 20:09:16 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=B6=94=EA=B0=80=20,=20=EA=B5=AC=EC=A1=B0?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/customerService.api.ts | 6 +- src/components/common/header/Header.tsx | 4 +- .../CustomerServiceHeader.styled.ts | 15 ++++ .../customerService/CustomerServiceHeader.tsx | 71 +++++++++++++++++++ .../MoveInquiredLink.styled.ts | 0 .../customerService/MoveInquiredLink.tsx | 0 src/components/customerService/faq/FAQ.tsx | 35 --------- .../customerService/faq/FAQContent.styled.ts | 3 +- .../customerService/notice/Notice.tsx | 11 --- src/constants/routes.ts | 5 +- src/hooks/useGetFAQ.ts | 9 ++- src/models/customerService.ts | 4 ++ .../customerService/CustomerServiceHeader.tsx | 31 -------- .../customerService/faq/FAQ.styled.ts | 4 +- src/pages/customerService/faq/FAQ.tsx | 48 +++++++++++++ .../customerService/notice/Notice.styled.ts | 0 src/pages/customerService/notice/Notice.tsx | 9 +++ src/routes/AppRoutes.tsx | 34 ++++----- 18 files changed, 182 insertions(+), 107 deletions(-) rename src/{pages => components}/customerService/CustomerServiceHeader.styled.ts (77%) create mode 100644 src/components/customerService/CustomerServiceHeader.tsx rename src/{pages => components}/customerService/MoveInquiredLink.styled.ts (100%) rename src/{pages => components}/customerService/MoveInquiredLink.tsx (100%) delete mode 100644 src/components/customerService/faq/FAQ.tsx delete mode 100644 src/components/customerService/notice/Notice.tsx delete mode 100644 src/pages/customerService/CustomerServiceHeader.tsx rename src/{components => pages}/customerService/faq/FAQ.styled.ts (87%) create mode 100644 src/pages/customerService/faq/FAQ.tsx rename src/{components => pages}/customerService/notice/Notice.styled.ts (100%) create mode 100644 src/pages/customerService/notice/Notice.tsx diff --git a/src/api/customerService.api.ts b/src/api/customerService.api.ts index 7e27c330..43136237 100644 --- a/src/api/customerService.api.ts +++ b/src/api/customerService.api.ts @@ -1,9 +1,9 @@ -import { ApiFAQ } from '../models/customerService'; +import type { ApiFAQ, SearchKeyword } from '../models/customerService'; import { httpClient } from './http.api'; -export const getFAQ = async () => { +export const getFAQ = async (params: SearchKeyword) => { try { - const response = await httpClient.get(`/faq`); + const response = await httpClient.get(`/faq`, { params }); return response.data.data; } catch (e) { diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx index 14d86356..b48e1611 100644 --- a/src/components/common/header/Header.tsx +++ b/src/components/common/header/Header.tsx @@ -46,10 +46,10 @@ function Header() { - + FAQ - + 공지사항 diff --git a/src/pages/customerService/CustomerServiceHeader.styled.ts b/src/components/customerService/CustomerServiceHeader.styled.ts similarity index 77% rename from src/pages/customerService/CustomerServiceHeader.styled.ts rename to src/components/customerService/CustomerServiceHeader.styled.ts index df3f2700..76e659d4 100644 --- a/src/pages/customerService/CustomerServiceHeader.styled.ts +++ b/src/components/customerService/CustomerServiceHeader.styled.ts @@ -35,6 +35,21 @@ export const SearchBarInput = styled.input` font-size: 1rem; `; +export const ButtonWrapper = styled.div` + display: flex; + gap: 0.5rem; +`; + +export const UturnButton = styled.button` + &:hover { + color: ${({ theme }) => theme.color.lightnavy}; + } + svg { + width: 20px; + height: 20px; + } +`; + export const SearchButton = styled.button` svg { width: 20px; diff --git a/src/components/customerService/CustomerServiceHeader.tsx b/src/components/customerService/CustomerServiceHeader.tsx new file mode 100644 index 00000000..47a14493 --- /dev/null +++ b/src/components/customerService/CustomerServiceHeader.tsx @@ -0,0 +1,71 @@ +import { + ArrowUturnLeftIcon, + MagnifyingGlassIcon, +} from '@heroicons/react/24/outline'; +import * as S from './CustomerServiceHeader.styled'; +import MovedInquiredLink from './MoveInquiredLink'; +import { Outlet } from 'react-router-dom'; +import { useState } from 'react'; + +interface CustomerServiceHeaderProps { + title: string; + keyword: string; + onGetKeyword: (value: string) => void; +} + +export default function CustomerServiceHeader({ + title, + keyword, + onGetKeyword, +}: CustomerServiceHeaderProps) { + const [inputValue, setInputValue] = useState(''); + + const handleSubmitKeyword = (e: React.FormEvent) => { + e.preventDefault(); + onGetKeyword(inputValue); + }; + + const handleChangeValue = (e: React.ChangeEvent) => { + const value = e.target.value; + setInputValue(value); + }; + + const handleReset = () => { + onGetKeyword(''); + setInputValue(''); + }; + + return ( + + + DevPals {title} + + + + + + {keyword !== '' && ( + + + + )} + + + + + + + + + + ); +} diff --git a/src/pages/customerService/MoveInquiredLink.styled.ts b/src/components/customerService/MoveInquiredLink.styled.ts similarity index 100% rename from src/pages/customerService/MoveInquiredLink.styled.ts rename to src/components/customerService/MoveInquiredLink.styled.ts diff --git a/src/pages/customerService/MoveInquiredLink.tsx b/src/components/customerService/MoveInquiredLink.tsx similarity index 100% rename from src/pages/customerService/MoveInquiredLink.tsx rename to src/components/customerService/MoveInquiredLink.tsx diff --git a/src/components/customerService/faq/FAQ.tsx b/src/components/customerService/faq/FAQ.tsx deleted file mode 100644 index 9890429d..00000000 --- a/src/components/customerService/faq/FAQ.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useGetFAQ } from '../../../hooks/useGetFAQ'; -import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader'; -import Spinner from '../../mypage/Spinner'; -import * as S from './FAQ.styled'; -import FAQContent from './FAQContent'; - -export default function FAQ() { - const { faqData, isLoading } = useGetFAQ(); - - if (isLoading) { - return ( - - - - ); - } - - if (!faqData || faqData.length === 0) return; - - return ( - <> - - - - {faqData.map((list) => ( - - - - - ))} - - - - ); -} diff --git a/src/components/customerService/faq/FAQContent.styled.ts b/src/components/customerService/faq/FAQContent.styled.ts index 9102c28b..c7c62df1 100644 --- a/src/components/customerService/faq/FAQContent.styled.ts +++ b/src/components/customerService/faq/FAQContent.styled.ts @@ -19,6 +19,7 @@ export const ListTitle = styled.div` `; export const ListPlusIcon = styled.div<{ $isOpen: boolean }>` + margin-right: 1.5rem; transition: transform 500ms ease-in-out; ${({ $isOpen }) => $isOpen && @@ -34,7 +35,7 @@ export const ListPlusIcon = styled.div<{ $isOpen: boolean }>` export const ListContentWrapper = styled.div` cursor: auto; background: ${({ theme }) => theme.color.lightgrey}; - padding: 1rem 0.5rem 1.5rem 1rem; + padding: 1.5rem 1rem; display: flex; gap: 0.5rem; `; diff --git a/src/components/customerService/notice/Notice.tsx b/src/components/customerService/notice/Notice.tsx deleted file mode 100644 index 5d9d5782..00000000 --- a/src/components/customerService/notice/Notice.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader'; -import * as S from './Notice.styled'; - -export default function Notice() { - return ( - <> - - - - ); -} diff --git a/src/constants/routes.ts b/src/constants/routes.ts index ee74a8bc..e0d21454 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -23,7 +23,8 @@ export const ROUTES = { userJoinedProject: 'joined-projects', modifyProject: '/project-modify', notFound: '/not-found', - FAQ: '/faq', - notice: '/notice', + customerService: '/customer-service', + FAQ: 'faq', + notice: 'notice', inquiry: '/inquiry', } as const; diff --git a/src/hooks/useGetFAQ.ts b/src/hooks/useGetFAQ.ts index 2560302d..cde44d6a 100644 --- a/src/hooks/useGetFAQ.ts +++ b/src/hooks/useGetFAQ.ts @@ -1,12 +1,15 @@ import { useQuery } from '@tanstack/react-query'; import { getFAQ } from '../api/customerService.api'; import { CustomerService } from './queries/keys'; +import { SearchKeyword } from '../models/customerService'; -export const useGetFAQ = () => { +export const useGetFAQ = (keyword: SearchKeyword) => { const { data: faqData, isLoading } = useQuery({ // keyword 조회시 keyword 키 추가 - queryKey: [CustomerService.faq], - queryFn: () => getFAQ(), + queryKey: [CustomerService.faq, keyword], + queryFn: () => getFAQ(keyword), + staleTime: Infinity, + gcTime: Infinity, }); return { faqData, isLoading }; diff --git a/src/models/customerService.ts b/src/models/customerService.ts index 95404b8d..5845da97 100644 --- a/src/models/customerService.ts +++ b/src/models/customerService.ts @@ -9,3 +9,7 @@ export interface FAQ { export interface ApiFAQ extends ApiCommonType { data: FAQ[]; } + +export interface SearchKeyword { + keyword: string; +} diff --git a/src/pages/customerService/CustomerServiceHeader.tsx b/src/pages/customerService/CustomerServiceHeader.tsx deleted file mode 100644 index e5aa9dff..00000000 --- a/src/pages/customerService/CustomerServiceHeader.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; -import * as S from './CustomerServiceHeader.styled'; -import MovedInquiredLink from './MoveInquiredLink'; - -interface CustomerServiceHeaderProps { - title: string; -} - -export default function CustomerServiceHeader({ - title, -}: CustomerServiceHeaderProps) { - return ( - - - DevPals {title} - - - - - - - - - - - - ); -} diff --git a/src/components/customerService/faq/FAQ.styled.ts b/src/pages/customerService/faq/FAQ.styled.ts similarity index 87% rename from src/components/customerService/faq/FAQ.styled.ts rename to src/pages/customerService/faq/FAQ.styled.ts index a8fea151..1bc2056a 100644 --- a/src/components/customerService/faq/FAQ.styled.ts +++ b/src/pages/customerService/faq/FAQ.styled.ts @@ -18,9 +18,7 @@ export const Wrapper = styled.div` flex-direction: column; `; -export const ToggleWrapper = styled.button` - text-align: start; -`; +export const ToggleWrapper = styled.div``; export const ContentBorder = styled.div` width: 100%; diff --git a/src/pages/customerService/faq/FAQ.tsx b/src/pages/customerService/faq/FAQ.tsx new file mode 100644 index 00000000..b54eec4d --- /dev/null +++ b/src/pages/customerService/faq/FAQ.tsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import { useGetFAQ } from '../../../hooks/useGetFAQ'; +import * as S from './FAQ.styled'; +import { SearchKeyword } from '../../../models/customerService'; +import Spinner from '../../../components/mypage/Spinner'; +import CustomerServiceHeader from '../../../components/customerService/CustomerServiceHeader'; +import FAQContent from '../../../components/customerService/faq/FAQContent'; + +export default function FAQ() { + const [keyword, setKeyword] = useState({ keyword: '' }); + const [value, setValue] = useState(''); + const { faqData, isLoading } = useGetFAQ(keyword); + + const handleGetKeyword = (keyword: string) => { + setKeyword({ keyword }); + setValue(keyword); + }; + + if (isLoading) { + return ( + + + + ); + } + + if (!faqData || faqData.length === 0) return; + + return ( + <> + + + + {faqData.map((list) => ( + + + + + ))} + + + + ); +} diff --git a/src/components/customerService/notice/Notice.styled.ts b/src/pages/customerService/notice/Notice.styled.ts similarity index 100% rename from src/components/customerService/notice/Notice.styled.ts rename to src/pages/customerService/notice/Notice.styled.ts diff --git a/src/pages/customerService/notice/Notice.tsx b/src/pages/customerService/notice/Notice.tsx new file mode 100644 index 00000000..f6cd848c --- /dev/null +++ b/src/pages/customerService/notice/Notice.tsx @@ -0,0 +1,9 @@ +import * as S from './Notice.styled'; + +export default function Notice() { + return ( + <> + + + ); +} diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index 0261d4ca..e95f4d8d 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -21,10 +21,8 @@ const ChangePassword = lazy( const Main = lazy(() => import('../pages/main/Index')); const Layout = lazy(() => import('../components/common/layout/Layout')); const Home = lazy(() => import('../pages/home/Home')); -const FAQ = lazy(() => import('../components/customerService/faq/FAQ')); -const Notice = lazy( - () => import('../components/customerService/notice/Notice') -); +const FAQ = lazy(() => import('../pages/customerService/faq/FAQ')); +const Notice = lazy(() => import('../pages/customerService/notice/Notice')); const Inquiry = lazy( () => import('../components/customerService/inquiry/Inquiry') ); @@ -124,24 +122,28 @@ const AppRoutes = () => { ), }, { - path: ROUTES.FAQ, - element: ( - - - - - - ), - }, - { - path: ROUTES.notice, + path: ROUTES.customerService, element: ( - + ), + children: [ + { + index: true, + element: , + }, + { + path: ROUTES.FAQ, + element: , + }, + { + path: ROUTES.notice, + element: , + }, + ], }, { path: ROUTES.inquiry, From 29b71ce936d995dacb06da43b141d9bb520af188 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Thu, 8 May 2025 20:31:43 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=EC=97=86=EC=9D=84=EB=95=8C=20ui=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EmptyLoading.styled.ts} | 2 +- .../EmptyLoading.tsx} | 4 ++-- .../NoResult.styled.ts} | 2 +- .../NoResult.tsx} | 4 ++-- .../projectCardLists/ProjectCardLists.tsx | 8 ++++---- src/pages/customerService/faq/FAQ.tsx | 19 ++++++++++++------- 6 files changed, 22 insertions(+), 17 deletions(-) rename src/components/common/{emptyLoadingPage/EmptyLoadingPage.styled.ts => emptyLoading/EmptyLoading.styled.ts} (85%) rename src/components/common/{emptyLoadingPage/EmptyLoadingPage.tsx => emptyLoading/EmptyLoading.tsx} (76%) rename src/components/common/{noResultPage/NoResultPage.styled.ts => noResult/NoResult.styled.ts} (91%) rename src/components/common/{noResultPage/NoResultPage.tsx => noResult/NoResult.tsx} (73%) diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts b/src/components/common/emptyLoading/EmptyLoading.styled.ts similarity index 85% rename from src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts rename to src/components/common/emptyLoading/EmptyLoading.styled.ts index 7b0b3637..6e091c58 100644 --- a/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts +++ b/src/components/common/emptyLoading/EmptyLoading.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { EmptyLoadingPageProps } from './EmptyLoadingPage'; +import { EmptyLoadingPageProps } from './EmptyLoading'; export const Container = styled.div` width: 100%; diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx b/src/components/common/emptyLoading/EmptyLoading.tsx similarity index 76% rename from src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx rename to src/components/common/emptyLoading/EmptyLoading.tsx index 54954218..d00d5d75 100644 --- a/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx +++ b/src/components/common/emptyLoading/EmptyLoading.tsx @@ -1,4 +1,4 @@ -import * as S from './EmptyLoadingPage.styled'; +import * as S from './EmptyLoading.styled'; export interface EmptyLoadingPageProps { height: string; @@ -6,7 +6,7 @@ export interface EmptyLoadingPageProps { $mHeight: string; } -export default function EmptyLoadingPage({ +export default function EmptyLoading({ height, $tHeight, $mHeight, diff --git a/src/components/common/noResultPage/NoResultPage.styled.ts b/src/components/common/noResult/NoResult.styled.ts similarity index 91% rename from src/components/common/noResultPage/NoResultPage.styled.ts rename to src/components/common/noResult/NoResult.styled.ts index 6614a1f1..bc97ef8c 100644 --- a/src/components/common/noResultPage/NoResultPage.styled.ts +++ b/src/components/common/noResult/NoResult.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { NoResultPageProps } from './NoResultPage'; +import { NoResultPageProps } from './NoResult'; export const Container = styled.div>` width: 100%; diff --git a/src/components/common/noResultPage/NoResultPage.tsx b/src/components/common/noResult/NoResult.tsx similarity index 73% rename from src/components/common/noResultPage/NoResultPage.tsx rename to src/components/common/noResult/NoResult.tsx index e5f034bc..bafc441b 100644 --- a/src/components/common/noResultPage/NoResultPage.tsx +++ b/src/components/common/noResult/NoResult.tsx @@ -1,11 +1,11 @@ import { FaceFrownIcon } from '@heroicons/react/24/outline'; -import * as S from './NoResultPage.styled'; +import * as S from './NoResult.styled'; export interface NoResultPageProps { height: string; } -export default function NoResultPage({ height }: NoResultPageProps) { +export default function NoResult({ height }: NoResultPageProps) { return ( diff --git a/src/components/home/projectCardLists/ProjectCardLists.tsx b/src/components/home/projectCardLists/ProjectCardLists.tsx index b00234d1..696e4300 100644 --- a/src/components/home/projectCardLists/ProjectCardLists.tsx +++ b/src/components/home/projectCardLists/ProjectCardLists.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; import { useProjectCardListData } from '../../../hooks/useProjectCardListData'; -import EmptyLoadingPage from '../../common/emptyLoadingPage/EmptyLoadingPage'; -import NoResultPage from '../../common/noResultPage/NoResultPage'; import CardList from './cardList/CardList'; import Pagination from './pagination/Pagination'; import * as S from './ProjectCardLists.styled'; import { Link } from 'react-router-dom'; import { ROUTES } from '../../../constants/routes'; +import EmptyLoading from '../../common/emptyLoading/EmptyLoading'; +import NoResult from '../../common/noResult/NoResult'; export default function ProjectCardLists() { const { projectListsData, isLoading } = useProjectCardListData(); @@ -22,7 +22,7 @@ export default function ProjectCardLists() { if (isLoading) return ( - + ); return ( @@ -41,7 +41,7 @@ export default function ProjectCardLists() { )) ) : ( - + )} diff --git a/src/pages/customerService/faq/FAQ.tsx b/src/pages/customerService/faq/FAQ.tsx index b54eec4d..78f125fa 100644 --- a/src/pages/customerService/faq/FAQ.tsx +++ b/src/pages/customerService/faq/FAQ.tsx @@ -5,6 +5,7 @@ import { SearchKeyword } from '../../../models/customerService'; import Spinner from '../../../components/mypage/Spinner'; import CustomerServiceHeader from '../../../components/customerService/CustomerServiceHeader'; import FAQContent from '../../../components/customerService/faq/FAQContent'; +import NoResult from '../../../components/common/noResult/NoResult'; export default function FAQ() { const [keyword, setKeyword] = useState({ keyword: '' }); @@ -24,7 +25,7 @@ export default function FAQ() { ); } - if (!faqData || faqData.length === 0) return; + if (!faqData) return; return ( <> @@ -35,12 +36,16 @@ export default function FAQ() { /> - {faqData.map((list) => ( - - - - - ))} + {faqData.length > 0 ? ( + faqData.map((list) => ( + + + + + )) + ) : ( + + )}