Skip to content
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.

Sign up for GitHub

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

style: 마이페이지 마이펫 모바일 적용 #251

Merged
merged 1 commit into from
Dec 19, 2024
Merged

style: 마이페이지 마이펫 모바일 적용 #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,22 @@ export const MergePreview = ({ materialPersona, targetPersona }: MergePersonaPro

const containerStyle = css({
position: 'relative',
display: 'flex',
justifyContent: 'center',
padding: '32px 32px 12px',
overflow: 'hidden',
minHeight: 'fit-content',

_mobile: {
padding: 0,
},
});

const itemContainerStyle = flex({
alignItems: 'center',
justifyContent: 'center',
gap: '24px',
justifyContent: 'space-between',
width: '100%',
maxWidth: '612px',
});

const iconStyle = css({
Expand Down
78 changes: 31 additions & 47 deletions apps/web/src/app/[locale]/mypage/my-pet/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useState } from 'react';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { css, cx } from '_panda/css';
import { center, flex } from '_panda/patterns';
import { flex } from '_panda/patterns';
import { dropPet, type Persona } from '@gitanimals/api';
import { userQueries } from '@gitanimals/react-query';
import { Button } from '@gitanimals/ui-panda';
Expand All @@ -25,28 +25,26 @@ function MypageMyPets() {
const [selectPersona, setSelectPersona] = useState<Persona | null>(null);

return (
<>
<div className={cx(subStyle, flex({ flexDir: 'column' }))}>
<SelectedPetTable currentPersona={selectPersona} reset={() => setSelectPersona(null)} />
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('pet-list')}</h2>

<div className={listStyle}>
<SelectPersonaList
selectPersona={selectPersona ? [selectPersona.id] : []}
onSelectPersona={(persona) => setSelectPersona(persona)}
initSelectPersonas={(list) => {
if (!selectPersona) {
setSelectPersona(list[0]);
}
}}
/>
</div>
</section>
<p className={captionMessageStyle}>{t('sell-to-other')}</p>
</div>
<div className={noticeStyle}>{t('no-mobile-support')}</div>
</>
<div className={flex({ flexDir: 'column' })}>
<SelectedPetTable currentPersona={selectPersona} reset={() => setSelectPersona(null)} />
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('pet-list')}</h2>

<div className={listStyle}>
<SelectPersonaList
selectPersona={selectPersona ? [selectPersona.id] : []}
onSelectPersona={(persona) => setSelectPersona(persona)}
initSelectPersonas={(list) => {
if (!selectPersona) {
setSelectPersona(list[0]);
}
}}
/>
</div>
Comment on lines +34 to +43
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

에러 처리 개선이 필요합니다.

컴포넌트의 주요 기능들에 대한 에러 처리가 보완되면 좋을 것 같습니다:

  1. SelectPersonaList의 초기화 과정
  2. MergePersona 컴포넌트의 렌더링

다음과 같은 에러 바운더리 구현을 제안드립니다:

class PetManagementErrorBoundary extends React.Component {
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // 에러 로깅 및 사용자 피드백
    toast.error('펫 관리 중 오류가 발생했습니다');
  }
  
  render() {
    return this.props.children;
  }
}

컴포넌트를 에러 바운더리로 감싸서 사용:

 return (
+  <PetManagementErrorBoundary>
     <div className={flex({ flexDir: 'column' })}>
       {/* 기존 컴포넌트 내용 */}
     </div>
+  </PetManagementErrorBoundary>
 );

Also applies to: 146-151

</section>

<p className={captionMessageStyle}>{t('sell-to-other')}</p>
</div>
);
}

Expand All @@ -66,30 +64,6 @@ const listStyle = cx(
}),
customScrollStyle,
);
const subStyle = css({
_mobile: {
display: 'none',
},
});

const noticeStyle = center({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: '#019c5a',
color: 'white',
zIndex: 1000,
display: 'none',
textStyle: 'glyph24.bold',
whiteSpace: 'pre-wrap',
lineHeight: '1.5',
textAlign: 'center',
_mobile: {
display: 'flex',
},
});

const captionMessageStyle = css({
textStyle: 'glyph18.regular',
Expand All @@ -103,6 +77,7 @@ const captionMessageStyle = css({

const selectPetContainerStyle = css({
position: 'relative',

'& .heading': {
textStyle: 'glyph18.bold',
color: 'white',
Expand Down Expand Up @@ -167,6 +142,7 @@ function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProps) {
</>
)}
</div>

{currentPersona && (
<MergePersona
key={currentPersona.id}
Expand Down Expand Up @@ -202,6 +178,10 @@ const theadCss = css({
},

marginBottom: '4px',

_mobile: {
fontSize: '16px',
},
});

const rowStyle = css({
Expand Down Expand Up @@ -229,4 +209,8 @@ const rowStyle = css({
overflow: 'hidden',
textOverflow: 'ellipsis',
},

_mobile: {
fontSize: '16px',
},
});
Loading