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

[Feature] - Layout Shift 개선 #454

Merged
merged 9 commits into from
Sep 26, 2024
Merged

[Feature] - Layout Shift 개선 #454

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
de14ad9
refactor(AccordionRoot): gap 값 수정
simorimi Sep 25, 2024
b5096ec
refactor(TravelogueRegisterPage): layout shift 문제 해결
simorimi Sep 25, 2024
2312a9d
refactor(TravelogueEditPage): layout shift 문제 해결
simorimi Sep 25, 2024
28e98ab
refactor(TravelPlanRegisterPage): layout shift 문제 해결
simorimi Sep 25, 2024
8439606
refactor(TravelPlanEditPage): layout shift 문제 해결
simorimi Sep 25, 2024
516cac7
refactor(Input): count 있는 경우 미리 공간 차지하도록 수정
simorimi Sep 25, 2024
fa955ba
Merge branch 'develop/fe' of https://github.com/woowacourse-teams/202…
simorimi Sep 25, 2024
ca04b2e
refactor(Input): input 내부에 있던 characterCount 분리
simorimi Sep 25, 2024
2801971
test(Input): input 속성 변경에 따른 storybook 속성 수정
simorimi Sep 25, 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
2 changes: 1 addition & 1 deletion frontend/src/components/common/Accordion/AccordionRoot/AccordionRoot.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import styled from "@emotion/styled";
export const Layout = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
gap: ${({ theme }) => theme.spacing.m};
Copy link
Contributor

Choose a reason for hiding this comment

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

역시 css의 시모 예리하네요,,, 덕분에 아코디언 여러 개일 때 스타일 일관성이 보장 되었네요 감사합니다 ㅎㅎ

`;
2 changes: 1 addition & 1 deletion frontend/src/components/common/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
return (
<S.InputContainer>
<S.Input variant={variants} {...props} ref={ref} />
{count && maxCount ? <CharacterCount count={count} maxCount={maxCount} /> : null}
{maxCount ? <CharacterCount count={count} maxCount={maxCount} /> : null}
Copy link
Contributor

Choose a reason for hiding this comment

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

image

count가 사라지니까 PlaceTodoItem의 경우 maxCount만 설정하기 때문에 CharacterCount가 보여서 다음과 같이 레이아웃이 깨지는 문제가 발생합니다 ㅜ

Copy link
Author

Choose a reason for hiding this comment

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

헉 제가 다른 부분 확인한다고는 했는데 이 부분을 놓쳤군요 바로 확인하겠습니다 고마워요!

</S.InputContainer>
);
},
Expand Down
42 changes: 5 additions & 37 deletions frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,21 @@ import { SPACING } from "@styles/tokens";
export const Layout = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.xl};
gap: ${({ theme }) => theme.spacing.xl};

padding: ${SPACING.m};

& > :last-child {
margin-top: -${SPACING.xl};
}
`;

export const AccordionRootContainer = styled.div`
margin-top: ${SPACING.m};
padding: ${({ theme }) => theme.spacing.m};
`;

export const PageInfoContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.s};
gap: ${({ theme }) => theme.spacing.s};
`;

export const StartDateContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.s};
`;

export const LoadingWrapper = styled.div`
width: 100%;
height: 5.6rem;
gap: ${({ theme }) => theme.spacing.s};
`;

export const addDayButtonStyle = css`
Expand All @@ -47,26 +34,7 @@ export const addButtonStyle = css`

width: 100%;
height: 4rem;
margin-bottom: ${SPACING.xl};
padding: 1.2rem 1.6rem;
border: 0.1rem solid ${theme.colors.border};
border: 1px solid ${theme.colors.border};
border-radius: ${SPACING.s};
`;

export const loadingButtonStyle = css`
margin-top: ${SPACING.xl};
`;

export const startDateInputStyle = css`
margin: 0 0 ${SPACING.xl};
`;

export const calendarStyle = css`
margin-bottom: ${SPACING.xl};
`;

export const accordionRootStyle = css`
& > :last-child {
margin-bottom: ${SPACING.xl};
}
`;
53 changes: 25 additions & 28 deletions frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,36 +165,33 @@ const TravelPlanEditPage = () => {
onClick={handleInputClick}
readOnly
placeholder="시작일을 입력해주세요"
css={S.startDateInputStyle}
/>
{isShowCalendar && (
<Calendar
onSelectDate={handleSelectDate}
onClose={() => setIsShowCalendar((prev) => !prev)}
css={S.calendarStyle}
/>
)}
</>
)}
</TextField>
<S.AccordionRootContainer>

<div>
<GoogleMapLoadScript
loadingElement={
<S.LoadingWrapper>
<IconButton
size="16"
iconType="plus"
position="left"
css={[S.addButtonStyle, S.loadingButtonStyle]}
onClick={() => onAddDay()}
>
<Text textType="bodyBold">일자 추가하기</Text>
</IconButton>
</S.LoadingWrapper>
<IconButton
size="16"
iconType="plus"
position="left"
css={S.addButtonStyle}
onClick={() => onAddDay()}
>
<Text textType="bodyBold">일자 추가하기</Text>
</IconButton>
}
libraries={["places", "maps"]}
>
<Accordion.Root css={S.accordionRootStyle}>
<Accordion.Root>
{travelPlanDays.map((travelDay, dayIndex) => (
<TravelPlanDayAccordion
key={travelDay.id}
Expand All @@ -209,21 +206,21 @@ const TravelPlanEditPage = () => {
onAddPlaceTodo={onAddPlaceTodo}
/>
))}
<IconButton
size="16"
iconType="plus"
position="left"
css={S.addButtonStyle}
onClick={onAddDay}
>
<Text textType="bodyBold">일자 추가하기</Text>
</IconButton>
</Accordion.Root>
<IconButton
size="16"
iconType="plus"
position="left"
css={[S.addButtonStyle]}
onClick={() => onAddDay()}
>
<Text textType="bodyBold">일자 추가하기</Text>
</IconButton>
</GoogleMapLoadScript>
<Button variants="primary" onClick={handleOpenBottomSheet}>
수정
</Button>
</S.AccordionRootContainer>
</div>
<Button variants="primary" onClick={handleOpenBottomSheet}>
수정
</Button>
</S.Layout>

<ModalBottomSheet
Expand Down
42 changes: 5 additions & 37 deletions frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,21 @@ import { SPACING } from "@styles/tokens";
export const Layout = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.xl};
gap: ${({ theme }) => theme.spacing.xl};

padding: ${SPACING.m};

& > :last-child {
margin-top: -${SPACING.xl};
}
`;

export const AccordionRootContainer = styled.div`
margin-top: ${SPACING.m};
padding: ${({ theme }) => theme.spacing.m};
`;

export const PageInfoContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.s};
gap: ${({ theme }) => theme.spacing.s};
`;

export const StartDateContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${SPACING.s};
gap: ${({ theme }) => theme.spacing.s};
`;

export const DayDetailText = styled.span`
Expand All @@ -41,15 +33,10 @@ export const DayDetailText = styled.span`
color: ${({ theme }) => theme.colors.text.secondary};
`;

export const LoadingWrapper = styled.div`
width: 100%;
height: 5.6rem;
`;

export const PlaceTodoListItemContainer = styled.ul`
display: flex;
flex-direction: column;
gap: ${SPACING.s};
gap: ${({ theme }) => theme.spacing.s};
`;

export const addDayButtonStyle = css`
Expand All @@ -62,7 +49,6 @@ export const addButtonStyle = css`

width: 100%;
height: 4rem;
margin-bottom: 3.2rem;
padding: 1.2rem 1.6rem;
border: 1px solid ${theme.colors.border};
border-radius: ${SPACING.s};
Expand All @@ -78,21 +64,3 @@ export const addTravelAddButtonStyle = css`
border: 1px solid ${theme.colors.border};
border-radius: ${SPACING.s};
`;

export const loadingButtonStyle = css`
margin-top: ${SPACING.xl};
`;

export const startDateInputStyle = css`
margin-bottom: 3.2rem;
`;

export const calendarStyle = css`
margin-bottom: ${SPACING.xl};
`;

export const accordionRootStyle = css`
& > :last-child {
margin-bottom: ${SPACING.xl};
}
`;
77 changes: 39 additions & 38 deletions frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,42 +138,39 @@ const TravelPlanRegisterPage = () => {
onClick={handleOpenCalendar}
readOnly
placeholder="시작일을 입력해주세요"
css={S.startDateInputStyle}
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.startDateInput}
/>
{isShowCalendar && (
<Calendar
onSelectDate={(date) => onSelectCalendar(date, handleCloseCalendar)}
onClose={handleCloseCalendar}
css={S.calendarStyle}
/>
)}
</>
)}
</TextField>
<S.AccordionRootContainer>

<div>
<GoogleMapLoadScript
loadingElement={
<S.LoadingWrapper>
<IconButton
size="16"
iconType="plus"
position="left"
css={[S.addButtonStyle, S.loadingButtonStyle]}
onClick={() => onAddDay()}
<IconButton
size="16"
iconType="plus"
position="left"
css={S.addButtonStyle}
onClick={() => onAddDay()}
>
<Text
textType="bodyBold"
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.addDateButton}
>
<Text
textType="bodyBold"
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.addDateButton}
>
일자 추가하기
</Text>
</IconButton>
</S.LoadingWrapper>
일자 추가하기
</Text>
</IconButton>
}
libraries={["places", "maps"]}
>
<Accordion.Root css={S.accordionRootStyle}>
<Accordion.Root>
{travelPlanDays.map((travelDay, dayIndex) => (
<TravelPlanDayAccordion
key={travelDay.id}
Expand All @@ -188,27 +185,31 @@ const TravelPlanRegisterPage = () => {
onAddPlaceTodo={onAddPlaceTodo}
/>
))}
<IconButton
size="16"
iconType="plus"
position="left"
css={S.addButtonStyle}
onClick={onAddDay}
>
<Text
textType="bodyBold"
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.addDateButton}
>
일자 추가하기
</Text>
</IconButton>
</Accordion.Root>
<IconButton
size="16"
iconType="plus"
position="left"
css={[S.addButtonStyle]}
onClick={onAddDay}
>
<Text textType="bodyBold" data-cy={CYPRESS_DATA_MAP.travelPlanRegister.addDateButton}>
일자 추가하기
</Text>
</IconButton>
</GoogleMapLoadScript>
<Button
variants="primary"
onClick={handleOpenBottomSheet}
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.registerButton}
>
등록
</Button>
</S.AccordionRootContainer>
</div>

<Button
variants="primary"
onClick={handleOpenBottomSheet}
data-cy={CYPRESS_DATA_MAP.travelPlanRegister.registerButton}
>
등록
</Button>
</S.Layout>

<ModalBottomSheet
Expand Down
Loading
Loading