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,30 @@
 import React, { useState } from 'react';
 import { isBrowser, isMobile } from 'react-device-detect';
 import { BrowserRouter } from 'react-router-dom';
-import SearchValueContext from '../context';
+import { CarouselIndexCtx, SearchValueCtx } from '../context';
 import DesktopFallback from './DesktopFallback';
 import PageTemplate from './PageTemplate';
 
 function App() {
   const [target, setTarget] = useState("");
+  const [carouselIndex, setCarouselIndex] = useState(0);
+
   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)}}>
+          <CarouselIndexCtx.Provider value={{
+            carouselIndexCtx: carouselIndex,
+            setCarouselIndexCtx: (index: number) => setCarouselIndex(index)}}>
+
+            <PageTemplate/>
+
+          </CarouselIndexCtx.Provider>
+          </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;
@@ -16,5 +16,9 @@ header #home-link {
     font-family: 'Poor Story', cursive;
     font-style: normal;
     font-weight: normal;
-    font-size: 14px;
+    font-size: 16px;
+}
+
+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,28 @@
+import React from 'react';
+import { CafeInfo } from '../../../utils/type';
+import CarouselMainImage from '../CarouselMainImage';
+import './index.css';
+import CarouselVertical from '../CarouselVertical';
+import { StyledCarouselImage } from '../../../utils/styled';
+
+type CafeImageCarouselProps = {
+    cafes: CafeInfo[];
+    setCafe: (cafe: CafeInfo | null) => void;
+}
+
+const CafeCarousel = ({cafes, setCafe}: CafeImageCarouselProps) => {
+    return(
+        <div className="carousel-container">
+            <CarouselVertical title="Carousel">
+            {cafes?.map((cafe, index) => {
+                return(
+                    <StyledCarouselImage key={index}>
+                        <CarouselMainImage cafe={cafe} setCafe={setCafe}/>
+                    </StyledCarouselImage>
+            )})}
+            </CarouselVertical>
+        </div>
+    )
+}
+
+export default CafeCarousel;

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

@@ -1,15 +1,17 @@
 @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;
+    margin: 0 auto;
 }
 
 .detail-info img {
@@ -23,8 +25,8 @@
     font-style: normal;
     font-weight: normal;
     font-size: 16px;
-    padding-right: 10px;
-    color: #ffffff;
+    margin-right: 10px;
+    color: #000000;
 }
 
 .detail-button-wrapper {
@@ -49,25 +51,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,28 +93,53 @@
     font-family: 'Poor Story', cursive;
     font-style: normal;
     font-weight: normal;
-    color: #ffffff;
+    color: #000000;
     padding: 20px 0px;
 }
 
 .detail-more-button button {
-    width: 180px;
-    height: 36px;
-    border: 1px solid #F2D6A2;
     box-sizing: border-box;
-    border-radius: 8px;
+    border-radius: 4px;
+    background-color:#00E7FF;
 
     font-family: 'Poor Story', cursive;
     font-style: normal;
     font-weight: normal;
-    color: #F2D6A2;
+    font-size: 14px;
+    color: #000000;
+}
+
+.detail-map-button button {
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: #00FFB5;
+
+    font-family: 'Poor Story', cursive;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    color: #000000;
 }
 
 .detail-button i {
     font-size: 20px;
-    color: #ffffff;
 }
 
 .detail-container {
     padding-bottom: 20px;
-}
+}
+
+.detail-name {
+    border-radius: 4px;
+    background-color:#E6ED63;
+}
+
+.detail-place {
+    border-radius: 4px;
+    background-color:#9FE4E0;
+}
+
+.detail-time {
+    display: block;
+}
+

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

@@ -3,46 +3,51 @@ 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;
+    cafe: CafeInfo | null;
+    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 currentCopyLink = `https://coffee-hmm.inhibitor.io/cafe/${cafe?.id}`;
+
+    const handleClick = () => {
+        setCafe(null);
+    }
 
     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">
-                    <span>{cafe.name}</span>
-                    <span>open 9:00 ~ 19:00</span>
+                    <span className="detail-name">{cafe?.name}</span>
+                    <span className="detail-place">{cafe?.place}</span>
+                    <span className="detail-time">open 9:00 ~ 19:00</span>
                 </div>
 
                 <StyledRowFlexCenter className="detail-button-wrapper">
                     <div className="detail-button"><button className="detail-like"><i className="material-icons-round">favorite</i></button><span>좋아요</span></div>
-                    <div className="detail-button"> <CopyToClipboard text={currentCopyLink}><button className="detail-share" onClick={() => copyLink(cafe.name)}><i className="material-icons-round">share</i></button></CopyToClipboard><span>링크 공유</span></div>
+                    <div className="detail-button"> <CopyToClipboard text={currentCopyLink}><button className="detail-share" onClick={() => copyLink(cafe?.name)}><i className="material-icons-round">share</i></button></CopyToClipboard><span>링크 공유</span></div>
                     <div className="detail-button"><button className="detail-review"><i className="material-icons-round">create</i></button><span>카페 리뷰</span></div>
                     <div className="detail-button"><button className="detail-photo"><i className="material-icons-round">photo_library</i></button><span>사진 업로드</span></div>  
                 </StyledRowFlexCenter>
 
                 <div className="detail-more">
-                    <h5>카페의 구체적인 정보가 필요하신가요?</h5>
-                    <div className="detail-more-button"><button onClick={() => setWebSearchClicked(true)}>네이버, 인스타 검색 바로가기</button></div>
-
+                    <h5>카페의 구체적인 정보가 필요하신가요&#63;</h5>
+                    <div className="detail-more-button"><button onClick={() => setWebSearchClicked(true)}>네이버, 인스타 검색 바로가기 &#10154;</button></div>
+                    <div className="detail-map-button"><button>지도 바로가기 &#10154;</button></div>
                     <WebSearchBottomPopup cafe={cafe} isWebSearchClicked={isWebSearchClicked} setWebSearchClicked={setWebSearchClicked}/>
                 </div>
             </StyledColumnFlex>
         </div>
     )
 }
 
-export default CafeDetail;
+export default React.memo(CafeDetail);

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

@@ -0,0 +1,18 @@
+.detail-carousel-dot-wrapper {
+    position: relative;
+}
+
+.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;
+}