From a5c80d8b81e6ce9d84f0c0b01227c622f0347a22 Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Thu, 28 Sep 2023 13:08:02 +0900 Subject: [PATCH 01/44] =?UTF-8?q?feat:=20/inquiry=20UI=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 + src/assets/svg/inquiry/write.svg | 2 +- src/pages/Inquiry/Inquiry.module.scss | 191 +++++++++++++----- .../DataTable/DataTable.module.scss | 77 +++++++ .../components/DataTable/DataTable.tsx | 43 ++++ .../MyInquiry/MyInquiry.module.scss | 23 +++ .../components/MyInquiry/MyInquiry.tsx | 18 ++ .../Inquiry/components/Pagination/index.tsx | 56 +++++ .../Pagination/pagination.module.scss | 32 +++ .../SearchBar/SearchBar.module.scss | 67 ++++++ .../components/SearchBar/SearchInput.tsx | 24 +++ src/pages/Inquiry/index.tsx | 145 +++++++++---- 12 files changed, 598 insertions(+), 82 deletions(-) create mode 100644 src/pages/Inquiry/components/DataTable/DataTable.module.scss create mode 100644 src/pages/Inquiry/components/DataTable/DataTable.tsx create mode 100644 src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss create mode 100644 src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx create mode 100644 src/pages/Inquiry/components/Pagination/index.tsx create mode 100644 src/pages/Inquiry/components/Pagination/pagination.module.scss create mode 100644 src/pages/Inquiry/components/SearchBar/SearchBar.module.scss create mode 100644 src/pages/Inquiry/components/SearchBar/SearchInput.tsx diff --git a/src/App.tsx b/src/App.tsx index cdbf602a..67159e0b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import IdChange from 'pages/Setting/UserSetting/IdChange'; import AuthRoute from 'components/common/AuthRoute'; import Withdrawal from 'pages/Setting/Withdrawal'; import Inquiry from 'pages/Inquiry'; +import Inquiry2 from 'pages/Inquiry2'; import Myinquiry from 'pages/Inquiry/Myinquiry'; import Notice from 'pages/Notice'; import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin'; @@ -32,6 +33,7 @@ export default function App(): JSX.Element { } /> } /> } /> + } /> } /> } /> diff --git a/src/assets/svg/inquiry/write.svg b/src/assets/svg/inquiry/write.svg index 1d56c1b4..304e1f95 100644 --- a/src/assets/svg/inquiry/write.svg +++ b/src/assets/svg/inquiry/write.svg @@ -1,3 +1,3 @@ - + diff --git a/src/pages/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry.module.scss index 79dfe289..16a97caf 100644 --- a/src/pages/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry.module.scss @@ -2,70 +2,171 @@ $default: #222222; $highlight: #ff7f23; $back: white; $normal: #666666; +$disabled: #c4c4c4; .container { + width: 100%; + height: 100%; display: flex; - flex-direction: column; justify-content: center; - width: 1048px; - margin-left: auto; - margin-right: auto; + flex-direction: row; } -.nav { +.box { display: flex; - margin: 95px auto 169px; - width: 1048px; - justify-content: space-between; - cursor: pointer; + flex-direction: row; + width: 947px; +} - &__search-block { - display: flex; - height: 33px; - font-size: 14px; +.nav { + & > *{ + position: fixed; } - &__button { - background: $highlight; - border-radius: 5px; - border-style: none; - color: $back; - width: 57px; - font-size: 14px; - padding: 5px 7px; - margin-left: 10px; - cursor: pointer; + &__side-navigation { + width: 227px; + height: 100%; } - &__input { - width: 234px; - border-color: #c4c4c4; - border-radius: 5px; - color: #c4c4c4; - padding: 8px 24px; - border: solid; + &__title { + color: $highlight; + font-size: 32px; + font-weight: 700; + margin: 160px 0 52px 0; } - &__post-button { + &__mod-items { + padding-top: 17px; + margin-left: 16px; + + & > * { + width: 104px; + margin-bottom: 24px; + color: $normal; + text-decoration: none; + + &[attribute*="selected"] { + color: $highlight + } + } + } + + + &__inquire { display: flex; - justify-content: center; - width: 90px; - height: 33px; - background-color: #ff7f23; - color: #eeeeee; align-items: center; - border-radius: 5px; + justify-content: center; + width: 152px; + height: 39px; + background: $highlight; + border: none; + appearance: none; + border-radius: 20px; + font-weight: 700; + font-size: 16px; + text-decoration: none; + color: white; + cursor: pointer; + box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); + margin-top: 48px; + + &>:first-child { + margin-right: 5px; + } + + // @include media.media-breakpoint-down(mobile) { + // width: 100%; + // } } +} - &__post { - margin: 8px 0 8px 8.5px; +.main { + &__search-and-data { + width: 720px; + display: flex; + flex-direction: column; // 내부 요소들을 세로로 배열합니다. } - &__post-svg { - width: 17.02px; - color: $highlight; - background-color: $highlight; - margin: 7.47px 8.5px 7.47px 4px; - cursor: pointer; + &__search-bar { + border-bottom: 1px solid #ff7f23; + width: 720px; + height: 252px; + margin-left: -1px; + display: flex; + flex-direction: column; + justify-content: start; + align-items: end; + } + + &__data-table { + width: 720px; + height: 252px; } } + +// .container { +// display: flex; +// flex-direction: column; +// justify-content: center; +// width: 1048px; +// margin-left: auto; +// margin-right: auto; +// } + +// .nav { +// display: flex; +// margin: 95px auto 169px; +// width: 1048px; +// justify-content: space-between; +// cursor: pointer; + +// &__search-block { +// display: flex; +// height: 33px; +// font-size: 14px; +// } + +// &__button { +// background: $highlight; +// border-radius: 5px; +// border-style: none; +// color: $back; +// width: 57px; +// font-size: 14px; +// padding: 5px 7px; +// margin-left: 10px; +// cursor: pointer; +// } + +// &__input { +// width: 234px; +// border-color: #c4c4c4; +// border-radius: 5px; +// color: #c4c4c4; +// padding: 8px 24px; +// border: solid; +// } + +// &__post-button { +// display: flex; +// justify-content: center; +// width: 90px; +// height: 33px; +// background-color: #ff7f23; +// color: #eeeeee; +// align-items: center; +// border-radius: 5px; +// } + +// &__post { +// margin: 8px 0 8px 8.5px; +// } + +// &__post-svg { +// width: 17.02px; +// color: $highlight; +// background-color: $highlight; +// margin: 7.47px 8.5px 7.47px 4px; +// cursor: pointer; +// } +// } diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/components/DataTable/DataTable.module.scss new file mode 100644 index 00000000..886bdcca --- /dev/null +++ b/src/pages/Inquiry/components/DataTable/DataTable.module.scss @@ -0,0 +1,77 @@ +$default: #222222; +$highlight: #ff7f23; +$back: white; +$normal: #666666; + +.header { + display: flex; + justify-content: space-between; + + &__title { + color: $highlight; + font-size: 32px; + font-weight: 700; + margin: 156px auto 10px; + } + + &__sub-title { + color: $normal; + font-size: 16px; + font-weight: 400; + margin: 0 auto 40px; + } + + &__my-inquiry { + display: flex; + justify-content: center; + align-items: center; + border: 1px solid; + border-color: $highlight; + border-radius: 10px; + width: 178px; + height: 36px; + color: $highlight; + margin-top: 190px; + cursor: pointer; + } + + &__link { + text-decoration: none; + } + + &__move { + margin-left: 9px; + } +} + +.body { + border: 1px; + border-top-color: $highlight; + border-bottom-color: #eeeeee; + border-top-style: solid; + border-bottom-style: solid; + + &__list-title { + display: grid; + place-items: center; + color: $normal; + grid-template-columns: 200px 400px 150px 150px 150px; + grid-template-rows: 37px; + } + + &__list { + display: grid; + place-items: center; + grid-template-columns: 200px 400px 150px 150px 150px; + width: 1048px; + border: 1px; + border-bottom-style: solid; + border-bottom-color: #eeeeee; + } + + &__element { + display: grid; + place-items: center; + grid-template-rows: 50px; + } +} diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/components/DataTable/DataTable.tsx new file mode 100644 index 00000000..d2733db4 --- /dev/null +++ b/src/pages/Inquiry/components/DataTable/DataTable.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import styles from './DataTable.module.scss'; + +interface Props { + data: { + title: string; + content: string; + boardType: string; + createdAt: string; + }[]; +} + +export default function DataTable({ data }: Props): JSX.Element { + console.log(data); + return ( +
+
+ s +
+ {/*
+ {data.map((res) => ( +
+
+ {res.content} +
+
+ {res.title} +
+
+ {res.boardType} +
+
+ {res.createdAt} +
+
+ {res.content} +
+
+ ))} +
*/} +
+ ); +} diff --git a/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss b/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss new file mode 100644 index 00000000..aec7ff44 --- /dev/null +++ b/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss @@ -0,0 +1,23 @@ +$highlight: #ff7f23; + +.title { + display: flex; + justify-content: center; + align-items: center; + border: 1px solid; + border-color: $highlight; + border-radius: 10px; + width: 178px; + height: 36px; + color: $highlight; + margin-top: 190px; + cursor: pointer; +} + +.link { + text-decoration: none; +} + +.move-icon { + margin-left: 9px; +} diff --git a/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx b/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx new file mode 100644 index 00000000..725e71fe --- /dev/null +++ b/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx @@ -0,0 +1,18 @@ +import { Link } from 'react-router-dom'; +import { ReactComponent as MoveIcon } from 'assets/svg/inquiry/myinquiry.svg'; +import styles from './MyInquiry.module.scss'; + +export default function MyInquiry(): JSX.Element { + return ( +
+ +
+ 나의 문의 바로가기 +
+ +
+
+ +
+ ); +} diff --git a/src/pages/Inquiry/components/Pagination/index.tsx b/src/pages/Inquiry/components/Pagination/index.tsx new file mode 100644 index 00000000..245d6023 --- /dev/null +++ b/src/pages/Inquiry/components/Pagination/index.tsx @@ -0,0 +1,56 @@ +import { ReactComponent as ArrowLeft } from 'assets/svg/inquiry/arrow-left.svg'; +import { ReactComponent as ArrowRight } from 'assets/svg/inquiry/arrow-right.svg'; +import { ReactComponent as DoubleArrowLeft } from 'assets/svg/inquiry/double-arrow-left.svg'; +import { ReactComponent as DoubleArrowRight } from 'assets/svg/inquiry/double-arrow-right.svg'; +import cn from 'utils/ts/classNames'; +import styles from './pagination.module.scss'; + +interface Props { + totalPage: number; + setPage: React.Dispatch>; + page: number; +} + +export default function Pagination({ totalPage, setPage, page }: Props): JSX.Element { + const movePage = (offset: number) => { + setPage((prev) => { + if (prev + offset < 1) return 1; + if (prev + offset > totalPage) return totalPage; + return prev + offset; + }); + }; + const pageList = [...Array(totalPage)] + .map((_, index) => index + 1) + .slice(Math.min(Math.max(page - 3, 0), totalPage - 5), totalPage) + .slice(0, 5); + + return ( + + ); +} diff --git a/src/pages/Inquiry/components/Pagination/pagination.module.scss b/src/pages/Inquiry/components/Pagination/pagination.module.scss new file mode 100644 index 00000000..45646035 --- /dev/null +++ b/src/pages/Inquiry/components/Pagination/pagination.module.scss @@ -0,0 +1,32 @@ +$default: #222222; +$highlight: #ff7f23; +$back: white; + +.pagination { + display: flex; + justify-content: center; + margin-top: 65px; + cursor: pointer; + + &__svg { + margin: 13px; + border-style: none; + border: #222222; + border: 1px; + background-color: $back; + } + + &__page { + color: $default; + font-size: 16px; + padding: 13px; + background-color: $back; + border: none; + outline: none; + cursor: pointer; + + &--active { + color: $highlight; + } + } +} diff --git a/src/pages/Inquiry/components/SearchBar/SearchBar.module.scss b/src/pages/Inquiry/components/SearchBar/SearchBar.module.scss new file mode 100644 index 00000000..9ef358e7 --- /dev/null +++ b/src/pages/Inquiry/components/SearchBar/SearchBar.module.scss @@ -0,0 +1,67 @@ +@use "src/utils/styles/mediaQuery.scss" as media; + +// .search { +// width: 100%; +// height: 100vh; +// font-size: 32px; + +// &__recommend { +// word-break: keep-all; +// height: 80px; +// padding-top: 168px; +// padding-left: 30px; +// font-size: 32px; +// font-weight: 300; +// line-height: 40px; +// white-space: pre-wrap; +// color: #000000; + +// strong { +// color: #ff7f23; +// } + +// @include media.media-breakpoint-down(mobile) { +// max-width: 767px; +// padding-top: 64px; +// margin: 0 auto; +// } +// } +// } + +.search-bar { + display: flex; + border-radius: 24px; + border: none; + width: 395px; + height: 48px; + align-items: center; + margin-top: 152px; + background: #ffffff; + box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); + padding-left: 15px; + + &__input { + width: 100%; + height: 15px; + border: none; + font-size: 14px; + line-height: 15px; + + &::placeholder { + color: #666666; + font-size: 12px; + } + + &:focus { + outline: none; + } + } + + &__icon { + width: 18px; + height: 18px; + padding-left: 15px; + padding-right: 14px; + cursor: pointer; + } +} diff --git a/src/pages/Inquiry/components/SearchBar/SearchInput.tsx b/src/pages/Inquiry/components/SearchBar/SearchInput.tsx new file mode 100644 index 00000000..6e4e4697 --- /dev/null +++ b/src/pages/Inquiry/components/SearchBar/SearchInput.tsx @@ -0,0 +1,24 @@ +import { ReactComponent as LensIcon } from 'assets/svg/search/lens.svg'; +import styles from './SearchBar.module.scss'; + +interface Props { + text: string, + onChange: (e: React.ChangeEvent) => void +} + +export default function SearchInput({ + text, onChange, +}: Props) { + return ( + + ); +} diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index 2ed9fbf6..a84aa5f7 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -1,52 +1,125 @@ -import { ReactComponent as Write } from 'assets/svg/inquiry/write.svg'; -import usePostList from 'pages/Post/hooks/usePostList'; import { useState } from 'react'; -import Pagination from 'components/Pagination'; -import Datatable from 'components/DataTable'; -import MyInquiry from 'components/MyInquiry'; +import { Link } from 'react-router-dom'; +import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; +import usePostList from 'pages/Post/hooks/usePostList'; +import SearchInput from './components/SearchBar/SearchInput'; +import Pagination from './components/Pagination'; +import Datatable from './components/DataTable/DataTable'; +// import MyInquiry from './components/MyInquiry/MyInquiry'; import styles from './Inquiry.module.scss'; +const useSearchForm = () => { + const [text, setText] = useState(''); + const handleChange = (e : React.ChangeEvent) => { + setText((e.target.value)); + }; + + return { + text, handleChange, + }; +}; + export default function Inquiry(): JSX.Element { + const { text, handleChange } = useSearchForm(); const [page, setPage] = useState(1); const { data: postData } = usePostList(page); + const [selectedTab, setSelectedTab] = useState('all'); const title = '문의하기'; - const subTitle = '쩝쩝박사에게 궁금한 점이 있나요?'; + const inquireLinkTitle = '문의하러 가기'; + + function handleModClick(mod: string) { + setSelectedTab(mod); + } return ( -
-
- { - postData && ( -
- - +
+
+
+

{title}

+ +
+
handleModClick('all')} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleModClick('mod'); + console.log(selectedTab); + } + }} + role="button" + tabIndex={0} + > + 전체 문의 내역 +
+
handleModClick('my')} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleModClick('my'); + } + }} + role="button" + tabIndex={0} + > + +
+ 나의 문의 내역 +
+
- ) - } -
- +
); } From 784a422b1c30b4850a6da8f82fe06fc222ef46bc Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Thu, 28 Sep 2023 17:31:23 +0900 Subject: [PATCH 02/44] =?UTF-8?q?feat:=20=EC=A0=84=EC=B2=B4=20=EB=AC=B8?= =?UTF-8?q?=EC=9D=98=20api=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/inquiry/entity.ts | 45 +++++++++ src/api/inquiry/index.ts | 9 ++ src/api/inquiry/inquiryApiClient.ts | 9 ++ .../DataTable/DataTable.module.scss | 94 ++++++------------- .../components/DataTable/DataTable.tsx | 47 ++++------ src/pages/Inquiry/hooks/useInquiryList.ts | 14 +++ src/pages/Inquiry/index.tsx | 16 ++-- 7 files changed, 134 insertions(+), 100 deletions(-) create mode 100644 src/api/inquiry/entity.ts create mode 100644 src/api/inquiry/index.ts create mode 100644 src/api/inquiry/inquiryApiClient.ts create mode 100644 src/pages/Inquiry/hooks/useInquiryList.ts diff --git a/src/api/inquiry/entity.ts b/src/api/inquiry/entity.ts new file mode 100644 index 00000000..a19d0cc5 --- /dev/null +++ b/src/api/inquiry/entity.ts @@ -0,0 +1,45 @@ +export interface GetInquiryResponse { + content: InquiryContent[]; + empty: boolean; + first: boolean; + last: boolean; + number: number; + numberOfElements: number; + pageable: InquiryPageable; + size: number; + sort: InquirySort; + totalElements: number; + totalPages: number; +} + +export interface InquiryContent { + answer: string; + content: string; + createdAt: string; + createdBy: string; + id: number; + inquiryImages: InquiryImage[]; + isSecreted: number; + title: string; +} + +export interface InquiryImage { + imageUrl: string; + originalName: string; + path: string; +} + +export interface InquiryPageable { + offset: number; + pageNumber: number; + pageSize: number; + paged: boolean; + sort: InquirySort; + unpaged: boolean; +} + +export interface InquirySort { + empty: boolean; + sorted: boolean; + unsorted: boolean; +} diff --git a/src/api/inquiry/index.ts b/src/api/inquiry/index.ts new file mode 100644 index 00000000..a1729ae7 --- /dev/null +++ b/src/api/inquiry/index.ts @@ -0,0 +1,9 @@ +import { GetInquiryResponse } from './entity'; +import inquiryApi from './inquiryApiClient'; + +const getInquiry = async (dateCursor: string | null, idCursor: number | null) => { + const { data } = await inquiryApi.get(`/inquiry?dateCursor=${dateCursor}&idCursor=${idCursor}&size=8`); + return data; +}; + +export default getInquiry; diff --git a/src/api/inquiry/inquiryApiClient.ts b/src/api/inquiry/inquiryApiClient.ts new file mode 100644 index 00000000..7c5b37a5 --- /dev/null +++ b/src/api/inquiry/inquiryApiClient.ts @@ -0,0 +1,9 @@ +import axios from 'axios'; +import { API_PATH } from 'config/constants'; + +const inquiryApi = axios.create({ + baseURL: `${API_PATH}`, + timeout: 2000, +}); + +export default inquiryApi; diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/components/DataTable/DataTable.module.scss index 886bdcca..a2ee5cdb 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/components/DataTable/DataTable.module.scss @@ -3,75 +3,39 @@ $highlight: #ff7f23; $back: white; $normal: #666666; -.header { - display: flex; - justify-content: space-between; - - &__title { - color: $highlight; - font-size: 32px; - font-weight: 700; - margin: 156px auto 10px; - } - - &__sub-title { - color: $normal; - font-size: 16px; - font-weight: 400; - margin: 0 auto 40px; - } - - &__my-inquiry { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid; - border-color: $highlight; - border-radius: 10px; - width: 178px; - height: 36px; - color: $highlight; - margin-top: 190px; - cursor: pointer; - } - - &__link { - text-decoration: none; - } - - &__move { - margin-left: 9px; - } -} - .body { - border: 1px; - border-top-color: $highlight; - border-bottom-color: #eeeeee; - border-top-style: solid; - border-bottom-style: solid; - - &__list-title { - display: grid; - place-items: center; - color: $normal; - grid-template-columns: 200px 400px 150px 150px 150px; - grid-template-rows: 37px; - } - &__list { - display: grid; - place-items: center; - grid-template-columns: 200px 400px 150px 150px 150px; - width: 1048px; - border: 1px; - border-bottom-style: solid; - border-bottom-color: #eeeeee; + border-bottom: 1px solid #eeeeee; + padding: 10px; + max-height: 97px; + overflow: hidden; + transition: max-height 0.3s ease-in-out; + cursor: pointer; + + &:hover { + background-color: #f0f0f0; + } } &__element { - display: grid; - place-items: center; - grid-template-rows: 50px; + display: flex; + flex-direction: column; + align-items: start; + + p { + font-size: 16px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin: 0; + padding: 0; + } + + span { + font-size: 14px; + color: $normal; + margin-top: 4px; + } } } diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/components/DataTable/DataTable.tsx index d2733db4..7f03f16c 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/components/DataTable/DataTable.tsx @@ -1,43 +1,36 @@ -import React from 'react'; +import React, { useState } from 'react'; import styles from './DataTable.module.scss'; interface Props { data: { - title: string; + answer: string; content: string; - boardType: string; createdAt: string; + createdBy: string; + id: number; + isSecreted: number; + title: string; }[]; } export default function DataTable({ data }: Props): JSX.Element { - console.log(data); + const [expandedId, setExpandedId] = useState(null); + return (
-
- s -
- {/*
- {data.map((res) => ( -
-
- {res.content} -
-
- {res.title} -
-
- {res.boardType} -
-
- {res.createdAt} -
-
- {res.content} -
+ {data.map((item) => ( +
setExpandedId(expandedId === item.id ? null : item.id)} + style={{ maxHeight: expandedId === item.id ? 'none' : '97px' }} + > +
+

{item.title}

+ {new Date(item.createdAt).toLocaleDateString()} | {item.createdBy}
- ))} -
*/} +
+ ))}
); } diff --git a/src/pages/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/hooks/useInquiryList.ts new file mode 100644 index 00000000..95575648 --- /dev/null +++ b/src/pages/Inquiry/hooks/useInquiryList.ts @@ -0,0 +1,14 @@ +import getInquiry from 'api/inquiry'; +import { useQuery } from 'react-query'; + +const useInquiryList = (dateCursor: string | null, idCursor: number | null) => { + const { + isLoading, isError, data, + } = useQuery(['Inquiry', dateCursor, idCursor], () => getInquiry(dateCursor, idCursor)); + + return { + isLoading, isError, data, + }; +}; + +export default useInquiryList; diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index a84aa5f7..355a6672 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; import { Link } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; -import usePostList from 'pages/Post/hooks/usePostList'; +import useInquiryList from 'pages/Inquiry/hooks/useInquiryList'; import SearchInput from './components/SearchBar/SearchInput'; import Pagination from './components/Pagination'; -import Datatable from './components/DataTable/DataTable'; +import DataTable from './components/DataTable/DataTable'; // import MyInquiry from './components/MyInquiry/MyInquiry'; import styles from './Inquiry.module.scss'; @@ -22,7 +22,7 @@ const useSearchForm = () => { export default function Inquiry(): JSX.Element { const { text, handleChange } = useSearchForm(); const [page, setPage] = useState(1); - const { data: postData } = usePostList(page); + const { data: inquiryData } = useInquiryList(null, 0); const [selectedTab, setSelectedTab] = useState('all'); const title = '문의하기'; const inquireLinkTitle = '문의하러 가기'; @@ -98,20 +98,20 @@ export default function Inquiry(): JSX.Element {
{ - postData && ( + inquiryData && (
-
) } { - postData && ( + inquiryData && (
From 755baf9e4f33e9c0653981aeffffbc21a5b285a9 Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Fri, 29 Sep 2023 22:49:39 +0900 Subject: [PATCH 03/44] =?UTF-8?q?feat:=20DataTable=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquiry.module.scss | 43 ++++++------ .../DataTable/DataTable.module.scss | 68 +++++++++++++------ .../components/DataTable/DataTable.tsx | 67 ++++++++++++++---- src/pages/Inquiry/index.tsx | 18 ++--- 4 files changed, 133 insertions(+), 63 deletions(-) diff --git a/src/pages/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry.module.scss index 16a97caf..048ac573 100644 --- a/src/pages/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry.module.scss @@ -35,7 +35,7 @@ $disabled: #c4c4c4; margin: 160px 0 52px 0; } - &__mod-items { + &__link-inquiry { padding-top: 17px; margin-left: 16px; @@ -52,7 +52,7 @@ $disabled: #c4c4c4; } - &__inquire { + &__link-inquire { display: flex; align-items: center; justify-content: center; @@ -80,28 +80,27 @@ $disabled: #c4c4c4; } } -.main { - &__search-and-data { - width: 720px; - display: flex; - flex-direction: column; // 내부 요소들을 세로로 배열합니다. - } - &__search-bar { - border-bottom: 1px solid #ff7f23; - width: 720px; - height: 252px; - margin-left: -1px; - display: flex; - flex-direction: column; - justify-content: start; - align-items: end; - } +.search-data-pagination { + width: 720px; + display: flex; + flex-direction: column; // 내부 요소들을 세로로 배열합니다. +} - &__data-table { - width: 720px; - height: 252px; - } +.search-bar { + border-bottom: 1px solid #ff7f23; + width: 720px; + height: 252px; + margin-left: -1px; + display: flex; + flex-direction: column; + justify-content: start; + align-items: end; +} + +.data-table { + width: 720px; + height: 252px; } // .container { diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/components/DataTable/DataTable.module.scss index a2ee5cdb..87ff2dd0 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/components/DataTable/DataTable.module.scss @@ -3,8 +3,8 @@ $highlight: #ff7f23; $back: white; $normal: #666666; -.body { - &__list { +.block { + &__body { border-bottom: 1px solid #eeeeee; padding: 10px; max-height: 97px; @@ -12,30 +12,60 @@ $normal: #666666; transition: max-height 0.3s ease-in-out; cursor: pointer; + display: flex; + flex-direction: column; + align-items: start; + position: relative; + &:hover { background-color: #f0f0f0; } - } - &__element { - display: flex; - flex-direction: column; - align-items: start; + &-extender { + position: absolute; + top: 14px; + right: 20px; - p { - font-size: 16px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - margin: 0; - padding: 0; + & > * { + transition: transform 0.15s ease-in-out; + } } + } - span { - font-size: 14px; - color: $normal; - margin-top: 4px; + &__title { + font-size: 16px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin: 0; + padding: 0; + } + + &__info { + font-size: 14px; + color: $normal; + margin-top: 4px; + } + + &__answerBox { + width: 100%; + box-sizing: border-box; + background-color: #eeeeee; + border-radius: 3px; + margin-top: 8px; + padding: 16px; + font-size: 16px; + + &-noAnswer { + opacity: 0.3; } } } + +.noData { + color: $normal; + font-size: 16px; + text-align: center; + padding: 20px; +} diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/components/DataTable/DataTable.tsx index 7f03f16c..da60da86 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/components/DataTable/DataTable.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { ReactComponent as Arrow } from 'assets/svg/common/arrow.svg'; import styles from './DataTable.module.scss'; interface Props { @@ -16,21 +17,61 @@ interface Props { export default function DataTable({ data }: Props): JSX.Element { const [expandedId, setExpandedId] = useState(null); + const noDataTitle = '문의 내역이 없습니다.'; + const noAnswerTitle = '아직 답변이 없네요. 조금만 기다려주세요!'; + + const handleKeyPress = (e: React.KeyboardEvent, id: number) => { + if (e.key === 'Enter' || e.key === ' ') { + setExpandedId(expandedId === id ? null : id); + } + }; + return ( -
- {data.map((item) => ( -
setExpandedId(expandedId === item.id ? null : item.id)} - style={{ maxHeight: expandedId === item.id ? 'none' : '97px' }} - > -
-

{item.title}

- {new Date(item.createdAt).toLocaleDateString()} | {item.createdBy} -
+
+ {data.length === 0 ? ( +
+ {noDataTitle}
- ))} + ) : ( + data.map((item) => ( +
setExpandedId(expandedId === item.id ? null : item.id)} + onKeyPress={(e) => handleKeyPress(e, item.id)} + role="button" + tabIndex={0} + > +
+

+ {item.title} +

+ + {new Date(item.createdAt).toLocaleDateString()} + | + {item.createdBy} + + + + + + {expandedId === item.id && ( +
+ {item.answer ? ( +

+ {item.answer} +

+ ) : ( +

+ {noAnswerTitle} +

+ )} +
+ )} +
+
+ )) + )}
); } diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index 355a6672..3295bac3 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -37,7 +37,7 @@ export default function Inquiry(): JSX.Element {

{title}

-
+
handleModClick('all')} @@ -53,7 +53,7 @@ export default function Inquiry(): JSX.Element { 전체 문의 내역
handleModClick('my')} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { @@ -63,8 +63,8 @@ export default function Inquiry(): JSX.Element { role="button" tabIndex={0} > - -
+ +
나의 문의 내역
@@ -73,7 +73,7 @@ export default function Inquiry(): JSX.Element {
-
-
+
+
+
@@ -109,7 +109,7 @@ export default function Inquiry(): JSX.Element { { inquiryData && ( -
+
Date: Sun, 1 Oct 2023 00:18:34 +0900 Subject: [PATCH 04/44] =?UTF-8?q?feat:=20pagination=20=EC=82=AD=EC=A0=9C,?= =?UTF-8?q?=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 - src/api/inquiry/index.ts | 4 +- src/pages/Inquiry/Inquiry.module.scss | 102 +++++--------- .../DataTable/DataTable.module.scss | 18 ++- .../components/DataTable/DataTable.tsx | 130 +++++++++++------- .../Inquiry/components/Pagination/index.tsx | 56 -------- .../Pagination/pagination.module.scss | 32 ----- src/pages/Inquiry/hooks/useInquiryList.ts | 4 +- src/pages/Inquiry/index.tsx | 61 ++++---- 9 files changed, 164 insertions(+), 245 deletions(-) delete mode 100644 src/pages/Inquiry/components/Pagination/index.tsx delete mode 100644 src/pages/Inquiry/components/Pagination/pagination.module.scss diff --git a/src/App.tsx b/src/App.tsx index 67159e0b..cdbf602a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,6 @@ import IdChange from 'pages/Setting/UserSetting/IdChange'; import AuthRoute from 'components/common/AuthRoute'; import Withdrawal from 'pages/Setting/Withdrawal'; import Inquiry from 'pages/Inquiry'; -import Inquiry2 from 'pages/Inquiry2'; import Myinquiry from 'pages/Inquiry/Myinquiry'; import Notice from 'pages/Notice'; import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin'; @@ -33,7 +32,6 @@ export default function App(): JSX.Element { } /> } /> } /> - } /> } /> } /> diff --git a/src/api/inquiry/index.ts b/src/api/inquiry/index.ts index a1729ae7..3413558d 100644 --- a/src/api/inquiry/index.ts +++ b/src/api/inquiry/index.ts @@ -1,8 +1,8 @@ import { GetInquiryResponse } from './entity'; import inquiryApi from './inquiryApiClient'; -const getInquiry = async (dateCursor: string | null, idCursor: number | null) => { - const { data } = await inquiryApi.get(`/inquiry?dateCursor=${dateCursor}&idCursor=${idCursor}&size=8`); +const getInquiry = async (dateCursor: string | null, idCursor: number | null, size: number = 9) => { + const { data } = await inquiryApi.get(`/inquiry?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`); return data; }; diff --git a/src/pages/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry.module.scss index 048ac573..3304c300 100644 --- a/src/pages/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry.module.scss @@ -81,7 +81,7 @@ $disabled: #c4c4c4; } -.search-data-pagination { +.search-data { width: 720px; display: flex; flex-direction: column; // 내부 요소들을 세로로 배열합니다. @@ -98,74 +98,38 @@ $disabled: #c4c4c4; align-items: end; } -.data-table { +.data { width: 720px; - height: 252px; + flex-grow: 1; + display: flex; + flex-direction: column; + position: relative; + + // &::before { // dataTable 스크롤 시 linear-gradient 생성 + // content: ""; + // display: none; + // position: absolute; + // top: 0; + // height: 66px; + // width: 100%; + // background: linear-gradient(to bottom, rgba(85, 85, 85, 0.5), transparent); + // z-index: 2; + // } + + // &.scrolled::before { + // display: block; + // } + + &__data-table { + width: 720px; + height: calc(100vh - 333px); + overflow-y: auto; + } } -// .container { -// display: flex; -// flex-direction: column; -// justify-content: center; -// width: 1048px; -// margin-left: auto; -// margin-right: auto; -// } - -// .nav { -// display: flex; -// margin: 95px auto 169px; -// width: 1048px; -// justify-content: space-between; -// cursor: pointer; - -// &__search-block { -// display: flex; -// height: 33px; -// font-size: 14px; -// } - -// &__button { -// background: $highlight; -// border-radius: 5px; -// border-style: none; -// color: $back; -// width: 57px; -// font-size: 14px; -// padding: 5px 7px; -// margin-left: 10px; -// cursor: pointer; -// } - -// &__input { -// width: 234px; -// border-color: #c4c4c4; -// border-radius: 5px; -// color: #c4c4c4; -// padding: 8px 24px; -// border: solid; -// } - -// &__post-button { -// display: flex; -// justify-content: center; -// width: 90px; -// height: 33px; -// background-color: #ff7f23; -// color: #eeeeee; -// align-items: center; -// border-radius: 5px; -// } - -// &__post { -// margin: 8px 0 8px 8.5px; -// } - -// &__post-svg { -// width: 17.02px; -// color: $highlight; -// background-color: $highlight; -// margin: 7.47px 8.5px 7.47px 4px; -// cursor: pointer; -// } -// } +.loader { + height: 40px; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/components/DataTable/DataTable.module.scss index 87ff2dd0..5318a5a6 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/components/DataTable/DataTable.module.scss @@ -6,10 +6,11 @@ $normal: #666666; .block { &__body { border-bottom: 1px solid #eeeeee; - padding: 10px; + padding: 16px 10px; + height: auto; max-height: 97px; overflow: hidden; - transition: max-height 0.3s ease-in-out; + transition: height 0.7s ease-in-out; cursor: pointer; display: flex; @@ -21,6 +22,11 @@ $normal: #666666; background-color: #f0f0f0; } + &.expanded { + height: auto; + max-height: 1000px; + } + &-extender { position: absolute; top: 14px; @@ -38,18 +44,20 @@ $normal: #666666; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - margin: 0; + margin: 0 0 8px 0; padding: 0; } &__info { font-size: 14px; color: $normal; - margin-top: 4px; + margin-top: 0; } &__answerBox { width: 100%; + height: auto; + max-height: 0; box-sizing: border-box; background-color: #eeeeee; border-radius: 3px; @@ -67,5 +75,5 @@ $normal: #666666; color: $normal; font-size: 16px; text-align: center; - padding: 20px; + padding-top: 10px; } diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/components/DataTable/DataTable.tsx index da60da86..73bee059 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/components/DataTable/DataTable.tsx @@ -1,21 +1,24 @@ -import React, { useState } from 'react'; +import React, { + useState, + useEffect, + useRef, + useCallback, +} from 'react'; import { ReactComponent as Arrow } from 'assets/svg/common/arrow.svg'; +import useInquiryList from 'pages/Inquiry/hooks/useInquiryList'; +import { InquiryContent } from 'api/inquiry/entity'; import styles from './DataTable.module.scss'; -interface Props { - data: { - answer: string; - content: string; - createdAt: string; - createdBy: string; - id: number; - isSecreted: number; - title: string; - }[]; -} +export default function DataTable(): JSX.Element { + const [dateCursor, setDateCursor] = useState(null); + const [idCursor, setIdCursor] = useState(0); + const { data: inquiryData, isLoading } = useInquiryList(dateCursor, idCursor, 10); + const [allData, setAllData] = useState( + inquiryData ? [...inquiryData.content] : [], + ); -export default function DataTable({ data }: Props): JSX.Element { const [expandedId, setExpandedId] = useState(null); + const loader = useRef(null); const noDataTitle = '문의 내역이 없습니다.'; const noAnswerTitle = '아직 답변이 없네요. 조금만 기다려주세요!'; @@ -26,52 +29,79 @@ export default function DataTable({ data }: Props): JSX.Element { } }; + const loadMoreData = useCallback(() => { + if (inquiryData && inquiryData.content.length > 0) { + const b = allData[allData.length - 1] === inquiryData.content[inquiryData.content.length - 1]; + const value = b ? allData : [...allData, ...inquiryData.content]; + setDateCursor(inquiryData.content[inquiryData.content.length - 1].createdAt || null); + setIdCursor(inquiryData.content[inquiryData.content.length - 1].id || 0); + setAllData(value); + } + }, [inquiryData, allData]); + + useEffect(() => { + function handleObserver(entities: IntersectionObserverEntry[]) { + const target = entities[0]; + if (target.isIntersecting && !isLoading) { + loadMoreData(); + } + } + + const observer = new IntersectionObserver(handleObserver, { threshold: 1 }); + if (loader.current) { + observer.observe(loader.current); + } + }, [loadMoreData, isLoading]); + return (
- {data.length === 0 ? ( + {allData && allData.length === 0 ? (
{noDataTitle}
) : ( - data.map((item) => ( -
setExpandedId(expandedId === item.id ? null : item.id)} - onKeyPress={(e) => handleKeyPress(e, item.id)} - role="button" - tabIndex={0} - > -
-

- {item.title} -

- - {new Date(item.createdAt).toLocaleDateString()} - | - {item.createdBy} - - - - + allData && ( + allData.map((item) => ( +
setExpandedId(expandedId === item.id ? null : item.id)} + onKeyPress={(e) => handleKeyPress(e, item.id)} + role="button" + tabIndex={0} + > +
+

+ {item.title} +

+ + {new Date(item.createdAt).toLocaleDateString()} + | + {item.createdBy} + + + + - {expandedId === item.id && ( -
- {item.answer ? ( -

- {item.answer} -

- ) : ( -

- {noAnswerTitle} -

- )} -
- )} + {expandedId === item.id && ( +
+ {item.answer ? ( +

+ {item.answer} +

+ ) : ( +

+ {noAnswerTitle} +

+ )} +
+ )} +
-
- )) + )) + ) )} +
); } diff --git a/src/pages/Inquiry/components/Pagination/index.tsx b/src/pages/Inquiry/components/Pagination/index.tsx deleted file mode 100644 index 245d6023..00000000 --- a/src/pages/Inquiry/components/Pagination/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { ReactComponent as ArrowLeft } from 'assets/svg/inquiry/arrow-left.svg'; -import { ReactComponent as ArrowRight } from 'assets/svg/inquiry/arrow-right.svg'; -import { ReactComponent as DoubleArrowLeft } from 'assets/svg/inquiry/double-arrow-left.svg'; -import { ReactComponent as DoubleArrowRight } from 'assets/svg/inquiry/double-arrow-right.svg'; -import cn from 'utils/ts/classNames'; -import styles from './pagination.module.scss'; - -interface Props { - totalPage: number; - setPage: React.Dispatch>; - page: number; -} - -export default function Pagination({ totalPage, setPage, page }: Props): JSX.Element { - const movePage = (offset: number) => { - setPage((prev) => { - if (prev + offset < 1) return 1; - if (prev + offset > totalPage) return totalPage; - return prev + offset; - }); - }; - const pageList = [...Array(totalPage)] - .map((_, index) => index + 1) - .slice(Math.min(Math.max(page - 3, 0), totalPage - 5), totalPage) - .slice(0, 5); - - return ( - - ); -} diff --git a/src/pages/Inquiry/components/Pagination/pagination.module.scss b/src/pages/Inquiry/components/Pagination/pagination.module.scss deleted file mode 100644 index 45646035..00000000 --- a/src/pages/Inquiry/components/Pagination/pagination.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -$default: #222222; -$highlight: #ff7f23; -$back: white; - -.pagination { - display: flex; - justify-content: center; - margin-top: 65px; - cursor: pointer; - - &__svg { - margin: 13px; - border-style: none; - border: #222222; - border: 1px; - background-color: $back; - } - - &__page { - color: $default; - font-size: 16px; - padding: 13px; - background-color: $back; - border: none; - outline: none; - cursor: pointer; - - &--active { - color: $highlight; - } - } -} diff --git a/src/pages/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/hooks/useInquiryList.ts index 95575648..d9a7cad9 100644 --- a/src/pages/Inquiry/hooks/useInquiryList.ts +++ b/src/pages/Inquiry/hooks/useInquiryList.ts @@ -1,10 +1,10 @@ import getInquiry from 'api/inquiry'; import { useQuery } from 'react-query'; -const useInquiryList = (dateCursor: string | null, idCursor: number | null) => { +const useInquiryList = (dateCursor: string | null, idCursor: number | null, size: number) => { const { isLoading, isError, data, - } = useQuery(['Inquiry', dateCursor, idCursor], () => getInquiry(dateCursor, idCursor)); + } = useQuery(['Inquiry', dateCursor, idCursor, size], () => getInquiry(dateCursor, idCursor, size)); return { isLoading, isError, data, diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index 3295bac3..b8eed1e4 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -1,9 +1,7 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; -import useInquiryList from 'pages/Inquiry/hooks/useInquiryList'; import SearchInput from './components/SearchBar/SearchInput'; -import Pagination from './components/Pagination'; import DataTable from './components/DataTable/DataTable'; // import MyInquiry from './components/MyInquiry/MyInquiry'; import styles from './Inquiry.module.scss'; @@ -21,8 +19,6 @@ const useSearchForm = () => { export default function Inquiry(): JSX.Element { const { text, handleChange } = useSearchForm(); - const [page, setPage] = useState(1); - const { data: inquiryData } = useInquiryList(null, 0); const [selectedTab, setSelectedTab] = useState('all'); const title = '문의하기'; const inquireLinkTitle = '문의하러 가기'; @@ -31,6 +27,33 @@ export default function Inquiry(): JSX.Element { setSelectedTab(mod); } + // useEffect(() => { // DataTable 스크롤 시 linear-gradient 생성 + // const dataDiv = document.querySelector('.data'); + // const dataTable = document.querySelector('.data__data-table'); + // console.log(dataDiv); + // console.log(dataTable); + + // function handleScroll() { + // if (dataDiv) { + // if (dataTable && dataTable.scrollTop > 0) { + // dataDiv.classList.add('scrolled'); + // } else { + // dataDiv.classList.remove('scrolled'); + // } + // } + // } + + // if (dataTable) { + // dataTable.addEventListener('scroll', handleScroll); + // } + + // return () => { + // if (dataTable) { + // dataTable.removeEventListener('scroll', handleScroll); + // } + // }; + // }, [inquiryData]); + return (
@@ -89,7 +112,7 @@ export default function Inquiry(): JSX.Element { */}
-
+
- { - inquiryData && ( -
- -
- ) - } - - { - inquiryData && ( -
- -
- ) - } +
+
+ +
+
From f58380c472b4045fb411d6e8cc84e735bb8163b5 Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Mon, 2 Oct 2023 15:59:02 +0900 Subject: [PATCH 05/44] =?UTF-8?q?feat:=20=EB=82=98=EC=9D=98=20=EB=AC=B8?= =?UTF-8?q?=EC=9D=98=20=EC=9E=84=EC=8B=9C=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- src/api/inquiry/index.ts | 15 +++- src/pages/Inquiry/Inquiry.module.scss | 64 +++++++------- src/pages/Inquiry/Myinquiry.tsx | 7 -- .../DataTable/DataTable.module.scss | 1 - .../components/DataTable/DataTable.tsx | 34 +++++++- .../MyInquiry/MyInquiry.module.scss | 23 ----- .../components/MyInquiry/MyInquiry.tsx | 18 ---- src/pages/Inquiry/hooks/useInquiryList.ts | 18 +++- src/pages/Inquiry/index.tsx | 83 +++++++------------ 10 files changed, 125 insertions(+), 142 deletions(-) delete mode 100644 src/pages/Inquiry/Myinquiry.tsx delete mode 100644 src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss delete mode 100644 src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx diff --git a/src/App.tsx b/src/App.tsx index cdbf602a..5405364b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,6 @@ import IdChange from 'pages/Setting/UserSetting/IdChange'; import AuthRoute from 'components/common/AuthRoute'; import Withdrawal from 'pages/Setting/Withdrawal'; import Inquiry from 'pages/Inquiry'; -import Myinquiry from 'pages/Inquiry/Myinquiry'; import Notice from 'pages/Notice'; import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin'; import NaverLogin from 'pages/Auth/OAuth/NaverLogin'; @@ -31,8 +30,7 @@ export default function App(): JSX.Element { }> } /> } /> - } /> - } /> + } /> } /> }> diff --git a/src/api/inquiry/index.ts b/src/api/inquiry/index.ts index 3413558d..5be82705 100644 --- a/src/api/inquiry/index.ts +++ b/src/api/inquiry/index.ts @@ -1,8 +1,19 @@ import { GetInquiryResponse } from './entity'; import inquiryApi from './inquiryApiClient'; -const getInquiry = async (dateCursor: string | null, idCursor: number | null, size: number = 9) => { - const { data } = await inquiryApi.get(`/inquiry?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`); +interface InquiryProps { + typePath: string; + dateCursor: string | null; + idCursor: number | null; + size: number; +} + +const getInquiry = async ({ + typePath, dateCursor, idCursor, size, +}: InquiryProps) => { + const queryParams = `?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`; + + const { data } = await inquiryApi.get(`/inquiry${typePath}${queryParams}`); return data; }; diff --git a/src/pages/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry.module.scss index 3304c300..f2085aa4 100644 --- a/src/pages/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry.module.scss @@ -35,59 +35,61 @@ $disabled: #c4c4c4; margin: 160px 0 52px 0; } - &__link-inquiry { + &__link { padding-top: 17px; margin-left: 16px; & > * { width: 104px; margin-bottom: 24px; - color: $normal; - text-decoration: none; &[attribute*="selected"] { color: $highlight } } - } + &-inquire { + display: flex; + align-items: center; + justify-content: center; + width: 152px; + height: 39px; + background: $highlight; + border: none; + appearance: none; + border-radius: 20px; + font-weight: 700; + font-size: 16px; + text-decoration: none; + color: white; + cursor: pointer; + box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); + margin-top: 48px; - &__link-inquire { - display: flex; - align-items: center; - justify-content: center; - width: 152px; - height: 39px; - background: $highlight; - border: none; - appearance: none; - border-radius: 20px; - font-weight: 700; - font-size: 16px; - text-decoration: none; - color: white; - cursor: pointer; - box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); - margin-top: 48px; - - &>:first-child { - margin-right: 5px; - } + &>:first-child { + margin-right: 5px; + } - // @include media.media-breakpoint-down(mobile) { - // width: 100%; - // } + // @include media.media-breakpoint-down(mobile) { + // width: 100%; + // } + } } } +.link-no-underline { + text-decoration: none; + color: $normal; +} -.search-data { + +.searchData { width: 720px; display: flex; - flex-direction: column; // 내부 요소들을 세로로 배열합니다. + flex-direction: column; } -.search-bar { +.searchBar { border-bottom: 1px solid #ff7f23; width: 720px; height: 252px; diff --git a/src/pages/Inquiry/Myinquiry.tsx b/src/pages/Inquiry/Myinquiry.tsx deleted file mode 100644 index de559161..00000000 --- a/src/pages/Inquiry/Myinquiry.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Myinquiry(): JSX.Element { - return ( -
-

HI MYINQUIRY

-
- ); -} diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/components/DataTable/DataTable.module.scss index 5318a5a6..774ccea5 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/components/DataTable/DataTable.module.scss @@ -57,7 +57,6 @@ $normal: #666666; &__answerBox { width: 100%; height: auto; - max-height: 0; box-sizing: border-box; background-color: #eeeeee; border-radius: 3px; diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/components/DataTable/DataTable.tsx index 73bee059..04ebcefc 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/components/DataTable/DataTable.tsx @@ -9,10 +9,13 @@ import useInquiryList from 'pages/Inquiry/hooks/useInquiryList'; import { InquiryContent } from 'api/inquiry/entity'; import styles from './DataTable.module.scss'; -export default function DataTable(): JSX.Element { +export default function DataTable({ typePath }: { typePath: string }): JSX.Element { const [dateCursor, setDateCursor] = useState(null); const [idCursor, setIdCursor] = useState(0); - const { data: inquiryData, isLoading } = useInquiryList(dateCursor, idCursor, 10); + const { data: inquiryData, isLoading } = useInquiryList({ + typePath, dateCursor, idCursor, size: 10, + }); + const [allData, setAllData] = useState( inquiryData ? [...inquiryData.content] : [], ); @@ -53,6 +56,33 @@ export default function DataTable(): JSX.Element { } }, [loadMoreData, isLoading]); + // useEffect(() => { // DataTable 스크롤 시 linear-gradient 생성 + // const dataDiv = document.querySelector('.data'); + // const dataTable = document.querySelector('.data__data-table'); + // console.log(dataDiv); + // console.log(dataTable); + + // function handleScroll() { + // if (dataDiv) { + // if (dataTable && dataTable.scrollTop > 0) { + // dataDiv.classList.add('scrolled'); + // } else { + // dataDiv.classList.remove('scrolled'); + // } + // } + // } + + // if (dataTable) { + // dataTable.addEventListener('scroll', handleScroll); + // } + + // return () => { + // if (dataTable) { + // dataTable.removeEventListener('scroll', handleScroll); + // } + // }; + // }, [inquiryData]); + return (
{allData && allData.length === 0 ? ( diff --git a/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss b/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss deleted file mode 100644 index aec7ff44..00000000 --- a/src/pages/Inquiry/components/MyInquiry/MyInquiry.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -$highlight: #ff7f23; - -.title { - display: flex; - justify-content: center; - align-items: center; - border: 1px solid; - border-color: $highlight; - border-radius: 10px; - width: 178px; - height: 36px; - color: $highlight; - margin-top: 190px; - cursor: pointer; -} - -.link { - text-decoration: none; -} - -.move-icon { - margin-left: 9px; -} diff --git a/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx b/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx deleted file mode 100644 index 725e71fe..00000000 --- a/src/pages/Inquiry/components/MyInquiry/MyInquiry.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Link } from 'react-router-dom'; -import { ReactComponent as MoveIcon } from 'assets/svg/inquiry/myinquiry.svg'; -import styles from './MyInquiry.module.scss'; - -export default function MyInquiry(): JSX.Element { - return ( -
- -
- 나의 문의 바로가기 -
- -
-
- -
- ); -} diff --git a/src/pages/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/hooks/useInquiryList.ts index d9a7cad9..3822f769 100644 --- a/src/pages/Inquiry/hooks/useInquiryList.ts +++ b/src/pages/Inquiry/hooks/useInquiryList.ts @@ -1,10 +1,20 @@ import getInquiry from 'api/inquiry'; import { useQuery } from 'react-query'; -const useInquiryList = (dateCursor: string | null, idCursor: number | null, size: number) => { - const { - isLoading, isError, data, - } = useQuery(['Inquiry', dateCursor, idCursor, size], () => getInquiry(dateCursor, idCursor, size)); +interface InquiryProps { + typePath: string; + dateCursor: string | null; + idCursor: number | null; + size: number; +} + +const useInquiryList = ({ + typePath, dateCursor, idCursor, size, +}: InquiryProps) => { + const queryKey = ['Inquiry', dateCursor, idCursor, size]; + const { isLoading, isError, data } = useQuery(queryKey, () => getInquiry({ + typePath, dateCursor, idCursor, size, + })); return { isLoading, isError, data, diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/index.tsx index b8eed1e4..f3fb068d 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/index.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; +import React, { useState, useEffect } from 'react'; +import { Link, useParams, useNavigate } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; +import { useQueryClient } from 'react-query'; import SearchInput from './components/SearchBar/SearchInput'; import DataTable from './components/DataTable/DataTable'; -// import MyInquiry from './components/MyInquiry/MyInquiry'; import styles from './Inquiry.module.scss'; const useSearchForm = () => { @@ -18,41 +18,20 @@ const useSearchForm = () => { }; export default function Inquiry(): JSX.Element { - const { text, handleChange } = useSearchForm(); - const [selectedTab, setSelectedTab] = useState('all'); - const title = '문의하기'; - const inquireLinkTitle = '문의하러 가기'; - - function handleModClick(mod: string) { - setSelectedTab(mod); - } + const { type } = useParams(); // 'all' 또는 'my' + const [selectedTab, setSelectedTab] = useState(type); + const navigate = useNavigate(); + const queryClient = useQueryClient(); - // useEffect(() => { // DataTable 스크롤 시 linear-gradient 생성 - // const dataDiv = document.querySelector('.data'); - // const dataTable = document.querySelector('.data__data-table'); - // console.log(dataDiv); - // console.log(dataTable); + useEffect(() => { + setSelectedTab(type); - // function handleScroll() { - // if (dataDiv) { - // if (dataTable && dataTable.scrollTop > 0) { - // dataDiv.classList.add('scrolled'); - // } else { - // dataDiv.classList.remove('scrolled'); - // } - // } - // } + queryClient.invalidateQueries('Inquiry'); + }, [type, queryClient]); - // if (dataTable) { - // dataTable.addEventListener('scroll', handleScroll); - // } - - // return () => { - // if (dataTable) { - // dataTable.removeEventListener('scroll', handleScroll); - // } - // }; - // }, [inquiryData]); + const { text, handleChange } = useSearchForm(); + const title = '문의하기'; + const inquireLinkTitle = '문의하러 가기'; return (
@@ -60,33 +39,39 @@ export default function Inquiry(): JSX.Element {

{title}

-
+
handleModClick('all')} + className={`${styles['nav__link-allinquiry']} ${selectedTab === 'all' ? 'selected' : ''}`} + onClick={() => { + navigate('/inquiry/all'); + }} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { - handleModClick('mod'); - console.log(selectedTab); + navigate('/inquiry/all'); } }} role="button" tabIndex={0} > - 전체 문의 내역 + + 전체 문의 내역 +
+
handleModClick('my')} + onClick={() => { + navigate('/inquiry/my'); + }} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { - handleModClick('my'); + navigate('/inquiry/my'); } }} role="button" tabIndex={0} > - +
나의 문의 내역
@@ -106,14 +91,10 @@ export default function Inquiry(): JSX.Element { - - {/*
- {MyInquiry && } -
*/}
-
-
+
+
- +
From fcc6f19ea83260ee0125106dad281049199cfd0b Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Mon, 9 Oct 2023 14:23:50 +0900 Subject: [PATCH 06/44] =?UTF-8?q?style:=20=EC=84=A0=ED=83=9D=EB=90=9C=20?= =?UTF-8?q?=EB=AC=B8=EC=9D=98=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- src/assets/svg/inquiry/dot.svg | 3 + src/assets/svg/inquiry/write-inquiry.svg | 44 ++++++++++++ .../Inquiry/{ => Inquiry}/Inquiry.module.scss | 18 +++-- .../DataTable/DataTable.module.scss | 0 .../components/DataTable/DataTable.tsx | 2 +- .../{ => Inquiry}/hooks/useInquiryList.ts | 0 src/pages/Inquiry/{ => Inquiry}/index.tsx | 48 ++++++++++--- .../SearchBar/SearchBar.module.scss | 67 ------------------- .../components/SearchBar/SearchInput.tsx | 24 ------- src/pages/Setting/UserSetting/index.tsx | 2 +- 11 files changed, 102 insertions(+), 110 deletions(-) create mode 100644 src/assets/svg/inquiry/dot.svg create mode 100644 src/assets/svg/inquiry/write-inquiry.svg rename src/pages/Inquiry/{ => Inquiry}/Inquiry.module.scss (91%) rename src/pages/Inquiry/{ => Inquiry}/components/DataTable/DataTable.module.scss (100%) rename src/pages/Inquiry/{ => Inquiry}/components/DataTable/DataTable.tsx (98%) rename src/pages/Inquiry/{ => Inquiry}/hooks/useInquiryList.ts (100%) rename src/pages/Inquiry/{ => Inquiry}/index.tsx (64%) delete mode 100644 src/pages/Inquiry/components/SearchBar/SearchBar.module.scss delete mode 100644 src/pages/Inquiry/components/SearchBar/SearchInput.tsx diff --git a/src/App.tsx b/src/App.tsx index 5405364b..a6ac4be5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,8 @@ import Setting from 'pages/Setting/UserSetting'; import IdChange from 'pages/Setting/UserSetting/IdChange'; import AuthRoute from 'components/common/AuthRoute'; import Withdrawal from 'pages/Setting/Withdrawal'; -import Inquiry from 'pages/Inquiry'; +import Inquiry from 'pages/Inquiry/Inquiry'; +import Inquire from 'pages/Inquiry/Inquire'; import Notice from 'pages/Notice'; import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin'; import NaverLogin from 'pages/Auth/OAuth/NaverLogin'; @@ -31,6 +32,7 @@ export default function App(): JSX.Element { } /> } /> } /> + } /> } /> }> diff --git a/src/assets/svg/inquiry/dot.svg b/src/assets/svg/inquiry/dot.svg new file mode 100644 index 00000000..c9fe51d1 --- /dev/null +++ b/src/assets/svg/inquiry/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/inquiry/write-inquiry.svg b/src/assets/svg/inquiry/write-inquiry.svg new file mode 100644 index 00000000..3b7b1de4 --- /dev/null +++ b/src/assets/svg/inquiry/write-inquiry.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss similarity index 91% rename from src/pages/Inquiry/Inquiry.module.scss rename to src/pages/Inquiry/Inquiry/Inquiry.module.scss index f2085aa4..53255b2a 100644 --- a/src/pages/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -33,6 +33,7 @@ $disabled: #c4c4c4; font-size: 32px; font-weight: 700; margin: 160px 0 52px 0; + cursor: pointer; } &__link { @@ -42,10 +43,7 @@ $disabled: #c4c4c4; & > * { width: 104px; margin-bottom: 24px; - - &[attribute*="selected"] { - color: $highlight - } + position: relative; } &-inquire { @@ -82,6 +80,16 @@ $disabled: #c4c4c4; color: $normal; } +.selected{ + color: $highlight; +} + +.dot { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -12px; +} .searchData { width: 720px; @@ -90,7 +98,7 @@ $disabled: #c4c4c4; } .searchBar { - border-bottom: 1px solid #ff7f23; + border-bottom: 1px solid $highlight; width: 720px; height: 252px; margin-left: -1px; diff --git a/src/pages/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss similarity index 100% rename from src/pages/Inquiry/components/DataTable/DataTable.module.scss rename to src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss diff --git a/src/pages/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx similarity index 98% rename from src/pages/Inquiry/components/DataTable/DataTable.tsx rename to src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx index 04ebcefc..ad32bc43 100644 --- a/src/pages/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx @@ -5,7 +5,7 @@ import React, { useCallback, } from 'react'; import { ReactComponent as Arrow } from 'assets/svg/common/arrow.svg'; -import useInquiryList from 'pages/Inquiry/hooks/useInquiryList'; +import useInquiryList from 'pages/Inquiry/Inquiry/hooks/useInquiryList'; import { InquiryContent } from 'api/inquiry/entity'; import styles from './DataTable.module.scss'; diff --git a/src/pages/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts similarity index 100% rename from src/pages/Inquiry/hooks/useInquiryList.ts rename to src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts diff --git a/src/pages/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx similarity index 64% rename from src/pages/Inquiry/index.tsx rename to src/pages/Inquiry/Inquiry/index.tsx index f3fb068d..8c22266d 100644 --- a/src/pages/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect } from 'react'; import { Link, useParams, useNavigate } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; +import { ReactComponent as Dot } from 'assets/svg/inquiry/dot.svg'; import { useQueryClient } from 'react-query'; -import SearchInput from './components/SearchBar/SearchInput'; -import DataTable from './components/DataTable/DataTable'; +import SearchInput from 'pages/Inquiry/Inquiry/components/SearchBar/SearchInput'; +import DataTable from 'pages/Inquiry/Inquiry/components/DataTable/DataTable'; import styles from './Inquiry.module.scss'; const useSearchForm = () => { @@ -31,17 +32,33 @@ export default function Inquiry(): JSX.Element { const { text, handleChange } = useSearchForm(); const title = '문의하기'; + const allInquiryLinkTitle = '전체 문의 내역'; + const myInquiryLinkTitle = '나의 문의 내역'; const inquireLinkTitle = '문의하러 가기'; return (
-

{title}

+
{ + navigate('/inquiry/all'); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + navigate('/inquiry/all'); + } + }} + role="button" + tabIndex={0} + > + {title} +
{ navigate('/inquiry/all'); }} @@ -53,13 +70,14 @@ export default function Inquiry(): JSX.Element { role="button" tabIndex={0} > - - 전체 문의 내역 + {selectedTab === 'all' ? : null} + + {allInquiryLinkTitle}
{ navigate('/inquiry/my'); }} @@ -71,10 +89,9 @@ export default function Inquiry(): JSX.Element { role="button" tabIndex={0} > - -
- 나의 문의 내역 -
+ {selectedTab === 'my' ? : null} + + {myInquiryLinkTitle}
@@ -82,7 +99,16 @@ export default function Inquiry(): JSX.Element {
문의하기
- + From aa60f2be96bf601878606835e4abfb3bfee8ff8e Mon Sep 17 00:00:00 2001 From: JungHaeSung Date: Thu, 12 Oct 2023 23:50:57 +0900 Subject: [PATCH 07/44] =?UTF-8?q?refactor:=20DataTable=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 1 + src/api/inquiry/index.ts | 11 +- src/pages/Inquiry/Inquire/Inquire.module.scss | 54 ++++++++ src/pages/Inquiry/Inquire/index.tsx | 54 ++++++++ src/pages/Inquiry/Inquiry/Inquiry.module.scss | 19 +-- .../DataTable/DataTable.module.scss | 25 +++- .../components/DataTable/DataTable.tsx | 63 ++++----- .../SearchBar/SearchBar.module.scss | 67 ++++++++++ .../components/SearchBar/SearchInput.tsx | 31 +++++ .../Inquiry/Inquiry/hooks/useInquiryList.ts | 13 +- src/pages/Inquiry/Inquiry/index.tsx | 120 +++++++++++------- 11 files changed, 345 insertions(+), 113 deletions(-) create mode 100644 src/pages/Inquiry/Inquire/Inquire.module.scss create mode 100644 src/pages/Inquiry/Inquire/index.tsx create mode 100644 src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss create mode 100644 src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx diff --git a/src/App.tsx b/src/App.tsx index a6ac4be5..d877d9c5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,6 +32,7 @@ export default function App(): JSX.Element { } /> } /> } /> + } /> } /> } /> diff --git a/src/api/inquiry/index.ts b/src/api/inquiry/index.ts index 5be82705..282d2731 100644 --- a/src/api/inquiry/index.ts +++ b/src/api/inquiry/index.ts @@ -11,10 +11,13 @@ interface InquiryProps { const getInquiry = async ({ typePath, dateCursor, idCursor, size, }: InquiryProps) => { - const queryParams = `?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`; - - const { data } = await inquiryApi.get(`/inquiry${typePath}${queryParams}`); - return data; + try { + const queryParams = `${typePath}?dateCursor=${dateCursor}&idCursor=${idCursor}&size=${size}`; + const { data } = await inquiryApi.get(`/inquiry${queryParams}`); + return data; + } catch (error) { + return null; + } }; export default getInquiry; diff --git a/src/pages/Inquiry/Inquire/Inquire.module.scss b/src/pages/Inquiry/Inquire/Inquire.module.scss new file mode 100644 index 00000000..af23a654 --- /dev/null +++ b/src/pages/Inquiry/Inquire/Inquire.module.scss @@ -0,0 +1,54 @@ +$default: #222222; +$highlight: #ff7f23; +$back: white; +$normal: #666666; +$disabled: #c4c4c4; + +.container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + flex-direction: row; +} + +.box { + display: flex; + flex-direction: row; + width: 947px; +} + +.nav { + & > *{ + position: fixed; + } + + &__side-navigation { + width: 227px; + height: 100%; + } + + &__title { + color: $highlight; + font-size: 32px; + font-weight: 700; + margin: 160px 0 32px 0; + cursor: pointer; + } + + &nav__explain { + &-title { + color: $default; + font-size: 16px; + font-weight: 500; + line-height: 19.97px; + } + + &-smallTitle { + color: $normal; + font-size: 11px; + font-weight: 400; + line-height: 13.73px; + } + } +} diff --git a/src/pages/Inquiry/Inquire/index.tsx b/src/pages/Inquiry/Inquire/index.tsx new file mode 100644 index 00000000..558bbf89 --- /dev/null +++ b/src/pages/Inquiry/Inquire/index.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { ReactComponent as WriteInquiryIcon } from 'assets/svg/inquiry/write-inquiry.svg'; +import styles from './Inquire.module.scss'; + +export default function Inquiry(): JSX.Element { + const navigate = useNavigate(); + + const title = '문의하기'; + const explainTitle = '쩝쩝박사 이용 중에 생긴 불편한 점이나 문의사항을 등록해주세요.'; + const explainSmallTitle = '확인 후 순차적으로 답변 드리겠습니다.'; + + return ( +
+
+
+
{ + navigate('/inquiry/all'); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + navigate('/inquiry/all'); + } + }} + role="button" + tabIndex={0} + > + {title} +
+ +
+
+ +
+ +
+ {explainTitle} +
+ +
+ {explainSmallTitle} +
+
+
+ +
+ a +
+
+
+ ); +} diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index 53255b2a..77586ec4 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -104,8 +104,8 @@ $disabled: #c4c4c4; margin-left: -1px; display: flex; flex-direction: column; - justify-content: start; - align-items: end; + justify-content: flex-start; + align-items: flex-end; } .data { @@ -115,21 +115,6 @@ $disabled: #c4c4c4; flex-direction: column; position: relative; - // &::before { // dataTable 스크롤 시 linear-gradient 생성 - // content: ""; - // display: none; - // position: absolute; - // top: 0; - // height: 66px; - // width: 100%; - // background: linear-gradient(to bottom, rgba(85, 85, 85, 0.5), transparent); - // z-index: 2; - // } - - // &.scrolled::before { - // display: block; - // } - &__data-table { width: 720px; height: calc(100vh - 333px); diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss index 774ccea5..9a88d3cb 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss @@ -3,6 +3,29 @@ $highlight: #ff7f23; $back: white; $normal: #666666; +.table { + &__floor { + height: 2px; + width: 100%; + color: $highlight; + } +} + +// .linearGradient { +// content: ""; +// display: none; +// position: absolute; +// top: 0; +// height: 39px; +// width: 100%; +// background: linear-gradient(to bottom, rgba(85, 85, 85, 0.5), transparent); +// z-index: 2; + +// &scrolling { +// display: block; +// } +// } + .block { &__body { border-bottom: 1px solid #eeeeee; @@ -15,7 +38,7 @@ $normal: #666666; display: flex; flex-direction: column; - align-items: start; + align-items: flex-start; position: relative; &:hover { diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx index ad32bc43..a98c4169 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx @@ -12,35 +12,47 @@ import styles from './DataTable.module.scss'; export default function DataTable({ typePath }: { typePath: string }): JSX.Element { const [dateCursor, setDateCursor] = useState(null); const [idCursor, setIdCursor] = useState(0); - const { data: inquiryData, isLoading } = useInquiryList({ + const [allData, setAllData] = useState([]); + const { data: inquiryData, isLoading, refetchInquiryData } = useInquiryList({ typePath, dateCursor, idCursor, size: 10, }); - const [allData, setAllData] = useState( - inquiryData ? [...inquiryData.content] : [], - ); - const [expandedId, setExpandedId] = useState(null); + const loader = useRef(null); const noDataTitle = '문의 내역이 없습니다.'; const noAnswerTitle = '아직 답변이 없네요. 조금만 기다려주세요!'; + /* eslint-disable */ + useEffect(() => { // all, my, search params 바뀔 때 allData 초기화 + setAllData([]); + setDateCursor(null); + setIdCursor(0); + refetchInquiryData(); + }, [typePath]); + /* eslint-enable */ + + function toggleExpand(id: number) { + setExpandedId(expandedId === id ? null : id); + } + const handleKeyPress = (e: React.KeyboardEvent, id: number) => { if (e.key === 'Enter' || e.key === ' ') { - setExpandedId(expandedId === id ? null : id); + toggleExpand(id); } }; const loadMoreData = useCallback(() => { if (inquiryData && inquiryData.content.length > 0) { - const b = allData[allData.length - 1] === inquiryData.content[inquiryData.content.length - 1]; - const value = b ? allData : [...allData, ...inquiryData.content]; setDateCursor(inquiryData.content[inquiryData.content.length - 1].createdAt || null); setIdCursor(inquiryData.content[inquiryData.content.length - 1].id || 0); + refetchInquiryData(); + const b = allData[allData.length - 1] === inquiryData.content[inquiryData.content.length - 1]; + const value = b ? allData : [...allData, ...inquiryData.content]; setAllData(value); } - }, [inquiryData, allData]); + }, [refetchInquiryData, inquiryData, allData]); useEffect(() => { function handleObserver(entities: IntersectionObserverEntry[]) { @@ -50,39 +62,12 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme } } - const observer = new IntersectionObserver(handleObserver, { threshold: 1 }); + const observer = new IntersectionObserver(handleObserver, { threshold: 0.5 }); if (loader.current) { observer.observe(loader.current); } }, [loadMoreData, isLoading]); - // useEffect(() => { // DataTable 스크롤 시 linear-gradient 생성 - // const dataDiv = document.querySelector('.data'); - // const dataTable = document.querySelector('.data__data-table'); - // console.log(dataDiv); - // console.log(dataTable); - - // function handleScroll() { - // if (dataDiv) { - // if (dataTable && dataTable.scrollTop > 0) { - // dataDiv.classList.add('scrolled'); - // } else { - // dataDiv.classList.remove('scrolled'); - // } - // } - // } - - // if (dataTable) { - // dataTable.addEventListener('scroll', handleScroll); - // } - - // return () => { - // if (dataTable) { - // dataTable.removeEventListener('scroll', handleScroll); - // } - // }; - // }, [inquiryData]); - return (
{allData && allData.length === 0 ? ( @@ -95,7 +80,7 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme
setExpandedId(expandedId === item.id ? null : item.id)} + onClick={() => toggleExpand(item.id)} onKeyPress={(e) => handleKeyPress(e, item.id)} role="button" tabIndex={0} @@ -131,7 +116,7 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme )) ) )} -
+
); } diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss new file mode 100644 index 00000000..9ef358e7 --- /dev/null +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss @@ -0,0 +1,67 @@ +@use "src/utils/styles/mediaQuery.scss" as media; + +// .search { +// width: 100%; +// height: 100vh; +// font-size: 32px; + +// &__recommend { +// word-break: keep-all; +// height: 80px; +// padding-top: 168px; +// padding-left: 30px; +// font-size: 32px; +// font-weight: 300; +// line-height: 40px; +// white-space: pre-wrap; +// color: #000000; + +// strong { +// color: #ff7f23; +// } + +// @include media.media-breakpoint-down(mobile) { +// max-width: 767px; +// padding-top: 64px; +// margin: 0 auto; +// } +// } +// } + +.search-bar { + display: flex; + border-radius: 24px; + border: none; + width: 395px; + height: 48px; + align-items: center; + margin-top: 152px; + background: #ffffff; + box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); + padding-left: 15px; + + &__input { + width: 100%; + height: 15px; + border: none; + font-size: 14px; + line-height: 15px; + + &::placeholder { + color: #666666; + font-size: 12px; + } + + &:focus { + outline: none; + } + } + + &__icon { + width: 18px; + height: 18px; + padding-left: 15px; + padding-right: 14px; + cursor: pointer; + } +} diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx new file mode 100644 index 00000000..9ba5c6b4 --- /dev/null +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx @@ -0,0 +1,31 @@ +import { ReactComponent as LensIcon } from 'assets/svg/search/lens.svg'; +import styles from './SearchBar.module.scss'; + +interface Props { + text: string, + onChange: (e: React.ChangeEvent) => void + onLensIconClick: () => void; +} + +export default function SearchInput({ + text, onChange, onLensIconClick, +}: Props) { + return ( + + ); +} diff --git a/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts index 3822f769..f7b3cd24 100644 --- a/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts +++ b/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts @@ -1,5 +1,5 @@ import getInquiry from 'api/inquiry'; -import { useQuery } from 'react-query'; +import { useQuery, useQueryClient } from 'react-query'; interface InquiryProps { typePath: string; @@ -11,13 +11,20 @@ interface InquiryProps { const useInquiryList = ({ typePath, dateCursor, idCursor, size, }: InquiryProps) => { - const queryKey = ['Inquiry', dateCursor, idCursor, size]; + const queryKey = ['Inquiry', typePath, dateCursor, idCursor, size]; + const queryClient = useQueryClient(); const { isLoading, isError, data } = useQuery(queryKey, () => getInquiry({ typePath, dateCursor, idCursor, size, })); + async function refetchInquiryData() { + if (!data) { + await queryClient.invalidateQueries(queryKey); + } + } + return { - isLoading, isError, data, + isLoading, isError, data, refetchInquiryData, }; }; diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index 8c22266d..2d9637a3 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -1,8 +1,7 @@ import React, { useState, useEffect } from 'react'; -import { Link, useParams, useNavigate } from 'react-router-dom'; +import { Link, useNavigate, useLocation } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; import { ReactComponent as Dot } from 'assets/svg/inquiry/dot.svg'; -import { useQueryClient } from 'react-query'; import SearchInput from 'pages/Inquiry/Inquiry/components/SearchBar/SearchInput'; import DataTable from 'pages/Inquiry/Inquiry/components/DataTable/DataTable'; import styles from './Inquiry.module.scss'; @@ -18,17 +17,45 @@ const useSearchForm = () => { }; }; -export default function Inquiry(): JSX.Element { - const { type } = useParams(); // 'all' 또는 'my' - const [selectedTab, setSelectedTab] = useState(type); - const navigate = useNavigate(); - const queryClient = useQueryClient(); +interface NavigationLink { + path: string; + text: string; + isSelected: boolean; + onClick: () => void; +} - useEffect(() => { - setSelectedTab(type); +function createNavigationLink(link: NavigationLink) { + const { + path, text, isSelected, onClick, + } = link; - queryClient.invalidateQueries('Inquiry'); - }, [type, queryClient]); + return ( +
{ + if (e.key === 'Enter' || e.key === ' ') { + onClick(); + } + }} + role="button" + tabIndex={0} + > + {isSelected ? : null} + + {text} + +
+ ); +} + +export default function Inquiry(): JSX.Element { + const { pathname } = useLocation(); + const pathParts = pathname.split('/'); + const type = pathParts[2]; // 'all' 또는 'my' 또는 'search' + const [typePath, setTypePath] = useState(''); + const [selectedTab, setSelectedTab] = useState(type); + const navigate = useNavigate(); const { text, handleChange } = useSearchForm(); const title = '문의하기'; @@ -36,6 +63,25 @@ export default function Inquiry(): JSX.Element { const myInquiryLinkTitle = '나의 문의 내역'; const inquireLinkTitle = '문의하러 가기'; + /* eslint-disable */ + useEffect(() => { // typePath는 서버에 데이터를 요청할 때 사용 + setSelectedTab(type); + switch (type) { + case 'all': + setTypePath(''); + break; + case 'my': + setTypePath('/me'); + break; + case 'search': + setTypePath(`/search/${text}`); + break; + default: + break; + } + }, [type]); + /* eslint-enable */ + return (
@@ -57,43 +103,18 @@ export default function Inquiry(): JSX.Element {
-
{ - navigate('/inquiry/all'); - }} - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - navigate('/inquiry/all'); - } - }} - role="button" - tabIndex={0} - > - {selectedTab === 'all' ? : null} - - {allInquiryLinkTitle} - -
- -
{ - navigate('/inquiry/my'); - }} - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - navigate('/inquiry/my'); - } - }} - role="button" - tabIndex={0} - > - {selectedTab === 'my' ? : null} - - {myInquiryLinkTitle} - -
+ {createNavigationLink({ + path: '/inquiry/all', + text: allInquiryLinkTitle, + isSelected: selectedTab === 'all', + onClick: () => navigate('/inquiry/all'), + })} + {createNavigationLink({ + path: '/inquiry/my', + text: myInquiryLinkTitle, + isSelected: selectedTab === 'my', + onClick: () => navigate('/inquiry/my'), + })}
- +
From 8d853379cbf93346654bf0aea0a889a24f750e4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Wed, 18 Oct 2023 22:10:09 +0900 Subject: [PATCH 08/44] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95=20cs?= =?UTF-8?q?s=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataTable/DataTable.module.scss | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss index 9a88d3cb..3b8738a6 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss @@ -11,21 +11,6 @@ $normal: #666666; } } -// .linearGradient { -// content: ""; -// display: none; -// position: absolute; -// top: 0; -// height: 39px; -// width: 100%; -// background: linear-gradient(to bottom, rgba(85, 85, 85, 0.5), transparent); -// z-index: 2; - -// &scrolling { -// display: block; -// } -// } - .block { &__body { border-bottom: 1px solid #eeeeee; @@ -50,7 +35,7 @@ $normal: #666666; max-height: 1000px; } - &-extender { + &-expander { position: absolute; top: 14px; right: 20px; @@ -63,12 +48,10 @@ $normal: #666666; &__title { font-size: 16px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + max-height: 39px; margin: 0 0 8px 0; padding: 0; + word-break: break-all; } &__info { From 9377384567e41354339a5e07ef797e9cf496bbec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Wed, 18 Oct 2023 22:34:26 +0900 Subject: [PATCH 09/44] =?UTF-8?q?refactor:=20lint=20=EC=97=90=EB=9F=AC=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/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.tsx b/src/App.tsx index 5fc9d3a3..18641a85 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,6 +34,7 @@ export default function App(): JSX.Element { }> } /> } /> + } /> } /> } /> } /> From 097de5fe0125a6c34aa95aed67800ab818768a81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Wed, 18 Oct 2023 22:43:39 +0900 Subject: [PATCH 10/44] =?UTF-8?q?refactor:=20stylelint=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquire/Inquire.module.scss | 4 ++-- src/pages/Inquiry/Inquiry/Inquiry.module.scss | 8 ++++---- .../Inquiry/components/DataTable/DataTable.module.scss | 3 +-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/Inquiry/Inquire/Inquire.module.scss b/src/pages/Inquiry/Inquire/Inquire.module.scss index af23a654..63494371 100644 --- a/src/pages/Inquiry/Inquire/Inquire.module.scss +++ b/src/pages/Inquiry/Inquire/Inquire.module.scss @@ -19,7 +19,7 @@ $disabled: #c4c4c4; } .nav { - & > *{ + & > * { position: fixed; } @@ -32,7 +32,7 @@ $disabled: #c4c4c4; color: $highlight; font-size: 32px; font-weight: 700; - margin: 160px 0 32px 0; + margin: 160px 0 32px; cursor: pointer; } diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index 77586ec4..1eed57b9 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -19,7 +19,7 @@ $disabled: #c4c4c4; } .nav { - & > *{ + & > * { position: fixed; } @@ -32,7 +32,7 @@ $disabled: #c4c4c4; color: $highlight; font-size: 32px; font-weight: 700; - margin: 160px 0 52px 0; + margin: 160px 0 52px; cursor: pointer; } @@ -64,7 +64,7 @@ $disabled: #c4c4c4; box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); margin-top: 48px; - &>:first-child { + & > :first-child { margin-right: 5px; } @@ -80,7 +80,7 @@ $disabled: #c4c4c4; color: $normal; } -.selected{ +.selected { color: $highlight; } diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss index 3b8738a6..69d77a5e 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss @@ -20,7 +20,6 @@ $normal: #666666; overflow: hidden; transition: height 0.7s ease-in-out; cursor: pointer; - display: flex; flex-direction: column; align-items: flex-start; @@ -49,7 +48,7 @@ $normal: #666666; &__title { font-size: 16px; max-height: 39px; - margin: 0 0 8px 0; + margin: 0 0 8px; padding: 0; word-break: break-all; } From dbfce2033efd19286049f17ceda577040e9b759e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Thu, 19 Oct 2023 00:04:50 +0900 Subject: [PATCH 11/44] =?UTF-8?q?style:=20=EB=B0=98=EC=9D=91=ED=98=95=20cs?= =?UTF-8?q?s=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquiry/Inquiry.module.scss | 133 +++++++++++++----- .../components/DataTable/DataTable.tsx | 23 ++- .../SearchBar/SearchBar.module.scss | 9 +- .../components/SearchBar/SearchInput.tsx | 6 +- src/pages/Inquiry/Inquiry/index.tsx | 30 ++-- 5 files changed, 139 insertions(+), 62 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index 1eed57b9..137da564 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -5,27 +5,45 @@ $normal: #666666; $disabled: #c4c4c4; .container { - width: 100%; - height: 100%; + width: calc(100vw - 100px); + height: 100vh; display: flex; justify-content: center; flex-direction: row; + margin-left: 100px; + + @media (max-width: 576px) { // 모바일 브레이크 포인트 + width: 100vw; + margin-left: 0; + } } .box { + width: 947px; display: flex; flex-direction: row; - width: 947px; -} + justify-content: center; + + @media (max-width: 1148px) { // 메뉴 이동 브레이크 포인트 + width: 720px; + margin-left: 0; + } + + @media (max-width: 822px) { + width: calc(100vw - 100px); + } -.nav { - & > * { - position: fixed; + @media (max-width: 576px) { // 모바일 브레이크 포인트 + width: 100%; } +} + +.menu { + width: 227px; + height: 100%; - &__side-navigation { - width: 227px; - height: 100%; + @media (max-width: 1148px) { + display: none; } &__title { @@ -75,7 +93,7 @@ $disabled: #c4c4c4; } } -.link-no-underline { +.noUnderline { text-decoration: none; color: $normal; } @@ -91,40 +109,79 @@ $disabled: #c4c4c4; left: -12px; } -.searchData { +.data { width: 720px; display: flex; - flex-direction: column; + flex-flow: column wrap; + align-items: center; + margin: 0 auto; + + @media (max-width: 576px) { + width: 100%; + } + + &__searchBar { + width: 100%; + height: 252px; + border-bottom: 1px solid $highlight; + display: flex; + flex-direction: column; + align-items: flex-end; + position: relative; + z-index: 2; + + @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 + background: none; + border-bottom: none; + height: 0; + align-items: center; + } + + &-component { + margin-top: 152px; + + @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 + margin-top: 0; + position: fixed; + top: 24px; + z-index: 1; + } + } + } + + &__dataTable { + width: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + position: relative; + height: calc(100vh - 253px); + + @media (max-width: 576px) { // 사이드 네비 브레이크 포인트에 따른 height 변경 + height: calc(100vh - 80px); + } + + &-component { + overflow-y: auto; + } + } } -.searchBar { - border-bottom: 1px solid $highlight; - width: 720px; - height: 252px; - margin-left: -1px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-end; +::-webkit-scrollbar { + width: 3px; + height: 3px; } -.data { - width: 720px; - flex-grow: 1; - display: flex; - flex-direction: column; - position: relative; +::-webkit-scrollbar:hover { + width: 5px; + height: 5px; +} - &__data-table { - width: 720px; - height: calc(100vh - 333px); - overflow-y: auto; - } +::-webkit-scrollbar-track { + background-color: transparent; } -.loader { - height: 40px; - display: flex; - justify-content: center; - align-items: center; +::-webkit-scrollbar-thumb { + background-color: $highlight; + border-radius: 8px; } diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx index a98c4169..b029a334 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx @@ -9,6 +9,25 @@ import useInquiryList from 'pages/Inquiry/Inquiry/hooks/useInquiryList'; import { InquiryContent } from 'api/inquiry/entity'; import styles from './DataTable.module.scss'; +function ClampText({ text }: { text: string }): JSX.Element { + const [isClamped, setIsClamped] = useState(false); + const textRef = useRef(null); + + useEffect(() => { + if (textRef.current) { + const isOverflowing = textRef.current.scrollHeight > textRef.current.offsetHeight; + setIsClamped(isOverflowing); + } + }, [text]); + + return ( +
+ {text} + {isClamped && '...'} +
+ ); +} + export default function DataTable({ typePath }: { typePath: string }): JSX.Element { const [dateCursor, setDateCursor] = useState(null); const [idCursor, setIdCursor] = useState(0); @@ -87,14 +106,14 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme >

- {item.title} +

{new Date(item.createdAt).toLocaleDateString()} | {item.createdBy} - + diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss index 9ef358e7..c63c8633 100644 --- a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss @@ -1,4 +1,4 @@ -@use "src/utils/styles/mediaQuery.scss" as media; +// @use "src/utils/styles/mediaQuery.scss" as media; // .search { // width: 100%; @@ -28,14 +28,13 @@ // } // } -.search-bar { +.searchBar { + width: 395px; + height: 48px; display: flex; border-radius: 24px; border: none; - width: 395px; - height: 48px; align-items: center; - margin-top: 152px; background: #ffffff; box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); padding-left: 15px; diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx index 9ba5c6b4..f36206c0 100644 --- a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx @@ -11,9 +11,9 @@ export default function SearchInput({ text, onChange, onLensIconClick, }: Props) { return ( -
@@ -85,9 +85,9 @@ export default function Inquiry(): JSX.Element { return (
-
+
{ navigate('/inquiry/all'); }} @@ -102,7 +102,7 @@ export default function Inquiry(): JSX.Element { {title}
-
+
{createNavigationLink({ path: '/inquiry/all', text: allInquiryLinkTitle, @@ -119,7 +119,7 @@ export default function Inquiry(): JSX.Element {
-
-
- navigate(`/inquiry/search/${text}`)} - /> +
+
+
+ navigate(`/inquiry/search/${text}`)} + /> +
-
-
+
+
From 413ee239aa5c350dfbb97ee7ffd4dcb35ddea1f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Tue, 24 Oct 2023 10:42:47 +0900 Subject: [PATCH 12/44] =?UTF-8?q?refactor:=20=ED=81=B4=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquire/Inquire.module.scss | 16 +++++----------- src/pages/Inquiry/Inquire/index.tsx | 14 +++++++------- src/pages/Inquiry/Inquiry/Inquiry.module.scss | 12 ++++++------ .../components/DataTable/DataTable.module.scss | 6 +++--- .../Inquiry/components/DataTable/DataTable.tsx | 8 ++++---- .../components/SearchBar/SearchBar.module.scss | 2 +- .../Inquiry/components/SearchBar/SearchInput.tsx | 6 +++--- src/pages/Inquiry/Inquiry/index.tsx | 12 ++++++------ 8 files changed, 35 insertions(+), 41 deletions(-) diff --git a/src/pages/Inquiry/Inquire/Inquire.module.scss b/src/pages/Inquiry/Inquire/Inquire.module.scss index 63494371..a56c1a89 100644 --- a/src/pages/Inquiry/Inquire/Inquire.module.scss +++ b/src/pages/Inquiry/Inquire/Inquire.module.scss @@ -18,15 +18,9 @@ $disabled: #c4c4c4; width: 947px; } -.nav { - & > * { - position: fixed; - } - - &__side-navigation { - width: 227px; - height: 100%; - } +.menu { + width: 227px; + height: 100%; &__title { color: $highlight; @@ -36,7 +30,7 @@ $disabled: #c4c4c4; cursor: pointer; } - &nav__explain { + &__explain { &-title { color: $default; font-size: 16px; @@ -44,7 +38,7 @@ $disabled: #c4c4c4; line-height: 19.97px; } - &-smallTitle { + &--small-title { color: $normal; font-size: 11px; font-weight: 400; diff --git a/src/pages/Inquiry/Inquire/index.tsx b/src/pages/Inquiry/Inquire/index.tsx index 558bbf89..75d840b3 100644 --- a/src/pages/Inquiry/Inquire/index.tsx +++ b/src/pages/Inquiry/Inquire/index.tsx @@ -13,9 +13,9 @@ export default function Inquiry(): JSX.Element { return (
-
+
{ navigate('/inquiry/all'); }} @@ -30,22 +30,22 @@ export default function Inquiry(): JSX.Element { {title}
-
-
+
+
-
+
{explainTitle}
-
+
{explainSmallTitle}
-
+
a
diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index 137da564..dcb4af62 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -64,7 +64,7 @@ $disabled: #c4c4c4; position: relative; } - &-inquire { + &--inquire { display: flex; align-items: center; justify-content: center; @@ -93,7 +93,7 @@ $disabled: #c4c4c4; } } -.noUnderline { +.no-underline { text-decoration: none; color: $normal; } @@ -120,7 +120,7 @@ $disabled: #c4c4c4; width: 100%; } - &__searchBar { + &__search-bar { width: 100%; height: 252px; border-bottom: 1px solid $highlight; @@ -137,7 +137,7 @@ $disabled: #c4c4c4; align-items: center; } - &-component { + &--component { margin-top: 152px; @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 @@ -149,7 +149,7 @@ $disabled: #c4c4c4; } } - &__dataTable { + &__data-table { width: 100%; flex-grow: 1; display: flex; @@ -161,7 +161,7 @@ $disabled: #c4c4c4; height: calc(100vh - 80px); } - &-component { + &--component { overflow-y: auto; } } diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss index 69d77a5e..ada5c67a 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.module.scss @@ -59,7 +59,7 @@ $normal: #666666; margin-top: 0; } - &__answerBox { + &__answer-box { width: 100%; height: auto; box-sizing: border-box; @@ -69,13 +69,13 @@ $normal: #666666; padding: 16px; font-size: 16px; - &-noAnswer { + &--no-answer { opacity: 0.3; } } } -.noData { +.no-data { color: $normal; font-size: 16px; text-align: center; diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx index b029a334..a940a328 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx @@ -90,7 +90,7 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme return (
{allData && allData.length === 0 ? ( -
+
{noDataTitle}
) : ( @@ -113,18 +113,18 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme | {item.createdBy} - + {expandedId === item.id && (
{item.answer ? ( -

+

{item.answer}

) : ( -

+

{noAnswerTitle}

)} diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss index c63c8633..788dcbd9 100644 --- a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.module.scss @@ -28,7 +28,7 @@ // } // } -.searchBar { +.search-bar { width: 395px; height: 48px; display: flex; diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx index f36206c0..9ba5c6b4 100644 --- a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx @@ -11,9 +11,9 @@ export default function SearchInput({ text, onChange, onLensIconClick, }: Props) { return ( -
@@ -119,7 +119,7 @@ export default function Inquiry(): JSX.Element {
-
-
+
+
-
-
+
+
From 6b1fc77c7c6a5b74eb15f1541720cbfb188abcac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Tue, 24 Oct 2023 17:21:40 +0900 Subject: [PATCH 13/44] =?UTF-8?q?refactor:=20=ED=83=80=EC=9D=B4=ED=8B=80?= =?UTF-8?q?=EC=9D=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Inquiry/components/DataTable/DataTable.tsx | 7 ++----- src/pages/Inquiry/Inquiry/index.tsx | 12 ++++-------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx index a940a328..3bad6406 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx @@ -40,9 +40,6 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme const loader = useRef(null); - const noDataTitle = '문의 내역이 없습니다.'; - const noAnswerTitle = '아직 답변이 없네요. 조금만 기다려주세요!'; - /* eslint-disable */ useEffect(() => { // all, my, search params 바뀔 때 allData 초기화 setAllData([]); @@ -91,7 +88,7 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme
{allData && allData.length === 0 ? (
- {noDataTitle} + 문의 내역이 없습니다.
) : ( allData && ( @@ -125,7 +122,7 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme

) : (

- {noAnswerTitle} + 아직 답변이 없네요. 조금만 기다려주세요!

)}
diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index beb165dd..795e7b50 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -58,10 +58,6 @@ export default function Inquiry(): JSX.Element { const navigate = useNavigate(); const { text, handleChange } = useSearchForm(); - const title = '문의하기'; - const allInquiryLinkTitle = '전체 문의 내역'; - const myInquiryLinkTitle = '나의 문의 내역'; - const inquireLinkTitle = '문의하러 가기'; /* eslint-disable */ useEffect(() => { // typePath는 서버에 데이터를 요청할 때 사용 @@ -99,19 +95,19 @@ export default function Inquiry(): JSX.Element { role="button" tabIndex={0} > - {title} + 문의하기
{createNavigationLink({ path: '/inquiry/all', - text: allInquiryLinkTitle, + text: '전체 문의 내역', isSelected: selectedTab === 'all', onClick: () => navigate('/inquiry/all'), })} {createNavigationLink({ path: '/inquiry/my', - text: myInquiryLinkTitle, + text: '나의 문의 내역', isSelected: selectedTab === 'my', onClick: () => navigate('/inquiry/my'), })} @@ -132,7 +128,7 @@ export default function Inquiry(): JSX.Element { tabIndex={0} > - {inquireLinkTitle} + 문의하러 가기 From e87bf5fd5b8a1ea3e89c088ca37ea6a0b4ec1346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Tue, 24 Oct 2023 17:31:45 +0900 Subject: [PATCH 14/44] =?UTF-8?q?refactor:=20=ED=83=80=EC=9D=B4=ED=8B=80?= =?UTF-8?q?=EC=9D=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquire/index.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/pages/Inquiry/Inquire/index.tsx b/src/pages/Inquiry/Inquire/index.tsx index 75d840b3..f0019e68 100644 --- a/src/pages/Inquiry/Inquire/index.tsx +++ b/src/pages/Inquiry/Inquire/index.tsx @@ -6,10 +6,6 @@ import styles from './Inquire.module.scss'; export default function Inquiry(): JSX.Element { const navigate = useNavigate(); - const title = '문의하기'; - const explainTitle = '쩝쩝박사 이용 중에 생긴 불편한 점이나 문의사항을 등록해주세요.'; - const explainSmallTitle = '확인 후 순차적으로 답변 드리겠습니다.'; - return (
@@ -27,7 +23,7 @@ export default function Inquiry(): JSX.Element { role="button" tabIndex={0} > - {title} + 문의하기
@@ -36,11 +32,11 @@ export default function Inquiry(): JSX.Element {
- {explainTitle} + 쩝쩝박사 이용 중에 생긴 불편한 점이나 문의사항을 등록해주세요.
- {explainSmallTitle} + 확인 후 순차적으로 답변 드리겠습니다.
From 20b9a35029fb69742946b17efd28cf4165f5689f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 27 Oct 2023 22:04:19 +0900 Subject: [PATCH 15/44] =?UTF-8?q?refactor:=20InquirySelectButton=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InquirySelectButton.module.scss | 31 +++++++++ .../components/InquirySelectButton/index.tsx | 40 ++++++++++++ src/pages/Inquiry/Inquiry/Inquiry.module.scss | 24 +------ src/pages/Inquiry/Inquiry/index.tsx | 63 +++++-------------- 4 files changed, 89 insertions(+), 69 deletions(-) create mode 100644 src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss create mode 100644 src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx diff --git a/src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss b/src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss new file mode 100644 index 00000000..24398a29 --- /dev/null +++ b/src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss @@ -0,0 +1,31 @@ +$default: #222222; +$highlight: #ff7f23; +$back: white; +$normal: #666666; +$disabled: #c4c4c4; + +.btn { + display: block; + width: 104px; + margin-bottom: 24px; + padding: 0; + border: 0; + background-color: transparent; + font-size: 18px; + font-weight: 500; + position: relative; + color: $disabled; + + &--selected { + color: $highlight; + } + + &__dot { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -14px; + } +} + + diff --git a/src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx b/src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx new file mode 100644 index 00000000..b3686e4f --- /dev/null +++ b/src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import cn from 'utils/ts/classNames'; +import { ReactComponent as Dot } from 'assets/svg/inquiry/dot.svg'; +import styles from './InquirySelectButton.module.scss'; + +interface InquirySelect { + name: string; + path: string; + text: string; + isSelected: boolean; +} + +export default function InquirySelectButton(link: InquirySelect): JSX.Element { + const { + name, path, text, isSelected, + } = link; + const navigate = useNavigate(); + + return ( + + ); +} diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index dcb4af62..f41e7731 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -54,15 +54,11 @@ $disabled: #c4c4c4; cursor: pointer; } - &__link { + &__select { padding-top: 17px; margin-left: 16px; + } - & > * { - width: 104px; - margin-bottom: 24px; - position: relative; - } &--inquire { display: flex; @@ -93,22 +89,6 @@ $disabled: #c4c4c4; } } -.no-underline { - text-decoration: none; - color: $normal; -} - -.selected { - color: $highlight; -} - -.dot { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -12px; -} - .data { width: 720px; display: flex; diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index 795e7b50..1fc4e2f1 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; -import { Link, useNavigate, useLocation } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; +// import cn from 'utils/ts/classNames'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; -import { ReactComponent as Dot } from 'assets/svg/inquiry/dot.svg'; +import InquirySelectButton from 'pages/Inquiry/Inquire/components/InquirySelectButton'; import SearchInput from 'pages/Inquiry/Inquiry/components/SearchBar/SearchInput'; import DataTable from 'pages/Inquiry/Inquiry/components/DataTable/DataTable'; import styles from './Inquiry.module.scss'; @@ -17,38 +18,6 @@ const useSearchForm = () => { }; }; -interface NavigationLink { - path: string; - text: string; - isSelected: boolean; - onClick: () => void; -} - -function createNavigationLink(link: NavigationLink) { - const { - path, text, isSelected, onClick, - } = link; - - return ( -
{ - if (e.key === 'Enter' || e.key === ' ') { - onClick(); - } - }} - role="button" - tabIndex={0} - > - {isSelected ? : null} - - {text} - -
- ); -} - export default function Inquiry(): JSX.Element { const { pathname } = useLocation(); const pathParts = pathname.split('/'); @@ -98,19 +67,19 @@ export default function Inquiry(): JSX.Element { 문의하기
-
- {createNavigationLink({ - path: '/inquiry/all', - text: '전체 문의 내역', - isSelected: selectedTab === 'all', - onClick: () => navigate('/inquiry/all'), - })} - {createNavigationLink({ - path: '/inquiry/my', - text: '나의 문의 내역', - isSelected: selectedTab === 'my', - onClick: () => navigate('/inquiry/my'), - })} +
+ +
From 7c81ce00c714889f36e7e0c1ffbd92d6fca5e954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 27 Oct 2023 23:49:20 +0900 Subject: [PATCH 19/44] =?UTF-8?q?refactor:=20Inquire=EC=9D=98=20Explain=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SearchBar/{SearchInput.tsx => SearchBar.tsx} | 0 src/pages/Inquiry/Inquiry/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/pages/Inquiry/Inquiry/components/SearchBar/{SearchInput.tsx => SearchBar.tsx} (100%) diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.tsx similarity index 100% rename from src/pages/Inquiry/Inquiry/components/SearchBar/SearchInput.tsx rename to src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.tsx diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index 1fc4e2f1..3f924f78 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -3,7 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom'; // import cn from 'utils/ts/classNames'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; import InquirySelectButton from 'pages/Inquiry/Inquire/components/InquirySelectButton'; -import SearchInput from 'pages/Inquiry/Inquiry/components/SearchBar/SearchInput'; +import SearchBar from 'pages/Inquiry/Inquiry/components/SearchBar/SearchBar'; import DataTable from 'pages/Inquiry/Inquiry/components/DataTable/DataTable'; import styles from './Inquiry.module.scss'; @@ -108,7 +108,7 @@ export default function Inquiry(): JSX.Element {
- navigate(`/inquiry/search/${text}`)} From a79bf8ccfb2d82ca808a6499d80d6633aff728fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 27 Oct 2023 23:50:14 +0900 Subject: [PATCH 20/44] =?UTF-8?q?refactor:=20=ED=81=B4=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=EB=AA=85,=20=ED=83=9C=EA=B7=B8=EB=AA=85=20=EC=BB=A8=EB=B2=A4?= =?UTF-8?q?=EC=85=98=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Inquiry/Inquire/Inquire.module.scss | 33 ++++++------ src/pages/Inquiry/Inquire/index.tsx | 8 +-- src/pages/Inquiry/Inquiry/Inquiry.module.scss | 51 +++++++++---------- src/pages/Inquiry/Inquiry/index.tsx | 16 +++--- 4 files changed, 52 insertions(+), 56 deletions(-) diff --git a/src/pages/Inquiry/Inquire/Inquire.module.scss b/src/pages/Inquiry/Inquire/Inquire.module.scss index a56c1a89..4781dae1 100644 --- a/src/pages/Inquiry/Inquire/Inquire.module.scss +++ b/src/pages/Inquiry/Inquire/Inquire.module.scss @@ -23,26 +23,29 @@ $disabled: #c4c4c4; height: 100%; &__title { - color: $highlight; + margin: 160px 0 32px; + padding: 0; + border: 0; + background-color: transparent; font-size: 32px; font-weight: 700; - margin: 160px 0 32px; + color: $highlight; cursor: pointer; } +} - &__explain { - &-title { - color: $default; - font-size: 16px; - font-weight: 500; - line-height: 19.97px; - } +.explain { + &__title { + color: $default; + font-size: 16px; + font-weight: 500; + line-height: 19.97px; + } - &--small-title { - color: $normal; - font-size: 11px; - font-weight: 400; - line-height: 13.73px; - } + &__small-title { + color: $normal; + font-size: 11px; + font-weight: 400; + line-height: 13.73px; } } diff --git a/src/pages/Inquiry/Inquire/index.tsx b/src/pages/Inquiry/Inquire/index.tsx index a4249541..47d0a5dc 100644 --- a/src/pages/Inquiry/Inquire/index.tsx +++ b/src/pages/Inquiry/Inquire/index.tsx @@ -28,7 +28,7 @@ export default function Inquiry(): JSX.Element {
-
{ navigate('/inquiry/all'); @@ -38,16 +38,16 @@ export default function Inquiry(): JSX.Element { navigate('/inquiry/all'); } }} - role="button" + type="button" tabIndex={0} > 문의하기 -
+
-
+
a
diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index f41e7731..ee69c3c4 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -47,10 +47,13 @@ $disabled: #c4c4c4; } &__title { - color: $highlight; + margin: 160px 0 52px; + padding: 0; + border: 0; + background-color: transparent; font-size: 32px; font-weight: 700; - margin: 160px 0 52px; + color: $highlight; cursor: pointer; } @@ -59,32 +62,26 @@ $disabled: #c4c4c4; margin-left: 16px; } + &__inquire { + display: flex; + align-items: center; + justify-content: center; + width: 152px; + height: 39px; + background: $highlight; + border: none; + appearance: none; + border-radius: 20px; + font-weight: 700; + font-size: 16px; + text-decoration: none; + color: white; + cursor: pointer; + box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); + margin-top: 48px; - &--inquire { - display: flex; - align-items: center; - justify-content: center; - width: 152px; - height: 39px; - background: $highlight; - border: none; - appearance: none; - border-radius: 20px; - font-weight: 700; - font-size: 16px; - text-decoration: none; - color: white; - cursor: pointer; - box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%); - margin-top: 48px; - - & > :first-child { - margin-right: 5px; - } - - // @include media.media-breakpoint-down(mobile) { - // width: 100%; - // } + & > :first-child { + margin-right: 5px; } } } diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index 3f924f78..f04b3fb6 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -51,7 +51,7 @@ export default function Inquiry(): JSX.Element {
-
{ navigate('/inquiry/all'); @@ -61,11 +61,11 @@ export default function Inquiry(): JSX.Element { navigate('/inquiry/all'); } }} - role="button" + type="button" tabIndex={0} > 문의하기 -
+
From 4333712207cec8fcfd8220ad6c1f76f2f18d08f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 3 Nov 2023 09:06:50 +0900 Subject: [PATCH 21/44] =?UTF-8?q?refactor:=20=ED=8C=8C=EC=9D=BC=EB=AA=85?= =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DataTable/{DataTable.tsx => index.tsx} | 0 .../InquirySelectButton/InquirySelectButton.module.scss | 0 .../components/InquirySelectButton/index.tsx | 0 .../components/SearchBar/{SearchBar.tsx => index.tsx} | 0 src/pages/Inquiry/Inquiry/index.tsx | 6 +++--- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/pages/Inquiry/Inquiry/components/DataTable/{DataTable.tsx => index.tsx} (100%) rename src/pages/Inquiry/{Inquire => Inquiry}/components/InquirySelectButton/InquirySelectButton.module.scss (100%) rename src/pages/Inquiry/{Inquire => Inquiry}/components/InquirySelectButton/index.tsx (100%) rename src/pages/Inquiry/Inquiry/components/SearchBar/{SearchBar.tsx => index.tsx} (100%) diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/index.tsx similarity index 100% rename from src/pages/Inquiry/Inquiry/components/DataTable/DataTable.tsx rename to src/pages/Inquiry/Inquiry/components/DataTable/index.tsx diff --git a/src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss similarity index 100% rename from src/pages/Inquiry/Inquire/components/InquirySelectButton/InquirySelectButton.module.scss rename to src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss diff --git a/src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx similarity index 100% rename from src/pages/Inquiry/Inquire/components/InquirySelectButton/index.tsx rename to src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx similarity index 100% rename from src/pages/Inquiry/Inquiry/components/SearchBar/SearchBar.tsx rename to src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index f04b3fb6..ca760c43 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; // import cn from 'utils/ts/classNames'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; -import InquirySelectButton from 'pages/Inquiry/Inquire/components/InquirySelectButton'; -import SearchBar from 'pages/Inquiry/Inquiry/components/SearchBar/SearchBar'; -import DataTable from 'pages/Inquiry/Inquiry/components/DataTable/DataTable'; +import InquirySelectButton from 'pages/Inquiry/Inquiry/components/InquirySelectButton'; +import SearchBar from 'pages/Inquiry/Inquiry/components/SearchBar'; +import DataTable from 'pages/Inquiry/Inquiry/components/DataTable'; import styles from './Inquiry.module.scss'; const useSearchForm = () => { From 5c6cca8ab711de64ae3244aecc75d5502556f5df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 3 Nov 2023 19:20:18 +0900 Subject: [PATCH 22/44] =?UTF-8?q?refactor:=20=EB=84=A4=EC=9D=B4=EB=B0=8D?= =?UTF-8?q?=20BEM=20=EB=93=B1=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=A4=80?= =?UTF-8?q?=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 파일명 index.tsx로 변경 - div -> ul, li, button, Link - 클래스 변경에 따른 속성 수정 - 클래스 변경에 따른 css 수정 --- src/pages/Inquiry/Inquiry/Inquiry.module.scss | 101 +++++++++++------- .../DataBlock/DataBlock.module.scss | 20 ++-- .../DataTable/components/DataBlock/index.tsx | 19 ++-- .../Inquiry/components/DataTable/index.tsx | 50 +++++---- .../InquirySelectButton.module.scss | 10 +- .../components/InquirySelectButton/index.tsx | 25 ++--- .../Inquiry/components/SearchBar/index.tsx | 41 ++++--- src/pages/Inquiry/Inquiry/index.tsx | 89 ++++++--------- 8 files changed, 185 insertions(+), 170 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/Inquiry.module.scss b/src/pages/Inquiry/Inquiry/Inquiry.module.scss index ee69c3c4..a4c5ee44 100644 --- a/src/pages/Inquiry/Inquiry/Inquiry.module.scss +++ b/src/pages/Inquiry/Inquiry/Inquiry.module.scss @@ -18,7 +18,7 @@ $disabled: #c4c4c4; } } -.box { +.menu-box { width: 947px; display: flex; flex-direction: row; @@ -41,13 +41,32 @@ $disabled: #c4c4c4; .menu { width: 227px; height: 100%; + list-style-type: none; + margin: 0; + padding: 0; + + &:visited { + color: none; + } @media (max-width: 1148px) { display: none; } + &__item { + display: flex; + } + + &__link { + text-decoration: none; + + &:visited { + color: currentColor; + } + } + &__title { - margin: 160px 0 52px; + margin: 160px 0 69px; padding: 0; border: 0; background-color: transparent; @@ -58,7 +77,7 @@ $disabled: #c4c4c4; } &__select { - padding-top: 17px; + margin-bottom: 24px; margin-left: 16px; } @@ -86,7 +105,7 @@ $disabled: #c4c4c4; } } -.data { +.contents-box { width: 720px; display: flex; flex-flow: column wrap; @@ -96,51 +115,51 @@ $disabled: #c4c4c4; @media (max-width: 576px) { width: 100%; } +} - &__search-bar { - width: 100%; - height: 252px; - border-bottom: 1px solid $highlight; - display: flex; - flex-direction: column; - align-items: flex-end; - position: relative; - z-index: 2; - - @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 - background: none; - border-bottom: none; - height: 0; - align-items: center; - } +.search-bar { + width: 100%; + height: 252px; + border-bottom: 1px solid $highlight; + display: flex; + flex-direction: column; + align-items: flex-end; + position: relative; + z-index: 2; + + @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 + background: transparent; + border-bottom: none; + height: 0; + align-items: center; + } - &--component { - margin-top: 152px; + &__item { + margin-top: 152px; - @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 - margin-top: 0; - position: fixed; - top: 24px; - z-index: 1; - } + @media (max-width: 576px) { // 모바일 브레이크 포인트, 디자인 변경 + margin-top: 0; + position: fixed; + top: 24px; + z-index: 1; } } +} - &__data-table { - width: 100%; - flex-grow: 1; - display: flex; - flex-direction: column; - position: relative; - height: calc(100vh - 253px); +.data-table { + width: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + position: relative; + height: calc(100vh - 253px); - @media (max-width: 576px) { // 사이드 네비 브레이크 포인트에 따른 height 변경 - height: calc(100vh - 80px); - } + @media (max-width: 576px) { // 사이드 네비 브레이크 포인트에 따른 height 변경 + height: calc(100vh - 80px); + } - &--component { - overflow-y: auto; - } + &__item { + overflow-y: auto; } } diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/DataBlock.module.scss b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/DataBlock.module.scss index f343bdb2..d39e3bc2 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/DataBlock.module.scss +++ b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/DataBlock.module.scss @@ -3,18 +3,24 @@ $highlight: #ff7f23; $back: white; $normal: #666666; -.body { - border-bottom: 1px solid #eeeeee; - padding: 16px 10px; +.block { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; height: auto; + width: 100%; + margin: 0; + padding: 16px 10px; + border: 0; + border-bottom: 1px solid #eeeeee; + font-weight: normal; + color: $default; + background-color: transparent; max-height: 97px; overflow: hidden; transition: height 0.7s ease-in-out; cursor: pointer; - display: flex; - flex-direction: column; - align-items: flex-start; - position: relative; &:hover { background-color: #f0f0f0; diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx index 10c74a78..5c8e60bb 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx @@ -20,7 +20,7 @@ function ClampText({ text }: { text: string }): JSX.Element { }, [text]); return ( -

+

{text} {isClamped && '...'}

@@ -50,15 +50,18 @@ interface Props { export default function DataBlock({ isExpanded, content }: Props): JSX.Element { return ( -
toggleExpand(content.id)} + onKeyDown={(e) => handleKeyPress(e, content.id)} > -

+

{new Date(content.createdAt).toLocaleDateString()} | {content.createdBy} @@ -66,14 +69,14 @@ export default function DataBlock({ isExpanded, content }: Props): JSX.Element { {isExpanded && ( )} -

+ ); } diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/index.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/index.tsx index ff5b1222..d317bf9e 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/index.tsx @@ -9,7 +9,13 @@ import DataBlock from 'pages/Inquiry/Inquiry/components/DataTable/components/Dat import { InquiryContent } from 'api/inquiry/entity'; import styles from './DataTable.module.scss'; -export default function DataTable({ typePath }: { typePath: string }): JSX.Element { +export default function DataTable({ + className, + typePath, +}: { + className?: string; + typePath: string; +}): JSX.Element { const [dateCursor, setDateCursor] = useState(null); const [idCursor, setIdCursor] = useState(0); const [allData, setAllData] = useState([]); @@ -66,28 +72,26 @@ export default function DataTable({ typePath }: { typePath: string }): JSX.Eleme }, [loadMoreData, isLoading]); return ( -
- {allData && allData.length === 0 ? ( -

- 문의 내역이 없습니다. -

- ) : ( - allData && ( - allData.map((item) => ( -
toggleExpand(item.id)} - onKeyPress={(e) => handleKeyPress(e, item.id)} - role="button" - tabIndex={0} - > - -
- )) - ) - )} -
+
+
+ {allData && allData.length === 0 ? ( +

+ 문의 내역이 없습니다. +

+ ) : ( + allData && ( + allData.map((item) => ( + + )) + ) + )} +
+
); } diff --git a/src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss index 87449cfb..fcffa9e6 100644 --- a/src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss +++ b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/InquirySelectButton.module.scss @@ -4,10 +4,10 @@ $back: white; $normal: #666666; $disabled: #c4c4c4; -.btn { +.link { display: block; width: 104px; - margin-bottom: 24px; + margin: 0; padding: 0; border: 0; background-color: transparent; @@ -15,7 +15,11 @@ $disabled: #c4c4c4; font-weight: 500; position: relative; color: $disabled; - cursor: pointer; + text-decoration: none; + + &:visited { + color: none; + } &--selected { color: $highlight; diff --git a/src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx index 619f194a..8ae4de8e 100644 --- a/src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/InquirySelectButton/index.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import cn from 'utils/ts/classNames'; import { ReactComponent as Dot } from 'assets/svg/inquiry/dot.svg'; import styles from './InquirySelectButton.module.scss'; interface Props { - name: string; path: string; text: string; isSelected: boolean; @@ -13,28 +12,20 @@ interface Props { export default function InquirySelectButton(data: Props): JSX.Element { const { - name, path, text, isSelected, + path, text, isSelected, } = data; - const navigate = useNavigate(); return ( - + ); } diff --git a/src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx b/src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx index 9ba5c6b4..25aa5969 100644 --- a/src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/SearchBar/index.tsx @@ -2,30 +2,37 @@ import { ReactComponent as LensIcon } from 'assets/svg/search/lens.svg'; import styles from './SearchBar.module.scss'; interface Props { + className?: string; text: string, onChange: (e: React.ChangeEvent) => void onLensIconClick: () => void; } export default function SearchInput({ - text, onChange, onLensIconClick, + className, text, onChange, onLensIconClick, }: Props) { return ( - +
+ +
); } diff --git a/src/pages/Inquiry/Inquiry/index.tsx b/src/pages/Inquiry/Inquiry/index.tsx index ca760c43..d23a806a 100644 --- a/src/pages/Inquiry/Inquiry/index.tsx +++ b/src/pages/Inquiry/Inquiry/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useNavigate, useLocation } from 'react-router-dom'; -// import cn from 'utils/ts/classNames'; +import { Link, useNavigate, useLocation } from 'react-router-dom'; import { ReactComponent as WriteIcon } from 'assets/svg/inquiry/write.svg'; import InquirySelectButton from 'pages/Inquiry/Inquiry/components/InquirySelectButton'; import SearchBar from 'pages/Inquiry/Inquiry/components/SearchBar'; @@ -49,73 +48,55 @@ export default function Inquiry(): JSX.Element { return (
-
-
- +
+
    +
  • + +
    + 문의하기 +
    + +
    • -
    +
  • +
    • + +
  • -
    • + - -
+
  • + + 문의하러 가기 + + +
    • + -
    -
    -
    - navigate(`/inquiry/search/${text}`)} - /> -
    +
    +
    + navigate(`/inquiry/search/${text}`)} + />
    -
    -
    - -
    +
    +
    From b7c067c4e25b9dc243fb6cc9c2c342e524e50ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Fri, 3 Nov 2023 19:22:51 +0900 Subject: [PATCH 23/44] =?UTF-8?q?refactor:=20=EB=AC=B8=EC=9D=98=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20expander=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - DataTable -> DataBlock --- .../DataTable/components/DataBlock/index.tsx | 21 +++++++++++++++++-- .../Inquiry/components/DataTable/index.tsx | 10 --------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx index 5c8e60bb..46d32b83 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx @@ -44,11 +44,28 @@ function Answer({ text }: { text: string }): JSX.Element { } interface Props { - isExpanded: boolean, content: InquiryContent, + expandedId: number | null, + setExpandedId: (id: number | null) => void, } -export default function DataBlock({ isExpanded, content }: Props): JSX.Element { +export default function DataBlock({ + content, + expandedId, + setExpandedId, +}: Props): JSX.Element { + const isExpanded = expandedId === content.id; + + function toggleExpand(id: number) { + setExpandedId(expandedId === id ? null : id); + } + + const handleKeyPress = (e: React.KeyboardEvent, id: number) => { + if (e.key === 'Enter' || e.key === ' ') { + toggleExpand(id); + } + }; + return ( + +
    + 문의하기 +
    + - +
    From a29063eb2ec589bdbb2ec0bc6d319793bcf70405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Sat, 4 Nov 2023 05:44:29 +0900 Subject: [PATCH 29/44] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=98?= =?UTF-8?q?=EB=8A=94=20interface=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - entity에서 import하는 방식으로 수정 --- src/api/inquiry/entity.ts | 7 +++++++ src/api/inquiry/index.ts | 9 +-------- src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts | 8 +------- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/api/inquiry/entity.ts b/src/api/inquiry/entity.ts index a19d0cc5..e83b4979 100644 --- a/src/api/inquiry/entity.ts +++ b/src/api/inquiry/entity.ts @@ -43,3 +43,10 @@ export interface InquirySort { sorted: boolean; unsorted: boolean; } + +export interface InquiryProps { + typePath: string; + dateCursor: string | null; + idCursor: number | null; + size: number; +} diff --git a/src/api/inquiry/index.ts b/src/api/inquiry/index.ts index 282d2731..e40cfd8d 100644 --- a/src/api/inquiry/index.ts +++ b/src/api/inquiry/index.ts @@ -1,13 +1,6 @@ -import { GetInquiryResponse } from './entity'; +import { GetInquiryResponse, InquiryProps } from './entity'; import inquiryApi from './inquiryApiClient'; -interface InquiryProps { - typePath: string; - dateCursor: string | null; - idCursor: number | null; - size: number; -} - const getInquiry = async ({ typePath, dateCursor, idCursor, size, }: InquiryProps) => { diff --git a/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts b/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts index f7b3cd24..4f2c3fde 100644 --- a/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts +++ b/src/pages/Inquiry/Inquiry/hooks/useInquiryList.ts @@ -1,13 +1,7 @@ import getInquiry from 'api/inquiry'; +import { InquiryProps } from 'api/inquiry/entity'; import { useQuery, useQueryClient } from 'react-query'; -interface InquiryProps { - typePath: string; - dateCursor: string | null; - idCursor: number | null; - size: number; -} - const useInquiryList = ({ typePath, dateCursor, idCursor, size, }: InquiryProps) => { From 626678dea6459952a5c7473bfc210715d77f41aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=95=B4=EC=84=B1?= Date: Sat, 4 Nov 2023 08:25:40 +0900 Subject: [PATCH 30/44] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=ED=91=9C=ED=98=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 화살표 함수 --> 함수 선언식 --- .../components/DataTable/components/DataBlock/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx index 3d0c8186..4f1c618e 100644 --- a/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx +++ b/src/pages/Inquiry/Inquiry/components/DataTable/components/DataBlock/index.tsx @@ -23,11 +23,11 @@ export default function DataBlock({ setExpandedId(expandedId === id ? null : id); } - const handleKeyPress = (e: React.KeyboardEvent, id: number) => { + function handleKeyPress(e: React.KeyboardEvent, id: number) { if (e.key === 'Enter' || e.key === ' ') { toggleExpand(id); } - }; + } return (