Touch-event substitutes for click-event

app/package.json

@@ -10,8 +10,9 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-spring": "^8.0.27",
+    "react-swipeable": "^6.0.1",
     "styled-components": "^5.2.1",
-    "typescript": "^4.0.3",
+    "typescript": "4.0.5",
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {

app/src/components/App.tsx

@@ -1,22 +1,25 @@
 import React, { useState } from 'react';
 import { isBrowser, isMobile } from 'react-device-detect';
 import { BrowserRouter } from 'react-router-dom';
-import SearchValueContext from '../context';
+import { SearchValueCtx } from '../context';
 import DesktopFallback from './DesktopFallback';
 import PageTemplate from './PageTemplate';
 
 function App() {
   const [target, setTarget] = useState("");
+
   return (
     <div className="App">
       {isBrowser && <DesktopFallback/>}
       {isMobile && (
         <BrowserRouter>       
-          <SearchValueContext.Provider value={{
-            searchValue: target,
-            setSearchValue: (data: string) => setTarget(data)}}>
-            <PageTemplate searchValue={target}/>
-          </SearchValueContext.Provider>
+          <SearchValueCtx.Provider value={{
+            searchValueCtx: target,
+            setSearchValueCtx: (data: string) => setTarget(data)}}>
+
+            <PageTemplate/>
+
+          </SearchValueCtx.Provider>
         </BrowserRouter>
       )}
     </div>

app/src/components/PageTemplate.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { useLocation } from "react-router";
 import { animated, useTransition } from "react-spring";
-import Footer from "./common/Footer";
 import Header from "./common/Header";
 import Router from "./Router";
 
@@ -23,12 +22,7 @@ function getPageTransition(pathname: string){
   };
 }
 
-type props = {
-  searchValue: string;
-}
-
-
-const PageTemplate = ({searchValue}: props) => {
+const PageTemplate = () => {
   const location = useLocation();
   const routeTransition = useTransition(
     location,
@@ -58,11 +52,10 @@ const PageTemplate = ({searchValue}: props) => {
             ...springProps,
           }}
         >
-          <Header location={item} searchValue={searchValue}/>
+          <Header location={item}/>
           <main>
             <Router location={item}/>
           </main>
-          <Footer location={item} />
         </animated.div>
       ))}
     </div>

app/src/components/common/Header/index.css

@@ -2,7 +2,7 @@
 
 header {
     width: 100%;
-    height: 48px;
+    height: 6vh;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -17,4 +17,8 @@ header #home-link {
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
+}
+
+header i{
+    color: #555555;
 }

app/src/components/common/Header/index.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
+import { SearchValueCtx } from '../../../context';
 import './index.css';
 
 
 interface HeaderProps {
     location: {
       pathname: string;
     };
-    searchValue: string;
 }
 
 
-const Header = ({location, searchValue}: HeaderProps) => {
+const Header = ({location}: HeaderProps) => {
     const history = useHistory();
+    const { searchValueCtx } = useContext(SearchValueCtx);
 
     switch(location.pathname){
         case "/search" : 
             return(
                 <header>
-                    <button className="back-button" onClick={() => history.goBack()}><span className="material-icons">keyboard_arrow_left</span></button>
-                    <span className="header-searchvalue">{searchValue}</span>
+                    <button className="back-button" onClick={() => history.goBack()}><i className="material-icons">keyboard_arrow_left</i></button>
+                    <span className="header-searchvalue">{searchValueCtx}</span>
                 </header>
             )
     }

app/src/components/others/CafeCarousel/index.css

@@ -0,0 +1,3 @@
+.carousel-container {
+    height: 100%;
+}

app/src/components/others/CafeCarousel/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CafeInfo } from '../../../utils/type';
+import CarouselMainImage from '../CarouselMainImage';
+import './index.css';
+import CarouselCol from '../CarouselCol';
+import { StyledCarouselImage } from '../../../utils/styled';
+
+type CafeImageCarouselProps = {
+    cafes: CafeInfo[];
+    setCafe: (cafe: CafeInfo | null) => void;
+}
+
+const CafeCarousel = ({cafes, setCafe}: CafeImageCarouselProps) => {
+    return(
+        <div className="carousel-container">
+            <CarouselCol title="Carousel">
+            {cafes?.map((cafe, index) => {
+                return(
+                    <StyledCarouselImage key={index}>
+                        <CarouselMainImage cafe={cafe} setCafe={setCafe}/>
+                    </StyledCarouselImage>
+            )})}
+            </CarouselCol>
+
+        </div>
+    )
+}
+
+export default CafeCarousel;

app/src/components/others/CafeDetail/index.css

@@ -1,15 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Alef&family=Modak&family=Poor+Story&display=swap');
 
 .detail-close-button {
-    color: #F2D6A2;
-    padding: 4px;
+    color: #555555;
+    padding: 2px;
     position: absolute;
-    top: 4px;
-    right: 4px;
+    top: 1%;
+    left: 1%;
+    z-index: 9;
 }
 
 .detail-info {
-    padding: 10px 20px;
+    min-width: 300px;
+    padding-top: 12px;
+    margin: 0 auto;
 }
 
 .detail-info img {
@@ -24,7 +27,7 @@
     font-weight: normal;
     font-size: 16px;
     padding-right: 10px;
-    color: #ffffff;
+    color: #000000;
 }
 
 .detail-button-wrapper {
@@ -49,25 +52,40 @@
     font-style: normal;
     font-weight: normal;
     font-size: 12px;
-    color: #ffffff;
+    color: #000000;
 }
 
 .detail-like {
     border: 1px solid #E7C7D6; 
 }
+.detail-like i{
+    color: #E7C7D6; 
+}
 
 .detail-share {
     border: 1px solid #B7D996;
 }
 
+.detail-share i {
+    color: #B7D996;
+}
+
 .detail-review {
     border: 1px solid #84D9D0;
 }
 
+.detail-review i {
+    color: #84D9D0;
+}
+
 .detail-photo {
     border: 1px solid #CAE5E1;
 }
 
+.detail-photo i {
+    color: #CAE5E1;
+}
+
 .detail-more {
     text-align: center;
 }
@@ -76,7 +94,7 @@
     font-family: 'Poor Story', cursive;
     font-style: normal;
     font-weight: normal;
-    color: #ffffff;
+    color: #000000;
     padding: 20px 0px;
 }
 
@@ -95,7 +113,6 @@
 
 .detail-button i {
     font-size: 20px;
-    color: #ffffff;
 }
 
 .detail-container {

app/src/components/others/CafeDetail/index.tsx

@@ -3,23 +3,29 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { copyLink} from '../../../utils/function';
 import { StyledColumnFlex, StyledRowFlexCenter } from '../../../utils/styled';
 import { CafeInfo } from '../../../utils/type';
-import CafeImageSlide from '../CafeImageSlide';
+import CafeDetailImageCarousel from '../CafeDetailImageCarousel';
 import WebSearchBottomPopup from '../WebSearchBottomPopup';
 import './index.css';
 
 type CafeDetailProps = {
     cafe: CafeInfo;
-    setIsClicked: (click: boolean) => void;
+    setCafe: (cafe: CafeInfo | null) => void;
 }
 
-const CafeDetail = ({ cafe, setIsClicked}: CafeDetailProps) => {
+const CafeDetail = ({ cafe, setCafe}: CafeDetailProps) => {
     const [isWebSearchClicked, setWebSearchClicked] = useState<boolean>(false);
     const currentCopyLink = `https://coffee-hmm.inhibitor.io/cafe/${cafe.id}`;
+
+    const handleClick = () => {
+        setTimeout(() => {
+            setCafe(null);
+        }, 100) // resolve to react state update on an unmounted component in CarouselRow
+    }
 
     return(
         <div>
-            <button className="detail-close-button" onClick={() => setIsClicked(false)}><i className="material-icons">cancel</i></button>
-            <CafeImageSlide cafe={cafe}/>
+            <button className="detail-close-button" onClick={handleClick}><i className="material-icons">keyboard_arrow_left</i></button>
+            <CafeDetailImageCarousel cafe={cafe}/>
 
             <StyledColumnFlex>
                 <div className="detail-info">

app/src/components/others/CafeDetailImageCarousel/index.css

@@ -0,0 +1,14 @@
+.detail-carousel-container {
+    width: 100%;
+    height: 320px;
+    padding-top: 6vh;
+    position: relative;
+}
+
+.detail-carousel-container button {
+    font-family: 'Poor Story', cursive;
+    font-weight: normal;
+    font-size: 12px;
+    color: #ffffff;
+    padding: 140px 10px;
+}

app/src/components/others/CafeDetailImageCarousel/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyledCarouselImage } from '../../../utils/styled';
+import { CafeInfo } from '../../../utils/type';
+import CarouselRow from '../CarouselRow';
+import CarouselDetailImage from '../CarouselDetailImage';
+import './index.css';
+
+type CafeDetailImageCarouselProps = {
+    cafe: CafeInfo;
+}
+
+const CafeDetailImageCarousel = ({cafe}: CafeDetailImageCarouselProps) => {
+    return(
+        <div className="detail-carousel-container">
+            <CarouselRow title="Carousel">
+            {cafe.imageUris.map((image, index) => {   
+                return(
+                    <StyledCarouselImage key={index}>
+                        <CarouselDetailImage image={image}/>
+                    </StyledCarouselImage>
+                )
+            })}
+            </CarouselRow>
+        </div>
+    )
+}
+
+export default CafeDetailImageCarousel;