fix: qa 수정사항 반영

NolDaGapSeoYang · Mar 30, 2023 · 7d4e799 · 7d4e799
1 parent d4cf258
commit 7d4e799
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 30 deletions.
diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -154,6 +154,10 @@ const GlobalStyle = createGlobalStyle`
     line-height:  1.6rem;
   }
 
+  .text-bold {
+    font-weight: 600;
+  }
+
   .px {
     padding-left :2rem;
     padding-right: 2rem;

diff --git a/src/assets/x-thin.svg b/src/assets/x-thin.svg
diff --git a/src/components/Search/DestinationCard.tsx b/src/components/Search/DestinationCard.tsx
@@ -23,8 +23,8 @@ const DestinationCard: FC<any> = ({ node, maxLength, idx, fetchMore }) => {
         </PlaceHolderWrapper>
         <LocationWrapper>
           <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <h4 className='title-medium'>{node.name}</h4>
-            <span className='title-small text-subdark'>
+            <h4 className='title-medium text-bold'>{node.name}</h4>
+            <span className='title-small main-text'>
               나와의 거리 {getDistance(node.distance)}km
             </span>
             <Address className='body-small2 text-subdark'>
@@ -76,7 +76,7 @@ const DestinationCard: FC<any> = ({ node, maxLength, idx, fetchMore }) => {
 
 export default DestinationCard
 const Destination = styled(motion.div)`
-  padding: 1rem;
+  padding: 2rem 1rem;
   border-radius: 1rem;
   display: flex;
   flex-direction: column;

diff --git a/src/hooks/useGetSelection.ts b/src/hooks/useGetSelection.ts
@@ -12,7 +12,6 @@ const useGetSelection = () => {
           const obj = {
             [cur]: cur === 'needCompanion' ? value === 'true' : value,
           }
-          console.log(obj)
           return {
             ...acc,
             ...obj,

diff --git a/src/layout/Default.tsx b/src/layout/Default.tsx
@@ -1,17 +1,11 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect } from 'react'
 import { Outlet } from 'react-router-dom'
 import styled from 'styled-components'
 import { ReactComponent as Baby } from 'assets/baby.svg'
 import { ReactComponent as Reset } from 'assets/reset.svg'
+import { ReactComponent as X } from 'assets/x-thin.svg'
 import store from 'store/index'
-import {
-  AnimatePresence,
-  easeInOut,
-  motion,
-  useMotionValue,
-  useTransform,
-  Variants,
-} from 'framer-motion'
+import { AnimatePresence, easeInOut, motion, Variants } from 'framer-motion'
 
 const SliderVariants: Variants = {
   exit: {
@@ -80,15 +74,15 @@ const Default = () => {
     )
   }
 
-  const [sliderHeight, setSliderHeight] = useState(0)
-  const y = useMotionValue(0)
-  const sliderRef = useRef<HTMLDivElement>(null)
-  const perY = useTransform(y, [0, sliderHeight], ['0%', '100%'])
-  useEffect(() => {
-    if (sliderRef?.current) {
-      setSliderHeight((prev) => sliderRef.current.clientHeight)
-    }
-  }, [sliderRef.current?.clientHeight])
+  // const [sliderHeight, setSliderHeight] = useState(0)
+  // const y = useMotionValue(0)
+  // const sliderRef = useRef<HTMLDivElement>(null)
+  // const perY = useTransform(y, [0, sliderHeight], ['0%', '100%'])
+  // useEffect(() => {
+  //   if (sliderRef?.current) {
+  //     setSliderHeight((prev) => sliderRef.current.clientHeight)
+  //   }
+  // }, [sliderRef.current?.clientHeight])
   return (
     <Main>
       <AnimatePresence mode='popLayout'>
@@ -108,8 +102,11 @@ const Default = () => {
                 },
               }}
             />
-            <Slider ref={sliderRef} variants={SliderVariants} style={{ y: perY }}>
-              <SnapBars
+            <Slider variants={SliderVariants}>
+              <div onClick={() => setToggle(false)}>
+                <CloseButton />
+              </div>
+              {/* <SnapBars
                 onPan={(e, point) => {
                   if (point.offset.y > 0) {
                     y.set(point.offset.y)
@@ -124,7 +121,7 @@ const Default = () => {
                 }}
               >
                 <SnapBar />
-              </SnapBars>
+              </SnapBars> */}
               <Content>
                 <FilterList>
                   <FilterHeader>
@@ -171,7 +168,10 @@ const Default = () => {
               <Footer className='mx' style={{ justifyContent: 'space-between' }}>
                 <div style={{ display: 'flex', alignItems: 'center', columnGap: '0.5rem' }}>
                   <Reset style={{ width: '2.2rem', stroke: 'gray' }} />
-                  <span className='title-medium text-gray' style={{ textDecoration: 'underline', textUnderlineOffset : '5px' }}>
+                  <span
+                    className='title-medium text-gray'
+                    style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}
+                  >
                     초기화
                   </span>
                 </div>
@@ -187,6 +187,10 @@ const Default = () => {
 }
 
 export default Default
+const CloseButton = styled(X)`
+  position: absolute;
+  right: 2rem;
+`
 const SnapBars = styled(motion.div)`
   position: absolute;
   touch-action: none;

diff --git a/src/screen/Search.tsx b/src/screen/Search.tsx
@@ -103,7 +103,6 @@ const Search = () => {
     variables,
     notifyOnNetworkStatusChange: true,
     onCompleted(data) {
-      console.log(data, 'dd')
       setIsLoading(false)
     },
   })
@@ -130,7 +129,6 @@ const Search = () => {
         </h3>
         <div
           onClick={() => {
-            console.log('onClick')
             window.Kakao.Share.sendCustom({
               templateId: 91940,
               templateArgs: {
@@ -140,8 +138,6 @@ const Search = () => {
                 name: 'test',
                 ...selection,
               },
-
-              callback: () => console.log('???'),
             })
           }}
         >