Merge pull request #104 from prgrms-web-devcourse-final-project/68-de…

…sign/walk-result-ui

[Design] #68 산책 마무리 및 강번따 UI 구현

src/components/Button/ActionButton.ts

@@ -1,7 +1,7 @@
 import styled, { BrandColors, FontWeight, GrayscaleColors, Typography } from 'styled-components'
 
 type BgColorType =
-  | Extract<keyof BrandColors, 'default' | 'lighten_2'>
+  | Extract<keyof BrandColors, 'default' | 'lighten_2' | 'lighten_3'>
   | Extract<keyof GrayscaleColors, 'gc_4' | 'gc_1' | 'font_1'>
 
 type ActionButtonProps = {
@@ -19,6 +19,7 @@ type ActionButtonStyles = {
 const ACTION_BUTTON_FONT_COLORS: Record<BgColorType, keyof GrayscaleColors> = {
   default: 'gc_4',
   lighten_2: 'font_1',
+  lighten_3: 'font_1',
   font_1: 'gc_4',
   gc_4: 'font_1',
   gc_1: 'font_4',

src/components/LazyComponents.tsx

@@ -8,4 +8,5 @@ export const WalkPage = lazy(() => import('~pages/WalkPage'))
 export const SocialPage = lazy(() => import('~pages/SocialPage'))
 export const RegisterPage = lazy(() => import('~pages/RegisterPage/Register'))
 export const RegisterDogPage = lazy(() => import('~pages/RegisterPage/Dog'))
+export const WalkCompletePage = lazy(() => import('~pages/WalkCompletePage'))
 export const ProfilePage = lazy(() => import('~pages/ProfilePage'))

src/pages/WalkCompletePage/index.tsx

@@ -0,0 +1,45 @@
+import * as S from './styles'
+
+const walkData = {
+  date: '2024.12.14',
+  time: '1:10:00',
+  distance: '2.4km',
+  calories: '200kcal',
+  mapImage: 'https://imagedelivery.net/CJyrB-EkqcsF2D6ApJzEBg/6d853db2-fb51-465c-eaa8-e9e38be01f00/public',
+}
+
+export default function WalkCompletePage() {
+  return (
+    <S.WalkCompletePage>
+      <S.Date>{walkData.date}</S.Date>
+
+      <S.Title>
+        견주닉넴과 밤톨이가
+        <br />
+        <span>30분</span>동안 산책했어요.
+      </S.Title>
+      <S.DogImageArea>
+        <S.DogImage />
+      </S.DogImageArea>
+
+      <S.WalkStats>
+        <S.StatItem>
+          <S.StatValue className='value'>{walkData.time}</S.StatValue>
+          <S.StatLabel className='label'>산책 시간</S.StatLabel>
+        </S.StatItem>
+        <S.StatItem>
+          <S.StatValue className='value'>{walkData.distance}</S.StatValue>
+          <S.StatLabel className='label'>산책 거리</S.StatLabel>
+        </S.StatItem>
+        <S.StatItem>
+          <S.StatValue className='value'>{walkData.calories}</S.StatValue>
+          <S.StatLabel className='label'>소모한 칼로리</S.StatLabel>
+        </S.StatItem>
+      </S.WalkStats>
+
+      <S.MapSection>
+        <img src={walkData.mapImage} alt='산책 경로' />
+      </S.MapSection>
+    </S.WalkCompletePage>
+  )
+}

src/pages/WalkCompletePage/styles.ts

@@ -0,0 +1,76 @@
+import { styled } from 'styled-components'
+import WalkCompleteDog from '~assets/result_dog.svg?react'
+import { Box } from '~components/Box'
+import { Typo13, Typo17, Typo20 } from '~components/Typo'
+import { FOOTER_HEIGHT } from '~constants/layout'
+
+export const WalkCompletePage = styled.div`
+  background-color: ${({ theme }) => theme.colors.brand.lighten_3};
+  width: 100%;
+  height: calc(100dvh - ${FOOTER_HEIGHT}px);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`
+
+export const Date = styled(Typo17)`
+  font-weight: 700;
+  color: #333;
+`
+
+export const Title = styled(Typo20)`
+  font-weight: 800;
+
+  span {
+    color: #8b4513;
+  }
+`
+
+export const WalkStats = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  padding: 22px 33px;
+  /* border-radius: 12px; */
+`
+
+export const StatItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`
+
+export const StatValue = styled(Typo20)`
+  font-weight: 800;
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+`
+
+export const StatLabel = styled(Typo13)`
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+`
+
+export const MapSection = styled.div`
+  width: 100%;
+  height: 240px;
+  border-radius: 12px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+export const DogImageArea = styled.div`
+  display: flex;
+  justify-content: right;
+`
+
+export const DogImage = styled(WalkCompleteDog)`
+  width: 142px;
+  height: 151px;
+  display: flex;
+`

src/pages/WalkPage/components/MapComponent/index.tsx

@@ -16,6 +16,7 @@ import XYZ from 'ol/source/XYZ'
 import ReactDOMServer from 'react-dom/server'
 import * as S from '~pages/WalkPage/styles'
 import { MIN_ACCURACY, MIN_DISTANCE, MIN_TIME_INTERVAL } from '~types/map'
+import { useNavigate } from 'react-router-dom'
 
 const ORS_API_URL = '/ors/v2/directions/foot-walking/geojson'
 
@@ -30,7 +31,12 @@ export const getMarkerIconString = () => {
   return svgString
 }
 
-export default function MapComponent() {
+// 모달 상태를 props로 받도록 수정
+interface MapComponentProps {
+  isModalOpen?: boolean
+}
+
+export default function MapComponent({ isModalOpen = false }: MapComponentProps) {
   // 지도 관련 ref
   const mapRef = useRef<Map | null>(null)
   const currentLocationMarkerRef = useRef<Feature<Geometry> | null>(null)
@@ -63,6 +69,8 @@ export default function MapComponent() {
   const [autoRotate, setAutoRotate] = useState<boolean>(false)
   const lastHeadingRef = useRef<number>(0)
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     return () => {
       if (currentLocationMarkerRef.current) {
@@ -591,6 +599,8 @@ export default function MapComponent() {
           duration: 500,
         })
       }
+
+      navigate('/walk-complete')
     }
   }
 
@@ -700,6 +710,7 @@ export default function MapComponent() {
             $bgColor={isWalking ? 'font_1' : 'default'}
             $fontWeight='700'
             $isWalking={isWalking}
+            disabled={isModalOpen} // 모달이 열려있을 때 버튼 비활성화
           >
             {isWalking ? '산책 끝' : '산책 시작'}
           </S.StyledActionButton>
@@ -716,6 +727,7 @@ export default function MapComponent() {
             $bgColor={isWalking ? 'font_1' : 'default'}
             $fontWeight='700'
             $isWalking={isWalking}
+            disabled={isModalOpen} // 모달이 열려있을 때 버튼 비활성화
           >
             {isWalking ? '산책 끝' : '산책 시작'}
           </S.StyledActionButton>

src/pages/WalkPage/components/WalkerListModal/index.tsx

@@ -0,0 +1,54 @@
+import * as S from './styles'
+
+interface WalkerListModalProps {
+  isOpen: boolean
+  onClose: () => void
+  isClosing: boolean
+}
+
+export default function WalkerListModal({ isOpen, onClose, isClosing }: WalkerListModalProps) {
+  if (!isOpen) return null
+
+  const handleBackgroundClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose()
+    }
+  }
+
+  return (
+    <S.Overlay className={isClosing ? 'closing' : ''} onClick={handleBackgroundClick}>
+      <S.WalkerListContainer className={isClosing ? 'closing' : ''}>
+        <S.ModalTitle>강번따 리스트</S.ModalTitle>
+        <S.WalkerListSection>
+          <S.WalkerList>
+            {Array(10)
+              .fill(0)
+              .map((_, i) => (
+                <S.WalkerItem key={i}>
+                  <S.ProfileArea>
+                    <S.ProfileCircle />
+                    <S.InfoArea>
+                      <S.Name>밤돌이</S.Name>
+                      <S.Details>
+                        <S.Detail>포메라니안</S.Detail>
+                        <S.WalkListSeparator $height={8} />
+                        <S.Detail>4살</S.Detail>
+                        <S.WalkListSeparator $height={8} />
+                        <S.Detail>남</S.Detail>
+                      </S.Details>
+                      <S.WalkCount>
+                        산책 횟수 <p>&nbsp;4회</p>
+                      </S.WalkCount>
+                    </S.InfoArea>
+                  </S.ProfileArea>
+                  <S.WalkBtn $type='roundedRect' $bgColor='lighten_3' $fontWeight='700'>
+                    강번따
+                  </S.WalkBtn>
+                </S.WalkerItem>
+              ))}
+          </S.WalkerList>
+        </S.WalkerListSection>
+      </S.WalkerListContainer>
+    </S.Overlay>
+  )
+}