From d8143e0d7bb45839edcc95e9fc7a62187c1a1a48 Mon Sep 17 00:00:00 2001 From: "lkh14011424@gmail.com" Date: Sat, 14 Sep 2024 18:39:29 +0900 Subject: [PATCH] =?UTF-8?q?[feat/#46]=20=ED=81=AC=EB=A3=A8=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EB=B3=B4=EA=B8=B0,=20=ED=81=AC=EB=A3=A8=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C=EC=84=A0=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/group.ts | 20 ++++ src/components/Crew/CrewList.tsx | 21 ++-- src/components/Modal/JoinCrewModal.tsx | 145 ++++++++++++++----------- src/hooks/useGroupMutation.ts | 28 ++++- 4 files changed, 141 insertions(+), 73 deletions(-) diff --git a/src/api/group.ts b/src/api/group.ts index d58ee32..e35b6db 100644 --- a/src/api/group.ts +++ b/src/api/group.ts @@ -63,6 +63,15 @@ export const getGroups = async (groupsReq: groupsReq): Promise => { } } +export const getGroup = async (id: number): Promise => { + try { + const res = await axiosInstance.get(`/groups/${id}`) + return res.data.data + } catch (e) { + throw e + } +} + export const joinGroup = async (groupJoinReq: groupJoinReq): Promise => { try { // eslint-disable-next-line max-len @@ -72,3 +81,14 @@ export const joinGroup = async (groupJoinReq: groupJoinReq): Promise => { + try { + // eslint-disable-next-line max-len + const res = await axiosInstance.post(`groups/check`, { name }) + const errorMessage = res.data?.errorMessage + return errorMessage ? false : true + } catch (e) { + throw e + } +} diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx index c3cb789..80801b8 100644 --- a/src/components/Crew/CrewList.tsx +++ b/src/components/Crew/CrewList.tsx @@ -1,4 +1,4 @@ -import { group, groupsReq } from "@/api" +import { group, groupsReq, sort } from "@/api" import EmptyCrewImage from "@/assets/images/crew-empty.png" import CrewItem from "@/components/Crew/CrewItem" import { useGetGroups } from "@/hooks/useGroupMutation" @@ -15,13 +15,12 @@ const SORT_LIST = [ ] const CrewList = (): ReactElement => { - const [sort, setSort] = useState(0) const [mode] = useState<"my" | "list">("my") const [isDropdownOpen, setIsDropdownOpen] = useState(false) - const [params] = useState({ + const [params, setParams] = useState({ page: 0, - size: 10, + size: 10000, sort: "userCount,desc", }) @@ -37,8 +36,9 @@ const CrewList = (): ReactElement => { }) } - const openJoinCrewModal = (): void => { + const openJoinCrewModal = (id: number): void => { openModal(modals.joinCrewModal, { + id, onSubmit: () => { console.log("open") }, @@ -66,7 +66,7 @@ const CrewList = (): ReactElement => { key={`sort-list-${s.sort}`} className="cursor-pointer text-[13px] font-medium leading-[24px] text-zinc-400" onClick={() => { - setSort(i) + setParams({ ...params, sort: s.sort as sort }) setIsDropdownOpen(false) }} > @@ -89,7 +89,7 @@ const CrewList = (): ReactElement => { return (
{_groups.map((g) => ( - + openJoinCrewModal(g.id)} /> ))}
) @@ -113,7 +113,10 @@ const CrewList = (): ReactElement => { {mode === "my" && } {/* header */}
-
전체크루(0)
+
+ 전체크루 + {isLoading ? "" : `(${data?.totalCount})`} +
{mode === "list" && (
{
-
{SORT_LIST[sort].label}
+
{SORT_LIST.find((s) => s.sort === params.sort)?.label}
{/* dropdown */} diff --git a/src/components/Modal/JoinCrewModal.tsx b/src/components/Modal/JoinCrewModal.tsx index 80b804c..19ad761 100644 --- a/src/components/Modal/JoinCrewModal.tsx +++ b/src/components/Modal/JoinCrewModal.tsx @@ -1,93 +1,112 @@ import ModalContainer from "@components/ModalContainer" import CrewJoinUserIcon from "@assets/icons/crew-join-user-icon.svg?react" import PrivateCrewIcon from "@assets/icons/crew-private-icon.svg?react" -import { useState } from "react" +import { ReactNode, useState } from "react" import { ModalProps } from "@/contexts/ModalsContext" +import { useGetGroup } from "@/hooks/useGroupMutation" const JoinCrewModal = (props: ModalProps): React.ReactElement => { - const { onClose, onSubmit } = props + const { onClose, onSubmit, id } = props const [joinCode, setJoinCode] = useState("") const [isCodeError, setIsCodeError] = useState(false) + const { data, isLoading, isError } = useGetGroup(id) + const onChangeJoinCode = (e: React.ChangeEvent): void => { if (isCodeError) setIsCodeError(false) if (e.target.value.length <= 4) setJoinCode(e.target.value) } - return ( - -
- {/* header */} -
-
- -
{"주인공 다 모여랏"}
-
- -
- -
7/30명
+ const createRank = (): ReactNode => { + return ( +
+ {data?.ranks.map((r) => ( +
+
{`${r.rank}등`}
+
{`${r.name}`}
-
+ ))} +
+ ) + } -
- {/* crew owner */} -
-
크루장
-
- 주인공 + return ( + + {isLoading ? ( + "로딩 중입니다." + ) : isError ? ( + "데이터를 불러오지 못했습니다." + ) : ( +
+ {/* header */} +
+
+ {data?.isHidden && } +
{data?.name}
-
- {/* crew description */} -
-
크루소개
-
- 주인공 +
+ +
{`${data?.userCount}/${data?.userCapacity}명`}
+ {!data?.isHidden ? ( +
+ {/* crew owner */} +
+
크루장
+
+ {data?.ownerUid} +
+
- {/* crew rank */} -
-
-
오늘 바른자세 랭킹
-
크루에 가입하면 볼 수 있어요
+ {/* crew description */} +
+
크루소개
+
+ {data?.description} +
+
+ + {/* crew rank */} + {data?.ranks && ( +
+
+
오늘 바른자세 랭킹
+
크루에 가입하면 볼 수 있어요
+
+
{createRank()}
+
+ )}
-
-
-
1등
-
?
-
29일
+ ) : ( + // private crew +
+
비공개 크루입니다. 비밀번호를 입력해주세요. (숫자 4자리)
+ +
+ 비밀번호가 틀렸습니다.
-
-
+ )} - {/* private crew */} -
-
비공개 크루입니다. 비밀번호를 입력해주세요. (숫자 4자리)
- -
- 비밀번호가 틀렸습니다. -
+ {/* button */} +
- - {/* button */} - -
+ )} ) } diff --git a/src/hooks/useGroupMutation.ts b/src/hooks/useGroupMutation.ts index aac7c50..239eb1e 100644 --- a/src/hooks/useGroupMutation.ts +++ b/src/hooks/useGroupMutation.ts @@ -1,11 +1,26 @@ import { useMutation, UseMutationResult, useQuery, UseQueryResult } from "@tanstack/react-query" -import { getGroups, groupJoinReq, groupJoinRes, groupsReq, groupsRes, joinGroup } from "@/api" +import { + checkGroupName, + getGroup, + getGroups, + group, + groupJoinReq, + groupJoinRes, + groupsReq, + groupsRes, + joinGroup, +} from "@/api" export const useGetGroups = (params: groupsReq): UseQueryResult => { // eslint-disable-next-line max-len return useQuery({ queryKey: ["groups", params], queryFn: () => getGroups(params) }) } +export const useGetGroup = (id: number): UseQueryResult => { + // eslint-disable-next-line max-len + return useQuery({ queryKey: ["group", id], queryFn: () => getGroup(id) }) +} + export const useJoinGroup = (): UseMutationResult => { return useMutation({ mutationFn: (groupJoinReq: groupJoinReq) => { @@ -16,3 +31,14 @@ export const useJoinGroup = (): UseMutationResult => { + return useMutation({ + mutationFn: (name: string) => { + return checkGroupName(name) + }, + onSuccess: (data) => { + console.log(data) + }, + }) +}