fix(#36): 지도 페이지 추가 요구사항 수정

src/pages/ManagePage/StepSlope/components/table/TableToolbar.tsx

@@ -217,7 +217,7 @@ const GradeButton = () => {
         <MenuItem onClick={() => handleGradeSelect('B')}>B</MenuItem>
         <MenuItem onClick={() => handleGradeSelect('C')}>C</MenuItem>
         <MenuItem onClick={() => handleGradeSelect('D')}>D</MenuItem>
-        <MenuItem onClick={() => handleGradeSelect('F')}>F</MenuItem>
+        <MenuItem onClick={() => handleGradeSelect('E')}>E</MenuItem>
       </Menu>
     </>
   );

src/pages/MapPage/BottomSheet.tsx

@@ -90,7 +90,7 @@ const BottomSheet = () => {
       bCount: 0,
       cCount: 0,
       dCount: 0,
-      fCount: 0,
+      eCount: 0,
     };
 
     for (let i = 0; i < slopes.length; i++) {
@@ -109,8 +109,8 @@ const BottomSheet = () => {
         case 'D':
           counts.dCount++;
           break;
-        case 'F':
-          counts.fCount++;
+        case 'E':
+          counts.eCount++;
           break;
       }
     }
@@ -145,7 +145,7 @@ const BottomSheet = () => {
               return <NoInfo text="5km 반경 내 급경사지 데이터가 없습니다." />;
             }
           } else {
-            const { aCount, bCount, cCount, dCount, fCount } =
+            const { aCount, bCount, cCount, dCount, eCount } =
               countGrades(slopeData);
             return (
               <>
@@ -156,7 +156,7 @@ const BottomSheet = () => {
                     B: bCount,
                     C: cCount,
                     D: dCount,
-                    F: fCount,
+                    E: eCount,
                   }}
                 />
                 <ListWrapper>

src/pages/MapPage/components/InfoTable.tsx

@@ -16,39 +16,75 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
     ? 'C'
     : selectItem.priority?.grade?.includes('D')
     ? 'D'
-    : 'F';
+    : 'E';
+
   return (
     <InnerContainer>
       <HeaderWrapper>
         <TitleWrapper>
           <Title>{selectItem?.name || ''}</Title>
-          <Num>{selectItem?.managementNo || ''}</Num>
+          <UpperAddressValue>
+            {selectItem?.location?.province || ''}
+            {selectItem?.location?.city || ''}
+            {selectItem?.location?.district || ''}
+            {selectItem?.location?.address || ''}
+            {selectItem?.location?.mountainAddress === 'Y' ? '(산)' : ''}
+          </UpperAddressValue>
         </TitleWrapper>
 
         <CloseButton onClick={onCloseInfo}>&times;</CloseButton>
       </HeaderWrapper>
       <ContentSection>
         <InfoRow>
-          <Label>관리번호</Label>
-          <Value>{selectItem?.managementNo || ''}</Value>
+          <Label>관리주체명</Label>
+          <Value>{selectItem?.inspections?.serialNumber || ''}</Value>
         </InfoRow>
+
+        <AddressWrapper>
+          <Label>주소</Label>
+          <ValueColumn>
+            <AddressValue>
+              {selectItem?.location?.province || ''}
+              {selectItem?.location?.city || ''}
+              {selectItem?.location?.district || ''}
+              {selectItem?.location?.address || ''}
+
+              {selectItem?.location?.mainLotNumber
+                ? selectItem?.location?.subLotNumber
+                  ? `   ${selectItem?.location?.mainLotNumber}-${selectItem?.location?.subLotNumber}`
+                  : `   ${selectItem?.location?.mainLotNumber}`
+                : ''}
+            </AddressValue>
+            <AddressValue>
+              {selectItem?.location?.roadAddress
+                ? `(${selectItem?.location?.roadAddress})`
+                : ''}
+            </AddressValue>
+          </ValueColumn>
+        </AddressWrapper>
+        <Line />
         <InfoRow>
-          <Label>시행청명</Label>
-          <Value>{selectItem?.management?.organization || ''}</Value>
+          <Label>최고수직고</Label>
+          <Value>{selectItem.priority.maxVerticalHeight}</Value>
         </InfoRow>
         <InfoRow>
-          <Label>소관부서명</Label>
-          <Value>{selectItem?.management?.department || ''}</Value>
+          <Label>종단길이</Label>
+          <Value>{selectItem.priority.longitudinalLength}</Value>
         </InfoRow>
-        <AddressWrapper>
-          <Label>주소</Label>
-          <AddressValue>
-            {selectItem?.location?.province || ''}
-            {selectItem?.location?.city || ''}
-            {selectItem?.location?.district || ''}
-            {selectItem?.location?.address || ''}
-          </AddressValue>
-        </AddressWrapper>
+        <InfoRow>
+          <Label>평균경사</Label>
+          <Value>{selectItem.priority.averageSlope}</Value>
+        </InfoRow>
+
+        <InfoRow>
+          <Label>점수</Label>
+          <Value>{selectItem.priority.Score}</Value>
+        </InfoRow>
+        <InfoRow>
+          <Label>등급</Label>
+          <GradeValue $grade={grade}>{grade}</GradeValue>
+        </InfoRow>
+
         <Line />
         {selectItem?.priority?.usage && (
           <InfoRow>
@@ -64,40 +100,6 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
           <Label>비탈면유형</Label>
           <Value>{selectItem.priority.slopeType}</Value>
         </InfoRow>
-        <InfoRow>
-          <Label>등급</Label>
-          <GradeValue $grade={grade}>{grade}</GradeValue>
-        </InfoRow>
-        <Line />
-
-        <InfoRow>
-          <Label>시점 좌표</Label>
-          <Value>
-            {selectItem?.location?.coordinates?.start?.coordinates?.[1] &&
-            selectItem?.location?.coordinates?.start?.coordinates?.[0]
-              ? `위도: ${selectItem.location.coordinates.start.coordinates[1]
-                  .toFixed(6)
-                  .toString()}°      
-                경도: ${selectItem.location.coordinates.start.coordinates[0]
-                  .toFixed(6)
-                  .toString()}°`
-              : '좌표 정보 없음'}
-          </Value>
-        </InfoRow>
-        <InfoRow>
-          <Label>종점 좌표</Label>
-          <Value>
-            {selectItem?.location?.coordinates?.end?.coordinates?.[1] &&
-            selectItem?.location?.coordinates?.end?.coordinates?.[0]
-              ? `위도: ${selectItem.location.coordinates.end.coordinates[1]
-                  .toFixed(6)
-                  .toString()}°      
-                경도: ${selectItem.location.coordinates.end.coordinates[0]
-                  .toFixed(6)
-                  .toString()}°`
-              : '좌표 정보 없음'}
-          </Value>
-        </InfoRow>
       </ContentSection>
     </InnerContainer>
   );
@@ -128,7 +130,7 @@ const Title = styled.div`
   font-weight: 600;
 `;
 
-const Num = styled.div`
+const UpperAddressValue = styled.div`
   font-size: 14px;
   color: #7e7e7e;
 `;
@@ -167,7 +169,10 @@ const AddressWrapper = styled(InfoRow)`
 const AddressValue = styled(Value)`
   line-height: 1.4;
 `;
-
+const ValueColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 const GradeValue = styled(Value)<{ $grade: string }>`
   color: ${({ $grade, theme }) => {
     switch ($grade) {
@@ -179,8 +184,8 @@ const GradeValue = styled(Value)<{ $grade: string }>`
         return theme.colors.grade.C;
       case 'D':
         return theme.colors.grade.D;
-      case 'F':
-        return theme.colors.grade.F;
+      case 'E':
+        return theme.colors.grade.E;
       default:
         return '#333';
     }

src/pages/MapPage/components/ListContainer.tsx

@@ -11,7 +11,7 @@ const ListContainer = ({ item, onClick }: ListProps) => {
     ? 'C'
     : item.priority?.grade.includes('D')
     ? 'D'
-    : 'F';
+    : 'E';
   return (
     <Container onClick={onClick}>
       <Wrapper>
@@ -78,8 +78,8 @@ const GradeBackground = styled.div<{ $grade: string }>`
         return theme.colors.grade.C;
       case 'D':
         return theme.colors.grade.D;
-      case 'F':
-        return theme.colors.grade.F;
+      case 'E':
+        return theme.colors.grade.E;
       default:
         return '#333';
     }

src/pages/MapPage/components/SearchResult.tsx

@@ -78,8 +78,8 @@ const GradeLabel = styled.div<GradeProps>`
         return theme.colors.grade.C;
       case 'D':
         return theme.colors.grade.D;
-      case 'F':
-        return theme.colors.grade.F;
+      case 'E':
+        return theme.colors.grade.E;
     }
   }};
 `;

src/pages/MapPage/components/comment/CommentCreateModal.tsx

@@ -242,14 +242,14 @@ const CommentAddModal = ({ onSubmit }: CommentAddModalProps) => {
     <ModalOverlay $isOpen={isMoreOpen}>
       <ModalContent>
         <ModalHeader>
-          <h2>코멘트 작성</h2>
+          <h2>결함사진 등록</h2>
           <CloseButton onClick={onClose}>&times;</CloseButton>
         </ModalHeader>
 
         <form onSubmit={handleSubmit}>
           <FormGroup>
             <CommentTextArea
-              placeholder="코멘트를 입력해주세요..."
+              placeholder="결함사진에 대해 설명해주세요..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
             />

src/pages/MapPage/components/comment/CommentList.tsx

@@ -54,7 +54,7 @@ const CommentList = ({ slopeId }: CommentListProps) => {
           setIsMore(true);
         }}
       >
-        글 등록/사진 등록
+        결함사진 등록
       </CreateButton>
       {commentData.length === 0 ? (
         <NoInfo text={'등록된 내용이 없습니다.'} />

src/pages/MapPage/components/comment/CommentUpdateModal.tsx

@@ -313,14 +313,14 @@ const CommentUpdateModal = ({
     <ModalOverlay $isOpen={isModiOpen}>
       <ModalContent>
         <ModalHeader>
-          <h2>코멘트 수정</h2>
+          <h2>결함사진 수정</h2>
           <CloseButton onClick={onClose}>&times;</CloseButton>
         </ModalHeader>
 
         <form onSubmit={handleSubmit}>
           <FormGroup>
             <CommentTextArea
-              placeholder="코멘트를 입력해주세요..."
+              placeholder="결함사진에 대해 설명해주세요..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
             />

src/pages/MapPage/components/map/MapComponent.tsx

@@ -10,7 +10,7 @@ import AmarkerIcon from '../../../../assets/a.webp';
 import BmarkerIcon from '../../../../assets/b.webp';
 import CmarkerIcon from '../../../../assets/c.webp';
 import DmarkerIcon from '../../../../assets/d.webp';
-import FmarkerIcon from '../../../../assets/f.webp';
+import EmarkerIcon from '../../../../assets/e.webp';
 import UserPosIcon from '../../../../assets/current_position.png';
 import { MapTypeId, useMapStore } from '../../../../stores/mapStore';
 declare global {
@@ -199,7 +199,7 @@ const MapComponent = () => {
                   ? 'C'
                   : item.priority?.grade.includes('D')
                   ? 'D'
-                  : 'F';
+                  : 'E';
 
                 // 적합한 마커 아이콘 선택
                 const markerIcon =
@@ -211,7 +211,7 @@ const MapComponent = () => {
                     ? CmarkerIcon
                     : grade === 'D'
                     ? DmarkerIcon
-                    : FmarkerIcon;
+                    : EmarkerIcon;
 
                 return (
                   <Marker
@@ -224,27 +224,36 @@ const MapComponent = () => {
                     }
                     icon={{
                       content: `
-          <div style="cursor: pointer; position:relative;">
-          ${
-            selectedMarkerId === index || allTextShow
-              ? `<div style="position:absolute; top:-20px; left:-51px; width:120px; display:flex; justify-content:center;z-index:1;">
-                  <div style="${
-                    selectedMarkerId === index
-                      ? 'color:#0b5275;font-weight:500;'
-                      : ''
-                  } font-size:16px;">
-                    ${item.name}
-                  </div>
-                </div>`
-              : ''
-          }
-                    <img src="${markerIcon}"
-                        alt="marker"
-                        style="width: 32px; height: 32px;"
-                    />
-                  </div>
-                `,
-                      anchor: new navermaps.Point(16, 16),
+                              <div style="cursor: pointer; position:relative;">
+                              ${
+                                selectedMarkerId === index || allTextShow
+                                  ? `<div style="position:absolute; top:-25px; left:50%; transform:translateX(-50%); z-index:1;">
+                                      <div style="
+                                        ${
+                                          selectedMarkerId === index
+                                            ? 'color:#0b5275;font-weight:700;'
+                                            : 'color:#333;'
+                                        }
+                                        font-size:16px;
+                                        background-color:white;
+                                        padding:2px 6px;
+                                        border-radius:6px;
+                                        white-space:nowrap;
+                                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                                        border: 1px solid #e0e0e0;
+                                      ">
+                                        ${item.name}
+                                      </div>
+                                    </div>`
+                                  : ''
+                              }
+                              <img src="${markerIcon}"
+                                  alt="marker"
+                                  style="width: 36px; height: 36px;"
+                              />
+                              </div>
+                            `,
+                      anchor: new navermaps.Point(18, 18),
                     }}
                     onClick={() => {
                       chooseSelectItem(item, index);

src/pages/MapPage/interface.ts

@@ -43,7 +43,7 @@ export interface SearchResultProps {
     B: number;
     C: number;
     D: number;
-    F: number;
+    E: number;
   };
 }
 export interface CommentAddModalProps {

src/styles/theme.ts

@@ -15,11 +15,11 @@ export const theme = {
     },
     error: '#CD1A1A',
     grade: {
-      A: '#4CAF50',
-      B: '#8BC34A',
-      C: '#FFC107',
+      A: '#008FCC',
+      B: '#4CAF50',
+      C: '#EBCD00',
       D: '#FF9800',
-      F: '#F44336',
+      E: '#CC0000',
     },
   },
   fonts: {