From de14ad981fbb67c0afe0989bac803c8196237c6c Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:01:05 +0900
Subject: [PATCH 1/8] =?UTF-8?q?refactor(AccordionRoot):=20gap=20=EA=B0=92?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Accordion/AccordionRoot/AccordionRoot.styled.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Accordion/AccordionRoot/AccordionRoot.styled.ts b/frontend/src/components/common/Accordion/AccordionRoot/AccordionRoot.styled.ts
index 716164d3..7309468d 100644
--- 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};
 `;

From b5096ec7e201d2adcc60d6fb42aa3b2a1b8e2292 Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:01:35 +0900
Subject: [PATCH 2/8] =?UTF-8?q?refactor(TravelogueRegisterPage):=20layout?=
 =?UTF-8?q?=20shift=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TravelogueRegisterPage.styled.ts          | 34 +++-----------
 .../TravelogueRegisterPage.tsx                | 47 +++++++++----------
 2 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
index 694fac0e..cbaa8adc 100644
--- a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
+++ b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
@@ -7,24 +7,24 @@ import { PRIMITIVE_COLORS, 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};
+  padding: ${({ theme }) => theme.spacing.m};
 `;
 
 export const TagsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${SPACING.s};
+  gap: ${({ theme }) => theme.spacing.s};
 `;
 
 export const ChipsContainer = styled.ul`
   display: flex;
   overflow: scroll hidden;
-  gap: ${SPACING.s};
+  gap: ${({ theme }) => theme.spacing.s};
 
-  margin: 0 -${SPACING.m};
-  padding: 0 ${SPACING.m};
+  margin: 0 -${({ theme }) => theme.spacing.m};
+  padding: 0 ${({ theme }) => theme.spacing.m};
 
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
@@ -43,12 +43,7 @@ export const ChipsContainer = styled.ul`
 export const ThumbnailContainer = 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 subTextColor = css`
@@ -61,14 +56,9 @@ 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};
-
-  color: ${PRIMITIVE_COLORS.black};
-  font-weight: 700;
-  font-size: 1.6rem;
 `;
 
 export const addTravelAddButtonStyle = css`
@@ -88,13 +78,3 @@ export const addTravelAddButtonStyle = css`
 export const addDayButtonStyle = css`
   margin-top: 1.6rem;
 `;
-
-export const loadingButtonStyle = css`
-  margin-top: 3.2rem;
-`;
-
-export const accordionRootStyle = css`
-  & > :last-child {
-    margin-bottom: 3.2rem;
-  }
-`;
diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
index 1b9dc924..5d128ece 100644
--- a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
+++ b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -197,21 +197,19 @@ const TravelogueRegisterPage = () => {
         <div>
           <GoogleMapLoadScript
             loadingElement={
-              <S.LoadingWrapper>
-                <IconButton
-                  size="16"
-                  iconType="plus"
-                  position="left"
-                  css={[S.addButtonStyle, S.addDayButtonStyle, S.loadingButtonStyle]}
-                  onClick={() => onAddDay()}
-                >
-                  일자 추가하기
-                </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>
               {travelogueDays.map((travelogueDay, dayIndex) => (
                 <TravelogueDayAccordion
                   key={travelogueDay.id}
@@ -227,21 +225,22 @@ const TravelogueRegisterPage = () => {
                   onRequestAddImage={mutateAddImage}
                 />
               ))}
+              <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()}
-            >
-              일자 추가하기
-            </IconButton>
           </GoogleMapLoadScript>
-          <Button variants="primary" onClick={handleOpenBottomSheet}>
-            등록
-          </Button>
         </div>
+
+        <Button variants="primary" onClick={handleOpenBottomSheet}>
+          등록
+        </Button>
       </S.Layout>
 
       <ModalBottomSheet

From 2312a9d573146f99621921ba0bc700ae9c1c8026 Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:01:53 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor(TravelogueEditPage):=20layout=20sh?=
 =?UTF-8?q?ift=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TravelogueEditPage.styled.ts              | 34 +++----------
 .../travelogueEdit/TravelogueEditPage.tsx     | 48 +++++++++----------
 2 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
index 694fac0e..cbaa8adc 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
@@ -7,24 +7,24 @@ import { PRIMITIVE_COLORS, 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};
+  padding: ${({ theme }) => theme.spacing.m};
 `;
 
 export const TagsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${SPACING.s};
+  gap: ${({ theme }) => theme.spacing.s};
 `;
 
 export const ChipsContainer = styled.ul`
   display: flex;
   overflow: scroll hidden;
-  gap: ${SPACING.s};
+  gap: ${({ theme }) => theme.spacing.s};
 
-  margin: 0 -${SPACING.m};
-  padding: 0 ${SPACING.m};
+  margin: 0 -${({ theme }) => theme.spacing.m};
+  padding: 0 ${({ theme }) => theme.spacing.m};
 
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
@@ -43,12 +43,7 @@ export const ChipsContainer = styled.ul`
 export const ThumbnailContainer = 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 subTextColor = css`
@@ -61,14 +56,9 @@ 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};
-
-  color: ${PRIMITIVE_COLORS.black};
-  font-weight: 700;
-  font-size: 1.6rem;
 `;
 
 export const addTravelAddButtonStyle = css`
@@ -88,13 +78,3 @@ export const addTravelAddButtonStyle = css`
 export const addDayButtonStyle = css`
   margin-top: 1.6rem;
 `;
-
-export const loadingButtonStyle = css`
-  margin-top: 3.2rem;
-`;
-
-export const accordionRootStyle = css`
-  & > :last-child {
-    margin-bottom: 3.2rem;
-  }
-`;
diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
index 40c83796..cfef93c6 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -14,6 +14,7 @@ import {
   Input,
   ModalBottomSheet,
   PageInfo,
+  Text,
   TextField,
   ThumbnailUpload,
 } from "@components/common";
@@ -207,21 +208,19 @@ const TravelogueEditPage = () => {
         <div>
           <GoogleMapLoadScript
             loadingElement={
-              <S.LoadingWrapper>
-                <IconButton
-                  size="16"
-                  iconType="plus"
-                  position="left"
-                  css={[S.addButtonStyle, S.addDayButtonStyle, S.loadingButtonStyle]}
-                  onClick={() => onAddDay()}
-                >
-                  일자 추가하기
-                </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>
               {travelogueDays.map((travelogueDay, dayIndex) => (
                 <TravelogueDayAccordion
                   isPaused={isPaused}
@@ -237,21 +236,22 @@ const TravelogueEditPage = () => {
                   onRequestAddImage={mutateAddImage}
                 />
               ))}
+              <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()}
-            >
-              일자 추가하기
-            </IconButton>
           </GoogleMapLoadScript>
-          <Button variants="primary" onClick={handleOpenBottomSheet}>
-            수정
-          </Button>
         </div>
+
+        <Button variants="primary" onClick={handleOpenBottomSheet}>
+          수정
+        </Button>
       </S.Layout>
 
       <ModalBottomSheet

From 28e98abb61368ec0d02067040d796f71fa1b674b Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:02:09 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor(TravelPlanRegisterPage):=20layout?=
 =?UTF-8?q?=20shift=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TravelPlanRegisterPage.styled.ts          | 42 ++--------
 .../TravelPlanRegisterPage.tsx                | 77 ++++++++++---------
 2 files changed, 44 insertions(+), 75 deletions(-)

diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
index 0a0dbc98..c41a42b6 100644
--- a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
+++ b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
@@ -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`
@@ -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`
@@ -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};
@@ -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};
-  }
-`;
diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
index 5dd9722e..7385c311 100644
--- a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
+++ b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -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}
@@ -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

From 843960610b85e085fc4d40ca36bf01901baa1437 Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:02:24 +0900
Subject: [PATCH 5/8] =?UTF-8?q?refactor(TravelPlanEditPage):=20layout=20sh?=
 =?UTF-8?q?ift=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TravelPlanEditPage.styled.ts              | 42 ++-------------
 .../travelPlanEdit/TravelPlanEditPage.tsx     | 53 +++++++++----------
 2 files changed, 30 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
index 556b8561..01a64b0e 100644
--- a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
+++ b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
@@ -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`
@@ -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};
-  }
-`;
diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
index d59d80b4..91fb44a2 100644
--- a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
+++ b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
@@ -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}
@@ -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

From 516cac73ed54947418ccc5bf0a1eb0b552fb802e Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 15:02:57 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refactor(Input):=20count=20=EC=9E=88?=
 =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EB=AF=B8=EB=A6=AC=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B0=84=20=EC=B0=A8=EC=A7=80=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Input/Input.tsx b/frontend/src/components/common/Input/Input.tsx
index 332b36c7..1429fa4b 100644
--- a/frontend/src/components/common/Input/Input.tsx
+++ b/frontend/src/components/common/Input/Input.tsx
@@ -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}
       </S.InputContainer>
     );
   },

From ca04b2ed37fe8eeb0f28c3c4808b0dffad365da3 Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 18:54:25 +0900
Subject: [PATCH 7/8] =?UTF-8?q?refactor(Input):=20input=20=EB=82=B4?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=20=EC=9E=88=EB=8D=98=20characterCount=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/Input.styled.ts   |  9 +---
 .../src/components/common/Input/Input.tsx     | 16 ++-----
 .../src/components/pages/my/MyPage.styled.ts  |  8 ++++
 frontend/src/components/pages/my/MyPage.tsx   | 42 ++++++++++---------
 .../TravelPlanEditPage.styled.ts              |  8 ++++
 .../travelPlanEdit/TravelPlanEditPage.tsx     | 23 ++++++----
 .../PlaceTodoListItem/PlaceTodoListItem.tsx   |  1 -
 .../TravelPlanRegisterPage.styled.ts          |  8 ++++
 .../TravelPlanRegisterPage.tsx                | 25 ++++++-----
 .../TravelogueEditPage.styled.ts              |  8 ++++
 .../travelogueEdit/TravelogueEditPage.tsx     | 23 ++++++----
 .../TravelogueRegisterPage.styled.ts          |  8 ++++
 .../TravelogueRegisterPage.tsx                | 21 ++++++----
 13 files changed, 123 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts
index aa7b4fb7..289bba5f 100644
--- 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
index 1429fa4b..c25d236d 100644
--- 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} />
-        {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
index fb11c49c..dcaec82c 100644
--- 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
index 63fa1547..3c513831 100644
--- 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
index 01a64b0e..5a5d484e 100644
--- a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
+++ b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.styled.ts
@@ -12,6 +12,14 @@ export const Layout = styled.div`
   padding: ${({ theme }) => theme.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;
diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
index 91fb44a2..23a4b190 100644
--- 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>
 
diff --git a/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx b/frontend/src/components/pages/travelPlanRegister/PlaceTodoListItem/PlaceTodoListItem.tsx
index f1ae4f64..7c6f3c1b 100644
--- 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"
diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
index c41a42b6..ffeb5722 100644
--- a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
+++ b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.styled.ts
@@ -12,6 +12,14 @@ export const Layout = styled.div`
   padding: ${({ theme }) => theme.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;
diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
index 7385c311..1827e7d7 100644
--- a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
+++ b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -9,6 +9,7 @@ import {
   Accordion,
   Button,
   Calendar,
+  CharacterCount,
   GoogleMapLoadScript,
   IconButton,
   Input,
@@ -112,16 +113,20 @@ const TravelPlanRegisterPage = () => {
         />
         <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={(event) => onChangeTitle(event.target.value)}
-              data-cy={CYPRESS_DATA_MAP.travelPlanRegister.titleInput}
-            />
+            <S.InputContainer>
+              <Input
+                id={id}
+                value={title}
+                maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
+                placeholder="여행 계획 제목을 입력해주세요"
+                onChange={(event) => onChangeTitle(event.target.value)}
+                data-cy={CYPRESS_DATA_MAP.travelPlanRegister.titleInput}
+              />
+              <CharacterCount
+                count={title.length}
+                maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
+              />
+            </S.InputContainer>
           )}
         </TextField>
 
diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
index cbaa8adc..8a87dd11 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.styled.ts
@@ -12,6 +12,14 @@ export const Layout = styled.div`
   padding: ${({ theme }) => theme.spacing.m};
 `;
 
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.s};
+
+  width: 100%;
+`;
+
 export const TagsContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
index cfef93c6..5cd8ebe3 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -8,6 +8,7 @@ import { usePutTravelogue } from "@queries/usePutTravelogue";
 import {
   Accordion,
   Button,
+  CharacterCount,
   Chip,
   GoogleMapLoadScript,
   IconButton,
@@ -152,15 +153,19 @@ const TravelogueEditPage = () => {
 
         <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>
 
diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
index cbaa8adc..8a87dd11 100644
--- a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
+++ b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.styled.ts
@@ -12,6 +12,14 @@ export const Layout = styled.div`
   padding: ${({ theme }) => theme.spacing.m};
 `;
 
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.s};
+
+  width: 100%;
+`;
+
 export const TagsContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
index 5d128ece..e99e41e0 100644
--- a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
+++ b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -8,6 +8,7 @@ import { usePostTravelogue, usePostUploadImages } from "@queries/index";
 import {
   Accordion,
   Button,
+  CharacterCount,
   Chip,
   GoogleMapLoadScript,
   IconButton,
@@ -146,14 +147,18 @@ const TravelogueRegisterPage = () => {
 
         <TextField title="제목" isRequired>
           {(id) => (
-            <Input
-              id={id}
-              value={title}
-              maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
-              count={title.length}
-              maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
-              onChange={handleChangeTitle}
-            />
+            <S.InputContainer>
+              <Input
+                id={id}
+                value={title}
+                maxLength={FORM_VALIDATIONS_MAP.title.maxLength}
+                onChange={handleChangeTitle}
+              />
+              <CharacterCount
+                count={title.length}
+                maxCount={FORM_VALIDATIONS_MAP.title.maxLength}
+              />
+            </S.InputContainer>
           )}
         </TextField>
 

From 28019718bf96f530447b32a8184add2e54914f35 Mon Sep 17 00:00:00 2001
From: simhorim <hori5020@gmail.com>
Date: Wed, 25 Sep 2024 18:56:03 +0900
Subject: [PATCH 8/8] =?UTF-8?q?test(Input):=20input=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20storybook?=
 =?UTF-8?q?=20=EC=86=8D=EC=84=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/Input.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/common/Input/Input.stories.tsx b/frontend/src/components/common/Input/Input.stories.tsx
index 09c3fdec..9aa851f5 100644
--- 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,
   },
 };