지도 페이지 ui 수정 (#473)

* feat: 지도 페이지 ui 수정 * feat: 매너 스코어 리뷰 페이지 선택 프로필 border 수정
Java-and-Script · Dec 3, 2023 · 9174f3c · 9174f3c
1 parent 9e1b87e
commit 9174f3c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.tsx b/src/pages/MannerScoreReviewPage/MannerScoreReviewPage.tsx
@@ -74,7 +74,7 @@ export const MannerScoreReviewPage = () => {
                 size={50}
                 border={
                   index === currentSelectedMemberIndex
-                    ? `10px solid ${theme.PALETTE.RED_600}`
+                    ? `3px solid ${theme.PALETTE.RED_600}`
                     : `1px solid ${theme.PALETTE.GRAY_400}`
                 }
                 radius={'5px'}

diff --git a/src/pages/MapPage/components/GamesDetailPage/GamesDetailPage.tsx b/src/pages/MapPage/components/GamesDetailPage/GamesDetailPage.tsx
@@ -1,11 +1,15 @@
 import { useNavigate } from 'react-router-dom';
 
+import { PositionItemBox } from '@pages/GamesDetailPage/GamesDetailPage.styles';
+
 import { Avatar } from '@components/Avatar';
 import { Button } from '@components/shared/Button';
 import { Flex } from '@components/shared/Flex';
 import { Image } from '@components/shared/Image';
 import { Text } from '@components/shared/Text';
 
+import { usePositionToast } from '@hooks/usePositionToast';
+
 import { theme } from '@styles/theme';
 
 import { Game } from '@type/models';
@@ -37,6 +41,7 @@ export const GamesDetailPage = ({
   onNavigate?: VoidFunction;
 }) => {
   const navigate = useNavigate();
+  const { handleClickPosition } = usePositionToast();
   if (match === undefined) {
     return <></>;
   }
@@ -94,17 +99,31 @@ export const GamesDetailPage = ({
             <Flex gap={20}>
               <GrayText>시간</GrayText>
               <Text>
-                {`${match.playStartTime} ~ ${match.playEndTime} (${
-                  match.playTimeMinutes / 60
-                }h)`}
+                {`${match.playStartTime.slice(0, 5)}
+                 ~ ${match.playEndTime.slice(0, 5)} (${
+                   match.playTimeMinutes / 60
+                 }h)`}
               </Text>
             </Flex>
+            <Flex>
+              <GrayText nowrap>선호 포지션</GrayText>
+            </Flex>
+            <Flex gap={10}>
+              {match.positions.map((position) => (
+                <PositionItemBox
+                  key={position}
+                  onClick={() => handleClickPosition(position)}
+                >
+                  {position}
+                </PositionItemBox>
+              ))}
+            </Flex>
           </Flex>
           <Flex gap={10}>
             <InfoItem>
               <GrayText size={12}>참가비</GrayText>
               <Image width={40} src={Money} alt="money" />
-              <Text size={16}>{`${match.cost}원`}</Text>
+              <Text size={16}>{`${match.cost.toLocaleString()}원`}</Text>
             </InfoItem>
             <InfoItem>
               <GrayText size={12}>현재원</GrayText>

diff --git a/src/pages/MapPage/components/GamesNearInMap.tsx b/src/pages/MapPage/components/GamesNearInMap.tsx
@@ -33,7 +33,7 @@ export const GamesNearInMap = ({
     <PageLayout>
       <PageContent>
         <Text size={20} weight={700}>
-          내 근처 게스트 매치
+          지도 내 게스트 매치
         </Text>
         {games && games.length === 0 ? (
           <Flex justify="center" gap={16}>