From b2677e4b8b3db86f6ebc37e9ec3e76b920b2a71d Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 21 Jan 2024 17:22:46 +0900 Subject: [PATCH 01/24] =?UTF-8?q?=F0=9F=92=84=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 프로필 페이지 그룹 버튼 변경 --- app/frontend/src/hooks/useRouter.tsx | 5 ++ app/frontend/src/pages/GroupJoin/index.css.ts | 50 +++++++++++++ app/frontend/src/pages/GroupJoin/index.tsx | 73 +++++++++++++++++++ .../src/pages/Profile/MyGroup/index.tsx | 36 ++++++--- app/frontend/src/pages/Profile/index.css.ts | 16 +--- 5 files changed, 156 insertions(+), 24 deletions(-) create mode 100644 app/frontend/src/pages/GroupJoin/index.css.ts create mode 100644 app/frontend/src/pages/GroupJoin/index.tsx diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx index 75f2a8cba..a999fcb22 100644 --- a/app/frontend/src/hooks/useRouter.tsx +++ b/app/frontend/src/hooks/useRouter.tsx @@ -12,6 +12,7 @@ import { ProfilePage, NotFound, } from '@/pages'; +import { GroupJoin } from '@/pages/GroupJoin'; export const useRouter = () => createBrowserRouter([ @@ -50,6 +51,10 @@ export const useRouter = () => path: 'groups', element: , }, + { + path: 'group/join', + element: , + }, ], }, { diff --git a/app/frontend/src/pages/GroupJoin/index.css.ts b/app/frontend/src/pages/GroupJoin/index.css.ts new file mode 100644 index 000000000..ed1e8ffcf --- /dev/null +++ b/app/frontend/src/pages/GroupJoin/index.css.ts @@ -0,0 +1,50 @@ +import { style } from '@vanilla-extract/css'; + +import { vars } from '@/styles'; +import { sansRegular16 } from '@/styles/font.css'; + +export const confirmButtons = style({ + display: 'flex', + gap: '1.6rem', +}); + +export const container = style({ + display: 'flex', + flexDirection: 'column', + gap: '3.6rem', + maxWidth: '80rem', + margin: '0 auto', +}); + +export const group = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '1.6rem', +}); + +export const navLinkButton = style({ + width: '100%', +}); + +export const participants = style([ + sansRegular16, + { + display: 'flex', + gap: '0.4rem', + alignItems: 'center', + }, +]); + +export const section = style({ + display: 'flex', + flexDirection: 'column', + gap: '2.4rem', + + selectors: { + '& + &': { + paddingTop: '2.4rem', + borderTop: `1px solid ${vars.color.grayscale100}`, + }, + }, +}); diff --git a/app/frontend/src/pages/GroupJoin/index.tsx b/app/frontend/src/pages/GroupJoin/index.tsx new file mode 100644 index 000000000..cf1445281 --- /dev/null +++ b/app/frontend/src/pages/GroupJoin/index.tsx @@ -0,0 +1,73 @@ +import { NavLink } from 'react-router-dom'; + +import { Button, Input } from '@morak/ui'; + +import { ReactComponent as People } from '@/assets/icons/people.svg'; +import { fontStyle, vars } from '@/styles'; + +import * as styles from './index.css'; + +export function GroupJoin() { + const { + color: { grayscale200 }, + } = vars; + const { sansBold36, sansBold24, sansBold20, sansRegular18 } = fontStyle; + + return ( +
+
+

그룹 참여

+

1. 참여 방법 선택

+

어떤 방법으로 그룹에 참여할까요?

+
+ + + + +
+
+
+

2. 참여 코드 입력

+

참여 코드를 입력해 주세요.

+ +
+ + +
+
+
+

3. 가입 신청 확인

+
+ 부스트캠프 웹·모바일 9기 + + + 160 + +
+

이 그룹에 가입 신청할까요?

+
+ + +
+
+
+ ); +} diff --git a/app/frontend/src/pages/Profile/MyGroup/index.tsx b/app/frontend/src/pages/Profile/MyGroup/index.tsx index fdc9516c8..cc0ef86ef 100644 --- a/app/frontend/src/pages/Profile/MyGroup/index.tsx +++ b/app/frontend/src/pages/Profile/MyGroup/index.tsx @@ -1,8 +1,8 @@ import { NavLink } from 'react-router-dom'; +import { Button } from '@morak/ui'; import { useQuery } from '@tanstack/react-query'; -import { ReactComponent as ArrowLeft } from '@/assets/icons/arrow_left.svg'; import { Error, Group, LoadingIndicator } from '@/components'; import { queryKeys } from '@/queries'; import { vars } from '@/styles'; @@ -40,16 +40,30 @@ export function MyGroup() { )} - - - 그룹 리스트 보기 - -
{/*
+
+ + + + + + +
); } diff --git a/app/frontend/src/pages/Profile/index.css.ts b/app/frontend/src/pages/Profile/index.css.ts index cdcdecd4e..39c73368e 100644 --- a/app/frontend/src/pages/Profile/index.css.ts +++ b/app/frontend/src/pages/Profile/index.css.ts @@ -1,8 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles'; -import { sansBold16 } from '@/styles/font.css'; - export const container = style({ display: 'flex', flexDirection: 'column', @@ -26,16 +23,9 @@ export const loading = style({ justifyContent: 'center', }); -export const navLinkButton = style([ - sansBold16, - { - display: 'flex', - gap: 0, - alignItems: 'center', - alignSelf: 'end', - color: vars.color.morakGreen, - }, -]); +export const navLinkButton = style({ + width: '100%', +}); export const rotateArrow = style({ transform: 'rotate(180deg)', From c49b33798f72c6a119c611006e6e985819f62734 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 21 Jan 2024 17:40:39 +0900 Subject: [PATCH 02/24] =?UTF-8?q?=F0=9F=92=84=20=EC=B0=B8=EC=97=AC=20?= =?UTF-8?q?=EB=8B=A8=EA=B3=84=EB=B3=84=20=EC=99=84=EB=A3=8C/=EB=B9=84?= =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/GroupJoin/index.css.ts | 17 +++++++++++++++++ app/frontend/src/pages/GroupJoin/index.tsx | 6 +++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/app/frontend/src/pages/GroupJoin/index.css.ts b/app/frontend/src/pages/GroupJoin/index.css.ts index ed1e8ffcf..5bd3ffa64 100644 --- a/app/frontend/src/pages/GroupJoin/index.css.ts +++ b/app/frontend/src/pages/GroupJoin/index.css.ts @@ -40,11 +40,28 @@ export const section = style({ display: 'flex', flexDirection: 'column', gap: '2.4rem', + position: 'relative', + opacity: 1, + transition: 'opacity 0.5s, transform 0.5s', selectors: { '& + &': { paddingTop: '2.4rem', borderTop: `1px solid ${vars.color.grayscale100}`, }, + '&.completed::before': { + position: 'absolute', + zIndex: 10, + width: '100%', + height: '100%', + background: vars.color.grayscaleWhite, + opacity: 0.5, + content: '', + }, + '&.disabled': { + transform: 'translateY(-0.8rem)', + visibility: 'hidden', + opacity: 0, + }, }, }); diff --git a/app/frontend/src/pages/GroupJoin/index.tsx b/app/frontend/src/pages/GroupJoin/index.tsx index cf1445281..2582f8b73 100644 --- a/app/frontend/src/pages/GroupJoin/index.tsx +++ b/app/frontend/src/pages/GroupJoin/index.tsx @@ -15,7 +15,7 @@ export function GroupJoin() { return (
-
+

그룹 참여

1. 참여 방법 선택

어떤 방법으로 그룹에 참여할까요?

@@ -36,7 +36,7 @@ export function GroupJoin() {
-
+

2. 참여 코드 입력

참여 코드를 입력해 주세요.

@@ -49,7 +49,7 @@ export function GroupJoin() {
-
+

3. 가입 신청 확인

부스트캠프 웹·모바일 9기 From ce5e577882730971193cb7640db57dddf82fbf0b Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 21 Jan 2024 17:54:41 +0900 Subject: [PATCH 03/24] =?UTF-8?q?=E2=9C=A8=20=ED=98=84=EC=9E=AC=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=20=EC=8A=A4=ED=85=9D=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/GroupJoin/index.tsx | 55 ++++++++++++++++++---- 1 file changed, 47 insertions(+), 8 deletions(-) diff --git a/app/frontend/src/pages/GroupJoin/index.tsx b/app/frontend/src/pages/GroupJoin/index.tsx index 2582f8b73..fa36b5233 100644 --- a/app/frontend/src/pages/GroupJoin/index.tsx +++ b/app/frontend/src/pages/GroupJoin/index.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { NavLink } from 'react-router-dom'; import { Button, Input } from '@morak/ui'; @@ -13,14 +14,34 @@ export function GroupJoin() { } = vars; const { sansBold36, sansBold24, sansBold20, sansRegular18 } = fontStyle; + const [currentStep, setCurrentStep] = useState(1); + + const getCurrentState = (step: number) => { + if (step > currentStep) { + return 'disabled'; + } + + if (step < currentStep) { + return 'completed'; + } + + return ''; + }; + return (
-
-

그룹 참여

+

그룹 참여

+

1. 참여 방법 선택

어떤 방법으로 그룹에 참여할까요?

- @@ -36,20 +57,32 @@ export function GroupJoin() {
-
+

2. 참여 코드 입력

참여 코드를 입력해 주세요.

- -
-
+

3. 가입 신청 확인

부스트캠프 웹·모바일 9기 @@ -60,7 +93,13 @@ export function GroupJoin() {

이 그룹에 가입 신청할까요?

-
-

3. 가입 신청 확인

+

3. 그룹 확인 및 가입 신청

부스트캠프 웹·모바일 9기 From 93bc07b63c312bd230056c8dcfeb0447ee43f978 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 21 Jan 2024 17:56:45 +0900 Subject: [PATCH 05/24] =?UTF-8?q?=F0=9F=92=84=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=EB=84=88=EB=B9=84=EB=A5=BC=2080rem?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/Groups/index.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/frontend/src/pages/Groups/index.css.ts b/app/frontend/src/pages/Groups/index.css.ts index a7a07cfc1..18cf8f765 100644 --- a/app/frontend/src/pages/Groups/index.css.ts +++ b/app/frontend/src/pages/Groups/index.css.ts @@ -1,7 +1,7 @@ import { style } from '@vanilla-extract/css'; export const container = style({ - maxWidth: '72rem', + maxWidth: '80rem', margin: '0 auto', }); From 709d44d0dc2477b48c20589bf79b31c04405fecd Mon Sep 17 00:00:00 2001 From: Jiseung Date: Mon, 22 Jan 2024 14:56:15 +0900 Subject: [PATCH 06/24] =?UTF-8?q?=F0=9F=9A=9A=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(->=20pages/Group/Join)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/hooks/useRouter.tsx | 4 ++-- app/frontend/src/pages/{GroupJoin => Group/Join}/index.css.ts | 0 app/frontend/src/pages/{GroupJoin => Group/Join}/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename app/frontend/src/pages/{GroupJoin => Group/Join}/index.css.ts (100%) rename app/frontend/src/pages/{GroupJoin => Group/Join}/index.tsx (98%) diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx index a999fcb22..dd17fb98b 100644 --- a/app/frontend/src/hooks/useRouter.tsx +++ b/app/frontend/src/hooks/useRouter.tsx @@ -12,7 +12,7 @@ import { ProfilePage, NotFound, } from '@/pages'; -import { GroupJoin } from '@/pages/GroupJoin'; +import { GroupJoinPage } from '@/pages/Group/Join'; export const useRouter = () => createBrowserRouter([ @@ -53,7 +53,7 @@ export const useRouter = () => }, { path: 'group/join', - element: , + element: , }, ], }, diff --git a/app/frontend/src/pages/GroupJoin/index.css.ts b/app/frontend/src/pages/Group/Join/index.css.ts similarity index 100% rename from app/frontend/src/pages/GroupJoin/index.css.ts rename to app/frontend/src/pages/Group/Join/index.css.ts diff --git a/app/frontend/src/pages/GroupJoin/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx similarity index 98% rename from app/frontend/src/pages/GroupJoin/index.tsx rename to app/frontend/src/pages/Group/Join/index.tsx index 861e0bebf..5b3dafe93 100644 --- a/app/frontend/src/pages/GroupJoin/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -8,7 +8,7 @@ import { fontStyle, vars } from '@/styles'; import * as styles from './index.css'; -export function GroupJoin() { +export function GroupJoinPage() { const { color: { grayscale200 }, } = vars; From ed32d2c4a1d70c07fa1525be0c704628c1b66937 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Mon, 22 Jan 2024 15:30:13 +0900 Subject: [PATCH 07/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EA=B7=B8=EB=A3=B9?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20UI=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/GroupInfo/index.css.ts | 25 +++++++++++++++++++ .../src/components/GroupInfo/index.tsx | 24 ++++++++++++++++++ .../src/pages/Group/Join/index.css.ts | 22 ---------------- app/frontend/src/pages/Group/Join/index.tsx | 17 +++---------- 4 files changed, 53 insertions(+), 35 deletions(-) create mode 100644 app/frontend/src/components/GroupInfo/index.css.ts create mode 100644 app/frontend/src/components/GroupInfo/index.tsx diff --git a/app/frontend/src/components/GroupInfo/index.css.ts b/app/frontend/src/components/GroupInfo/index.css.ts new file mode 100644 index 000000000..32713a6b8 --- /dev/null +++ b/app/frontend/src/components/GroupInfo/index.css.ts @@ -0,0 +1,25 @@ +import { style } from '@vanilla-extract/css'; + +import { vars } from '@/styles'; +import { sansRegular16 } from '@/styles/font.css'; + +export const group = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '0.8rem', + border: `1px solid ${vars.color.morakGreen}`, + padding: '1.6rem', + borderRadius: '0.8rem', + color: vars.color.morakGreen, +}); + +export const participants = style([ + sansRegular16, + { + display: 'flex', + gap: '0.4rem', + alignItems: 'center', + color: vars.color.grayscale200, + }, +]); diff --git a/app/frontend/src/components/GroupInfo/index.tsx b/app/frontend/src/components/GroupInfo/index.tsx new file mode 100644 index 000000000..33290faaa --- /dev/null +++ b/app/frontend/src/components/GroupInfo/index.tsx @@ -0,0 +1,24 @@ +import { ReactComponent as People } from '@/assets/icons/people.svg'; +import { fontStyle, vars } from '@/styles'; + +import * as styles from './index.css'; + +type GroupInfoProps = { + title: string; + participantsCount: number; +}; + +export function GroupInfo({ title, participantsCount }: GroupInfoProps) { + const { grayscale200 } = vars.color; + const { sansBold20 } = fontStyle; + + return ( +
+ {title} + + + {participantsCount} + +
+ ); +} diff --git a/app/frontend/src/pages/Group/Join/index.css.ts b/app/frontend/src/pages/Group/Join/index.css.ts index 494e6b778..15897c2da 100644 --- a/app/frontend/src/pages/Group/Join/index.css.ts +++ b/app/frontend/src/pages/Group/Join/index.css.ts @@ -1,7 +1,6 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles'; -import { sansRegular16 } from '@/styles/font.css'; export const confirmButtons = style({ display: 'flex', @@ -16,31 +15,10 @@ export const container = style({ margin: '0 auto', }); -export const group = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: '0.8rem', - border: `1px solid ${vars.color.morakGreen}`, - padding: '1.6rem', - borderRadius: '0.8rem', - color: vars.color.morakGreen, -}); - export const navLinkButton = style({ width: '100%', }); -export const participants = style([ - sansRegular16, - { - display: 'flex', - gap: '0.4rem', - alignItems: 'center', - color: vars.color.grayscale200, - }, -]); - export const section = style({ display: 'flex', flexDirection: 'column', diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index 5b3dafe93..b2cefa362 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -3,16 +3,13 @@ import { NavLink } from 'react-router-dom'; import { Button, Input } from '@morak/ui'; -import { ReactComponent as People } from '@/assets/icons/people.svg'; -import { fontStyle, vars } from '@/styles'; +import { GroupInfo } from '@/components/GroupInfo'; +import { fontStyle } from '@/styles'; import * as styles from './index.css'; export function GroupJoinPage() { - const { - color: { grayscale200 }, - } = vars; - const { sansBold36, sansBold24, sansBold20, sansRegular18 } = fontStyle; + const { sansBold36, sansBold24, sansRegular18 } = fontStyle; const [currentStep, setCurrentStep] = useState(1); @@ -84,13 +81,7 @@ export function GroupJoinPage() {

3. 그룹 확인 및 가입 신청

-
- 부스트캠프 웹·모바일 9기 - - - 160 - -
+

이 그룹에 가입 신청할까요?

+ +
+
+
+ ); +} From e95d65884aaddd03756c1a3b73beb644ec8f0e17 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Mon, 22 Jan 2024 15:41:49 +0900 Subject: [PATCH 09/24] =?UTF-8?q?=F0=9F=92=84=20GroupInfo=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/components/GroupInfo/index.css.ts | 7 +++++-- app/frontend/src/components/GroupInfo/index.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/frontend/src/components/GroupInfo/index.css.ts b/app/frontend/src/components/GroupInfo/index.css.ts index 32713a6b8..6d2ab160a 100644 --- a/app/frontend/src/components/GroupInfo/index.css.ts +++ b/app/frontend/src/components/GroupInfo/index.css.ts @@ -3,14 +3,17 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles'; import { sansRegular16 } from '@/styles/font.css'; -export const group = style({ +export const container = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.8rem', - border: `1px solid ${vars.color.morakGreen}`, + width: '100%', padding: '1.6rem', + border: `1px solid ${vars.color.morakGreen}`, borderRadius: '0.8rem', + textAlign: 'center', + wordBreak: 'break-all', color: vars.color.morakGreen, }); diff --git a/app/frontend/src/components/GroupInfo/index.tsx b/app/frontend/src/components/GroupInfo/index.tsx index 33290faaa..54d118944 100644 --- a/app/frontend/src/components/GroupInfo/index.tsx +++ b/app/frontend/src/components/GroupInfo/index.tsx @@ -13,7 +13,7 @@ export function GroupInfo({ title, participantsCount }: GroupInfoProps) { const { sansBold20 } = fontStyle; return ( -
+
{title} From 8b623f89f09e77f92a64bef0cef66b2bfc73a99e Mon Sep 17 00:00:00 2001 From: Jiseung Date: Mon, 22 Jan 2024 16:21:42 +0900 Subject: [PATCH 10/24] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20=EC=9E=98=EB=AA=BB?= =?UTF-8?q?=EB=90=9C=20=EA=B7=B8=EB=A3=B9=20=EA=B4=80=EB=A0=A8=20=EC=95=88?= =?UTF-8?q?=EB=82=B4=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/Group/Join/index.tsx | 6 +++--- app/frontend/src/pages/Group/Link/index.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index b2cefa362..014d54be0 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -80,9 +80,9 @@ export function GroupJoinPage() {
-

3. 그룹 확인 및 가입 신청

+

3. 그룹 확인 및 참여

-

이 그룹에 가입 신청할까요?

+

이 그룹에 참여할까요?

diff --git a/app/frontend/src/pages/Group/Link/index.tsx b/app/frontend/src/pages/Group/Link/index.tsx index 6062b35b8..260c6abfe 100644 --- a/app/frontend/src/pages/Group/Link/index.tsx +++ b/app/frontend/src/pages/Group/Link/index.tsx @@ -12,16 +12,16 @@ export function GroupLinkPage() { return (
-

그룹 참여

+

그룹 가입

- 이 그룹에 참여할까요? + 이 그룹에 가입 신청할까요?
From 2922361a9a3445060aed13827d36692f817d9b4e Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 17:38:56 +0900 Subject: [PATCH 11/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EA=B5=AC=EC=A1=B0?= =?UTF-8?q?=20=EB=B6=84=ED=95=B4=20=ED=95=A0=EB=8B=B9=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EB=A5=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=94?= =?UTF-8?q?=EA=B9=A5=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/components/GroupInfo/index.tsx | 6 +++--- app/frontend/src/pages/Group/Join/index.tsx | 4 ++-- app/frontend/src/pages/Group/Link/index.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/frontend/src/components/GroupInfo/index.tsx b/app/frontend/src/components/GroupInfo/index.tsx index 54d118944..6258a2d8b 100644 --- a/app/frontend/src/components/GroupInfo/index.tsx +++ b/app/frontend/src/components/GroupInfo/index.tsx @@ -3,15 +3,15 @@ import { fontStyle, vars } from '@/styles'; import * as styles from './index.css'; +const { grayscale200 } = vars.color; +const { sansBold20 } = fontStyle; + type GroupInfoProps = { title: string; participantsCount: number; }; export function GroupInfo({ title, participantsCount }: GroupInfoProps) { - const { grayscale200 } = vars.color; - const { sansBold20 } = fontStyle; - return (
{title} diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index 014d54be0..ea6955e41 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -8,9 +8,9 @@ import { fontStyle } from '@/styles'; import * as styles from './index.css'; -export function GroupJoinPage() { - const { sansBold36, sansBold24, sansRegular18 } = fontStyle; +const { sansBold36, sansBold24, sansRegular18 } = fontStyle; +export function GroupJoinPage() { const [currentStep, setCurrentStep] = useState(1); const getCurrentState = (step: number) => { diff --git a/app/frontend/src/pages/Group/Link/index.tsx b/app/frontend/src/pages/Group/Link/index.tsx index 260c6abfe..9bd2ae402 100644 --- a/app/frontend/src/pages/Group/Link/index.tsx +++ b/app/frontend/src/pages/Group/Link/index.tsx @@ -5,9 +5,9 @@ import { fontStyle } from '@/styles'; import * as styles from './index.css'; -export function GroupLinkPage() { - const { sansBold36, sansRegular16 } = fontStyle; +const { sansBold36, sansRegular16 } = fontStyle; +export function GroupLinkPage() { const goBack = () => window.history.back(); return ( From fd4cdc0fea8d51851416b6443e6a0719f3fd12ff Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 17:40:36 +0900 Subject: [PATCH 12/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20GroupJoin/GroupLink?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EB=8C=80=ED=95=9C=20index=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - import 문 개선 --- app/frontend/src/hooks/useRouter.tsx | 4 ++-- app/frontend/src/pages/Group/index.ts | 2 ++ app/frontend/src/pages/index.ts | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 app/frontend/src/pages/Group/index.ts diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx index ce64536bc..fb93b81d7 100644 --- a/app/frontend/src/hooks/useRouter.tsx +++ b/app/frontend/src/hooks/useRouter.tsx @@ -9,11 +9,11 @@ import { Calendar, MapLayout, Groups, + GroupJoinPage, + GroupLinkPage, ProfilePage, NotFound, } from '@/pages'; -import { GroupJoinPage } from '@/pages/Group/Join'; -import { GroupLinkPage } from '@/pages/Group/Link'; export const useRouter = () => createBrowserRouter([ diff --git a/app/frontend/src/pages/Group/index.ts b/app/frontend/src/pages/Group/index.ts new file mode 100644 index 000000000..38735e1ca --- /dev/null +++ b/app/frontend/src/pages/Group/index.ts @@ -0,0 +1,2 @@ +export * from './Join/index'; +export * from './Link/index'; diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts index be3bc46ce..412c83239 100644 --- a/app/frontend/src/pages/index.ts +++ b/app/frontend/src/pages/index.ts @@ -1,4 +1,5 @@ export * from './Calendar'; +export * from './Group'; export * from './Groups'; export * from './Main'; export * from './Map'; From 4d5070703cafb0b1a732e85b4d7530f2412827c2 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 18:10:01 +0900 Subject: [PATCH 13/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EA=B7=B8=EB=A3=B9?= =?UTF-8?q?=20=EC=B0=B8=EC=97=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=81?= =?UTF-8?q?=20=EB=8B=A8=EA=B3=84=EB=B3=84=20=EB=8F=99=EC=A0=81=20=ED=81=B4?= =?UTF-8?q?=EB=9E=98=EC=8A=A4=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/Group/Join/index.tsx | 144 ++++++++++---------- 1 file changed, 69 insertions(+), 75 deletions(-) diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index ea6955e41..e85f0d709 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -13,91 +13,85 @@ const { sansBold36, sansBold24, sansRegular18 } = fontStyle; export function GroupJoinPage() { const [currentStep, setCurrentStep] = useState(1); - const getCurrentState = (step: number) => { - if (step > currentStep) { - return 'disabled'; - } - - if (step < currentStep) { - return 'completed'; - } - - return ''; - }; - return (

그룹 참여

-
-

1. 참여 방법 선택

-

어떤 방법으로 그룹에 참여할까요?

-
- - + {currentStep === 1 && ( +
+

1. 참여 방법 선택

+

어떤 방법으로 그룹에 참여할까요?

+
+ + + + +
+
+ )} + {currentStep === 2 && ( +
+

2. 참여 코드 입력

+

참여 코드를 입력해 주세요.

+ +
+ + +
+
+ )} + {currentStep === 3 && ( +
+

3. 그룹 확인 및 참여

+ +

이 그룹에 참여할까요?

+
+ - -
-
-
-

2. 참여 코드 입력

-

참여 코드를 입력해 주세요.

- -
- - -
-
-
-

3. 그룹 확인 및 참여

- -

이 그룹에 참여할까요?

-
- - -
-
+
+
+ )}
); } From 5428488f9294575f0994bf26e69c1fc6303deafd Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 18:27:37 +0900 Subject: [PATCH 14/24] =?UTF-8?q?=F0=9F=92=84=20Stepper=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Stepper/index.css.ts | 49 +++++++++++++++++++ app/frontend/src/components/Stepper/index.tsx | 31 ++++++++++++ app/frontend/src/components/index.ts | 1 + 3 files changed, 81 insertions(+) create mode 100644 app/frontend/src/components/Stepper/index.css.ts create mode 100644 app/frontend/src/components/Stepper/index.tsx diff --git a/app/frontend/src/components/Stepper/index.css.ts b/app/frontend/src/components/Stepper/index.css.ts new file mode 100644 index 000000000..8beb6660b --- /dev/null +++ b/app/frontend/src/components/Stepper/index.css.ts @@ -0,0 +1,49 @@ +import { style } from '@vanilla-extract/css'; + +import { fontStyle, vars } from '@/styles'; + +const { sansBold16 } = fontStyle; +const { grayscale100, grayscale50, morakGreen, grayscaleWhite } = vars.color; + +export const container = style({ + display: 'flex', + gap: '0.8rem', + overflowX: 'auto', + overflowY: 'hidden', +}); + +export const line = style({ + display: 'flex', + width: '0.8rem', + height: '0.2rem', + background: grayscale50, +}); + +export const step = style([ + sansBold16, + { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '50%', + width: '3.2rem', + height: '3.2rem', + background: morakGreen, + color: grayscaleWhite, + + selectors: { + '&.prev': { + background: grayscale100, + }, + '&.next': { + opacity: 0.5, + }, + }, + }, +]); + +export const stepWrapper = style({ + display: 'flex', + alignItems: 'center', + gap: '1rem', +}); diff --git a/app/frontend/src/components/Stepper/index.tsx b/app/frontend/src/components/Stepper/index.tsx new file mode 100644 index 000000000..3cf97d832 --- /dev/null +++ b/app/frontend/src/components/Stepper/index.tsx @@ -0,0 +1,31 @@ +import * as styles from './index.css'; + +type StepperProps = { + currentStep: number; + maxStep: number; +}; + +export function Stepper({ currentStep, maxStep }: StepperProps) { + return ( +
+ {[...Array(maxStep)].map((_, step) => ( + // eslint-disable-next-line react/no-array-index-key +
+
step + 1 + ? 'next' + : '' + }`} + > + {step + 1} +
+ {step < maxStep - 1 ?
: ''} +
+ ))} +
+ ); +} diff --git a/app/frontend/src/components/index.ts b/app/frontend/src/components/index.ts index d2759b2dd..08f3dcd2e 100644 --- a/app/frontend/src/components/index.ts +++ b/app/frontend/src/components/index.ts @@ -20,4 +20,5 @@ export * from './Sidebar/Contents/Chatting'; export * from './Sidebar/Contents/Mogaco'; export * from './Sidebar/Wrapper/ChattingSidebar'; export * from './Sidebar/Wrapper/MogacoSidebar'; +export * from './Stepper'; export * from './UserChip'; From df811cf37e0299ecbb5d68210fd4364fddb509eb Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 18:31:56 +0900 Subject: [PATCH 15/24] =?UTF-8?q?=F0=9F=92=84=20Stepper=20=ED=8A=B8?= =?UTF-8?q?=EB=9E=9C=EC=A7=80=EC=85=98=20=ED=9A=A8=EA=B3=BC=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 --- app/frontend/src/components/Stepper/index.css.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/frontend/src/components/Stepper/index.css.ts b/app/frontend/src/components/Stepper/index.css.ts index 8beb6660b..1cfb79a45 100644 --- a/app/frontend/src/components/Stepper/index.css.ts +++ b/app/frontend/src/components/Stepper/index.css.ts @@ -30,6 +30,7 @@ export const step = style([ height: '3.2rem', background: morakGreen, color: grayscaleWhite, + transition: 'background 0.2s', selectors: { '&.prev': { From f0568ba18a373c482875e7b1f953417978cebf93 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 18:32:49 +0900 Subject: [PATCH 16/24] =?UTF-8?q?=E2=9C=A8=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20Ste?= =?UTF-8?q?pper=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- app/frontend/src/pages/Group/Join/index.css.ts | 8 +++++++- app/frontend/src/pages/Group/Join/index.tsx | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/frontend/src/pages/Group/Join/index.css.ts b/app/frontend/src/pages/Group/Join/index.css.ts index 15897c2da..15140c20d 100644 --- a/app/frontend/src/pages/Group/Join/index.css.ts +++ b/app/frontend/src/pages/Group/Join/index.css.ts @@ -10,11 +10,17 @@ export const confirmButtons = style({ export const container = style({ display: 'flex', flexDirection: 'column', - gap: '3.6rem', + gap: '2.4rem', maxWidth: '80rem', margin: '0 auto', }); +export const header = style({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + export const navLinkButton = style({ width: '100%', }); diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index e85f0d709..581282a00 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -4,6 +4,7 @@ import { NavLink } from 'react-router-dom'; import { Button, Input } from '@morak/ui'; import { GroupInfo } from '@/components/GroupInfo'; +import { Stepper } from '@/components/Stepper'; import { fontStyle } from '@/styles'; import * as styles from './index.css'; @@ -15,7 +16,10 @@ export function GroupJoinPage() { return (
-

그룹 참여

+
+

그룹 참여

+ +
{currentStep === 1 && (

1. 참여 방법 선택

From ecaae262f3f986b8265bd7c23a7fd1849ac49d3e Mon Sep 17 00:00:00 2001 From: Jiseung Date: Fri, 26 Jan 2024 18:35:18 +0900 Subject: [PATCH 17/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B8=EB=8D=B1=EC=8A=A4=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=AA=A9=EB=A1=9D=EC=97=90=20GroupInfo=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 - import문 수정 --- app/frontend/src/components/index.ts | 1 + app/frontend/src/pages/Group/Join/index.tsx | 3 +-- app/frontend/src/pages/Group/Link/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/frontend/src/components/index.ts b/app/frontend/src/components/index.ts index 08f3dcd2e..cf32f57a5 100644 --- a/app/frontend/src/components/index.ts +++ b/app/frontend/src/components/index.ts @@ -4,6 +4,7 @@ export * from './Error'; export * from './FormInput'; export * from './FormInput/Textarea'; export * from './Group'; +export * from './GroupInfo'; export * from './Header'; export * from './Layout'; export * from './Loading'; diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx index 581282a00..4e175f32a 100644 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ b/app/frontend/src/pages/Group/Join/index.tsx @@ -3,8 +3,7 @@ import { NavLink } from 'react-router-dom'; import { Button, Input } from '@morak/ui'; -import { GroupInfo } from '@/components/GroupInfo'; -import { Stepper } from '@/components/Stepper'; +import { GroupInfo, Stepper } from '@/components'; import { fontStyle } from '@/styles'; import * as styles from './index.css'; diff --git a/app/frontend/src/pages/Group/Link/index.tsx b/app/frontend/src/pages/Group/Link/index.tsx index 9bd2ae402..cc1300ebb 100644 --- a/app/frontend/src/pages/Group/Link/index.tsx +++ b/app/frontend/src/pages/Group/Link/index.tsx @@ -1,6 +1,6 @@ import { Button } from '@morak/ui'; -import { GroupInfo } from '@/components/GroupInfo'; +import { GroupInfo } from '@/components'; import { fontStyle } from '@/styles'; import * as styles from './index.css'; From 9902de9c45f30dc910fb64a27c174e1eee52ed62 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 16:52:18 +0900 Subject: [PATCH 18/24] =?UTF-8?q?=F0=9F=94=A5=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=A0=88=EC=B0=A8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 그룹 리스트 페이지 컴포넌트명을 Groups에서 GroupListPage로 변경 - 그룹 링크 페이지 컴포넌트명을 GroupLinkPage에서 GroupJoinPage로 변경 (기존 가입 절차 페이지 대체) - 그룹 링크 페이지는 이제 /groups/:id/join 라우터로 연결됨 - pages/Group 디렉토리 삭제, 하위 파일들을 pages/Groups 경로로 이동 --- app/frontend/src/hooks/useRouter.tsx | 11 +- .../src/pages/Group/Join/index.css.ts | 56 ---------- app/frontend/src/pages/Group/Join/index.tsx | 100 ------------------ app/frontend/src/pages/Group/index.ts | 2 - .../{Group/Link => Groups/Join}/index.css.ts | 0 .../{Group/Link => Groups/Join}/index.tsx | 2 +- .../src/pages/Groups/{ => List}/index.css.ts | 0 .../src/pages/Groups/{ => List}/index.tsx | 2 +- app/frontend/src/pages/Groups/index.ts | 2 + .../src/pages/Profile/MyGroup/index.tsx | 2 +- app/frontend/src/pages/index.ts | 1 - 11 files changed, 8 insertions(+), 170 deletions(-) delete mode 100644 app/frontend/src/pages/Group/Join/index.css.ts delete mode 100644 app/frontend/src/pages/Group/Join/index.tsx delete mode 100644 app/frontend/src/pages/Group/index.ts rename app/frontend/src/pages/{Group/Link => Groups/Join}/index.css.ts (100%) rename app/frontend/src/pages/{Group/Link => Groups/Join}/index.tsx (96%) rename app/frontend/src/pages/Groups/{ => List}/index.css.ts (100%) rename app/frontend/src/pages/Groups/{ => List}/index.tsx (97%) create mode 100644 app/frontend/src/pages/Groups/index.ts diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx index fb93b81d7..14f380dc3 100644 --- a/app/frontend/src/hooks/useRouter.tsx +++ b/app/frontend/src/hooks/useRouter.tsx @@ -8,9 +8,8 @@ import { MogacoPostPage, Calendar, MapLayout, - Groups, + GroupListPage, GroupJoinPage, - GroupLinkPage, ProfilePage, NotFound, } from '@/pages'; @@ -50,16 +49,12 @@ export const useRouter = () => }, { path: 'groups', - element: , + element: , }, { - path: 'group/join', + path: 'groups/:id/join', element: , }, - { - path: 'group/:id', - element: , - }, ], }, { diff --git a/app/frontend/src/pages/Group/Join/index.css.ts b/app/frontend/src/pages/Group/Join/index.css.ts deleted file mode 100644 index 15140c20d..000000000 --- a/app/frontend/src/pages/Group/Join/index.css.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -import { vars } from '@/styles'; - -export const confirmButtons = style({ - display: 'flex', - gap: '1.6rem', -}); - -export const container = style({ - display: 'flex', - flexDirection: 'column', - gap: '2.4rem', - maxWidth: '80rem', - margin: '0 auto', -}); - -export const header = style({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', -}); - -export const navLinkButton = style({ - width: '100%', -}); - -export const section = style({ - display: 'flex', - flexDirection: 'column', - gap: '2.4rem', - position: 'relative', - opacity: 1, - transition: 'opacity 0.5s, transform 0.5s', - - selectors: { - '& + &': { - paddingTop: '2.4rem', - borderTop: `1px solid ${vars.color.grayscale100}`, - }, - '&.completed::before': { - position: 'absolute', - zIndex: 10, - width: '100%', - height: '100%', - background: vars.color.grayscaleWhite, - opacity: 0.75, - content: '', - }, - '&.disabled': { - transform: 'translateY(-0.8rem)', - visibility: 'hidden', - opacity: 0, - }, - }, -}); diff --git a/app/frontend/src/pages/Group/Join/index.tsx b/app/frontend/src/pages/Group/Join/index.tsx deleted file mode 100644 index 4e175f32a..000000000 --- a/app/frontend/src/pages/Group/Join/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useState } from 'react'; -import { NavLink } from 'react-router-dom'; - -import { Button, Input } from '@morak/ui'; - -import { GroupInfo, Stepper } from '@/components'; -import { fontStyle } from '@/styles'; - -import * as styles from './index.css'; - -const { sansBold36, sansBold24, sansRegular18 } = fontStyle; - -export function GroupJoinPage() { - const [currentStep, setCurrentStep] = useState(1); - - return ( -
-
-

그룹 참여

- -
- {currentStep === 1 && ( -
-

1. 참여 방법 선택

-

어떤 방법으로 그룹에 참여할까요?

-
- - - - -
-
- )} - {currentStep === 2 && ( -
-

2. 참여 코드 입력

-

참여 코드를 입력해 주세요.

- -
- - -
-
- )} - {currentStep === 3 && ( -
-

3. 그룹 확인 및 참여

- -

이 그룹에 참여할까요?

-
- - -
-
- )} -
- ); -} diff --git a/app/frontend/src/pages/Group/index.ts b/app/frontend/src/pages/Group/index.ts deleted file mode 100644 index 38735e1ca..000000000 --- a/app/frontend/src/pages/Group/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Join/index'; -export * from './Link/index'; diff --git a/app/frontend/src/pages/Group/Link/index.css.ts b/app/frontend/src/pages/Groups/Join/index.css.ts similarity index 100% rename from app/frontend/src/pages/Group/Link/index.css.ts rename to app/frontend/src/pages/Groups/Join/index.css.ts diff --git a/app/frontend/src/pages/Group/Link/index.tsx b/app/frontend/src/pages/Groups/Join/index.tsx similarity index 96% rename from app/frontend/src/pages/Group/Link/index.tsx rename to app/frontend/src/pages/Groups/Join/index.tsx index cc1300ebb..a60f087bd 100644 --- a/app/frontend/src/pages/Group/Link/index.tsx +++ b/app/frontend/src/pages/Groups/Join/index.tsx @@ -7,7 +7,7 @@ import * as styles from './index.css'; const { sansBold36, sansRegular16 } = fontStyle; -export function GroupLinkPage() { +export function GroupJoinPage() { const goBack = () => window.history.back(); return ( diff --git a/app/frontend/src/pages/Groups/index.css.ts b/app/frontend/src/pages/Groups/List/index.css.ts similarity index 100% rename from app/frontend/src/pages/Groups/index.css.ts rename to app/frontend/src/pages/Groups/List/index.css.ts diff --git a/app/frontend/src/pages/Groups/index.tsx b/app/frontend/src/pages/Groups/List/index.tsx similarity index 97% rename from app/frontend/src/pages/Groups/index.tsx rename to app/frontend/src/pages/Groups/List/index.tsx index 82f1abf84..43d517219 100644 --- a/app/frontend/src/pages/Groups/index.tsx +++ b/app/frontend/src/pages/Groups/List/index.tsx @@ -7,7 +7,7 @@ import { sansBold36 } from '@/styles/font.css'; import * as styles from './index.css'; -export function Groups() { +export function GroupListPage() { const { data: groupList, isLoading } = useQuery({ ...queryKeys.group.all(), staleTime: Infinity, diff --git a/app/frontend/src/pages/Groups/index.ts b/app/frontend/src/pages/Groups/index.ts new file mode 100644 index 000000000..99612b9c7 --- /dev/null +++ b/app/frontend/src/pages/Groups/index.ts @@ -0,0 +1,2 @@ +export * from './Join'; +export * from './List'; diff --git a/app/frontend/src/pages/Profile/MyGroup/index.tsx b/app/frontend/src/pages/Profile/MyGroup/index.tsx index cc0ef86ef..a2455cbe3 100644 --- a/app/frontend/src/pages/Profile/MyGroup/index.tsx +++ b/app/frontend/src/pages/Profile/MyGroup/index.tsx @@ -41,7 +41,7 @@ export function MyGroup() { )}
- + - + {groupType === 'public' ? ( + + ) : ( + + )}
From a1e0e147b46f3ed4ff8562ae72335a5713a83f30 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 17:25:44 +0900 Subject: [PATCH 20/24] =?UTF-8?q?=E2=9C=A8=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=EC=B0=B8=EC=97=AC=20=EB=8F=99=EC=9E=91=EC=9D=84=20=EA=B7=B8?= =?UTF-8?q?=EB=A3=B9=20=EC=B0=B8=EC=97=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B2=98=EB=A6=AC=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=BD=94=EB=93=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Group/GroupButton.tsx | 22 +++++++--------- .../Group/hooks/useGroupJoinLeave.tsx | 7 ++++-- .../components/Group/hooks/useGroupModal.tsx | 2 +- app/frontend/src/pages/Groups/Join/index.tsx | 25 ++++++++++++++++--- 4 files changed, 37 insertions(+), 19 deletions(-) diff --git a/app/frontend/src/components/Group/GroupButton.tsx b/app/frontend/src/components/Group/GroupButton.tsx index a4f42b212..bce02960b 100644 --- a/app/frontend/src/components/Group/GroupButton.tsx +++ b/app/frontend/src/components/Group/GroupButton.tsx @@ -1,3 +1,5 @@ +import { NavLink } from 'react-router-dom'; + import { Button } from '@morak/ui'; import { useGroupJoinAndLeave } from './hooks/useGroupJoinLeave'; @@ -10,13 +12,11 @@ type GroupButtonProps = { }; export function GroupButton({ id, owned, joined }: GroupButtonProps) { - const { handleLeave, handleJoin } = useGroupJoinAndLeave(); - const { openLeaveModal, openJoinModal } = useGroupModal(); + const { handleLeave } = useGroupJoinAndLeave(); + const { openLeaveModal } = useGroupModal(); const onClickLeave = () => openLeaveModal({ onClickConfirm: () => handleLeave(id) }); - const onClickJoin = () => - openJoinModal({ onClickConfirm: () => handleJoin(id) }); return ( <> @@ -37,15 +37,11 @@ export function GroupButton({ id, owned, joined }: GroupButtonProps) { 나가기 ) : ( - + + + ))} ); diff --git a/app/frontend/src/components/Group/hooks/useGroupJoinLeave.tsx b/app/frontend/src/components/Group/hooks/useGroupJoinLeave.tsx index 55d5f3274..2b38a2601 100644 --- a/app/frontend/src/components/Group/hooks/useGroupJoinLeave.tsx +++ b/app/frontend/src/components/Group/hooks/useGroupJoinLeave.tsx @@ -1,11 +1,12 @@ +import { useNavigate } from 'react-router-dom'; + import { useQuery } from '@tanstack/react-query'; import { queryKeys } from '@/queries'; import { useJoinGroupQuery, useLeaveGroupQuery } from '@/queries/hooks/group'; -import { Modal } from '../../Modal'; - export const useGroupJoinAndLeave = () => { + const navigate = useNavigate(); const { mutate: leaveGroup } = useLeaveGroupQuery(); const { mutate: joinGroup } = useJoinGroupQuery(); @@ -20,7 +21,9 @@ export const useGroupJoinAndLeave = () => { if (joinedGroupId) { leaveGroup(joinedGroupId); } + joinGroup(id); + navigate('/groups'); }; const handleLeave = (id: string) => { diff --git a/app/frontend/src/components/Group/hooks/useGroupModal.tsx b/app/frontend/src/components/Group/hooks/useGroupModal.tsx index 470334279..1faec25c5 100644 --- a/app/frontend/src/components/Group/hooks/useGroupModal.tsx +++ b/app/frontend/src/components/Group/hooks/useGroupModal.tsx @@ -25,7 +25,7 @@ export const useGroupModal = () => { }) => { openModal( ; + } const goBack = () => navigate(-1); + const onClickJoin = () => + openJoinModal({ onClickConfirm: () => handleJoin(id) }); + return (

그룹 참여

@@ -30,7 +44,12 @@ export function GroupJoinPage() { 취소 {groupType === 'public' ? ( - ) : ( From df896bca2d4050e0efe35ade09e6abbcea90a5b2 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 17:27:46 +0900 Subject: [PATCH 21/24] =?UTF-8?q?=F0=9F=94=A5=20Stepper=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Stepper/index.css.ts | 50 ------------------- app/frontend/src/components/Stepper/index.tsx | 31 ------------ app/frontend/src/components/index.ts | 1 - 3 files changed, 82 deletions(-) delete mode 100644 app/frontend/src/components/Stepper/index.css.ts delete mode 100644 app/frontend/src/components/Stepper/index.tsx diff --git a/app/frontend/src/components/Stepper/index.css.ts b/app/frontend/src/components/Stepper/index.css.ts deleted file mode 100644 index 1cfb79a45..000000000 --- a/app/frontend/src/components/Stepper/index.css.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -import { fontStyle, vars } from '@/styles'; - -const { sansBold16 } = fontStyle; -const { grayscale100, grayscale50, morakGreen, grayscaleWhite } = vars.color; - -export const container = style({ - display: 'flex', - gap: '0.8rem', - overflowX: 'auto', - overflowY: 'hidden', -}); - -export const line = style({ - display: 'flex', - width: '0.8rem', - height: '0.2rem', - background: grayscale50, -}); - -export const step = style([ - sansBold16, - { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderRadius: '50%', - width: '3.2rem', - height: '3.2rem', - background: morakGreen, - color: grayscaleWhite, - transition: 'background 0.2s', - - selectors: { - '&.prev': { - background: grayscale100, - }, - '&.next': { - opacity: 0.5, - }, - }, - }, -]); - -export const stepWrapper = style({ - display: 'flex', - alignItems: 'center', - gap: '1rem', -}); diff --git a/app/frontend/src/components/Stepper/index.tsx b/app/frontend/src/components/Stepper/index.tsx deleted file mode 100644 index 3cf97d832..000000000 --- a/app/frontend/src/components/Stepper/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as styles from './index.css'; - -type StepperProps = { - currentStep: number; - maxStep: number; -}; - -export function Stepper({ currentStep, maxStep }: StepperProps) { - return ( -
- {[...Array(maxStep)].map((_, step) => ( - // eslint-disable-next-line react/no-array-index-key -
-
step + 1 - ? 'next' - : '' - }`} - > - {step + 1} -
- {step < maxStep - 1 ?
: ''} -
- ))} -
- ); -} diff --git a/app/frontend/src/components/index.ts b/app/frontend/src/components/index.ts index cf32f57a5..dd7b81cae 100644 --- a/app/frontend/src/components/index.ts +++ b/app/frontend/src/components/index.ts @@ -21,5 +21,4 @@ export * from './Sidebar/Contents/Chatting'; export * from './Sidebar/Contents/Mogaco'; export * from './Sidebar/Wrapper/ChattingSidebar'; export * from './Sidebar/Wrapper/MogacoSidebar'; -export * from './Stepper'; export * from './UserChip'; From 9d440cab0c4bad023e7a33506379686a5e21c2c8 Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 17:57:29 +0900 Subject: [PATCH 22/24] =?UTF-8?q?=F0=9F=8D=B1=20lock=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/assets/icons/lock.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 app/frontend/src/assets/icons/lock.svg diff --git a/app/frontend/src/assets/icons/lock.svg b/app/frontend/src/assets/icons/lock.svg new file mode 100644 index 000000000..24b1eb955 --- /dev/null +++ b/app/frontend/src/assets/icons/lock.svg @@ -0,0 +1,4 @@ + + + + From 659830c7598b7d7ce2a773c22b4a9217678273dc Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 18:06:39 +0900 Subject: [PATCH 23/24] =?UTF-8?q?=F0=9F=92=84=20Group,=20GroupInfo=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B9=84?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C=20=EC=97=AC=EB=B6=80=20props=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 - 비공개 그룹일 시 자물쇠 아이콘 표시 추가 --- app/frontend/src/components/Group/index.tsx | 16 +++++++++++++--- .../src/components/GroupInfo/index.css.ts | 6 ++++++ app/frontend/src/components/GroupInfo/index.tsx | 13 +++++++++++-- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/app/frontend/src/components/Group/index.tsx b/app/frontend/src/components/Group/index.tsx index d1137f7ba..35814c18c 100644 --- a/app/frontend/src/components/Group/index.tsx +++ b/app/frontend/src/components/Group/index.tsx @@ -1,25 +1,35 @@ import { ReactComponent as Crown } from '@/assets/icons/crown.svg'; +import { ReactComponent as Lock } from '@/assets/icons/lock.svg'; +import { vars } from '@/styles'; // import { ReactComponent as Count } from '@/assets/icons/people.svg'; -// import { vars } from '@/styles'; import { GroupButton } from './GroupButton'; import * as styles from './index.css'; -// const { grayscale200 } = vars.color; +const { grayscale200 } = vars.color; type GroupProps = { id: string; owned?: boolean; joined?: boolean; + closed?: boolean; name: string; }; -export function Group({ id, owned = false, name, joined = false }: GroupProps) { + +export function Group({ + id, + owned = false, + joined = false, + closed = false, + name, +}: GroupProps) { return (
{owned && }
{name}
+ {closed && }
diff --git a/app/frontend/src/components/GroupInfo/index.css.ts b/app/frontend/src/components/GroupInfo/index.css.ts index 6d2ab160a..2e22b06fc 100644 --- a/app/frontend/src/components/GroupInfo/index.css.ts +++ b/app/frontend/src/components/GroupInfo/index.css.ts @@ -26,3 +26,9 @@ export const participants = style([ color: vars.color.grayscale200, }, ]); + +export const title = style({ + display: 'flex', + alignItems: 'center', + gap: '0.4rem', +}); diff --git a/app/frontend/src/components/GroupInfo/index.tsx b/app/frontend/src/components/GroupInfo/index.tsx index 6258a2d8b..94bceab17 100644 --- a/app/frontend/src/components/GroupInfo/index.tsx +++ b/app/frontend/src/components/GroupInfo/index.tsx @@ -1,3 +1,4 @@ +import { ReactComponent as Lock } from '@/assets/icons/lock.svg'; import { ReactComponent as People } from '@/assets/icons/people.svg'; import { fontStyle, vars } from '@/styles'; @@ -9,12 +10,20 @@ const { sansBold20 } = fontStyle; type GroupInfoProps = { title: string; participantsCount: number; + closed?: boolean; }; -export function GroupInfo({ title, participantsCount }: GroupInfoProps) { +export function GroupInfo({ + title, + participantsCount, + closed = false, +}: GroupInfoProps) { return (
- {title} +
+ {title} + {closed && } +
{participantsCount} From 5ecc253eca722c27ef0933aeb8a6c18e86e7d39a Mon Sep 17 00:00:00 2001 From: Jiseung Date: Sun, 28 Jan 2024 18:12:38 +0900 Subject: [PATCH 24/24] =?UTF-8?q?=F0=9F=90=9B=20GroupInfo=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=88=84=EB=9D=BD?= =?UTF-8?q?=EB=90=9C=20closed=20props=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/frontend/src/pages/Groups/Join/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/frontend/src/pages/Groups/Join/index.tsx b/app/frontend/src/pages/Groups/Join/index.tsx index 8ff9bac85..07c7016b1 100644 --- a/app/frontend/src/pages/Groups/Join/index.tsx +++ b/app/frontend/src/pages/Groups/Join/index.tsx @@ -33,7 +33,11 @@ export function GroupJoinPage() {

그룹 참여

- + {groupType === 'public' ? '이 그룹에 참여할까요?'