[Design] 그룹 참여/가입 신청 페이지 UI 작성 #506

js43o · 2024-01-22T06:55:24Z

설명

close [FEATURE] 그룹 참여/가입 신청 UI 추가 #505
새로 수정한 플로우는 아래와 같습니다. 혹시 제가 잘못 이해한 부분이나 다른 의견 있으시다면 말씀해 주세요. (URL은 예시입니다)
단순 그룹 정보 표시를 위한 <GroupInfo /> 컴포넌트를 추가했습니다. (기존 <Group /> 컴포넌트와 구별)
- <Group /> 및 <GroupInfo /> 컴포넌트에 비공개 여부를 표현하는 closed props를 추가하였습니다.
기존 마이 페이지에 있던 '그룹 리스트 보기' 버튼명을 '그룹 참여'로 변경했습니다.
기존 그룹 리스트 페이지 컴포넌트를 pages/Groups/List 경로로 이동하였습니다. 컴포넌트 이름도 다른 페이지 컴포넌트와 동일하게 <Groups />에서 <GroupListPage />로 변경했습니다.
이제 그룹 참여 동작은 그룹 아이템 컴포넌트가 아닌 해당 그룹의 참여 페이지에서 처리합니다. 따라서 handleJoin(), openJoinModal() 훅을 그룹 참여 페이지에서 호출하도록 이동하였습니다. (스크린샷을 참고해 주세요)
- 지금은 훅을 원래 경로인 @/components/Group/hooks/...로부터 불러와 사용하고 있는데, 아마 추후 분리하게 될 수도 있을 것 같습니다.

완료한 기능 명세

그룹별 참여/가입 신청 페이지 UI 작성 (/group/:id/join)
그룹 참여 동작을 각 그룹별 참여 페이지에서 수행하도록 변경
그룹 정보 표시 컴포넌트 <GroupInfo /> 추가

스크린샷

bandicam.2024-01-28.17-34-49-799.mp4

비공개 그룹일 때

- 프로필 페이지 그룹 버튼 변경

ttaerrim · 2024-01-26T08:00:32Z

app/frontend/src/pages/Group/Join/index.tsx

+      <section className={`${styles.section} ${getCurrentState(1)}`}>
+        <h3 className={sansBold24}>1. 참여 방법 선택</h3>
+        <p className={sansRegular18}>어떤 방법으로 그룹에 참여할까요?</p>
+        <div className={styles.confirmButtons}>
+          <Button
+            theme="primary"
+            shape="line"
+            size="large"
+            fullWidth
+            onClick={() => setCurrentStep(2)}
+          >
+            참여 코드로 참여할래요
+          </Button>
+          <NavLink to="/groups" className={styles.navLinkButton}>
+            <Button
+              type="button"
+              theme="primary"
+              shape="line"
+              size="large"
+              fullWidth
+            >
+              공개된 그룹을 둘러볼래요
+            </Button>
+          </NavLink>
+        </div>
+      </section>


css로 컴포넌트의 렌더링을 조정하는 것보다 js로 이렇게 쓰는 게 나을 것 같아요.
혹시 다음과 같은 코드를 작성한 이유가 있다면 알려 주세요!

Suggested change

<section className={`${styles.section} ${getCurrentState(1)}`}>

<h3 className={sansBold24}>1. 참여 방법 선택</h3>

<p className={sansRegular18}>어떤 방법으로 그룹에 참여할까요?</p>

<div className={styles.confirmButtons}>

<Button

theme="primary"

shape="line"

size="large"

fullWidth

onClick={() => setCurrentStep(2)}

>

참여 코드로 참여할래요

</Button>

<NavLink to="/groups" className={styles.navLinkButton}>

<Button

type="button"

theme="primary"

shape="line"

size="large"

fullWidth

>

공개된 그룹을 둘러볼래요

</Button>

</NavLink>

</div>

</section>

{currentStep === 1 && (

<section className={styles.section}>

<h3 className={sansBold24}>1. 참여 방법 선택</h3>

<p className={sansRegular18}>어떤 방법으로 그룹에 참여할까요?</p>

<div className={styles.confirmButtons}>

<Button

theme="primary"

shape="line"

size="large"

fullWidth

onClick={() => setCurrentStep(2)}

>

참여 코드로 참여할래요

</Button>

<NavLink to="/groups" className={styles.navLinkButton}>

<Button

type="button"

theme="primary"

shape="line"

size="large"

fullWidth

>

공개된 그룹을 둘러볼래요

</Button>

</NavLink>

</div>

</section>

)}

특별한 이유는 아니지만 뭔가 사용자에게 세 단계의 입력 과정이 연속적으로 이루어지고 있다는 느낌을 주고 싶었던 것 같아요.
말씀하신 방법이 더 맞는 방법인 것 같아서 코드에 반영하였고, 대신 Stepper 컴포넌트를 추가해서 연속적인 느낌을 주도록 했습니다..!

bandicam.2024-01-26.18-33-06-250.mp4

아 이거 미처 놓치고 지나간 부분인데 지나간 부분은 opacity가 낮아지면서 노출이 되는 거였군요...
두 방법 다 아이디어는 좋은 것 같아요 👍

ttaerrim · 2024-01-26T08:02:01Z

app/frontend/src/pages/Group/Join/index.tsx

+import * as styles from './index.css';
+
+export function GroupJoinPage() {
+  const { sansBold36, sansBold24, sansRegular18 } = fontStyle;


function 안에서 정의하는 것보다 외부에서 정의하는 게 좋을 것 같아요.
리렌더링될 때마다 구조분해할당도 일어나지 않을까? 싶은...

=> 2922361 반영했습니다!

ttaerrim · 2024-01-26T08:04:34Z

app/frontend/src/pages/Group/Link/index.tsx

+export function GroupLinkPage() {
+  const { sansBold36, sansRegular16 } = fontStyle;
+
+  const goBack = () => window.history.back();


p3; 뒤로 가기는 window 객체 사용할 건지 react-router-dom 사용할 건지 정하면 좋을 것 같아요.

ttaerrim · 2024-01-26T08:05:22Z

app/frontend/src/pages/Profile/MyGroup/index.tsx

+            그룹 참여
+          </Button>
+        </NavLink>
+        <NavLink to="." className={styles.navLinkButton}>


NavLink의 to에 '.'를 할당하면 어떤 동작이 발생하나요?

현재 페이지를 (새로고침 없이) 다시 불러오는 것 같아요. 아직 그룹 생성 페이지에 대한 경로가 정해지지 않아서 일단 임시로 이렇게 작성했습니다!

ccxz84 · 2024-01-26T08:10:15Z

참여 코드를 입력하면 그룹이 특정 될 것이기 때문에, 참여 코드를 입력한 후 복수 개의 그룹 리스트를 보고 선택하는 동작은 하지 않아야 될 것 같습니다.

LEEJW1953 · 2024-01-26T08:27:27Z

app/frontend/src/hooks/useRouter.tsx

+import { GroupJoinPage } from '@/pages/Group/Join';
+import { GroupLinkPage } from '@/pages/Group/Link';


p3 : 이 부분도 '@pages'에서 바로 import 해오도록 수정해도 좋을 것 같습니다.

=> fd4cdc0, ecaae26 반영했습니다!

- import 문 개선

- import문 수정

ldhbenecia · 2024-01-27T07:29:06Z

p3: 저도 백지님 의견과 마찬가지로 참여코드를 누군가에게 받아서 신청을 넣었다면 그룹이 특정되기 때문에 추가적으로 선택할 필요는 없을 것 같습니다. 해당 참여코드에 대한 그룹이 맞는지 확인하는 용도로 사용되는 경우는 괜찮을 수도 있는데 이야기 해보면 좋을 것 같아요.

- 그룹 리스트 페이지 컴포넌트명을 Groups에서 GroupListPage로 변경 - 그룹 링크 페이지 컴포넌트명을 GroupLinkPage에서 GroupJoinPage로 변경 (기존 가입 절차 페이지 대체) - 그룹 링크 페이지는 이제 /groups/:id/join 라우터로 연결됨 - pages/Group 디렉토리 삭제, 하위 파일들을 pages/Groups 경로로 이동

- 비공개 그룹일 시 자물쇠 아이콘 표시 추가

js43o added 9 commits January 21, 2024 17:22

💄 그룹 참여 페이지 기본 레이아웃 작성

b2677e4

- 프로필 페이지 그룹 버튼 변경

💄 참여 단계별 완료/비활성화 스타일 추가

c49b337

✨ 현재 참여 스텝 변경 기능 추가

ce5e577

💄 그룹 확인 스텝 스타일 수정

a8c7fe7

💄 그룹 리스트 페이지 최대 너비를 80rem으로 변경

93bc07b

🚚 그룹 가입 페이지 경로 변경 (-> pages/Group/Join)

709d44d

♻️ 그룹 정보 UI 컴포넌트 분리

ed32d2c

💄 그룹 링크 참여 페이지 작성

3f21270

💄 GroupInfo 컴포넌트 스타일 수정

e95d658

js43o self-assigned this Jan 22, 2024

js43o added 🎨 Front-end 💄 design labels Jan 22, 2024

js43o changed the title ~~Group join UI~~ [Design] 그룹 참여 페이지 UI 작성 Jan 22, 2024

js43o requested review from ccxz84 and ldhbenecia January 22, 2024 07:17

js43o marked this pull request as ready for review January 22, 2024 07:17

js43o requested review from ttaerrim and LEEJW1953 as code owners January 22, 2024 07:17

js43o marked this pull request as draft January 22, 2024 07:19

✏️ 잘못된 그룹 관련 안내 텍스트 수정

8b623f8

js43o marked this pull request as ready for review January 22, 2024 07:24

ttaerrim reviewed Jan 26, 2024

View reviewed changes

LEEJW1953 reviewed Jan 26, 2024

View reviewed changes

js43o added 6 commits January 26, 2024 17:38

♻️ 구조 분해 할당 코드를 컴포넌트 바깥으로 이동

2922361

♻️ GroupJoin/GroupLink 페이지 컴포넌트에 대한 index 파일 추가

fd4cdc0

- import 문 개선

♻️ 그룹 참여 페이지 각 단계별 동적 클래스 제거

4d50707

💄 Stepper 컴포넌트 추가

5428488

💄 Stepper 트랜지션 효과 추가

df811cf

✨ 그룹 참여 페이지에 Stepper 컴포넌트 추가

f0568ba

♻️ 컴포넌트 인덱스 파일 목록에 GroupInfo 추가

ecaae26

- import문 수정

js43o closed this Jan 28, 2024

js43o reopened this Jan 28, 2024

js43o marked this pull request as draft January 28, 2024 03:49

js43o added 7 commits January 28, 2024 16:52

💄 그룹 참여/가입 신청 페이지 수정

2ca7fc7

✨ 그룹 참여 동작을 그룹 참여 페이지에서 처리하도록 코드 이동

a1e0e14

🔥 Stepper 컴포넌트 삭제

df896bc

🍱 lock 아이콘 추가

9d440ca

💄 Group, GroupInfo 컴포넌트에 비공개 여부 props 추가

659830c

- 비공개 그룹일 시 자물쇠 아이콘 표시 추가

🐛 GroupInfo 컴포넌트에 누락된 closed props 추가

5ecc253

js43o marked this pull request as ready for review January 28, 2024 09:13

js43o changed the title ~~[Design] 그룹 참여 페이지 UI 작성~~ [Design] 그룹 참여/가입 신청 페이지 UI 작성 Jan 28, 2024

js43o closed this Feb 3, 2024

js43o deleted the group-join-ui branch February 3, 2024 11:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Design] 그룹 참여/가입 신청 페이지 UI 작성 #506

[Design] 그룹 참여/가입 신청 페이지 UI 작성 #506

js43o commented Jan 22, 2024 •

edited

Loading

ttaerrim Jan 26, 2024

js43o Jan 26, 2024

ttaerrim Jan 26, 2024

ttaerrim Jan 26, 2024

js43o Jan 26, 2024

ttaerrim Jan 26, 2024

ttaerrim Jan 26, 2024

js43o Jan 26, 2024

ccxz84 commented Jan 26, 2024

LEEJW1953 Jan 26, 2024

js43o Jan 26, 2024 •

edited

Loading

ldhbenecia commented Jan 27, 2024

		import { GroupJoinPage } from '@/pages/Group/Join';
		import { GroupLinkPage } from '@/pages/Group/Link';

[Design] 그룹 참여/가입 신청 페이지 UI 작성 #506

[Design] 그룹 참여/가입 신청 페이지 UI 작성 #506

Conversation

js43o commented Jan 22, 2024 • edited Loading

설명

완료한 기능 명세

스크린샷

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccxz84 commented Jan 26, 2024

Choose a reason for hiding this comment

js43o Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

ldhbenecia commented Jan 27, 2024

js43o commented Jan 22, 2024 •

edited

Loading

js43o Jan 26, 2024 •

edited

Loading