Skip to content

✨ Feat: SortSelect 배열 길이 1인 경우 checkbox로 렌더링 #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ahyeon-jung merged 3 commits into from
Jan 14, 2025
Merged

✨ Feat: SortSelect 배열 길이 1인 경우 checkbox로 렌더링 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42d5b21
improve: 배열 길이 1일 경우 checkbox로 필터링
ahyeon-jung Jan 14, 2025
9b2ede5
test: 스토리북 추가
ahyeon-jung Jan 14, 2025
48b53bf
chore: Blank 외부 렌더링 삭제
ahyeon-jung Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/api/query/getQueryList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export type QueryListResponseType = {

export default async function getQueryList(params: ListParams) {
const { page, perPage } = params.pagination;
const filter = "all";
const url = `/admin-support/inquiries?page=${page}&limit=${perPage}&filter=${filter}`;
const filter = params.filter?.status ?? "all";
const url = `/admin-support/inquiries?page=${page}&limit=${perPage}&status=${filter}`;

const response = await fetchData<ResponseType<QueryListResponseType>>({
url,
Expand Down
7 changes: 7 additions & 0 deletions src/components/SortSelect/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,10 @@ export const Default: SortSelectStory = {
defaultValue: "name",
},
};

export const CheckBox: SortSelectStory = {
args: {
options: [{ value: "unread", label: "안읽은 메시지만 보기" }],
defaultValue: "all",
},
};
48 changes: 35 additions & 13 deletions src/components/SortSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,45 @@ export default function SortSelect({
onChange,
defaultValue,
}: SortSelectProps) {
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const handleSingleCheckboxChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
const { checked, value } = event.target;
onChange(checked ? value : defaultValue || "");
};

const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
onChange(event.target.value);
};

return (
<div className="relative inline-block w-48">
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onChange={handleChange}
defaultValue={defaultValue}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="relative inline-block">
{options.length === 1 ? (
<div className="flex items-center space-x-4">
<label className="flex items-center space-x-2">
<input
type="checkbox"
value={options[0].value}
onChange={handleSingleCheckboxChange}
defaultChecked={defaultValue === options[0].value}
className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/>
<span>{options[0].label}</span>
</label>
</div>
) : (
<select
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onChange={handleSelectChange}
defaultValue={defaultValue}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
)}
</div>
);
}
31 changes: 20 additions & 11 deletions src/pages/query/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import Blank from "../../components/fallback/Blank";
import ErrorFallback from "../../components/fallback/ErrorFallback";
import { Link } from "react-router-dom";
import List from "../../components/List";
import LoadingFallback from "../../components/fallback/LoadingFallback";
import Pagination from "../../components/Pagination";
import { QueryListType } from "../../api/query";
import SortSelect from "../../components/SortSelect";
import queryQueryOptions from "../../queries/queryQueryOptions";
import usePagination from "../../components/Pagination/usePagination";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";

export default function QueryList() {
return <QueryListContent />;
}

const QueryListContent = () => {
const { currentPage, handlePaginationEvent } = usePagination();
const [currentFilter, setCurrentFilter] = useState("all");

const { data, error, isLoading } = useQuery({
...queryQueryOptions.getQueryList({
pagination: { page: currentPage, perPage: 10 },
filter: { status: currentFilter },
}),
});

Expand All @@ -35,7 +38,17 @@ const QueryListContent = () => {

return (
<List>
<List.Header totalCount={data.total} label="문의사항" />
<List.Header totalCount={data.total} label="문의사항">
<SortSelect
onChange={(value: string) => {
setCurrentFilter(value);
}}
options={[
{ label: "답변 완료된 문의사항만 보기", value: "unprocessed" },
]}
defaultValue="all"
/>
</List.Header>
<List.ColumnContainer
headers={[
"문의사항 번호",
Expand All @@ -46,15 +59,11 @@ const QueryListContent = () => {
]}
row={5}
/>
{data.inquiries.length === 0 ? (
<Blank />
) : (
<List.RowContainer row={10}>
{data.inquiries.map((query) => (
<QueryListItem key={query.id} {...query} />
))}
</List.RowContainer>
)}
<List.RowContainer row={10}>
{data.inquiries.map((query) => (
<QueryListItem key={query.id} {...query} />
))}
</List.RowContainer>
<Pagination
totalPages={data.totalPage}
currentPage={currentPage}
Expand Down
8 changes: 3 additions & 5 deletions src/pages/user/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,9 @@ const UserListContent = () => {
</List.Header>
<List.ColumnContainer headers={userListColumns} row={5} />
<List.RowContainer row={10}>
{!data.users || data.users.length === 0 ? (
<Blank />
) : (
data.users.map((user) => <UserListItem key={user.id} {...user} />)
)}
{data.users.map((user) => (
<UserListItem key={user.id} {...user} />
))}
</List.RowContainer>
<Pagination
totalPages={data.totalPage}
Expand Down
2 changes: 1 addition & 1 deletion src/types/params.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@ export interface DetailParams {
filter?: FilterParams;
}
export interface FilterParams {
keyword: string;
keyword?: string;
status?: string;
}
Loading