Merge pull request #605 from woowacourse-teams/fix/265-home-page-fix-…

…bugs 다수 버그 수정
woowacourse-teams · Oct 20, 2023 · de19e1a · de19e1a
2 parents 783d3ad + 3fffd4b
commit de19e1a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 38 deletions.
diff --git a/client/src/components/CafeDetailBottomSheet.tsx b/client/src/components/CafeDetailBottomSheet.tsx
@@ -1,4 +1,5 @@
 import { Suspense, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { BsX } from 'react-icons/bs';
 import { styled } from 'styled-components';
 import { useScrollSnapGuard } from 'yozm-cafe-react-scroll-snap';
@@ -29,41 +30,46 @@ const CafeDetailBottomSheet = (props: CafeDetailBottomSheetProps) => {
   };
 
   return (
-    <Container onClick={handlePreventClickPropagation} role="dialog" aria-modal="true" {...scrollSnapGuardHandlers}>
-      <CloseButton>
-        <CloseIcon onClick={onClose} />
-      </CloseButton>
-      <Title>{cafe.name}</Title>
-      <Spacer $size={'4'} />
-      <QueryErrorBoundary>
-        <Suspense>
-          <CafeMenu cafeId={cafe.id} />
-        </Suspense>
-      </QueryErrorBoundary>
-      <InfoContainer>
-        <LocationDetail>
-          <NaverMapIcon />
-          <a href={cafe.detail.mapUrl} target="_blank" rel="noopener noreferrer">
-            <LocationName>{cafe.address}</LocationName>
-          </a>
-        </LocationDetail>
-        <OpeningHoursDetails>
-          <OpeningHoursDetail openingHours={cafe.detail.openingHours} />
-        </OpeningHoursDetails>
-        {/* <Info>
+    <>
+      {createPortal(
+        <Container onClick={handlePreventClickPropagation} role="dialog" aria-modal="true" {...scrollSnapGuardHandlers}>
+          <CloseButton>
+            <CloseIcon onClick={onClose} />
+          </CloseButton>
+          <Title>{cafe.name}</Title>
+          <Spacer $size={'4'} />
+          <QueryErrorBoundary>
+            <Suspense>
+              <CafeMenu cafeId={cafe.id} />
+            </Suspense>
+          </QueryErrorBoundary>
+          <InfoContainer>
+            <LocationDetail>
+              <NaverMapIcon />
+              <a href={cafe.detail.mapUrl} target="_blank" rel="noopener noreferrer">
+                <LocationName>{cafe.address}</LocationName>
+              </a>
+            </LocationDetail>
+            <OpeningHoursDetails>
+              <OpeningHoursDetail openingHours={cafe.detail.openingHours} />
+            </OpeningHoursDetails>
+            {/* <Info>
           <BsTelephone />
           <h3>000-000-000</h3>
         </Info> */}
-      </InfoContainer>
-      <Spacer $size={'6'} />
-      <Content>
-        {cafe.detail.description.split('\n').map((paragraph, index) => (
-          <p key={index}>{paragraph}</p>
-        ))}
-      </Content>
-
-      <MoreContentHintGradient />
-    </Container>
+          </InfoContainer>
+          <Spacer $size={'6'} />
+          <Content>
+            {cafe.detail.description.split('\n').map((paragraph, index) => (
+              <p key={index}>{paragraph}</p>
+            ))}
+          </Content>
+
+          <MoreContentHintGradient />
+        </Container>,
+        document.bodyRoot,
+      )}
+    </>
   );
 };
 
@@ -79,6 +85,7 @@ const Container = styled.div`
 
   width: 100%;
   height: 450px;
+  max-height: 100vh;
   padding: ${({ theme }) => theme.space[4]};
   padding-bottom: 0;
 

diff --git a/client/src/components/CafeMenuMiniList.tsx b/client/src/components/CafeMenuMiniList.tsx
@@ -63,7 +63,6 @@ const MenuListItemContainer = styled.li`
 
 const MenuItemImageContainer = styled.div`
   width: 100%;
-  height: 100%;
   padding: ${({ theme }) => theme.space[2]};
 
   & > * {
@@ -92,8 +91,9 @@ const MenuItemImageAltIcon = styled(PiCoffeeFill)`
   height: 50%;
 `;
 
-const MenuItemName = styled.div`
+const MenuItemName = styled.p`
   font-size: ${({ theme }) => theme.fontSize.xs};
+  text-align: center;
 `;
 
 const Divider = styled.hr`

diff --git a/client/src/components/ImageModal.tsx b/client/src/components/ImageModal.tsx
@@ -1,5 +1,6 @@
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
+import { CgClose } from 'react-icons/cg';
 import { styled } from 'styled-components';
 import { useScrollSnapGuard } from 'yozm-cafe-react-scroll-snap';
 import Resource from '../utils/Resource';
@@ -22,6 +23,11 @@ const ImageModal = (props: ImageModalProps) => {
 
   return (
     <Container {...scrollSnapGuardHandlers}>
+      <Actions>
+        <button onClick={onClose}>
+          <CloseIcon />
+        </button>
+      </Actions>
       <ActiveImageContainer onClick={handleContainerClick}>
         <ActiveImage src={Resource.getImageUrl({ size: 'original', filename: activeImage })} />
       </ActiveImageContainer>
@@ -54,17 +60,34 @@ const Container = styled.div`
   background: rgba(0, 0, 0, 0.5);
 `;
 
+const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: ${({ theme }) => theme.space[4]};
+`;
+
+const CloseIcon = styled(CgClose)`
+  font-size: ${({ theme }) => theme.fontSize['4xl']};
+  color: white;
+`;
+
 const ActiveImageContainer = styled.div`
   touch-action: pan-x pan-y;
 
+  position: relative;
+
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
+
+  margin-top: ${({ theme }) => theme.space[4]};
+  margin-bottom: ${({ theme }) => theme.space[4]};
 `;
 
 const ActiveImage = styled.img`
-  width: 100%;
+  position: absolute;
+  max-height: 100%;
 `;
 
 const ImageList = styled.ul`

diff --git a/client/src/components/OpeningHoursDetail.tsx b/client/src/components/OpeningHoursDetail.tsx
@@ -64,15 +64,18 @@ const OpeningHoursDetail = (props: OpeningHoursDetailProps) => {
 
 export default OpeningHoursDetail;
 
-const Container = styled.div``;
+const Container = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+`;
 
 const Summary = styled.h3``;
 
 const Details = styled.ul`
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space[1]};
-  align-items: flex-end;
+  align-self: end;
 
   color: ${({ theme }) => theme.color.gray};
 `;

diff --git a/client/src/styles/GlobalStyle.ts b/client/src/styles/GlobalStyle.ts
@@ -33,6 +33,16 @@ const GlobalStyle = createGlobalStyle`
     cursor: pointer;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    word-break: keep-all;
+  }
+
   #root {
     position: relative;