From 78cc4fb540c143104c2c82bc54018e2ffea5a946 Mon Sep 17 00:00:00 2001 From: kang Date: Tue, 29 Aug 2023 21:45:57 +0900 Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=9E=84=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A4=EC=97=90=EC=84=9C=20=EC=9E=A5=EC=86=8C=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=EC=9D=80=20=EB=8D=94=EB=AF=B8=EB=A1=9C=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/apis/groups/apis.ts | 8 ++++++- src/apis/groups/keys.ts | 1 + src/apis/groups/mutations.ts | 7 +++++- src/apis/groups/queries.ts | 5 ++++ src/apis/groups/type.ts | 24 +++++++++++++++++-- .../components/GroupingHeader.client.tsx | 3 --- .../detail/MemberSection.client.tsx | 6 ++++- .../create/components/InputForm.client.tsx | 23 +++++++++++++----- .../common/SwipePicker/TimeSwipePicker.tsx | 12 ++++++---- 9 files changed, 71 insertions(+), 18 deletions(-) diff --git a/src/apis/groups/apis.ts b/src/apis/groups/apis.ts index 4242dbec5..7863eac2f 100644 --- a/src/apis/groups/apis.ts +++ b/src/apis/groups/apis.ts @@ -1,12 +1,14 @@ import privateApi from '../config/privateApi'; import type { + AppliesResponse, Article, ArticleRequest, ArticlesResponse, CommentRequest, CommentsReponse, CreateGroupRequest, + CreateGroupResponse, GroupDetailResponse, GroupMembersResponse, GroupsResponse, @@ -22,7 +24,7 @@ export const getGroupDetail = (groupId: number) => { }; export const postCreateGroup = (CreateGroupData: CreateGroupRequest) => { - return privateApi.post('/group-create', CreateGroupData); + return privateApi.post('/group-create', CreateGroupData); }; export const getArticles = (groupId: number, page: number) => { @@ -60,3 +62,7 @@ export const getGroupMembers = (groupId: number) => { export const getNotice = (groupId: number) => { return privateApi.get(`/groups/${groupId}/articles/notice`); }; + +export const getApplies = (groupId: number) => { + return privateApi.get(`/groups/${groupId}/applies`); +}; diff --git a/src/apis/groups/keys.ts b/src/apis/groups/keys.ts index 05214cdf2..77bf169a1 100644 --- a/src/apis/groups/keys.ts +++ b/src/apis/groups/keys.ts @@ -6,4 +6,5 @@ export const Keys = Object.freeze({ getComments: (groupId: number, articleId: number) => ['getComments', groupId, articleId], getGroupMembers: (groupId: number) => ['getGroupMembers', groupId], getNotice: (groupId: number) => ['getNotice', groupId], + getApplies: (groupId: number) => ['getApplies', groupId], }); diff --git a/src/apis/groups/mutations.ts b/src/apis/groups/mutations.ts index 5bbf78172..40fd5c67f 100644 --- a/src/apis/groups/mutations.ts +++ b/src/apis/groups/mutations.ts @@ -3,7 +3,12 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; export const usePostCreateGroup = () => { - return useMutation(postCreateGroup); + const router = useRouter(); + return useMutation(postCreateGroup, { + onSuccess: (data) => { + router.push(`/grouping/${data.groupId}`); + }, + }); }; export const usePostArticle = (groupId: number) => { diff --git a/src/apis/groups/queries.ts b/src/apis/groups/queries.ts index 7433bd6a4..4704674da 100644 --- a/src/apis/groups/queries.ts +++ b/src/apis/groups/queries.ts @@ -1,4 +1,5 @@ import { + getApplies, getArticle, getArticles, getComments, @@ -63,3 +64,7 @@ export const useGetGroupMembers = (groupId: number) => { export const useGetNotice = (groupId: number) => { return useSuspenseQuery(Keys.getNotice(groupId), () => getNotice(groupId)); }; + +export const useGetApplies = (groupId: number) => { + return useSuspenseQuery(Keys.getApplies(groupId), () => getApplies(groupId)); +}; diff --git a/src/apis/groups/type.ts b/src/apis/groups/type.ts index 5e47138b8..c903270e8 100644 --- a/src/apis/groups/type.ts +++ b/src/apis/groups/type.ts @@ -59,11 +59,15 @@ export interface CreateGroupRequest { endTime: string; placeName: string; placeAddress: string; - placeLatitude: string; - placeLongitude: string; + place_latitude: string; + place_longitude: string; maxUser: number; } +export interface CreateGroupResponse { + groupId: number; +} + export interface ArticleRequest { groupId: number; article: Pick; @@ -104,3 +108,19 @@ export interface Notice { noticeId: number; content: string; } + +export interface Apply { + userId: number; + userNickname: string; + userImageUrl: string; + reliabilityLevel: string; + introduce: string; + reason: string; +} + +export interface ApplyRequest extends Pick {} + +export interface AppliesResponse { + totalCount: number; + applies: Apply[]; +} diff --git a/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx b/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx index 62e7067d5..d3e97e93f 100644 --- a/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx @@ -35,9 +35,6 @@ export default function GroupingHeader() { )} - console.log('더보기')}> - more - diff --git a/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx index 75c042d54..80646f24c 100644 --- a/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx @@ -35,7 +35,11 @@ export default function MemberSection() {
{groupMembers.map((member) => ( - + {member.nickName} ))} diff --git a/src/app/(main)/grouping/create/components/InputForm.client.tsx b/src/app/(main)/grouping/create/components/InputForm.client.tsx index 23fe4e438..b8bc19565 100644 --- a/src/app/(main)/grouping/create/components/InputForm.client.tsx +++ b/src/app/(main)/grouping/create/components/InputForm.client.tsx @@ -16,6 +16,7 @@ import { TextField, TextFieldController } from '@/components/TextField'; import { useFileUpload } from '@/hooks/useFileUpload'; import { useModal } from '@/hooks/useModal'; import { makeFileToBlob } from '@/utils/makeFileToBlob'; +import { format } from 'date-fns'; import Image from 'next/image'; import { SubmitHandler } from 'react-hook-form'; @@ -41,16 +42,26 @@ export default function InputForm() { const onSubmit: SubmitHandler = (data) => { console.log(data); + openCreateModal( { - // const { fileUrlList } = await mutateAsyncPostFiles({ fileList: [data.imageFile] }); - // mutateCreateGroup({ - // ...data, - - // imageUrl: fileUrlList[0], - // }); + const { fileUrlList } = await mutateAsyncPostFiles({ fileList: [data.imageFile] }); + mutateCreateGroup({ + placeName: '스타벅스 동대문공원점', + placeAddress: '서울 중구 장충단로 229', + place_latitude: '37.565289', + place_longitude: '127.001285', + content: data.content, + maxUser: data.maxUser, + meetDate: format(new Date(data.meetDate), 'yyyy-MM-dd'), + startTime: data.time.fromHour + ':' + data.time.fromMin, + endTime: data.time.toHour + ':' + data.time.toMin, + title: data.title, + + imageUrl: fileUrlList[0], + }); closeCreateModal(); }} diff --git a/src/components/common/SwipePicker/TimeSwipePicker.tsx b/src/components/common/SwipePicker/TimeSwipePicker.tsx index c3799ce95..ab1d94d20 100644 --- a/src/components/common/SwipePicker/TimeSwipePicker.tsx +++ b/src/components/common/SwipePicker/TimeSwipePicker.tsx @@ -18,13 +18,17 @@ export default function TimeSwipePicker({ timeValue, setTimeValue }: TimeSwipePi setTimeValue({ ...timeValue, fromHour: value })} + setValue={(value: string) => + setTimeValue({ ...timeValue, fromHour: value.padStart(2, '0') }) + } /> : setTimeValue({ ...timeValue, fromMin: value })} + setValue={(value: string) => + setTimeValue({ ...timeValue, fromMin: value.padStart(2, '0') }) + } /> setTimeValue({ ...timeValue, toHour: value })} + setValue={(value: string) => setTimeValue({ ...timeValue, toHour: value.padStart(2, '0') })} /> : setTimeValue({ ...timeValue, toMin: value })} + setValue={(value: string) => setTimeValue({ ...timeValue, toMin: value.padStart(2, '0') })} /> Date: Wed, 30 Aug 2023 00:09:49 +0900 Subject: [PATCH 2/9] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=9E=84=20=EB=A9=A4?= =?UTF-8?q?=EB=B2=84=20=EC=83=81=EC=84=B8=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98?= =?UTF-8?q?=EC=97=90=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/16/hood.svg | 4 ++ public/icons/16/mate.svg | 4 ++ public/icons/16/soulmate.svg | 4 ++ src/apis/groups/type.ts | 9 ++- .../components/GroupingHeader.client.tsx | 10 ++-- .../detail/LocationSection.client.tsx | 8 +-- .../detail/MemberSection.client.tsx | 5 +- .../members/components/MemberItem.client.tsx | 33 ----------- .../members/components/MemberList.client.tsx | 55 +++++++++++++++++-- .../components/MembersHeader.client.tsx | 24 -------- .../members/components/MembersHeader.tsx | 22 ++++++++ .../grouping/[groupId]/members/page.tsx | 32 ++++++++--- src/components/Avatar/Avatar.tsx | 2 +- src/components/Button/IconButton.tsx | 2 +- src/constants/dummyData.ts | 6 +- src/types/index.ts | 2 + 16 files changed, 132 insertions(+), 90 deletions(-) create mode 100644 public/icons/16/hood.svg create mode 100644 public/icons/16/mate.svg create mode 100644 public/icons/16/soulmate.svg delete mode 100644 src/app/(main)/grouping/[groupId]/members/components/MemberItem.client.tsx delete mode 100644 src/app/(main)/grouping/[groupId]/members/components/MembersHeader.client.tsx create mode 100644 src/app/(main)/grouping/[groupId]/members/components/MembersHeader.tsx diff --git a/public/icons/16/hood.svg b/public/icons/16/hood.svg new file mode 100644 index 000000000..4d46319c4 --- /dev/null +++ b/public/icons/16/hood.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/16/mate.svg b/public/icons/16/mate.svg new file mode 100644 index 000000000..e6bd349be --- /dev/null +++ b/public/icons/16/mate.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/16/soulmate.svg b/public/icons/16/soulmate.svg new file mode 100644 index 000000000..b8bf76b33 --- /dev/null +++ b/public/icons/16/soulmate.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/apis/groups/type.ts b/src/apis/groups/type.ts index c903270e8..b659d17df 100644 --- a/src/apis/groups/type.ts +++ b/src/apis/groups/type.ts @@ -1,10 +1,13 @@ +import type { ReliabilityType } from '@/types'; + export interface Grouping { groupId: number; imageUrl: string; title: string; content: string; memberCount: number; - maxUser: number; + maxMemberCount: number; + maxUser: number; // 삭제 예정 place: string; meetDate: string; // '2021-08-01' startTime: string; // '19:00' @@ -97,7 +100,7 @@ export interface GroupMember { userId: number; nickName: string; imageUrl: string; - reliabilityLevel: string; // TODO: 리터럴로 변경 + reliabilityLevel: ReliabilityType; } export interface GroupMembersResponse { @@ -113,7 +116,7 @@ export interface Apply { userId: number; userNickname: string; userImageUrl: string; - reliabilityLevel: string; + reliabilityLevel: ReliabilityType; introduce: string; reason: string; } diff --git a/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx b/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx index d3e97e93f..a25b34ad5 100644 --- a/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/GroupingHeader.client.tsx @@ -7,11 +7,9 @@ import { Flex } from '@/components/Layout'; import { useNumberParams } from '@/hooks/useNumberParams'; import Image from 'next/image'; import Link from 'next/link'; -import { useRouter } from 'next/navigation'; export default function GroupingHeader() { const { groupId } = useNumberParams<['groupId']>(); - const router = useRouter(); const { data: groupDetailData } = useGetGroupDetail(groupId); const { title, isCaptain } = groupDetailData; @@ -20,9 +18,11 @@ export default function GroupingHeader() {
- router.back()}> - back - + + + back + +

{title}

 diff --git a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx index 3a927bbf9..d94e88bfc 100644 --- a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx @@ -26,8 +26,8 @@ export default function LocationSection() { /> diff --git a/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx index 80646f24c..974550090 100644 --- a/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/detail/MemberSection.client.tsx @@ -13,7 +13,7 @@ export default function MemberSection() { const pathname = usePathname(); const { data: groupDetailData } = useGetGroupDetail(groupId); - const { maxUser, memberCount } = groupDetailData; + const { memberCount, maxMemberCount } = groupDetailData; const { data: groupMembersData } = useGetGroupMembers(groupId); const { groupMembers } = groupMembersData; @@ -22,7 +22,7 @@ export default function MemberSection() {

- 모임 멤버 ({memberCount}/{maxUser}) + 모임 멤버 ({memberCount}/{maxMemberCount})

router.push(`${pathname}/members`)} > {member.nickName} diff --git a/src/app/(main)/grouping/[groupId]/members/components/MemberItem.client.tsx b/src/app/(main)/grouping/[groupId]/members/components/MemberItem.client.tsx deleted file mode 100644 index 7c0778304..000000000 --- a/src/app/(main)/grouping/[groupId]/members/components/MemberItem.client.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client'; -import { Avatar } from '@/components/Avatar'; -import { Spacing } from '@/components/common/Spacing'; -import clsx from 'clsx'; -import Image from 'next/image'; - -interface MemberItemProps { - imageUrl: string; - name: string; - isCaptain: boolean; - isCertified: boolean; - personality: string; -} - -export default function MemberItem({ - imageUrl, - name, - isCaptain, - isCertified, - personality, -}: MemberItemProps) { - return ( -
- - -

{name}

-
-

{personality}

- - arrow_right -
- ); -} diff --git a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx index 821dab761..3eeec89e6 100644 --- a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx +++ b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx @@ -1,14 +1,57 @@ 'use client'; -import MemberItem from './MemberItem.client'; +import { Avatar } from '@/components/Avatar'; +import { IconButton } from '@/components/Button'; +import { Divider } from '@/components/Divider'; +import { Flex } from '@/components/Layout'; import { MEMBER_DUMMY_DATA } from '@/constants/dummyData'; +import Image from 'next/image'; +import Link from 'next/link'; +import { Fragment } from 'react'; + +import type { GroupMember } from '@/apis/groups'; export default function MemeberList() { return ( -
- {/* {MEMBER_DUMMY_DATA.map((member, index) => ( - - ))} */} - {/* props에서 에러가 발생하는데, 로직을 몰라 추후 리팩토링하게 될 때 반영하겠습니다. */} +
+ {MEMBER_DUMMY_DATA.map((member, index) => ( + + + {MEMBER_DUMMY_DATA.length - 1 !== index && } + + ))}
); } + +interface MemberItemProps { + member: GroupMember; +} + +function MemberItem({ member }: MemberItemProps) { + const { userId, imageUrl, nickName, isCaptain, isCertifiedStudent, reliabilityLevel } = member; + return ( + + + +
+ + {nickName} + {isCaptain && host} + + + reliability +

{reliabilityLevel}

+ +
+ + navigate-next + + + + ); +} diff --git a/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.client.tsx b/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.client.tsx deleted file mode 100644 index ddb6e26c7..000000000 --- a/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.client.tsx +++ /dev/null @@ -1,24 +0,0 @@ -'use client'; -import { Header } from '@/components/Header'; -import Image from 'next/image'; -import { useRouter } from 'next/navigation'; - -export default function MembersHeader() { - const router = useRouter(); - - return ( -
router.back()} - className="cursor-pointer" - /> - } - text="모임 멤버" - /> - ); -} diff --git a/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.tsx b/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.tsx new file mode 100644 index 000000000..2b70da204 --- /dev/null +++ b/src/app/(main)/grouping/[groupId]/members/components/MembersHeader.tsx @@ -0,0 +1,22 @@ +import { IconButton } from '@/components/Button'; +import { Header } from '@/components/Header'; +import Image from 'next/image'; +import Link from 'next/link'; + +interface MembersHeaderProps { + groupId: number; +} +export default function MembersHeader({ groupId }: MembersHeaderProps) { + return ( +
+ + + + back + + +

모임 멤버

+ +
+ ); +} diff --git a/src/app/(main)/grouping/[groupId]/members/page.tsx b/src/app/(main)/grouping/[groupId]/members/page.tsx index 67c10db46..4bc031132 100644 --- a/src/app/(main)/grouping/[groupId]/members/page.tsx +++ b/src/app/(main)/grouping/[groupId]/members/page.tsx @@ -1,13 +1,29 @@ import MemeberList from './components/MemberList.client'; -import MembersHeader from './components/MembersHeader.client'; -import { Spacing } from '@/components/common/Spacing'; +import MembersHeader from './components/MembersHeader'; +import { Keys, getGroupMembers } from '@/apis/groups'; +import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { Suspense } from 'react'; + +interface GroupingMembersPageProps { + params: { + groupId: string; + }; +} + +export default function GroupingMembersPage({ params }: GroupingMembersPageProps) { + const groupId = Number(params.groupId); -export default function GroupingMembersPage() { return ( -
- - - -
+ <> + + + getGroupMembers(groupId)} + queryKey={Keys.getGroupMembers(groupId)} + > + + + + ); } diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 016f6bcf2..bb96af46b 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -28,7 +28,7 @@ export default function Avatar({ }: PropsWithChildren) { return ( ) { return (
Date: Wed, 30 Aug 2023 01:13:51 +0900 Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=9E=84=20=EC=A7=80?= =?UTF-8?q?=EC=9B=90=EC=84=9C=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20api=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20Swi?= =?UTF-8?q?per=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manage/components/ApplyCard.client.tsx | 23 +++----- .../manage/components/ManageDetail.client.tsx | 58 ++++++++++++++++--- .../(main)/grouping/[groupId]/manage/page.tsx | 16 ++++- 3 files changed, 74 insertions(+), 23 deletions(-) diff --git a/src/app/(main)/grouping/[groupId]/manage/components/ApplyCard.client.tsx b/src/app/(main)/grouping/[groupId]/manage/components/ApplyCard.client.tsx index ab4f25443..779528e25 100644 --- a/src/app/(main)/grouping/[groupId]/manage/components/ApplyCard.client.tsx +++ b/src/app/(main)/grouping/[groupId]/manage/components/ApplyCard.client.tsx @@ -1,6 +1,7 @@ 'use client'; import ManageModal from './ManageModal'; +import { Apply } from '@/apis/groups'; import { Avatar } from '@/components/Avatar'; import { Button, ButtonGroup, IconButton } from '@/components/Button'; import { Spacing } from '@/components/common/Spacing'; @@ -9,18 +10,12 @@ import { TextField } from '@/components/TextField'; import { useModal } from '@/hooks/useModal'; import Image from 'next/image'; -const DUMMY_DATA = { - userImageUrl: '/images/dummy_avatar.png', - isCertifiedStudent: true, - name: 'Glow', - reliabilityLevel: 'GLODDY', - introduce: '안녕하세요! 저는 글로우입니다. 잘 부탁드립니다.', - reason: '저는 이 모임에 가입하고 싶습니다.', -}; +interface ApplyCardProps { + apply: Apply; +} -export default function ApplyCard() { - const { userImageUrl, isCertifiedStudent, name, reliabilityLevel, introduce, reason } = - DUMMY_DATA; +export default function ApplyCard({ apply }: ApplyCardProps) { + const { userImageUrl, userNickname, reliabilityLevel, introduce, reason } = apply; const { open, close } = useModal(); @@ -28,15 +23,15 @@ export default function ApplyCard() { const handleRejectClick = () => {}; return ( -
+
-

{name}

+

{userNickname}

(); + + const { data: appliesData } = useGetApplies(groupId); + const { applies, totalCount } = appliesData; + + const [currentApplication, setCurrentApplication] = useState(!!totalCount ? 1 : 0); return (
@@ -21,16 +57,24 @@ export default function ManageDetail() { application

- {currentApplication}/{4} + {currentApplication}/{totalCount}

- {/* TODO: Swiper로 변경 예정 */} - - {Array.from({ length: 3 }).map((_, index) => ( - + setCurrentApplication(swiper.activeIndex + 1)} + > + {applies.map((apply) => ( + + + ))} - +
); } diff --git a/src/app/(main)/grouping/[groupId]/manage/page.tsx b/src/app/(main)/grouping/[groupId]/manage/page.tsx index 9ceb86665..16c73af46 100644 --- a/src/app/(main)/grouping/[groupId]/manage/page.tsx +++ b/src/app/(main)/grouping/[groupId]/manage/page.tsx @@ -1,13 +1,25 @@ import ManageDetail from './components/ManageDetail.client'; import ManageHeader from './components/ManageHeader.client'; +import { Keys, getApplies } from '@/apis/groups'; +import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; import { Suspense } from 'react'; -export default function GroupingManagePage() { +interface GroupingManagePageProps { + params: { + groupId: string; + }; +} + +export default function GroupingManagePage({ params }: GroupingManagePageProps) { + const groupId = Number(params.groupId); + return ( <> - + getApplies(groupId)} queryKey={Keys.getApplies(groupId)}> + + ); From eb0c00558885eb62c43c9d5b2689b9411e79aec4 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 02:39:04 +0900 Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20=EC=A7=80=EC=9B=90=EC=84=9C?= =?UTF-8?q?=EA=B0=80=20=EC=97=86=EC=9D=84=20=EB=95=8C=20UI=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manage/components/ManageDetail.client.tsx | 11 ++++++++++- .../members/components/MemberList.client.tsx | 11 +++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/app/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx b/src/app/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx index 8acdf41f5..cedab2b5c 100644 --- a/src/app/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx +++ b/src/app/(main)/grouping/[groupId]/manage/components/ManageDetail.client.tsx @@ -43,7 +43,16 @@ export default function ManageDetail() { const { data: appliesData } = useGetApplies(groupId); const { applies, totalCount } = appliesData; - const [currentApplication, setCurrentApplication] = useState(!!totalCount ? 1 : 0); + const [currentApplication, setCurrentApplication] = useState(1); + + if (!totalCount) { + return ( + + cancel +

아직 지원서가 없어요.

+ + ); + } return (
diff --git a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx index 3eeec89e6..ac156f749 100644 --- a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx +++ b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx @@ -3,20 +3,23 @@ import { Avatar } from '@/components/Avatar'; import { IconButton } from '@/components/Button'; import { Divider } from '@/components/Divider'; import { Flex } from '@/components/Layout'; -import { MEMBER_DUMMY_DATA } from '@/constants/dummyData'; import Image from 'next/image'; import Link from 'next/link'; import { Fragment } from 'react'; import type { GroupMember } from '@/apis/groups'; -export default function MemeberList() { +interface MemberListProps { + members: GroupMember[]; +} + +export default function MemeberList({ members }: MemberListProps) { return (
- {MEMBER_DUMMY_DATA.map((member, index) => ( + {members.map((member, index) => ( - {MEMBER_DUMMY_DATA.length - 1 !== index && } + {members.length - 1 !== index && } ))}
From f3ca853172e8eab23b03aa0439ddcc862cc7f808 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 02:48:47 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20Provider=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20index.ts=EC=97=90=20=EB=AC=B6?= =?UTF-8?q?=EC=96=B4=EB=91=90=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grouping/[groupId]/articles/[articleId]/page.tsx | 2 +- src/app/(main)/grouping/[groupId]/manage/page.tsx | 2 +- src/app/(main)/grouping/[groupId]/members/page.tsx | 2 +- src/app/(main)/grouping/[groupId]/page.tsx | 2 +- .../grouping/components/GroupingCardList.client.tsx | 5 +++-- src/app/(main)/grouping/page.tsx | 2 +- src/app/(main)/profile/mates/page.tsx | 2 +- src/app/(main)/profile/page.tsx | 2 +- src/app/(main)/profile/praise/page.tsx | 2 +- src/app/(main)/profile/setting/edit/page.tsx | 2 +- src/app/layout.tsx | 2 +- src/components/common/Provider/HydrationProvider.tsx | 10 +++++----- src/components/common/Provider/index.ts | 2 ++ 13 files changed, 20 insertions(+), 17 deletions(-) create mode 100644 src/components/common/Provider/index.ts diff --git a/src/app/(main)/grouping/[groupId]/articles/[articleId]/page.tsx b/src/app/(main)/grouping/[groupId]/articles/[articleId]/page.tsx index b113f25ab..27d5dac39 100644 --- a/src/app/(main)/grouping/[groupId]/articles/[articleId]/page.tsx +++ b/src/app/(main)/grouping/[groupId]/articles/[articleId]/page.tsx @@ -3,7 +3,7 @@ import ArticleHeader from './components/ArticleHeader.client'; import CommentForm from './components/CommentForm'; import { Keys, getArticle } from '@/apis/groups'; import { RejectedFallback } from '@/components/common/ErrorBoundary'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { Spacing } from '@/components/common/Spacing'; import { QueryAsyncBoundary } from '@suspensive/react-query'; diff --git a/src/app/(main)/grouping/[groupId]/manage/page.tsx b/src/app/(main)/grouping/[groupId]/manage/page.tsx index 16c73af46..b49bad9a7 100644 --- a/src/app/(main)/grouping/[groupId]/manage/page.tsx +++ b/src/app/(main)/grouping/[groupId]/manage/page.tsx @@ -1,7 +1,7 @@ import ManageDetail from './components/ManageDetail.client'; import ManageHeader from './components/ManageHeader.client'; import { Keys, getApplies } from '@/apis/groups'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { Suspense } from 'react'; interface GroupingManagePageProps { diff --git a/src/app/(main)/grouping/[groupId]/members/page.tsx b/src/app/(main)/grouping/[groupId]/members/page.tsx index 4bc031132..6e6e09674 100644 --- a/src/app/(main)/grouping/[groupId]/members/page.tsx +++ b/src/app/(main)/grouping/[groupId]/members/page.tsx @@ -1,7 +1,7 @@ import MemeberList from './components/MemberList.client'; import MembersHeader from './components/MembersHeader'; import { Keys, getGroupMembers } from '@/apis/groups'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { Suspense } from 'react'; interface GroupingMembersPageProps { diff --git a/src/app/(main)/grouping/[groupId]/page.tsx b/src/app/(main)/grouping/[groupId]/page.tsx index 9a0b76b6c..3cf2c37b7 100644 --- a/src/app/(main)/grouping/[groupId]/page.tsx +++ b/src/app/(main)/grouping/[groupId]/page.tsx @@ -1,7 +1,7 @@ import GroupingDetail from './components/GroupingDetail.client'; import { Keys, getGroupDetail } from '@/apis/groups'; import { RejectedFallback } from '@/components/common/ErrorBoundary'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { QueryAsyncBoundary } from '@suspensive/react-query'; import { redirect } from 'next/navigation'; diff --git a/src/app/(main)/grouping/components/GroupingCardList.client.tsx b/src/app/(main)/grouping/components/GroupingCardList.client.tsx index e730aaa5d..272364f57 100644 --- a/src/app/(main)/grouping/components/GroupingCardList.client.tsx +++ b/src/app/(main)/grouping/components/GroupingCardList.client.tsx @@ -1,15 +1,16 @@ 'use client'; import { useGetGroups } from '@/apis/groups'; import { GroupingCard } from '@/components/Card'; +import { Flex } from '@/components/Layout'; export default function GroupingCardList() { const { data } = useGetGroups(); return ( -
+ {data.map((groupingData) => ( ))} -
+ ); } diff --git a/src/app/(main)/grouping/page.tsx b/src/app/(main)/grouping/page.tsx index 53f1279ed..240ad530f 100644 --- a/src/app/(main)/grouping/page.tsx +++ b/src/app/(main)/grouping/page.tsx @@ -4,7 +4,7 @@ import { Keys } from '@/apis/groups/keys'; import { FloatAddButton } from '@/components/Button'; import { RejectedFallback } from '@/components/common/ErrorBoundary'; import { BottomNavigationBar } from '@/components/common/NavigationBar'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { Spacing } from '@/components/common/Spacing'; import { Header } from '@/components/Header'; import { QueryAsyncBoundary } from '@suspensive/react-query'; diff --git a/src/app/(main)/profile/mates/page.tsx b/src/app/(main)/profile/mates/page.tsx index eac6f9c49..3aa529d97 100644 --- a/src/app/(main)/profile/mates/page.tsx +++ b/src/app/(main)/profile/mates/page.tsx @@ -1,7 +1,7 @@ import ProfileMatesDetail from './components/MatesDetail.client'; import MatesHeader from './components/MatesHeader'; import { Keys, getMates } from '@/apis/profile'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { QueryAsyncBoundary } from '@suspensive/react-query'; export default function MatesPage() { diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx index d205b1a18..b03391d72 100644 --- a/src/app/(main)/profile/page.tsx +++ b/src/app/(main)/profile/page.tsx @@ -3,7 +3,7 @@ import ProfileHeader from './components/ProfileHeader.client'; import ProfileSection from './components/ProfileSection.client'; import { Keys, getProfile } from '@/apis/profile'; import { BottomNavigationBar } from '@/components/common/NavigationBar'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { QueryAsyncBoundary } from '@suspensive/react-query'; export default function Profile() { diff --git a/src/app/(main)/profile/praise/page.tsx b/src/app/(main)/profile/praise/page.tsx index 07d6b0869..fa7d0f231 100644 --- a/src/app/(main)/profile/praise/page.tsx +++ b/src/app/(main)/profile/praise/page.tsx @@ -1,7 +1,7 @@ import PraiseHeader from './components/PraiseHeader'; import ProfilePraiseDetail from './components/ProfilePraiseDetail.client'; import { Keys, getPraises } from '@/apis/profile'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { QueryAsyncBoundary } from '@suspensive/react-query'; export default function PraisePage() { diff --git a/src/app/(main)/profile/setting/edit/page.tsx b/src/app/(main)/profile/setting/edit/page.tsx index 755ac615a..90262fb08 100644 --- a/src/app/(main)/profile/setting/edit/page.tsx +++ b/src/app/(main)/profile/setting/edit/page.tsx @@ -1,7 +1,7 @@ import ProfileEdit from './components/ProfileEdit.client'; import { Keys, getProfile } from '@/apis/profile'; import { RejectedFallback } from '@/components/common/ErrorBoundary'; -import { HydrationProvider } from '@/components/common/Provider/HydrationProvider'; +import { HydrationProvider } from '@/components/common/Provider'; import { QueryAsyncBoundary } from '@suspensive/react-query'; export default function page() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c4b4e0c93..8ce0d9583 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import './globals.css'; -import QueryProvider from '@/components/common/Provider/QueryProvider.client'; +import { QueryProvider } from '@/components/common/Provider'; import { BASE_WEB_URL, KAKAO_SDK_URL } from '@/constants'; import ModalProvider from '@/hooks/useModal/ModalProvider'; import Script from 'next/script'; diff --git a/src/components/common/Provider/HydrationProvider.tsx b/src/components/common/Provider/HydrationProvider.tsx index aee794afb..1ff3c4f58 100644 --- a/src/components/common/Provider/HydrationProvider.tsx +++ b/src/components/common/Provider/HydrationProvider.tsx @@ -4,18 +4,18 @@ import { cache } from 'react'; import type { StrictPropsWithChildren } from '@/types'; import type { QueryFunction, QueryKey } from '@tanstack/react-query'; -type HydrationProviderProps = { +interface HydrationProviderProps { queryKey: QueryKey; queryFn: QueryFunction; isInfiniteQuery?: boolean; -}; +} -export const HydrationProvider = async ({ +export default async function HydrationProvider({ children, queryKey, queryFn, isInfiniteQuery = false, -}: StrictPropsWithChildren) => { +}: StrictPropsWithChildren) { const getQueryClient = cache(() => new QueryClient()); const queryClient = getQueryClient(); @@ -26,4 +26,4 @@ export const HydrationProvider = async ({ const dehydratedState = dehydrate(queryClient); return {children}; -}; +} diff --git a/src/components/common/Provider/index.ts b/src/components/common/Provider/index.ts new file mode 100644 index 000000000..6a75adf46 --- /dev/null +++ b/src/components/common/Provider/index.ts @@ -0,0 +1,2 @@ +export { default as HydrationProvider } from './HydrationProvider'; +export { default as QueryProvider } from './QueryProvider.client'; From 4ffde978eb08136747bf3fe5148cf952a8675495 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 02:51:00 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=9E=84=EB=A9=A4?= =?UTF-8?q?=EB=B2=84=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../members/components/MemberList.client.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx index ac156f749..c7c917ace 100644 --- a/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx +++ b/src/app/(main)/grouping/[groupId]/members/components/MemberList.client.tsx @@ -1,25 +1,25 @@ 'use client'; +import { type GroupMember, useGetGroupMembers } from '@/apis/groups'; import { Avatar } from '@/components/Avatar'; import { IconButton } from '@/components/Button'; import { Divider } from '@/components/Divider'; import { Flex } from '@/components/Layout'; +import { useNumberParams } from '@/hooks/useNumberParams'; import Image from 'next/image'; import Link from 'next/link'; import { Fragment } from 'react'; -import type { GroupMember } from '@/apis/groups'; +export default function MemeberList() { + const { groupId } = useNumberParams<['groupId']>(); + const { data: groupMemberData } = useGetGroupMembers(groupId); + const { groupMembers } = groupMemberData; -interface MemberListProps { - members: GroupMember[]; -} - -export default function MemeberList({ members }: MemberListProps) { return (
- {members.map((member, index) => ( + {groupMembers.map((member, index) => ( - {members.length - 1 !== index && } + {groupMembers.length - 1 !== index && } ))}
From 51a7a5865ecda4cf85573be7fd4564fde7da89d1 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 03:20:03 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20useShowMore=20=ED=9B=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/GroupingDetail.client.tsx | 4 +-- .../components/TopSection.client.tsx | 17 ++++++++- src/hooks/useShowMore.ts | 36 +++++++++++++++++++ 3 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/hooks/useShowMore.ts diff --git a/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx b/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx index 003d99dc0..a15839eec 100644 --- a/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx @@ -21,7 +21,7 @@ export default function GroupingDetail({ groupId }: GroupingDetailProps) { const { myGroup } = groupDetailData; return ( -
+ <> @@ -60,6 +60,6 @@ export default function GroupingDetail({ groupId }: GroupingDetailProps) { )} -
+ ); } diff --git a/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx index 6abefd79d..d34b3c7d5 100644 --- a/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx @@ -2,10 +2,14 @@ import { useGetGroupDetail } from '@/apis/groups'; import { Spacing } from '@/components/common/Spacing'; import { useNumberParams } from '@/hooks/useNumberParams'; +import { useShowMore } from '@/hooks/useShowMore'; import Image from 'next/image'; export default function TopSection() { const { groupId } = useNumberParams<['groupId']>(); + const { contentRef, setShowFullText, shouldShowButton, showFullText } = useShowMore({ + maxLines: 6, + }); const { data: groupDetailData } = useGetGroupDetail(groupId); const { imageUrl, title, content } = groupDetailData; @@ -19,7 +23,18 @@ export default function TopSection() {

{title}

-

{content}

+
+ {showFullText ? content : content.split('\n').slice(0, 6).join('\n')} +
+ + {shouldShowButton && ( + + )}
diff --git a/src/hooks/useShowMore.ts b/src/hooks/useShowMore.ts new file mode 100644 index 000000000..49b4bf2c4 --- /dev/null +++ b/src/hooks/useShowMore.ts @@ -0,0 +1,36 @@ +import { useEffect, useRef, useState } from 'react'; + +interface UseShowMoreProps { + maxLines: number; +} + +export function useShowMore({ maxLines }: UseShowMoreProps) { + const [showFullText, setShowFullText] = useState(false); + const contentRef = useRef(null); + const [shouldShowButton, setShouldShowButton] = useState(false); + + useEffect(() => { + if (contentRef.current) { + const contentHeight = contentRef.current.clientHeight; + const lineHeight = parseInt(getComputedStyle(contentRef.current).lineHeight, 10); + const numVisibleLines = contentHeight / lineHeight; + + setShouldShowButton(numVisibleLines > maxLines); + } + }, [maxLines]); + + useEffect(() => { + if (contentRef.current) { + const lineHeight = parseInt(getComputedStyle(contentRef.current).lineHeight, 10); + contentRef.current.style.maxHeight = showFullText ? 'none' : `${lineHeight * maxLines}px`; + contentRef.current.style.overflow = showFullText ? 'visible' : 'hidden'; + } + }, [showFullText, maxLines]); + + return { + contentRef, + showFullText, + shouldShowButton, + setShowFullText, + }; +} From 3845ada0719a3bb748986ecc3ec57ebba1cf8638 Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 03:36:04 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=A3=BC=EC=86=8C=20=EB=B3=B5=EC=82=AC?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/GroupingDetail.client.tsx | 2 ++ .../detail/LocationSection.client.tsx | 22 ++++++++++++++----- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx b/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx index a15839eec..484bc9b80 100644 --- a/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/GroupingDetail.client.tsx @@ -8,6 +8,7 @@ import { useGetGroupDetail } from '@/apis/groups'; import { BottomFixedDiv } from '@/components/BottomFixedDiv'; import { Button, ButtonGroup, FloatAddButton } from '@/components/Button'; import { Spacing } from '@/components/common/Spacing'; +import { Divider } from '@/components/Divider'; import { Tabs } from '@/components/Tabs'; import Link from 'next/link'; @@ -24,6 +25,7 @@ export default function GroupingDetail({ groupId }: GroupingDetailProps) { <> + diff --git a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx index d94e88bfc..1843717af 100644 --- a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx @@ -2,6 +2,8 @@ import { useGetGroupDetail } from '@/apis/groups'; import { Spacing } from '@/components/common/Spacing'; +import { Toast } from '@/components/Modal'; +import { useModal } from '@/hooks/useModal'; import { useNumberParams } from '@/hooks/useNumberParams'; import Image from 'next/image'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; @@ -9,20 +11,28 @@ import { Map, MapMarker } from 'react-kakao-maps-sdk'; export default function LocationSection() { const { groupId } = useNumberParams<['groupId']>(); const { data: groupDetailData } = useGetGroupDetail(groupId); - const { place, placeLatitude, placeLongitude } = groupDetailData; + const { place, placeLatitude, placeLongitude, placeAddress } = groupDetailData; + + const { open } = useModal({ delay: 2000 }); + + const handleClipboardClick = () => { + navigator.clipboard + .writeText(placeAddress) + .then(() => open(주소가 복사되었습니다.)) + .catch(() => open(주소 복사에 실패했습니다.)); + }; return (

모임 위치

-
+
copy console.log('복사')} />

- 경희회관{' '} - 호프, 요리주점 + {place || '경희회관'} + {/* 호프, 요리주점 */}

-

{place}

+

{placeAddress}

From dd7a5ad8800374e3ddbdc66a8f13949302211edd Mon Sep 17 00:00:00 2001 From: kang Date: Wed, 30 Aug 2023 11:49:51 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grouping/[groupId]/components/TopSection.client.tsx | 4 ++-- .../components/detail/LocationSection.client.tsx | 3 ++- src/hooks/useShowMore.ts | 8 ++++++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx index d34b3c7d5..acb67cf13 100644 --- a/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/TopSection.client.tsx @@ -7,7 +7,7 @@ import Image from 'next/image'; export default function TopSection() { const { groupId } = useNumberParams<['groupId']>(); - const { contentRef, setShowFullText, shouldShowButton, showFullText } = useShowMore({ + const { contentRef, toggleShowFullText, shouldShowButton, showFullText } = useShowMore({ maxLines: 6, }); @@ -30,7 +30,7 @@ export default function TopSection() { {shouldShowButton && ( diff --git a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx index 1843717af..5b407b402 100644 --- a/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx +++ b/src/app/(main)/grouping/[groupId]/components/detail/LocationSection.client.tsx @@ -26,13 +26,14 @@ export default function LocationSection() {

모임 위치

-
+
copy (null); const [shouldShowButton, setShouldShowButton] = useState(false); + const contentRef = useRef(null); + + const toggleShowFullText = () => { + setShowFullText((prev) => !prev); + }; useEffect(() => { if (contentRef.current) { @@ -31,6 +35,6 @@ export function useShowMore({ maxLines }: UseShowMoreProps) { contentRef, showFullText, shouldShowButton, - setShowFullText, + toggleShowFullText, }; }