feat: merge 안 된 것들 merge

KUIT-MAPU · Aug 14, 2024 · dead3b1 · dead3b1
2 parents 9b2a639 + beaee20
commit dead3b1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/.../MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.tsx b/.../MapInfoPanel/MapBasicInfo/MapBasicInfoContainer/MapTitleAndDescriptionInputContainer.tsx
@@ -47,7 +47,7 @@ const MapTitleAndDescriptionInputContainer: React.FC<Props> = ({ mode }) => {
   const handleFocusOutTitle = () => {
     //TODO: 지도 제목 저장 api 호출, 응답으로 받은 지도 제목 사용
     setTitle(editedTitle);
-    navigate(`/map/${editedTitle.replaceAll(' ', '-')}`);
+    navigate(`/map/${editedTitle.replaceAll(' ', '-')}/${mode}`);
   };
 
   const handleFocusOutDescription = () => {

diff --git a/src/components/map/ObjectInfoPanel/OjbectPropertyContainer/ObjectPropertyBox.module.scss b/src/components/map/ObjectInfoPanel/OjbectPropertyContainer/ObjectPropertyBox.module.scss
@@ -72,12 +72,16 @@
   border-radius: 6px;
   border: 1px solid var(--gray_50);
 
-  .tagInput {
+  .tagNameInput {
     width: calc(100% - 60px);
     padding: 0;
     border: none;
     background: none;
     font-size: 18px;
+
+    &::-webkit-input-placeholder {
+      color: var(--gray_400);
+    }
   }
   .addTagBtn {
     width: 44px;
@@ -91,6 +95,10 @@
       font-size: 14px;
       font-weight: 600;
     }
+
+    &:disabled {
+      background: var(--gray_200);
+    }
   }
 }
 

diff --git a/src/components/map/ObjectInfoPanel/OjbectPropertyContainer/ObjectPropertyBox.tsx b/src/components/map/ObjectInfoPanel/OjbectPropertyContainer/ObjectPropertyBox.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import styles from './ObjectPropertyBox.module.scss';
 import { ObjectOutline } from '../../../../types/map/object/ObjectOutline';
 import { StarRating } from '../../../../types/map/object/StarRating';
@@ -36,8 +37,15 @@ const isStarRatingArray = (
 };
 
 const ObjectPropertyBox: React.FC<Props> = ({ mode, type, values }) => {
+  const [editedTag, setEditedTag] = useState<string>('');
+
+  const handleTagNameOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditedTag(e.currentTarget.value);
+  };
+
   const handleAddTag = () => {
     //TODO: 태그 추가 api
+    //글자수 검사 (1~10글자)
   };
 
   const handleDeleteTag = () => {
@@ -97,11 +105,19 @@ const ObjectPropertyBox: React.FC<Props> = ({ mode, type, values }) => {
         <div className={styles.propertyBox}>
           {mode === MapMode.EDIT && (
             <div className={styles.tagInputContainer}>
-              <input type="text" className={styles.tagInput} maxLength={10} />
+              <input
+                type="text"
+                value={editedTag}
+                placeholder="태그 이름"
+                className={styles.tagNameInput}
+                maxLength={10}
+                onChange={handleTagNameOnChange}
+              />
               <button
                 type="button"
                 className={styles.addTagBtn}
                 onClick={handleAddTag}
+                disabled={editedTag.length === 0 ? true : false}
               >
                 <span>추가</span>
               </button>