Merge branch 'develop/fe' of https://github.com/woowacourse-teams/202…

…4-touroot into feature/fe/#419
woowacourse-teams · Sep 26, 2024 · 8598d2d · 8598d2d
2 parents 6d5f1dc + e4eb2fb
commit 8598d2d
Show file tree

Hide file tree

Showing 30 changed files with 543 additions and 369 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -92,6 +92,7 @@
     "typescript": "^5.5.3",
     "undici": "^6.19.2",
     "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^6.0.1"

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="chrome" content="nointentdetection" />
 
+    <link rel="preconnect" href="https://maps.googleapis.com" />
+    <link rel="preconnect" href="https://maps.gstatic.com" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="https://maps.googleapis.com" />
+    <link rel="dns-prefetch" href="https://maps.gstatic.com" />
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+
     <title>to your route, 투룻</title>
   </head>
   <body>

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/GoogleMapLoadScript/GoogleMapLoadScript.constants.ts b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants.ts
@@ -0,0 +1,3 @@
+import { Libraries } from "@react-google-maps/api";
+
+export const LIBRARIES: Libraries = ["maps", "places", "marker"];
diff --git a/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx
@@ -1,24 +1,18 @@
-import { Libraries, LoadScript } from "@react-google-maps/api";
+import { useJsApiLoader } from "@react-google-maps/api";
 
-interface GoogleMapLoadScriptProps {
-  libraries: Libraries;
-  loadingElement?: React.ReactNode;
+import { LIBRARIES } from "@components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants";
+
+interface GoogleMapLoadScriptProps extends React.PropsWithChildren {
+  loadingElement: React.ReactNode;
 }
 
-const GoogleMapLoadScript = ({
-  children,
-  libraries,
-  loadingElement,
-}: React.PropsWithChildren<GoogleMapLoadScriptProps>) => {
-  return (
-    <LoadScript
-      googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAP_API_KEY ?? ""}
-      libraries={libraries}
-      loadingElement={loadingElement}
-    >
-      {children}
-    </LoadScript>
-  );
+const GoogleMapLoadScript = ({ children, loadingElement }: GoogleMapLoadScriptProps) => {
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY ?? "",
+    libraries: LIBRARIES,
+  });
+
+  return isLoaded ? <>{children}</> : loadingElement;
 };
 
 export default GoogleMapLoadScript;
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/common/Spinner/Spinner.tsx b/frontend/src/components/common/Spinner/Spinner.tsx
@@ -1,17 +1,19 @@
+import React from "react";
+
 import type { SpinnerVariants } from "@components/common/Spinner/Spinner.type";
 
 import { Tturi } from "@assets/svg";
 
 import * as S from "./Spinner.styled";
 
-interface SpinnerProps {
+interface SpinnerProps extends React.ComponentPropsWithoutRef<"div"> {
   variants?: SpinnerVariants;
   size?: number;
 }
 
-const Spinner = ({ variants = "tturi", size = 100 }: SpinnerProps) => {
+const Spinner = ({ variants = "tturi", size = 100, ...props }: SpinnerProps) => {
   return (
-    <S.LoadingSpinner $size={size} $variants={variants}>
+    <S.LoadingSpinner $size={size} $variants={variants} {...props}>
       {variants === "tturi" && <Tturi />}
     </S.LoadingSpinner>
   );

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/...end/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx b/...end/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx
@@ -17,10 +17,7 @@ const TravelPlansTabContent = ({ places }: { places: TravelPlanPlace[] }) => {
 
   return (
     <div>
-      <GoogleMapLoadScript
-        loadingElement={<Skeleton width="100%" height="23rem" />}
-        libraries={["places", "maps"]}
-      >
+      <GoogleMapLoadScript loadingElement={<Skeleton width="100%" height="23rem" />}>
         <GoogleMapView places={positions} />
       </GoogleMapLoadScript>
       <S.BoxContainer>

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};
-  }
-`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Libraries } from "@react-google-maps/api";

		export const LIBRARIES: Libraries = ["maps", "places", "marker"];