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

마이페이지 레이아웃 수정 건 #219

Merged
merged 5 commits into from
Oct 30, 2024
Merged

마이페이지 레이아웃 수정 건 #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0eedb34
fix: 진짜진짜 레이아웃을 하드코딩이 아닌 값으로 드디어 수정했습니다 (아마도)
sumi-0011 Oct 22, 2024
8b59292
refactor: name 체크 안해도 되서 삭제
sumi-0011 Oct 22, 2024
18fe1b6
refactor: export로 변환 및 section 사용
sumi-0011 Oct 22, 2024
b97d58d
refactor: farm type 레이아웃 수정
sumi-0011 Oct 30, 2024
87ad950
Merge branch 'main' into refactor/mypage-layout-re
sumi-0011 Oct 30, 2024
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
88 changes: 46 additions & 42 deletions apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { css } from '_panda/css';
import type { Persona } from '@gitanimals/api';
import { userQueries } from '@gitanimals/react-query';
import { Button } from '@gitanimals/ui-panda';
import { useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
Expand All @@ -16,9 +17,8 @@ import { useClientUser } from '@/utils/clientAuth';
import { copyClipBoard } from '@/utils/copy';

import { SelectPersonaList } from '../PersonaList';
import { userQueries } from '@gitanimals/react-query';

function FarmType() {
export function FarmType() {
const queryClient = useQueryClient();
const t = useTranslations('Mypage');

Expand Down Expand Up @@ -76,55 +76,59 @@ function FarmType() {
};

return (
<>
<section className={farmSectionStyle}>
{name && (
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('change-pet')}</h2>
<Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
{isExtend ? t('shrink-button') : t('extend-button')}
</Button>
<div className={selectPersonaListStyle}>
<SelectPersonaList
name={name}
loadingPersona={loadingPersona}
selectPersona={selectPersona}
onSelectPersona={onSelectPersona}
initSelectPersonas={initSelectPersonas}
isExtend={isExtend}
/>
</div>
</section>
)}

<div>
<div className={farmStyle}>
<GitanimalsFarm imageKey={`${selectPersona.length}/${loading ? 'loading' : ''}`} sizes={[600, 300]} />
</div>
<Button onClick={onLinkCopy} mt={16} size="m">
{t('copy-link-title')}
</Button>
</div>
<div className={farmSectionStyle}>
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('change-pet')}</h2>
<Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
{isExtend ? t('shrink-button') : t('extend-button')}
</Button>
</section>
<section className={isExtend ? flexGrowSectionStyle : ''}>
<SelectPersonaList
name={name}
loadingPersona={loadingPersona}
selectPersona={selectPersona}
onSelectPersona={onSelectPersona}
initSelectPersonas={initSelectPersonas}
isExtend={isExtend}
/>
</section>
</>

<div>
<div className={farmStyle}>
<GitanimalsFarm imageKey={`${selectPersona.length}/${loading ? 'loading' : ''}`} sizes={[600, 300]} />
</div>
<Button onClick={onLinkCopy} mt={16} size="m">
{t('copy-link-title')}
</Button>
</div>
</div>
);
}

export default FarmType;

const selectPersonaListStyle = css({
maxH: '400px',
overflowY: 'auto',
_mobile: {
maxH: '250px',
},
const flexGrowSectionStyle = css({
flex: '1',
minHeight: '0',
overflow: 'auto',
display: 'flex',
flexWrap: 'wrap',
});

const farmSectionStyle = css({
display: 'flex',
flexDirection: 'column',
gap: '40px',
padding: '40px 0',
width: '100%',
maxHeight: '100%',
py: 40,
gap: 24,

_mobile: {
background: 'none',
maxHeight: 'auto',
height: 'auto',
overflowY: 'auto',
borderRadius: 0,
},
});

const farmStyle = css({ borderRadius: '12px', overflow: 'hidden', width: 'fit-content' });
Expand Down
65 changes: 39 additions & 26 deletions apps/web/src/app/[locale]/mypage/(github-custom)/OneType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,48 +41,61 @@ export function OneType({}: Props) {
};

return (
<section className={sectionStyle}>
{name && (
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('change-pet')}</h2>
<Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
{isExtend ? t('shrink-button') : t('extend-button')}
</Button>

<div className={selectPersonaListStyle}>
<SelectPersonaList
name={name}
selectPersona={selectPersona ? [selectPersona] : []}
onSelectPersona={(persona) => setSelectPersona(persona.id)}
isExtend={isExtend}
/>
</div>
</section>
)}
<div className={sectionContianer}>
<section className={selectPetContainerStyle}>
<h2 className="heading">{t('change-pet')}</h2>
<Button className="extend-button" onClick={() => setIsExtend((prev) => !prev)}>
{isExtend ? t('shrink-button') : t('extend-button')}
</Button>
</section>

<section className={isExtend ? flexGrowSectionStyle : ''}>
<SelectPersonaList
name={name}
selectPersona={selectPersona ? [selectPersona] : []}
onSelectPersona={(persona) => setSelectPersona(persona.id)}
isExtend={isExtend}
/>
</section>

{/* TODO: 임시로 모바일에선 input 안보이게 처리 */}
<SizeInputList onApply={(width, height) => setSizes({ width, height })} />
<div>
<section>
<div className={lineContainerStyle} style={{ width: sizes.width, height: sizes.height }}>
<GitanimalsLine sizes={[sizes.width, sizes.height]} petId={selectPersona} />
</div>
<Button onClick={onLinkCopy} mt={16} size="m">
{t('copy-link-title')}
</Button>
</div>
</section>
</section>
</div>
);
}

// TODO: 임시 방편
const selectPersonaListStyle = css({
maxH: '400px',
overflowY: 'auto',
const sectionContianer = css({
display: 'flex',
flexDirection: 'column',
width: '100%',
maxHeight: '100%',
py: 40,

_mobile: {
maxH: '250px',
background: 'none',
maxHeight: 'auto',
height: 'auto',
overflowY: 'auto',
borderRadius: 0,
},
});

const flexGrowSectionStyle = css({
flex: '1',
minHeight: '0',
overflow: 'auto',
display: 'flex',
flexWrap: 'wrap',
});
Comment on lines +91 to +97
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

스타일 최적화를 제안드립니다.

flexGrowSectionStyle의 구현이 레이아웃 문제를 잘 해결했습니다. 성능 최적화를 위해 다음과 같은 변경을 고려해보세요:

 const flexGrowSectionStyle = css({
   flex: '1',
   minHeight: '0',
   overflow: 'auto',
   display: 'flex',
   flexWrap: 'wrap',
+  willChange: 'flex-basis',
 });

이 변경은 flex 애니메이션 성능을 향상시킬 수 있습니다.

Committable suggestion was skipped due to low confidence.


const selectPetContainerStyle = css({
position: 'relative',
'& .heading': {
Expand Down
21 changes: 12 additions & 9 deletions apps/web/src/app/[locale]/mypage/(github-custom)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import type { ReactNode } from 'react';
import { cx } from '_panda/css';
import { css, cx } from '_panda/css';
import { flex } from '_panda/patterns';
import { ReactNode } from 'react';
import { FarmType } from './FarmType';
import { OneType } from './OneType';
import { updateUrlSearchParams } from '@gitanimals/util-common';

import { Link } from '@/i18n/routing';

import FarmType from './FarmType';
import { OneType } from './OneType';

type TabType = '1-type' | 'farm-type';

async function Mypage({
Expand All @@ -25,7 +24,7 @@ async function Mypage({
};

return (
<div>
<>
<div className={tabListStyle}>
<Link href={`/mypage?${updateUrlSearchParams(searchParams, 'type', '1-type')}`}>
<button className={cx('tab-item', selectedType === '1-type' && 'selected')}>1 Type</button>
Expand All @@ -34,13 +33,17 @@ async function Mypage({
<button className={cx('tab-item', selectedType === 'farm-type' && 'selected')}>Farm Type</button>
</Link>
</div>
<div>{MYPAGE_TAB_INNER_MAP[selectedType]}</div>
</div>
<div className={tabItemStyle}>{MYPAGE_TAB_INNER_MAP[selectedType]}</div>
</>
);
}

export default Mypage;

const tabItemStyle = css({
flex: 1,
overflow: 'hidden',
});

const tabListStyle = flex({
gap: 12,
_mobile: {
Expand Down
65 changes: 31 additions & 34 deletions apps/web/src/app/[locale]/mypage/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,49 @@ import { ProfileSection } from './ProfileSection';

async function MypageLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className={cx(containerStyle)}>
<GNB />
<Image src="/mypage/bg-cloud.webp" alt="bg" width={2400} height={1367} className={bgStyle} draggable={false} />
<main className={mainStyle}>
<ProfileSection />
<section className={rightSectionStyle}>{children}</section>
</main>
<div className={containerStyle}>
<GNB />
<div className={mainStyle}>
<ProfileSection />
<div className={rightSectionStyle}>{children}</div>
</div>
</>
</div>
Comment on lines +11 to +17
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

시맨틱 HTML 요소 사용을 고려해보세요.

현재 일반 div 요소를 사용하고 있지만, 페이지의 구조를 더 명확하게 표현하기 위해 시맨틱 요소를 사용하는 것이 좋습니다.

다음과 같이 수정해보세요:

-    <div className={containerStyle}>
+    <main className={containerStyle}>
       <GNB />
-      <div className={mainStyle}>
+      <section className={mainStyle}>
         <ProfileSection />
-        <div className={rightSectionStyle}>{children}</div>
+        <section className={rightSectionStyle}>{children}</section>
-      </div>
+      </section>
-    </div>
+    </main>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className={containerStyle}>
<GNB />
<div className={mainStyle}>
<ProfileSection />
<div className={rightSectionStyle}>{children}</div>
</div>
</>
</div>
<main className={containerStyle}>
<GNB />
<section className={mainStyle}>
<ProfileSection />
<section className={rightSectionStyle}>{children}</section>
</section>
</main>

);
}

export default MypageLayout;

const mainStyle = grid({
gap: 80,
gridTemplateColumns: '222px 1fr',
position: 'relative',
zIndex: 1,
margin: '120px 200px 0',

'@media (max-width: 1400px)': {
margin: '120px 100px 0',
},

// TODO : 중간 태블릿 정도도 대응하면 좋을 듯
_mobile: {
gridTemplateColumns: '1fr',
margin: '0 16px 0',
gap: 0,
},
});

const rightSectionStyle = css({
height: 'calc(100vh - 240px)',
overflow: 'hidden',
width: '100%',
maxW: '1080px',
borderRadius: 16,
background: 'white.white_10',
backdropFilter: 'blur(7px)',
minHeight: '700px',
height: 'calc(100vh - 240px)',
maxHeight: 'min(calc(100vh - 240px), 1000px)',
overflow: 'hidden',
maxHeight: '1400px',
p: 40,
display: 'flex',
flexDirection: 'column',

Comment on lines +43 to +53
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

하드코딩된 maxHeight 값을 제거해야 합니다.

PR의 목적이 하드코딩된 값을 제거하는 것이었으나, maxHeight: '1400px'가 여전히 하드코딩되어 있습니다. 이는 다양한 화면 크기에서 예측하기 어려운 레이아웃 동작을 유발할 수 있습니다.

다음과 같이 수정하는 것을 제안드립니다:

- maxHeight: '1400px',
+ maxHeight: 'calc(100vh - 120px)',

또한 height와 maxHeight 계산식이 서로 다른 값을 사용하고 있습니다:

  • height: calc(100vh - 240px)
  • 제안된 maxHeight: calc(100vh - 120px)

이 차이가 의도된 것인지 확인해주시기 바랍니다.

Committable suggestion was skipped due to low confidence.

_mobile: {
background: 'none',
p: 0,
Expand Down Expand Up @@ -61,23 +78,3 @@ const bgStyle = css({
marginTop: '86px',
pointerEvents: 'none',
});

const mainStyle = grid({
gap: 80,
gridTemplateColumns: '222px 1fr',
position: 'relative',
zIndex: 1,
margin: '120px 200px 0',

'@media (max-width: 1400px)': {
margin: '120px 100px 0',
},

// TODO : 중간 태블릿 정도도 대응하면 좋을 듯

_mobile: {
gridTemplateColumns: '1fr',
margin: '0 16px 0',
gap: 0,
},
});
Loading