Merge branch 'dev' into Feat/#135

TEAM-FLASH · Dec 27, 2024 · e365151 · e365151
2 parents 1186aa3 + 99a55f1
commit e365151
Show file tree

Hide file tree

Showing 62 changed files with 1,987 additions and 206 deletions.
diff --git a/index.html b/index.html
@@ -26,5 +26,6 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
   </body>
 </html>
diff --git a/public/img/icon-arrow-16.svg b/public/img/icon-arrow-16.svg
diff --git a/public/img/icon-call.svg b/public/img/icon-call.svg
diff --git a/public/img/icon-camera-roll.svg b/public/img/icon-camera-roll.svg
diff --git a/public/img/icon-check.svg → public/img/icon-check-cheese800.svg b/public/img/icon-check.svg → public/img/icon-check-cheese800.svg
diff --git a/public/img/icon-check-white.svg b/public/img/icon-check-white.svg
diff --git a/public/img/icon-clock.svg b/public/img/icon-clock.svg
diff --git a/public/img/icon-copy-link.svg b/public/img/icon-copy-link.svg
diff --git a/public/img/icon-crop.svg b/public/img/icon-crop.svg
diff --git a/public/img/icon-folder.svg b/public/img/icon-folder.svg
diff --git a/public/img/icon-location.svg b/public/img/icon-location.svg
diff --git a/public/img/icon-map.svg b/public/img/icon-map.svg
diff --git a/public/img/icon-morePreview.svg b/public/img/icon-morePreview.svg
diff --git a/public/img/icon-none.svg b/public/img/icon-none.svg
diff --git a/public/img/icon-price.svg b/public/img/icon-price.svg
diff --git a/public/img/icon-search.svg b/public/img/icon-search.svg
diff --git a/public/img/icon-share.svg b/public/img/icon-share.svg
diff --git a/public/img/icon-time.svg b/public/img/icon-time.svg
diff --git a/public/img/icon-user-black.svg b/public/img/icon-user-black.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,17 +4,26 @@ import variables from '@styles/Variables';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import router from './routes.tsx';
+import { HelmetProvider } from 'react-helmet-async';
+import ErrorBoundary from '@components/Error/ErrorBoundary.tsx';
+import { Suspense } from 'react';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
-    <ThemeProvider theme={variables}>
-      <Global styles={GlobalStyles} />
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </ThemeProvider>
+    <HelmetProvider>
+      <ThemeProvider theme={variables}>
+        <Global styles={GlobalStyles} />
+        <QueryClientProvider client={queryClient}>
+          <ErrorBoundary fallback={<div>문제가 발생했습니다.</div>}>
+            <Suspense fallback={<div>로딩 중.. 서스펜스 버전</div>}>
+              <RouterProvider router={router} />
+            </Suspense>
+          </ErrorBoundary>
+        </QueryClientProvider>
+      </ThemeProvider>
+    </HelmetProvider>
   );
 }
 

diff --git a/src/components/BookingSearchContainer/BookingSearchContainer.tsx b/src/components/BookingSearchContainer/BookingSearchContainer.tsx
@@ -1,37 +1,59 @@
+/** @jsxImportSource @emotion/react */
+
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
 import useModal from '@hooks/useModal';
 import LocalDateSelectionModal from '@pages/Home/components/LocalDateSelectionModal';
 import { useNavigate } from 'react-router-dom';
+import { Hidden } from '@styles/Common';
 
 /** 메인 전체 지역 예약 날짜 선택 등  */
 // button => 모달 오픈용  searchStyle => 검색용
 const BookingSearchContainer = () => {
   const modal = useModal();
   const navigate = useNavigate();
 
+  // user 정보 세션에서 가져오기
+  const user = false;
+
   return (
     <BookingSearchContainerStyle>
-      <Button type="button" onClick={() => modal.open()}>
-        <ButtonTitleStyle>전체지역</ButtonTitleStyle> <img src="/img/icon-select-arrow.svg" alt="전체 지역 탐색" />
-        <SearchStyle
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate('/search');
-          }}
-        >
-          <img src="/img/icon-search.svg" alt="상세 정보 검색" />
-        </SearchStyle>
-      </Button>
-      <ButtonTitleDes>예약 날짜와 시간을 선택해주세요.</ButtonTitleDes>
+      <div>
+        <Button type="button" onClick={() => modal.open()}>
+          <ButtonTitleStyle>전체지역</ButtonTitleStyle> <img src="/img/icon-select-arrow.svg" alt="전체 지역 탐색" />
+        </Button>
+        <ButtonTitleDes>예약 날짜와 시간을 선택해주세요.</ButtonTitleDes>
+      </div>
+
+      <ButtonStyle
+        className="search"
+        onClick={(e) => {
+          e.stopPropagation();
+          navigate('/search');
+        }}
+      >
+        <span css={Hidden}>검색</span>
+        <img src="/img/icon-search.svg" alt="상세 정보 검색" />
+      </ButtonStyle>
+
+      <ButtonStyle
+        className="user"
+        onClick={(e) => {
+          e.stopPropagation();
+          navigate(`/user/${user ? 'mypage' : 'login'}`);
+        }}
+      >
+        <span css={Hidden}>{user ? '마이페이지' : '로그인'}</span>
+        <img src="/img/icon-user-black.svg" alt={user ? '마이페이지' : '로그인'} />
+      </ButtonStyle>
       <LocalDateSelectionModal modalId={1} />
     </BookingSearchContainerStyle>
   );
 };
 
 const BookingSearchContainerStyle = styled.div`
   display: flex;
-  flex-direction: column;
+  align-items: center;
   margin-bottom: 1.8rem;
 `;
 
@@ -43,17 +65,34 @@ const Button = styled.button`
   gap: 0.4rem;
 `;
 
-const SearchStyle = styled.div`
-  margin-left: auto;
+const ButtonStyle = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.8rem;
+  width: 2.4rem;
+  height: 2.4rem;
+
+  &.search {
+    margin-left: auto;
+
+    & > img {
+      width: 1.7rem;
+    }
+  }
+
+  &.user {
+    & > img {
+      width: 1.6rem;
+    }
+  }
 `;
 
 const ButtonTitleStyle = styled.h1`
   font-size: 1.8rem;
   font-weight: 600;
 `;
+
 const ButtonTitleDes = styled.p`
   color: ${variables.colors.gray600};
 `;

diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -107,7 +107,7 @@ const BottomSheet = () => {
 
   return (
     isOpen && (
-      <div css={DimStyle} onClick={closeBottomSheet}>
+      <div css={DimStyle}>
         <div
           css={[SheetStyle(sheetHeight, translateY)]}
           ref={sheet}

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
+import { TypoBodyMdM, TypoCapSmM, TypoTitleXsM } from '@styles/Common';
 import variables from '@styles/Variables';
 import React from 'react';
 
@@ -73,17 +74,17 @@ const Button = ({
 
   const sizeStyles = {
     small: css`
-      font-size: small;
+      font-size: ${TypoCapSmM};
       height: 3rem;
       padding: 0 1rem;
     `,
     medium: css`
-      font-size: medium;
+      font-size: ${TypoBodyMdM};
       height: 3.6rem;
       padding: 0 1rem;
     `,
     large: css`
-      font-size: ${variables.size.big};
+      font-size: ${TypoTitleXsM};
       height: 4.8rem;
     `,
   };

diff --git a/src/components/CopyButton/CopyButton.tsx → src/components/CopyButton/CopyLocation.tsx b/src/components/CopyButton/CopyButton.tsx → src/components/CopyButton/CopyLocation.tsx
@@ -8,10 +8,10 @@ interface CopyButtonProps {
   buttonLabel?: string;
 }
 
-const CopyButton = ({ text, buttonLabel }: CopyButtonProps) => {
+const CopyLocation = ({ text, buttonLabel }: CopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
 
-  const handleCopy = async () => {
+  const copyToClipboard = async () => {
     await navigator.clipboard.writeText(text);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), 1500);
@@ -20,21 +20,21 @@ const CopyButton = ({ text, buttonLabel }: CopyButtonProps) => {
   return (
     <div css={containerStyle}>
       <div css={contentRowStyle}>
-        <img src="/img/icon-map.svg" alt="주소 아이콘" css={iconStyle} />
+        <img src="/img/icon-location.svg" alt="주소 아이콘" css={iconStyle} />
         <span css={textStyle}>{text}</span>
       </div>
       <div css={buttonRowStyle}>
-        <button css={buttonStyle} onClick={handleCopy}>
+        <button css={buttonStyle} onClick={copyToClipboard}>
           <img src="/img/icon-content_copy.svg" alt="주소 복사 아이콘" css={iconStyle} />
           {buttonLabel}
         </button>
-        {isCopied && <span css={feedbackStyle}>복사되었습니다! 🎉</span>}
+        {isCopied && <span css={feedbackStyle}>Copied! 🎉</span>}
       </div>
     </div>
   );
 };
 
-export default CopyButton;
+export default CopyLocation;
 
 const containerStyle = css`
   display: flex;
@@ -58,7 +58,7 @@ const buttonRowStyle = css`
 `;
 
 const iconStyle = css`
-  width: 1.6rem; /* 아이콘 크기 조정 */
+  width: 1.6rem;
   height: 1.6rem;
 `;
 
@@ -89,5 +89,5 @@ const buttonStyle = css`
 
 const feedbackStyle = css`
   font-size: 1.2rem;
-  color: #${variables.colors.gray200};
+  color: ${variables.colors.gray800};
 `;
diff --git a/src/components/Error/ErrorBoundary.tsx b/src/components/Error/ErrorBoundary.tsx
@@ -0,0 +1,36 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || <h1>문제가 발생했습니다.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;