[Feature] - Layout Shift 개선 (#454)

* refactor(AccordionRoot): gap 값 수정 * refactor(TravelogueRegisterPage): layout shift 문제 해결 * refactor(TravelogueEditPage): layout shift 문제 해결 * refactor(TravelPlanRegisterPage): layout shift 문제 해결 * refactor(TravelPlanEditPage): layout shift 문제 해결 * refactor(Input): count 있는 경우 미리 공간 차지하도록 수정 * refactor(Input): input 내부에 있던 characterCount 분리 * test(Input): input 속성 변경에 따른 storybook 속성 수정
woowacourse-teams · Sep 26, 2024 · 923fdc8 · 923fdc8
1 parent 946d03e
commit 923fdc8
Show file tree

Hide file tree

Showing 15 changed files with 255 additions and 318 deletions.
diff --git a/frontend/src/components/common/Accordion/AccordionRoot/AccordionRoot.styled.ts b/frontend/src/components/common/Accordion/AccordionRoot/AccordionRoot.styled.ts
@@ -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};
 `;
diff --git a/frontend/src/components/common/Input/Input.stories.tsx b/frontend/src/components/common/Input/Input.stories.tsx
@@ -21,8 +21,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     placeholder: "제목을 입력해 주세요.",
-    count: 0,
-    maxCount: 20,
   },
 };
 

diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts
@@ -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};
@@ -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};
 

diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
@@ -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";
 

diff --git a/frontend/src/components/pages/my/MyPage.styled.ts b/frontend/src/components/pages/my/MyPage.styled.ts
@@ -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;

diff --git a/frontend/src/components/pages/my/MyPage.tsx b/frontend/src/components/pages/my/MyPage.tsx
@@ -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";
@@ -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>

diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
@@ -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`
@@ -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};
-  }
-`;
diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
@@ -7,6 +7,7 @@ import { usePutTravelPlan } from "@queries/usePutTravelPlan";
 import {
   Accordion,
   Button,
+  CharacterCount,
   GoogleMapLoadScript,
   IconButton,
   Input,
@@ -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>
 
@@ -165,35 +170,32 @@ 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>
             }
           >
-            <Accordion.Root css={S.accordionRootStyle}>
+            <Accordion.Root>
               {travelPlanDays.map((travelDay, dayIndex) => (
                 <TravelPlanDayAccordion
                   key={travelDay.id}
@@ -208,21 +210,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

diff --git a/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx b/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx
@@ -21,7 +21,6 @@ const PlaceTodoListItem = ({ todo, onChangeContent, onDeleteTodo }: PlaceTodoLis
           value={todo?.content}
           placeholder="할 일을 입력해주세요."
           onChange={onChangeContent}
-          maxCount={20}
           autoFocus
           variants="none"
           spellCheck="false"