[feat/#46] 크루 기능 퍼블리시 추가, 글꼴 추가

src/api/group.ts

@@ -0,0 +1,74 @@
+import qs from "qs"
+import axiosInstance from "./axiosInstance"
+
+export type sort = "userCount,desc" | "createdAt,desc"
+
+export interface sortRes {
+  empty: boolean
+  sorted: boolean
+  unsorted: boolean
+}
+
+export interface group {
+  id: number
+  name: string
+  description: string
+  ownerUid: number
+  isHidden: boolean
+  joinCode: string
+  userCount: number
+  userCapacity: number
+  ranks: groupUserRank[]
+}
+
+export interface groupUserRank {
+  groupUserId: number
+  name: string
+  rank: number
+  score: number
+}
+
+export interface groupsReq {
+  page: number
+  size: number
+  sort: sort
+}
+
+export interface groupsRes {
+  data: group[]
+  page: number
+  size: number
+  totalPage: number
+  totalCount: number
+  sort: sortRes
+}
+
+export interface groupJoinReq {
+  groupId: number
+  joinCode: string
+}
+
+export interface groupJoinRes {
+  groupId: number
+  uid: number
+  groupUserId: number
+}
+
+export const getGroups = async (groupsReq: groupsReq): Promise<groupsRes> => {
+  try {
+    const res = await axiosInstance.get(`/groups?${qs.stringify(groupsReq)}`)
+    return res.data
+  } catch (e) {
+    throw e
+  }
+}
+
+export const joinGroup = async (groupJoinReq: groupJoinReq): Promise<groupJoinRes> => {
+  try {
+    // eslint-disable-next-line max-len
+    const res = await axiosInstance.post(`groups/${groupJoinReq.groupId}/join`, { joinCode: groupJoinReq.joinCode })
+    return res.data
+  } catch (e) {
+    throw e
+  }
+}

src/api/index.ts

@@ -1,2 +1,3 @@
 export * from "./auth"
 export * from "./snapshot"
+export * from "./group"

src/components/Crew/CrewItem.tsx

@@ -0,0 +1,43 @@
+import { group } from "@/api"
+import PrivateCrewIcon from "@assets/icons/crew-private-icon.svg?react"
+import CrewUserIcon from "@assets/icons/crew-user-icon.svg?react"
+import { ReactElement } from "react"
+
+interface CrewItemProps {
+  group: group
+  onClickDetail: () => void
+}
+
+const CrewItem = (props: CrewItemProps): ReactElement => {
+  const { group, onClickDetail } = props
+
+  return (
+    <div
+      style={{
+        borderRadius: "12px",
+        border: "1px solid #E5E7EB",
+      }}
+      className="flex w-full items-center gap-[24px] bg-white px-[24px] py-[11px] text-[14px] font-semibold leading-[32px]"
+    >
+      {/* crew name */}
+      <div className="flex items-center gap-[6px]">
+        {group.isHidden && <PrivateCrewIcon />}
+        <div>{group.name}</div>
+      </div>
+      {/* crew user cnt */}
+      <div className="flex flex-grow items-center gap-[6px]">
+        <CrewUserIcon />
+        <div>{`${group.userCount}/${group.userCapacity}명`}</div>
+      </div>
+      {/* detail button */}
+      <button
+        className="flex w-[114px] cursor-pointer justify-center rounded-full bg-[#1A75FF] py-[6px] text-sm font-semibold text-white"
+        onClick={onClickDetail}
+      >
+        크루 상세보기
+      </button>
+    </div>
+  )
+}
+
+export default CrewItem