feat(community): 마이 페이지 추가 #38

m2na7 · 2024-12-02T15:38:28Z

Summary

#35

마이페이지(회원)를 추가했습니다.

Tasks

마이페이지 퍼블리싱
boxShadow 토큰 추가
DS button 컴포넌트내 outline 색상 추가

Screenshot

DS button 컴포넌트내 outline 색상 추가

마이페이지

전화번호, 이메일 변경 기능을 추가했습니다.

To Reviewer

컴파운드 패턴을 적용했는데 해당 부분에 대한 피드백 부탁드립니다.

coderabbitai · 2024-12-02T15:38:34Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

SunwooJaeho · 2024-12-02T17:32:50Z

apps/community/src/components/users/user-card.css.ts

+  padding: themeVars.spacing.xl,
+  border: `1px solid ${themeVars.color.gray300}`,
+  borderRadius: themeVars.borderRadius.xl,
+  boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1)',


box-shadow를 토큰화 하는 건 어떨까요? 다른 분들의 의견이 궁금합니다!

좋은생각같아요 ~ 다른 분들도 동의하시면 이번 PR에 반영해서 올리겠습니다 !
@gwansikk @wontory

동의합니다. 토큰화 된다면 더욱 편리하게 사용할 수 있을거 같아요

해당 부분 추가했습니다 ~

SunwooJaeho

LGTM🙋‍♂️

gwansikk · 2024-12-03T07:54:32Z

기존 cs-home 프로젝트에서는 마이페이지에 비밀번호 변경 및 활동내역도 확인할 수 있었어요. 관련하여 추가하는건 어떨까요

회원정보	활동내역

gwansikk

USERS: `${MOCK_BASE_URL}/users`,

URL을 users를 사용한 이유가 궁금합니다. 해당 페이지는 '마이 페이지'인데 users라고 지정한 이유가 있나요?

apps/community/src/components/users/user-list.tsx

m2na7 · 2024-12-03T08:26:23Z

USERS: `${MOCK_BASE_URL}/users`,
URL을 users를 사용한 이유가 궁금합니다. 해당 페이지는 '마이 페이지'인데 users라고 지정한 이유가 있나요?

처음에는 my보다는 users로 네이밍하는게 확장성 측면에서 더 자연스럽다고 판단했는데, users는 마이페이지 보다는 회원관리(admin)쪽에 더가까운 것 같네요. my로 수정하겠습니다 !

apps/community/src/app/my/page.tsx

gwansikk

LGTM

gwansikk · 2024-12-03T10:26:28Z

apps/community/src/components/my/my-info-field.tsx

+  value: React.ReactNode;
+}
+
+function MyInfoField({ title, value }: Props) {


해당 컴포넌트가 단독으로 사용되는 유즈-케이스가 없다면 MyInfoCard에 컴파운드 패턴으로 묶어도 좋을거 같아요

…lity

m2na7 · 2024-12-04T13:55:03Z

@SunwooJaeho @gwansikk @wontory
이메일, 전화번호 변경기능 추가했습니다. 구조가 많이 바뀌었으니 확인 부탁드려요.
피드백은 환영입니다 !
비밀번호 변경기능은 해당 PR이 merge되면 다른 페이지(다른 PR)로 구현할 예정입니다.

apps/community/src/components/my/my-info-card.css.ts

apps/community/src/components/my/my-info-card.tsx

SunwooJaeho · 2024-12-04T14:52:43Z

apps/community/src/app/my/page.tsx

+      <MyInfoCardList
+        userDetails={userDetails}
+        userEditableDetails={userEditableDetails}
+      />


해당 부분은 details와 editableDetails를 분리하여 관리하는 것이 좋다고 생각이 드는데, 다른 분들의 의견이 궁금합니다!
@m2na7 @gwansikk @wontory

Suggested change

<MyInfoCardList

userDetails={userDetails}

userEditableDetails={userEditableDetails}

/>

<MyInfoCard

userDetails={userDetails}

/>

<MyInfoEditalbeCard

userEditableDetails={userEditableDetails}

/>

이런 방식으로 컴포넌트를 분리하는게 좋아보인다는건가요 ??

제 개인적인 생각으로는 MyInfoCardList로 감싸는 것이 아니라 해당 코드를 그대로 드러내는 것이 낫다고 생각이 됩니다!

<MyInfoCard title="내 프로필" layout="default"> {userDetails.map((detail) => ( <MyInfoCard.Field key={detail.title} title={detail.title} value={detail.value} /> ))} </MyInfoCard> <MyInfoCard title="기본 정보" layout="singleColumn"> {userEditableDetails.map((detail) => ( <MyInfoCard.EditableField key={detail.title} title={detail.title} value={detail.value} onSave={(value) => handleSave(detail.title, value)} /> ))} </MyInfoCard>

MyPage는 async/await를 포함하는 서버 컴포넌트이고, MyInfoCardList컴포넌트는 상태관리와 이벤트 핸들링을 포함한 클라이언트 컴포넌트라서 분리를 해줬습니다.
말씀하신 방법대로 코드를 드러내는건 무리라고 생각하고, 다른 접근방법이 있다면 말씀해주세요 !!

제가 놓친 부분이 있었네요😂 그럼 일단 넘어가는 걸로 할까요?

SunwooJaeho · 2024-12-04T15:00:48Z

apps/community/src/components/my/my-info-card.css.ts

+const cardContent = styleVariants({
+  default: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',


cols에 대한 토큰화가 가능하다고 생각하는데, 다른 분들의 의견이 궁금해요!

저는 필요 이상의 토큰화라고 생각해요

저는 토큰화하면 활용성이 좋다고 생각해요 (Tailwind CSS와 같이 선언적으로 사용)

css-in-js 형식으로 스타일 파일 외에서 스타일 주입이 가능해요

SunwooJaeho

LGTM👍

gwansikk · 2024-12-05T13:00:52Z

apps/community/src/components/my/my-info-card.css.ts

+const cardContent = styleVariants({
+  default: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',


저는 토큰화하면 활용성이 좋다고 생각해요 (Tailwind CSS와 같이 선언적으로 사용)

css-in-js 형식으로 스타일 파일 외에서 스타일 주입이 가능해요

gwansikk · 2024-12-05T13:01:48Z

packages/design-system/src/components/button/button.css.ts

👍👍👍

gwansikk · 2024-12-05T13:04:35Z

apps/community/src/components/my/my-info-card.tsx

+            <Input
+              value={currentValue}
+              onChange={(e) => setCurrentValue(e.target.value)}
+              placeholder={value}
+              type="text"
+            />


EditMode에 따라 Input이 없어졌다 생겼다 하는 것은 접근성, 사용자 경험에 안좋다고 생각해요. input의 disabled 속성을 사용해서 입력을 제어하는 건 어떤가요

좋은 생각입니다 !
사용자의 시각적인 피드백을 위해서, 추가적으로 DS내 input컴포넌트에 focus속성을 추가했습니다

gwansikk · 2024-12-05T13:10:16Z

apps/community/src/components/my/my-info-card-list.tsx

@@ -0,0 +1,43 @@
+'use client';


API Call 때문에 미리 클라이언트 컴포넌트로 정의한건가요?

맞아요. 추가적으로 클라이언트 컴포넌트로 선언해주지 않으면 오류가 발생해서 해당 방식으로 구현했어요

gwansikk · 2024-12-05T13:16:02Z

apps/community/src/components/my/my-info-card.tsx

+            onClick={() => {
+              setIsEditing(false);
+              onSave?.(currentValue);
+            }}


해당 onClick은 콜백으로 넘기고, handleEditToggle는 선언하여 사용하는데 이유가 있을까요? 해당 onClick은 왜 콜백으로 구현하게 되었나요

재사용되지 않고, 간단한 로직이라 생각하여 콜백으로 넘겨 구현했어요.
코드의 일관성과 가독성을 위해 선언적으로 사용하는게 더 좋아보이네요 수정했습니다 !

…focus states

gwansikk · 2024-12-08T09:37:09Z

apps/community/src/app/my/page.tsx

+      <MyInfoCardList
+        userDetails={userDetails}
+        userEditableDetails={userEditableDetails}
+      />


<MyInfoCardList userDetails={userDetails} userEditableDetails={userEditableDetails} />

userDetails나 userEditableDetails는 동일한 타입({ title: string; value: number | string; })인데요. 이를 Props로 나누지 말고 data로 넘겨서 각각 렌더링하는 방법으로 하면 더 구분감있고 이해하기 쉬운 구조라고 생각해요.

지금 처럼 props로 구분하여 한 번에 받고 한 컴포넌트로 렌더링하는 특별한 이유가 있나요?

data로 넘겨서 각각 렌더링하는 방법으로 하면 더 구분감있고 이해하기 쉬운 구조라고 생각해요.

해당 의견에 동의합니다 !
기존 MyInfoCardList를 두 컴포넌트로 분리하여 수정했습니다.

<MyInfoProfileCard data={userDetails} /> <MyInfoEditableProfileCard data={userEditableDetails} />

gwansikk

LGTM!! 수고하셨습니다~

m2na7 added 3 commits December 3, 2024 00:33

feat(community): add userCard component

91ab4c1

feat(community): add userList component

94980dc

feat(community): add user page

ac2a39c

m2na7 added the enhancement New feature or request label Dec 2, 2024

m2na7 requested a review from SunwooJaeho December 2, 2024 15:38

m2na7 self-assigned this Dec 2, 2024

m2na7 requested review from wontory and gwansikk as code owners December 2, 2024 15:38

m2na7 linked an issue Dec 2, 2024 that may be closed by this pull request

[Feature]: 마이페이지 #35

Closed

fix(community): rename getUser function

6889ca4

SunwooJaeho reviewed Dec 2, 2024

View reviewed changes

SunwooJaeho approved these changes Dec 2, 2024

View reviewed changes

Merge branch 'develop' into feature/my-page

6eac56a

SunwooJaeho approved these changes Dec 2, 2024

View reviewed changes

feat(design-system): add box-shadow tokens

e7c6901

gwansikk requested changes Dec 3, 2024

View reviewed changes

apps/community/src/components/users/user-list.tsx Outdated Show resolved Hide resolved

apps/community/src/components/users/user-list.tsx Outdated Show resolved Hide resolved

refactor(community): rename MyPage and related components for clarity

5659d38

gwansikk reviewed Dec 3, 2024

View reviewed changes

apps/community/src/app/my/page.tsx Outdated Show resolved Hide resolved

gwansikk approved these changes Dec 3, 2024

View reviewed changes

gwansikk and others added 2 commits December 3, 2024 19:26

Update apps/community/src/app/my/page.tsx

68c591e

feat(community): add list card component and implement edit functiona…

c3bddf3

…lity

SunwooJaeho requested changes Dec 4, 2024

View reviewed changes

SunwooJaeho reviewed Dec 4, 2024

View reviewed changes

gwansikk and others added 3 commits December 5, 2024 00:46

Merge branch 'develop' into feature/my-page

c408abb

feat(design-system): add outline variant to button component

85d9be2

feat(community): update MyInfoCard styles and button variants

8010ec7

SunwooJaeho approved these changes Dec 5, 2024

View reviewed changes

gwansikk reviewed Dec 5, 2024

View reviewed changes

m2na7 added 3 commits December 6, 2024 18:21

feat(community): refactor MyInfoCard and improve edit functionality

2bfa07c

feat(design-system): enhance input component styles for disabled and …

6badd36

…focus states

refactor(community): update export method of MyInfoCardList component

6be05a4

gwansikk requested changes Dec 8, 2024

View reviewed changes

feat(community): split MyInfoCardList into two components

7ec6145

m2na7 requested a review from a team as a code owner December 8, 2024 13:28

gwansikk approved these changes Dec 8, 2024

View reviewed changes

Merge branch 'develop' into feature/my-page

958f4c2

gwansikk merged commit f20df13 into develop Dec 8, 2024
3 checks passed

gwansikk deleted the feature/my-page branch December 8, 2024 13:54

feat(community): 마이 페이지 추가 #38

feat(community): 마이 페이지 추가 #38

Conversation

m2na7 commented Dec 2, 2024 • edited Loading

Summary

Tasks

Screenshot

To Reviewer

coderabbitai bot commented Dec 2, 2024

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

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

SunwooJaeho left a comment

Choose a reason for hiding this comment

gwansikk commented Dec 3, 2024

gwansikk left a comment • edited Loading

Choose a reason for hiding this comment

m2na7 commented Dec 3, 2024

gwansikk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m2na7 commented Dec 4, 2024

SunwooJaeho Dec 4, 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

SunwooJaeho Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SunwooJaeho left a 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

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

gwansikk left a comment • edited Loading

Choose a reason for hiding this comment

m2na7 commented Dec 2, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

gwansikk left a comment •

edited

Loading

SunwooJaeho Dec 4, 2024 •

edited

Loading

SunwooJaeho Dec 4, 2024 •

edited

Loading

gwansikk left a comment •

edited

Loading