From a837633ef7e3b0a3f03f52acafd1b30d47008bd6 Mon Sep 17 00:00:00 2001 From: Do-hyun Ko Date: Tue, 13 Aug 2024 15:50:49 +0900 Subject: [PATCH 1/5] :pencil2: Simple function name change --- src/api/group/group.ts | 2 +- src/app/[lng]/(group)/group/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/group/group.ts b/src/api/group/group.ts index e03ac436..383dd797 100644 --- a/src/api/group/group.ts +++ b/src/api/group/group.ts @@ -9,7 +9,7 @@ export interface groupInfo { isAdmin: boolean; } -export const getGroupContainMe = async ( +export const getGroupContainingMe = async ( query: 'all' | 'included', ): Promise => { return vaporApi diff --git a/src/app/[lng]/(group)/group/page.tsx b/src/app/[lng]/(group)/group/page.tsx index dce78c79..bc061bbf 100644 --- a/src/app/[lng]/(group)/group/page.tsx +++ b/src/app/[lng]/(group)/group/page.tsx @@ -7,7 +7,7 @@ import * as process from 'node:process'; import { redirect } from 'next/navigation'; import { auth } from '@/api/auth/auth'; -import { getGroupContainMe } from '@/api/group/group'; +import { getGroupContainingMe } from '@/api/group/group'; import Button from '@/app/components/atoms/Button'; import { createTranslation, PropsWithLng } from '@/app/i18next'; From 9f6f80ab918eeaf40d913e7f2056e2c0ac4f645f Mon Sep 17 00:00:00 2001 From: Do-hyun Ko Date: Wed, 21 Aug 2024 18:34:46 +0900 Subject: [PATCH 2/5] :lipstick: Meet the updated group list degin --- .vscode/settings.json | 3 +- src/api/group/group.ts | 36 ++++++++--- src/app/[lng]/(group)/group/GroupItem.tsx | 56 ++++++++++++++++++ src/app/[lng]/(group)/group/GroupList.tsx | 55 ----------------- src/app/[lng]/(group)/group/NotInGroup.tsx | 6 +- src/app/[lng]/(group)/group/page.tsx | 41 ++++++++----- .../molecules/Pagination/Pagination.tsx | 8 +-- src/assets/icons/arrow-right.svg | 1 + src/assets/icons/crown.svg | 4 +- src/assets/icons/group-profile-default.webp | Bin 0 -> 1798 bytes 10 files changed, 123 insertions(+), 87 deletions(-) create mode 100644 src/app/[lng]/(group)/group/GroupItem.tsx delete mode 100644 src/app/[lng]/(group)/group/GroupList.tsx create mode 100644 src/assets/icons/group-profile-default.webp diff --git a/.vscode/settings.json b/.vscode/settings.json index ef04c140..7962fd64 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,6 @@ "cSpell.words": [ "Zabo", "Ziggle" - ] + ], + "svg.preview.background": "custom" } diff --git a/src/api/group/group.ts b/src/api/group/group.ts index 383dd797..6de4ca99 100644 --- a/src/api/group/group.ts +++ b/src/api/group/group.ts @@ -1,18 +1,40 @@ +import dayjs from 'dayjs'; + import { vaporApi } from '..'; -export interface groupInfo { +export interface GroupInfo { + uuid: string; name: string; description: string; - createdAt: Date; - leaderName: string; - memberCount: number; - isAdmin: boolean; + createdAt: dayjs.Dayjs | string; + presidentUuid: string; + president: { + uuid: string; + name: string; + email: string; + createdAt: dayjs.Dayjs | string; + }; + count: number; +} + +export interface InviteCode { + code: string; } export const getGroupContainingMe = async ( query: 'all' | 'included', -): Promise => { +): Promise => { + return vaporApi + .get('/group', { params: { type: query } }) + .then(({ data }) => data); +}; + +export const getGroup = async (uuid: string): Promise => { + return vaporApi.get(`/group/${uuid}`).then(({ data }) => data); +}; + +export const generateInviteCode = async (uuid: string): Promise => { return vaporApi - .get('/group', { params: { type: query } }) + .get(`/group/${uuid}/invite`) .then(({ data }) => data); }; diff --git a/src/app/[lng]/(group)/group/GroupItem.tsx b/src/app/[lng]/(group)/group/GroupItem.tsx new file mode 100644 index 00000000..2446dace --- /dev/null +++ b/src/app/[lng]/(group)/group/GroupItem.tsx @@ -0,0 +1,56 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +import { GroupInfo } from '@/api/group/group'; +import Button from '@/app/components/atoms/Button'; +import { createTranslation, PropsWithLng } from '@/app/i18next'; +import ArrowRight from '@/assets/icons/arrow-right.svg'; +import Crown from '@/assets/icons/crown.svg'; +import GroupProfileDefault from '@/assets/icons/group-profile-default.webp'; +import UserCircle from '@/assets/icons/user-circle.svg'; +import UserCrown from '@/assets/icons/user-crown.svg'; + +const GroupItem = async ({ + params: { lng }, + groupParams, +}: { + params: PropsWithLng; + groupParams: { + group: GroupInfo; + }; +}) => { + const { t } = await createTranslation(lng); + + const group = groupParams.group; + + return ( +
+
+ group-default-profile + +

+ {group.name} +

+ + {group.president ? ( + + ) : ( + <> + )} + +
+ + + + +
+
+ ); +}; + +export default GroupItem; diff --git a/src/app/[lng]/(group)/group/GroupList.tsx b/src/app/[lng]/(group)/group/GroupList.tsx deleted file mode 100644 index 57b9570f..00000000 --- a/src/app/[lng]/(group)/group/GroupList.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { groupInfo } from '@/api/group/group'; -import Button from '@/app/components/atoms/Button'; -import { createTranslation, PropsWithLng } from '@/app/i18next'; -import Crown from '@/assets/icons/crown.svg'; -import UserCircle from '@/assets/icons/user-circle.svg'; -import UserCrown from '@/assets/icons/user-crown.svg'; - -const GroupList = async ({ - params: { lng }, - groupParams, -}: { - params: PropsWithLng; - groupParams: { - group: groupInfo; - }; -}) => { - const { t } = await createTranslation(lng); - - const group = groupParams.group; - - return ( -
-
-
- {group.name} - {group.isAdmin ? : <>} -
-
- - {group.leaderName} -
-
- - {group.memberCount} -
-
-
- {group.isAdmin ? ( - - ) : ( - - )} -
-
- ); -}; - -export default GroupList; diff --git a/src/app/[lng]/(group)/group/NotInGroup.tsx b/src/app/[lng]/(group)/group/NotInGroup.tsx index e03b1a77..6dc83391 100644 --- a/src/app/[lng]/(group)/group/NotInGroup.tsx +++ b/src/app/[lng]/(group)/group/NotInGroup.tsx @@ -1,9 +1,9 @@ -import { PropsWithLng } from '@/app/i18next'; +import { createTranslation, PropsWithLng } from '@/app/i18next'; import { useTranslation } from '@/app/i18next/client'; import BonFire from '@/assets/logos/bonfire.svg'; -const NotInGroup = ({ params: { lng } }: { params: PropsWithLng }) => { - const { t } = useTranslation(lng); +const NotInGroup = async ({ params: { lng } }: { params: PropsWithLng }) => { + const { t } = await createTranslation(lng); return (
diff --git a/src/app/[lng]/(group)/group/page.tsx b/src/app/[lng]/(group)/group/page.tsx index bc061bbf..a00a9992 100644 --- a/src/app/[lng]/(group)/group/page.tsx +++ b/src/app/[lng]/(group)/group/page.tsx @@ -2,16 +2,15 @@ import 'react-calendar/dist/Calendar.css'; import 'react-clock/dist/Clock.css'; import 'react-datetime-picker/dist/DateTimePicker.css'; -import * as process from 'node:process'; - +import dayjs from 'dayjs'; import { redirect } from 'next/navigation'; import { auth } from '@/api/auth/auth'; -import { getGroupContainingMe } from '@/api/group/group'; +import { getGroupContainingMe, GroupInfo } from '@/api/group/group'; import Button from '@/app/components/atoms/Button'; import { createTranslation, PropsWithLng } from '@/app/i18next'; -import GroupList from './GroupList'; +import GroupItem from './GroupItem'; import NotInGroup from './NotInGroup'; const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { @@ -22,22 +21,34 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { // const groupList = await getGroupContainMe('included'); - const exampleData = [ + const exampleData: GroupInfo[] = [ { + uuid: '1', name: '테스트용 그룹', description: '그룹 설명', - createdAt: new Date(), - leaderName: 'XXX', - memberCount: 21, - isAdmin: true, + createdAt: dayjs(new Date()), + count: 10, + presidentUuid: '1', + president: { + uuid: '1', + name: '테스트용', + email: '', + createdAt: dayjs(new Date()), + }, }, { + uuid: '2', name: '다음 그룹', description: '다음 그룹 설명', - createdAt: new Date(), - leaderName: 'XXX', - memberCount: 33, - isAdmin: false, + createdAt: dayjs(new Date()), + count: 10, + presidentUuid: '2', + president: { + uuid: '2', + name: '다음', + email: '', + createdAt: dayjs(new Date()), + }, }, ]; @@ -45,7 +56,7 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { return (
-
+
{t('group.mainTitle')}
@@ -54,7 +65,7 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { ) : ( exampleData.map((group) => { return ( - { {page !== 0 ? ( ) : ( )} {page + 1 !== pages ? ( ) : ( )}
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg index 4c9c7dc7..fc238e1d 100644 --- a/src/assets/icons/arrow-right.svg +++ b/src/assets/icons/arrow-right.svg @@ -2,6 +2,7 @@ viewBox="0 0 30 30" stroke="white" xmlns="http://www.w3.org/2000/svg" + fill="none" > - + + diff --git a/src/assets/icons/group-profile-default.webp b/src/assets/icons/group-profile-default.webp new file mode 100644 index 0000000000000000000000000000000000000000..1a57f8ad69c032cf903f9ed25d56367d1ff12513 GIT binary patch literal 1798 zcmV+h2l@C?Nk&Hg1^@t8MM6+kP&il$0000G0001=005r=06|PpNErkG00EHu?Em95 zU;Ris#D;Y<)uf)&lL;}y1Y3HXzQWeqZruWtb%H6q_u>^S!(gvRivIwPbVrBF?>o3% z`F+327!eZyDr_}|#}ao_x%}3@GGe*l#Mcmm&8LJp@<$!S9syCz*!^v>LF zCG@VN!ZUpei2p^U|A~i9TSn!t>{}ekkNed3hrYkPzUg5+_Orym*4FeCEMf!wa4H|4Qr?z00QH_=()N2$9p z6B%kY)b^7jKeR@!Axp0{vdWXS2BOGQ8LhX#6kMohb7iwm4A~m1HN%(bS{r=H)X*z@ zk$TlRWbC=BBxjOUHfL-A(2=t;0x-xL90Hi-%`Ct(-aG^N%9}5sm3dQXHITW+2zQ1@ zxigmFPU0SS?xwht%5o={=T6??&Q^gtg)(=__}{n8o$^2K6t=kIBUIiJxY(ULvzRc8$@g-IZHo0O$-36}9*NaM~MC-vCPgbG9YdpEui1vdc zKie7slOrZH++E^FrL!@3%#Zuf)~Lcm;=D9_$$4{Ui_Oz{g$d9LVhU1A70`_oom1jnfwg zzn7_70pGP8ZP|VPL5D+`(+NQwaOraUA()pXRq_%9b%LrX2(C$!2>})sMV1H>2#X#| zK(K{HjU^!H!lcC%5W*=*ha87+UUI2$FGE=S9U7bg2ybVWf?NlLdEbiqmNf`@{EyoH z#v%ND8I`T~f(m!f?WoF~+y#m>(rQW{26c+tj(WE52vBNdv80yLQadR3;1h+&X9qyZ zXWuD8zCI4hK7GFuzS84kp!81jXSjZt-JtxoYpbD=Yu7ZOF}h%fVRIo0l*VQ@DnXK& z=@`(fpG(?-kaqH%4rJ?tv(LVky{mkAHaipn`ZZ%@G;uGL%{zrMV!5!D&!z4r#)gen zP$2+TP&gpI0ssJz8UUREDxd(M06uLpmPaHbA|Wi(IM9F%iD?e+GQa>-nf(At({u2YC%vVr2^NP17CQx4CH+&eCd0f8l{sv z3Yr&2w4ZJVN6U(sr8_}gEr1|JU^!m`D>67prkozSs>i{c{ zofmdQLb(0fSIIS_v!emLft+E9Kz#tFAM{% z?j8|tK_|Ky{P8YbbrE<8pNorB=LQ(?0RGK%P0?Na6S-vvEkI#p27_%$q)L1aOBA>i zYmdf%#s103OAs!}LeKUI(pC+Iz*4<0`%9h6yHn+LtcU1E6(1iR28jLF!{8k0Q3{hT z>;^a#*8Jx5%0-|XF0r=lX+Sl`SsHm@OdJWxn@5}rbrSF*k-+hYCv!nzBD!3@TPeef_bTVsF5IMU;4L>rFN7Q<70F1wBpz-Tt9izEajP!-WEc&+022aLq5FC!N&0W{a=M@FTLm;JY0q2NA z(H4{#U`zUGA49FU1NYy4k$vkfXarKbaBcs-03E80eK<(vm++fVh@|`(F>n%ZRawgl oJLY%pjbqn1ZoXV8>Y#gWKqE*EpcV8j^ Date: Wed, 21 Aug 2024 19:28:35 +0900 Subject: [PATCH 3/5] :bug: Fix get groups api connection --- .env | 3 ++- src/api/group/group.ts | 8 +++----- src/api/index.ts | 2 +- src/app/[lng]/(group)/group/page.tsx | 8 +++++--- src/app/api/vapor-bff/[...ziggle]/route.ts | 2 +- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/.env b/.env index 9a7465dd..3210e2c6 100644 --- a/.env +++ b/.env @@ -2,4 +2,5 @@ NEXT_PUBLIC_API_BASE_URL=https://api.stg.ziggle.gistory.me/ NEXT_PUBLIC_IDP_BASE_URL=https://idp.gistory.me/ NEXT_PUBLIC_IDP_CLIENT_ID=ziggle2023 NEXT_PUBLIC_IDP_REDIRECT_URI=http://localhost:3000/api/login -NEXTAUTH_URL=http://localhost:3000 \ No newline at end of file +NEXTAUTH_URL=http://localhost:3000 +NEXT_VAPOR_API_URL=https://api.stg.groups.gistory.me/ \ No newline at end of file diff --git a/src/api/group/group.ts b/src/api/group/group.ts index 6de4ca99..55ffad33 100644 --- a/src/api/group/group.ts +++ b/src/api/group/group.ts @@ -21,12 +21,10 @@ export interface InviteCode { code: string; } -export const getGroupContainingMe = async ( - query: 'all' | 'included', -): Promise => { +export const getGroupContainingMe = async (): Promise => { return vaporApi - .get('/group', { params: { type: query } }) - .then(({ data }) => data); + .get<{ list: GroupInfo[] }>('/group') + .then(({ data }) => data.list); }; export const getGroup = async (uuid: string): Promise => { diff --git a/src/api/index.ts b/src/api/index.ts index 059dde78..0c0c7f00 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -18,7 +18,7 @@ ziggleApi.interceptors.request.use(async (config) => { vaporApi.interceptors.request.use(async (config) => { if (typeof window !== 'undefined') return config; - config.baseURL = process.env.VAPOR_URL!; + config.baseURL = process.env.NEXT_VAPOR_API_URL!; const session = await auth(); if (!session) return config; config.headers.Authorization = `Bearer ${session.accessToken}`; diff --git a/src/app/[lng]/(group)/group/page.tsx b/src/app/[lng]/(group)/group/page.tsx index a00a9992..8ccea596 100644 --- a/src/app/[lng]/(group)/group/page.tsx +++ b/src/app/[lng]/(group)/group/page.tsx @@ -19,7 +19,9 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { const userData = await auth(); if (!userData) redirect(`/${lng}/login`); - // const groupList = await getGroupContainMe('included'); + const groupList = await getGroupContainingMe(); + + console.log(groupList); const exampleData: GroupInfo[] = [ { @@ -60,10 +62,10 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => {
{t('group.mainTitle')}
- {exampleData.length === 0 ? ( + {groupList.length === 0 ? ( ) : ( - exampleData.map((group) => { + groupList.map((group) => { return ( { const url = new URL(request.url); - const base = process.env.VAPOR_URL; + const base = process.env.NEXT_VAPOR_API_URL; const path = context.params.ziggle.join('/'); const search = url.searchParams; const session = await auth(); From cf8db9f08f82d406a397924afb24b2fb93b3c355 Mon Sep 17 00:00:00 2001 From: Do-hyun Ko Date: Wed, 21 Aug 2024 19:29:27 +0900 Subject: [PATCH 4/5] :coffin: Remove dead code --- src/app/[lng]/(group)/group/GroupItem.tsx | 5 ----- src/app/[lng]/(group)/group/page.tsx | 2 -- 2 files changed, 7 deletions(-) diff --git a/src/app/[lng]/(group)/group/GroupItem.tsx b/src/app/[lng]/(group)/group/GroupItem.tsx index 2446dace..19562b16 100644 --- a/src/app/[lng]/(group)/group/GroupItem.tsx +++ b/src/app/[lng]/(group)/group/GroupItem.tsx @@ -2,13 +2,10 @@ import Image from 'next/image'; import Link from 'next/link'; import { GroupInfo } from '@/api/group/group'; -import Button from '@/app/components/atoms/Button'; import { createTranslation, PropsWithLng } from '@/app/i18next'; import ArrowRight from '@/assets/icons/arrow-right.svg'; import Crown from '@/assets/icons/crown.svg'; import GroupProfileDefault from '@/assets/icons/group-profile-default.webp'; -import UserCircle from '@/assets/icons/user-circle.svg'; -import UserCrown from '@/assets/icons/user-crown.svg'; const GroupItem = async ({ params: { lng }, @@ -19,8 +16,6 @@ const GroupItem = async ({ group: GroupInfo; }; }) => { - const { t } = await createTranslation(lng); - const group = groupParams.group; return ( diff --git a/src/app/[lng]/(group)/group/page.tsx b/src/app/[lng]/(group)/group/page.tsx index 8ccea596..0982da3f 100644 --- a/src/app/[lng]/(group)/group/page.tsx +++ b/src/app/[lng]/(group)/group/page.tsx @@ -54,8 +54,6 @@ const GroupMainPage = async ({ params: { lng } }: { params: PropsWithLng }) => { }, ]; - const emptyExampleData = []; - return (
From 63b065075828d076792e8278f7c957e31dad1396 Mon Sep 17 00:00:00 2001 From: Do-hyun Ko Date: Sun, 25 Aug 2024 20:33:00 +0900 Subject: [PATCH 5/5] Update src/app/[lng]/(group)/group/GroupItem.tsx Co-authored-by: Boseong --- src/app/[lng]/(group)/group/GroupItem.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/[lng]/(group)/group/GroupItem.tsx b/src/app/[lng]/(group)/group/GroupItem.tsx index 19562b16..f032dcf1 100644 --- a/src/app/[lng]/(group)/group/GroupItem.tsx +++ b/src/app/[lng]/(group)/group/GroupItem.tsx @@ -32,10 +32,8 @@ const GroupItem = async ({ {group.name}

- {group.president ? ( + {group.president && ( - ) : ( - <> )}