merge/feat&refactor: 지도 기본 정보 조회 api 연동 및 관련 분기 처리

src/Router.tsx

@@ -20,12 +20,12 @@ const Router = () => {
     },
     {
       index: true,
-      path: '/map/:mapName/edit',
+      path: '/map/:mapId/edit',
       element: <Map />,
     },
     {
       index: true,
-      path: '/map/:mapName/view',
+      path: '/map/:mapId/view',
       element: <Map />,
     },
     {

src/apis/Map/fetchMapBasicInfo.ts

@@ -0,0 +1,32 @@
+import { useQuery } from 'react-query';
+import instance from '../instance';
+import { BaseResponse } from '../../types/BaseResponse';
+import { MapBasicInfo } from '../../types/map/MapBasicInfo';
+import { MapMode } from '../../types/enum/MapMode';
+
+export const fetchMapBasicInfo = async (id: number) => {
+  const response = await instance.get<BaseResponse<MapBasicInfo>>(
+    `/map/${id}/basic-info/edit`,
+  );
+  return response.data;
+};
+
+export const fetchMapBasicInfoForViewer = async (id: number) => {
+  const response = await instance.get<BaseResponse<MapBasicInfo>>(
+    `/map/${id}/basic-info/view`,
+  );
+  return response.data;
+};
+
+export const useMapBasicInfoQuery = (id: number, mapMode: MapMode) => {
+  const { data: mapBasicInfo, isLoading: isMapBasicInfoLoading } = useQuery({
+    queryKey: ['fetchMapBasicInfo'],
+
+    queryFn: () => {
+      if (mapMode === MapMode.EDIT) return fetchMapBasicInfo(id);
+      if (mapMode === MapMode.VIEW) return fetchMapBasicInfoForViewer(id);
+    },
+  });
+
+  return { mapBasicInfo, isMapBasicInfoLoading };
+};

src/components/explore/MapList.tsx

@@ -115,7 +115,7 @@ const MapList: React.FC<MapListProps> = ({ map, keywordMap }) => {
             <div className={styles.editor}>
               <img
                 className={styles.editorImg}
-                src={map?.user.imageUrl ? map.user.imageUrl : user_default}
+                src={map?.user.imgUrl ? map.user.imgUrl : user_default}
                 alt="User"
               />
               <div className={styles.editorInfo}>

src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.module.scss

@@ -8,3 +8,65 @@
   padding: 16px;
   border-bottom: 1px solid var(--gray_50);
 }
+
+.mapInfoInputContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--gray_50);
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#mapTitle {
+  width: calc(100% - 24px);
+  border: none;
+  font-size: 20px;
+  font-weight: 600;
+}
+#mapTitle:disabled,
+#mapDescription:disabled {
+  background: none;
+}
+
+#mapDescription {
+  border: none;
+  resize: none;
+  font-size: 14px;
+  overflow: hidden;
+  width: 100%;
+  field-sizing: content;
+}
+#mapDescription:focus {
+  outline: none;
+}
+#mapTitle::-webkit-input-placeholder,
+#mapDescription::-webkit-input-placeholder {
+  color: var(--gray_400);
+}
+
+.bookmarkBtn:hover {
+  cursor: pointer;
+}
+
+.locationInfoContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.locationInfo {
+  display: flex;
+  justify-content: space-between;
+  span {
+    font-size: 14px;
+  }
+}
+.location__title {
+  color: var(--gray_400);
+}

src/components/map/MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapBasicInfoContainer.tsx

@@ -1,17 +1,119 @@
+import { useEffect, useState } from 'react';
 import styles from './MapBasicInfoContainer.module.scss';
-import MapTitleAndDescriptionInputContainer from './MapTitleAndDescriptionInputContainer';
-import LocationInfoContainer from './MapLocationInfoContainer';
+import { useMapBasicInfoQuery } from '../../../../../apis/Map/fetchMapBasicInfo';
+import useRegisterStore from '../../../../../stores/registerStore';
 import { MapMode } from '../../../../../types/enum/MapMode';
+import { RegisterStatus } from '../../../../../types/enum/RegisterStatus';
+import BookmarkDefault from '../../../../../assets/btn_bookmark_default.svg';
+import BookmarkSelected from '../../../../../assets/btn_bookmark_selected.svg';
 
 interface Props {
   mode: MapMode;
+  mapId: number;
 }
 
-const MapBasicInfoContainer: React.FC<Props> = ({ mode }) => {
+const MapBasicInfoContainer: React.FC<Props> = ({ mode, mapId }) => {
+  const { registerStatus, setLoginNeededStatus } = useRegisterStore();
+  const [editedTitle, setEditedTitle] = useState<string>('');
+  const [editedDescription, setEditedDescription] = useState<string>('');
+
+  const { mapBasicInfo, isMapBasicInfoLoading } = useMapBasicInfoQuery(
+    mapId,
+    mode,
+  );
+
+  useEffect(() => {
+    if (!isMapBasicInfoLoading) {
+      const mapBasicInfoResult = mapBasicInfo!.result;
+      setEditedTitle(mapBasicInfoResult.title);
+      setEditedDescription(mapBasicInfoResult.description);
+    }
+  }, [isMapBasicInfoLoading]);
+
+  const handleTitleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedTitle(e.currentTarget.value);
+  };
+
+  const handleDescriptionOnChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setEditedDescription(e.currentTarget.value);
+  };
+
+  const handleFocusOutTitle = () => {
+    //TODO: 지도 제목 저장 api 호출
+  };
+
+  const handleFocusOutDescription = () => {
+    //TODO: 지도 설명 저장 api 호출
+  };
+
+  const handleSwitchIsBookmarked = () => {
+    if (registerStatus !== RegisterStatus.LOG_IN) {
+      setLoginNeededStatus(true);
+    } else {
+      //TODO: 북마크 설정 api 호출
+    }
+  };
   return (
     <div className={styles.mapContentTitleContainer}>
-      <MapTitleAndDescriptionInputContainer mode={mode} />
-      <LocationInfoContainer />
+      <div className={styles.mapInfoInputContainer}>
+        <div className={styles.titleContainer}>
+          <input
+            type="text"
+            name="mapTitle"
+            id={styles.mapTitle}
+            value={editedTitle}
+            placeholder="지도 이름"
+            onChange={handleTitleOnChange}
+            onBlur={handleFocusOutTitle}
+            disabled={mode === MapMode.VIEW ? true : false}
+          />
+          {mapBasicInfo !== undefined &&
+            !mapBasicInfo.result.mine &&
+            (mapBasicInfo.result.bookmarked ? (
+              <img
+                src={BookmarkSelected}
+                alt="북마크함"
+                className={styles.bookmarkBtn}
+                onClick={handleSwitchIsBookmarked}
+              />
+            ) : (
+              <img
+                src={BookmarkDefault}
+                alt="북마크하지 않음"
+                className={styles.bookmarkBtn}
+                onClick={handleSwitchIsBookmarked}
+              />
+            ))}
+        </div>
+        <textarea
+          name="mapDescription"
+          id={styles.mapDescription}
+          placeholder="지도 설명"
+          value={editedDescription}
+          onChange={handleDescriptionOnChange}
+          onBlur={handleFocusOutDescription}
+          disabled={mode === MapMode.VIEW ? true : false}
+        />
+      </div>
+      <div className={styles.locationInfoContainer}>
+        <div className={styles.locationInfo}>
+          <span className={styles.location__title}>위치</span>
+          <span>
+            {mapBasicInfo !== undefined && mapBasicInfo!.result.address}
+          </span>
+        </div>
+        {/* TODO: 날씨, 미세/초미세 추후 목표로 보류 */}
+        {/* <div className={styles.locationInfo}>
+        <span className={styles.location__title}>날씨</span>
+        <span>날씨 api 호출 결과</span>
+      </div>
+      <div className={styles.locationInfo}>
+        <span className={styles.location__title}>미세/초미세</span>
+        <span>미세먼지 api 호출 결과</span>
+      </div> */}
+      </div>
     </div>
   );
 };