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 all 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: 0 additions & 2 deletions frontend/src/components/common/Input/Input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
placeholder: "제목을 입력해 주세요.",
count: 0,
maxCount: 20,
},
};

Expand Down
9 changes: 1 addition & 8 deletions frontend/src/components/common/Input/Input.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@ import theme from "@styles/theme";

import type { InputVariants } from "./Input.type";

export const InputContainer = styled.div`
display: flex;
flex-direction: column;
gap: 0.8rem;

width: 100%;
`;

export const Label = styled.label`
${({ theme }) => theme.typography.mobile.bodyBold};
color: ${(props) => props.theme.colors.text.primary};
Expand Down Expand Up @@ -43,6 +35,7 @@ export const Input = styled.input<{ variant: InputVariants }>`
if (variant === "none") return noneStyle;
}}
`;

export const roundStyle = css`
border: 0.1rem solid ${theme.colors.border};

Expand Down
16 changes: 3 additions & 13 deletions frontend/src/components/common/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import { forwardRef } from "react";

import CharacterCount from "../CharacterCount/CharacterCount";
import * as S from "./Input.styled";
import type { InputVariants } from "./Input.type";

interface InputProps extends React.ComponentPropsWithRef<"input"> {
count?: number;
maxCount?: number;
variants?: InputVariants;
}

const Input = forwardRef<HTMLInputElement, InputProps>(
({ count, maxCount, variants = "round", ...props }, ref) => {
return (
<S.InputContainer>
<S.Input variant={variants} {...props} ref={ref} />
{count && maxCount ? <CharacterCount count={count} maxCount={maxCount} /> : null}
</S.InputContainer>
);
},
);
const Input = forwardRef<HTMLInputElement, InputProps>(({ variants = "round", ...props }, ref) => {
return <S.Input variant={variants} {...props} ref={ref} />;
});

Input.displayName = "Input";

Expand Down
8 changes: 8 additions & 0 deletions frontend/src/components/pages/my/MyPage.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ export const NicknameWrapper = styled.div`
height: 3rem;
`;

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

width: 100%;
`;

export const inputStyle = css`
${theme.typography.mobile.bodyBold};
width: 12rem;
Expand Down
42 changes: 23 additions & 19 deletions frontend/src/components/pages/my/MyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FormEvent, MouseEvent, useEffect, useState } from "react";
import usePatchNickname from "@queries/usePatchNickname";
import { useUserProfile } from "@queries/useUserProfile";

import { AvatarCircle, Input, Tab, Text } from "@components/common";
import { AvatarCircle, CharacterCount, Input, Tab, Text } from "@components/common";
import MyPageSkeleton from "@components/pages/my/MyPageSkeleton/MyPageSkeleton";

import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
Expand Down Expand Up @@ -85,24 +85,28 @@ const MyPage = () => {
{nickname}
</Text>
) : (
<Input
placeholder={data?.nickname}
value={nickname}
autoFocus
maxCount={20}
maxLength={20}
count={nickname?.length}
spellCheck={false}
css={S.inputStyle}
onChange={(e) =>
setNickname(
e.target.value.slice(
FORM_VALIDATIONS_MAP.title.minLength,
FORM_VALIDATIONS_MAP.title.maxLength,
),
)
}
/>
<S.InputContainer>
<Input
placeholder={data?.nickname}
value={nickname}
autoFocus
maxLength={20}
spellCheck={false}
css={S.inputStyle}
onChange={(e) =>
setNickname(
e.target.value.slice(
FORM_VALIDATIONS_MAP.title.minLength,
FORM_VALIDATIONS_MAP.title.maxLength,
),
)
}
/>
<CharacterCount
count={nickname?.length}
maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
/>
</S.InputContainer>
)}
</S.NicknameWrapper>
</S.FormWrapper>
Expand Down
46 changes: 11 additions & 35 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,29 @@ 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};
}
padding: ${({ theme }) => theme.spacing.m};
`;

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

width: 100%;
`;

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 +42,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};
}
`;
76 changes: 39 additions & 37 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 @@ -7,6 +7,7 @@ import { usePutTravelPlan } from "@queries/usePutTravelPlan";
import {
Accordion,
Button,
CharacterCount,
GoogleMapLoadScript,
IconButton,
Input,
Expand Down Expand Up @@ -140,15 +141,19 @@ const TravelPlanEditPage = () => {
<PageInfo mainText="여행 계획 수정" />
<TextField title="제목" isRequired>
{(id) => (
<Input
id={id}
value={title}
maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
placeholder="여행 계획 제목을 입력해주세요"
count={title.length}
maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
onChange={handleChangeTitle}
/>
<S.InputContainer>
<Input
id={id}
value={title}
maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
placeholder="여행 계획 제목을 입력해주세요"
onChange={handleChangeTitle}
/>
<CharacterCount
count={title.length}
maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
/>
</S.InputContainer>
)}
</TextField>

Expand All @@ -165,36 +170,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 +211,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
1 change: 0 additions & 1 deletion frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const PlaceTodoListItem = ({ todo, onChangeContent, onDeleteTodo }: PlaceTodoLis
value={todo?.content}
placeholder="할 일을 입력해주세요."
onChange={onChangeContent}
maxCount={20}
autoFocus
variants="none"
spellCheck="false"
Expand Down
Loading
Loading