-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(community): 마이 페이지 추가 #38
Changes from 15 commits
91ab4c1
94980dc
ac2a39c
6889ca4
6eac56a
e7c6901
5659d38
68c591e
c3bddf3
c408abb
85d9be2
8010ec7
2bfa07c
6badd36
6be05a4
7ec6145
958f4c2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
const myProfile = { | ||
name: '강민하', | ||
phone: '010-0000-0000', | ||
email: '[email protected]', | ||
role: '학부생', | ||
major: '컴퓨터공학부', | ||
id: '201912000', | ||
}; | ||
|
||
export { myProfile }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { myProfile } from './data'; | ||
|
||
export function GET() { | ||
return Response.json({ data: myProfile }); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { MyInfoCardList } from '~/components/my/my-info-card-list'; | ||
import { PageHeader } from '~/components/page-header'; | ||
import { getMyProfile } from './remotes'; | ||
|
||
export const dynamic = 'force-dynamic'; | ||
|
||
export default async function MyPage() { | ||
const { data } = await getMyProfile(); | ||
|
||
const userDetails = [ | ||
{ title: '이름', value: data.name }, | ||
{ title: '학번', value: data.id }, | ||
{ title: '구분', value: data.role }, | ||
{ title: '전공', value: data.major }, | ||
]; | ||
|
||
const userEditableDetails = [ | ||
{ title: '전화번호', value: data.phone }, | ||
{ title: '이메일', value: data.email }, | ||
]; | ||
|
||
return ( | ||
<> | ||
<PageHeader | ||
title="회원 정보" | ||
description="등록한 회원 정보를 확인할 수 있어요." | ||
/> | ||
<MyInfoCardList | ||
userDetails={userDetails} | ||
userEditableDetails={userEditableDetails} | ||
/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
지금 처럼 props로 구분하여 한 번에 받고 한 컴포넌트로 렌더링하는 특별한 이유가 있나요? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
해당 의견에 동의합니다 ! <MyInfoProfileCard data={userDetails} />
<MyInfoEditableProfileCard data={userEditableDetails} /> |
||
</> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { MOCK_END_POINT } from '~/constants/api'; | ||
import { http } from '~/utils/http'; | ||
|
||
interface MyProfile { | ||
id: string; | ||
name: string; | ||
phone: string; | ||
email: string; | ||
role: string; | ||
major: string; | ||
} | ||
|
||
function getMyProfile() { | ||
return http.get<MyProfile>(MOCK_END_POINT.MY_PROFILE); | ||
} | ||
|
||
export { type MyProfile, getMyProfile }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
'use client'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. API Call 때문에 미리 클라이언트 컴포넌트로 정의한건가요? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 맞아요. 추가적으로 클라이언트 컴포넌트로 선언해주지 않으면 오류가 발생해서 해당 방식으로 구현했어요 |
||
|
||
import { MyInfoCard } from '~/components/my/my-info-card'; | ||
|
||
interface MyInfoCardListProps { | ||
userDetails: { title: string; value: string }[]; | ||
userEditableDetails: { title: string; value: string }[]; | ||
} | ||
|
||
function MyInfoCardList({ | ||
userDetails, | ||
userEditableDetails, | ||
}: MyInfoCardListProps) { | ||
const handleSave = (field: string, value: string) => { | ||
// TODO: 필요한 서버 API 호출 로직 추가 | ||
console.log(`${field} 저장: ${value}`); | ||
}; | ||
|
||
return ( | ||
<> | ||
<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> | ||
</> | ||
); | ||
} | ||
|
||
export { MyInfoCardList }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import { screen, themeVars } from '@aics-client/design-system/styles'; | ||
import { style, styleVariants } from '@vanilla-extract/css'; | ||
|
||
const cardWrapper = style({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: themeVars.spacing.lg, | ||
marginBottom: themeVars.spacing.xl, | ||
padding: themeVars.spacing.xl, | ||
border: `1px solid ${themeVars.color.gray300}`, | ||
borderRadius: themeVars.borderRadius.xl, | ||
boxShadow: themeVars.boxShadow.md, | ||
}); | ||
|
||
const cardTitle = style({ | ||
marginBottom: themeVars.spacing.lg, | ||
fontSize: themeVars.fontSize.xl, | ||
fontWeight: themeVars.fontWeight.bold, | ||
}); | ||
|
||
const cardContent = styleVariants({ | ||
default: { | ||
display: 'grid', | ||
SunwooJaeho marked this conversation as resolved.
Show resolved
Hide resolved
|
||
gridTemplateColumns: 'repeat(2, 1fr)', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. cols에 대한 토큰화가 가능하다고 생각하는데, 다른 분들의 의견이 궁금해요! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 저는 필요 이상의 토큰화라고 생각해요 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
gap: themeVars.spacing.lg, | ||
}, | ||
singleColumn: { | ||
display: 'grid', | ||
gridTemplateColumns: '1fr', | ||
gap: themeVars.spacing.lg, | ||
}, | ||
}); | ||
|
||
const field = style({ | ||
margin: '1.5rem 0', | ||
}); | ||
|
||
const fieldTitle = style({ | ||
width: '6rem', | ||
fontSize: themeVars.fontSize.lg, | ||
fontWeight: themeVars.fontWeight.semibold, | ||
}); | ||
|
||
const editFieldWrapper = style({ | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'space-between', | ||
}); | ||
|
||
const editFieldContent = style({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: themeVars.spacing.lg, | ||
|
||
...screen.md({ | ||
display: 'flex', | ||
flexDirection: 'row', | ||
alignItems: 'center', | ||
justifyContent: 'space-between', | ||
}), | ||
}); | ||
|
||
const editField = style({ | ||
width: '15rem', | ||
|
||
...screen.md({ | ||
width: '20rem', | ||
}), | ||
}); | ||
|
||
const buttonWrapper = style({ | ||
display: 'flex', | ||
margin: '1rem 0', | ||
gap: themeVars.spacing.sm, | ||
}); | ||
|
||
export { | ||
cardWrapper, | ||
cardTitle, | ||
cardContent, | ||
field, | ||
fieldTitle, | ||
editFieldWrapper, | ||
editFieldContent, | ||
editField, | ||
buttonWrapper, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
'use client'; | ||
|
||
import { Button, Input } from '@aics-client/design-system'; | ||
import { useState } from 'react'; | ||
import * as styles from '~/components/my/my-info-card.css'; | ||
|
||
interface MyInfoCardProps { | ||
title: string; | ||
layout?: 'default' | 'singleColumn'; | ||
children: React.ReactNode; | ||
} | ||
|
||
interface MyInfoFieldProps { | ||
title: string; | ||
value: string; | ||
} | ||
|
||
interface MyInfoEditableFieldProps extends MyInfoFieldProps { | ||
onSave?: (value: string) => void; | ||
} | ||
|
||
function MyInfoCard({ title, children, layout = 'default' }: MyInfoCardProps) { | ||
return ( | ||
<div className={styles.cardWrapper}> | ||
<h2 className={styles.cardTitle}>{title}</h2> | ||
<div className={styles.cardContent[layout]}>{children}</div> | ||
</div> | ||
); | ||
} | ||
|
||
function MyInfoField({ title, value }: MyInfoFieldProps) { | ||
return ( | ||
<div> | ||
<h3 className={styles.fieldTitle}>{title}</h3> | ||
<p className={styles.field}>{value}</p> | ||
</div> | ||
); | ||
} | ||
|
||
function MyInfoEditableField({ | ||
title, | ||
value, | ||
onSave, | ||
}: MyInfoEditableFieldProps) { | ||
const [isEditing, setIsEditing] = useState(false); | ||
const [currentValue, setCurrentValue] = useState(value); | ||
|
||
const handleEditToggle = () => setIsEditing((prev) => !prev); | ||
const handleSave = () => { | ||
setIsEditing(false); | ||
onSave?.(currentValue); | ||
}; | ||
|
||
return ( | ||
<div className={styles.editFieldWrapper}> | ||
<div className={styles.editFieldContent}> | ||
<h3 className={styles.fieldTitle}>{title}</h3> | ||
<Input | ||
className={styles.editField} | ||
type="text" | ||
value={currentValue} | ||
placeholder={value} | ||
onChange={(e) => setCurrentValue(e.target.value)} | ||
disabled={!isEditing} | ||
/> | ||
</div> | ||
|
||
<div className={styles.buttonWrapper}> | ||
{isEditing ? ( | ||
<> | ||
<Button size="sm" color="outline" onClick={handleSave}> | ||
저장 | ||
</Button> | ||
<Button size="sm" color="outline" onClick={handleEditToggle}> | ||
취소 | ||
</Button> | ||
</> | ||
) : ( | ||
<Button size="sm" color="outline" onClick={handleEditToggle}> | ||
변경 | ||
</Button> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
MyInfoCard.Field = MyInfoField; | ||
MyInfoCard.EditableField = MyInfoEditableField; | ||
|
||
export { MyInfoCard }; |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍👍👍 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const boxShadow = { | ||
sm: '0 1px 2px rgba(0, 0, 0, 0.05)', | ||
md: '0 1px 4px rgba(0, 0, 0, 0.1)', | ||
lg: '0 4px 6px rgba(0, 0, 0, 0.1)', | ||
} as const; | ||
|
||
export default boxShadow; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 부분은 details와 editableDetails를 분리하여 관리하는 것이 좋다고 생각이 드는데, 다른 분들의 의견이 궁금합니다!
@m2na7 @gwansikk @wontory
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이런 방식으로 컴포넌트를 분리하는게 좋아보인다는건가요 ??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제 개인적인 생각으로는 MyInfoCardList로 감싸는 것이 아니라 해당 코드를 그대로 드러내는 것이 낫다고 생각이 됩니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
MyPage는 async/await를 포함하는 서버 컴포넌트이고, MyInfoCardList컴포넌트는 상태관리와 이벤트 핸들링을 포함한 클라이언트 컴포넌트라서 분리를 해줬습니다.
말씀하신 방법대로 코드를 드러내는건 무리라고 생각하고, 다른 접근방법이 있다면 말씀해주세요 !!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제가 놓친 부분이 있었네요😂 그럼 일단 넘어가는 걸로 할까요?