From 8473ce082395c57cf42a5b84df4c03e0abe560a0 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Tue, 3 Jun 2025 20:03:41 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EC=82=AD=EC=A0=9C=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../StepSlope/components/ImgsModal.tsx | 125 +----------------- 1 file changed, 4 insertions(+), 121 deletions(-) diff --git a/src/pages/ManagePage/StepSlope/components/ImgsModal.tsx b/src/pages/ManagePage/StepSlope/components/ImgsModal.tsx index a6c2f75..bc1ba37 100644 --- a/src/pages/ManagePage/StepSlope/components/ImgsModal.tsx +++ b/src/pages/ManagePage/StepSlope/components/ImgsModal.tsx @@ -55,9 +55,7 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => { end: { data: null, action: 'none' }, overview: { data: null, action: 'none' }, }); - const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [categoryToDelete, setCategoryToDelete] = useState(null); - const [deleteConfirmText, setDeleteConfirmText] = useState(''); const [isSaving, setIsSaving] = useState(false); const [focusedCategory, setFocusedCategory] = useState(null); // 포커스된 카테고리 추적 const fileInputRefs = useRef>({}); @@ -262,16 +260,10 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => { } }; - // 이미지 삭제 확인 모달 열기 - const openDeleteModal = (category: string) => { - setCategoryToDelete(category); - setDeleteModalOpen(true); - setDeleteConfirmText(''); - }; - // 이미지 삭제 실행 - const handleDeleteConfirm = () => { - if (categoryToDelete && deleteConfirmText === '삭제') { + const handleDeleteConfirm = (category: string) => { + setCategoryToDelete(category); + if (categoryToDelete) { const existingImageState = categoryImages[categoryToDelete]; if (existingImageState.data) { @@ -286,18 +278,10 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => { }, })); - setDeleteModalOpen(false); setCategoryToDelete(null); - setDeleteConfirmText(''); } }; - const closeDeleteModal = () => { - setDeleteModalOpen(false); - setCategoryToDelete(null); - setDeleteConfirmText(''); - }; - // 컴포넌트 언마운트 시 URL 해제 useEffect(() => { return () => { @@ -453,7 +437,7 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => { { e.stopPropagation(); - openDeleteModal(category.key); + handleDeleteConfirm(category.key); }} > × @@ -490,35 +474,6 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => { {createFileInputs()} - - - -

이미지 삭제

- × - - - 이미지를 삭제하시려면 입력창에 삭제라고 입력해 - 주세요. - - - setDeleteConfirmText(e.target.value)} - /> - - - - 확인 - - 취소 - - - ); }; @@ -768,73 +723,6 @@ const DeleteImageButton = styled.button` } `; -const DeleteModalOverlay = styled.div<{ $isOpen: boolean }>` - display: ${(props) => (props.$isOpen ? 'flex' : 'none')}; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - justify-content: center; - align-items: center; - z-index: 1100; -`; - -const DeleteModalContent = styled.div` - background: white; - padding: 24px; - border-radius: 8px; - width: 100%; - max-width: 400px; -`; - -const DeleteModalHeader = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - - h3 { - margin: 0; - font-size: 18px; - color: #111827; - } -`; - -const DeleteMessage = styled.p` - margin-bottom: 20px; - line-height: 1.5; - color: #374151; -`; - -const BoldText = styled.span` - font-weight: 600; - color: #dc2626; -`; - -const DeleteInput = styled.div` - margin-bottom: 16px; - - input { - width: 100%; - padding: 8px; - border: 1px solid #ddd; - border-radius: 4px; - - &::placeholder { - color: #9ca3af; - } - } -`; - -const DeleteButtonGroup = styled.div` - display: flex; - justify-content: flex-end; - gap: 8px; - margin-top: 24px; -`; - const Button = styled.button` padding: 8px 16px; border-radius: 4px; @@ -847,11 +735,6 @@ const Button = styled.button` } `; -const ConfirmButton = styled(Button)` - background: #24478f; - color: white; -`; - const CancelButton = styled(Button)` background: #e5e7eb; color: #374151; From fe6ab6fe58c9daa5e86291e81ddde2f805951781 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Tue, 3 Jun 2025 20:11:10 +0900 Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=EC=83=81=EB=8B=A8=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F?= =?UTF-8?q?=20=EC=A3=BC=EC=86=8C=EC=84=B8=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MapPage/components/InfoTable.tsx | 37 +++++++++++----------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/pages/MapPage/components/InfoTable.tsx b/src/pages/MapPage/components/InfoTable.tsx index 8379db3..89f9f18 100644 --- a/src/pages/MapPage/components/InfoTable.tsx +++ b/src/pages/MapPage/components/InfoTable.tsx @@ -72,11 +72,11 @@ const InfoTable = ({ selectItem }: InfotableProps) => { {selectItem?.name || ''} - {selectItem?.location?.province || ''} - {selectItem?.location?.city || ''} - {selectItem?.location?.district || ''} - {selectItem?.location?.address || ''} - {selectItem?.location?.mountainAddress === 'Y' ? '(산)' : ''} + {selectItem?.location?.province || ''}{' '} + {selectItem?.location?.city || ''}{' '} + {selectItem?.location?.district || ''}{' '} + {selectItem?.location?.address || ''}{' '} + {selectItem?.location?.mountainAddress === 'Y' ? '산' : ''} @@ -159,18 +159,15 @@ const InfoTable = ({ selectItem }: InfotableProps) => { - {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}` - : ''} - - + {selectItem?.location?.province || ''}{' '} + {selectItem?.location?.city || ''}{' '} + {selectItem?.location?.district || ''}{' '} + {selectItem?.location?.address || ''}{' '} + {selectItem?.location?.mountainAddress === 'Y' ? '산' : ''}{' '} + {selectItem?.location?.mainLotNumber || ''} + {selectItem?.location?.subLotNumber + ? `-${selectItem.location.subLotNumber}` + : ''}{' '} {selectItem?.location?.roadAddress ? `(${selectItem?.location?.roadAddress})` : ''} @@ -234,7 +231,8 @@ const HeaderWrapper = styled.div` const TitleWrapper = styled.div` display: flex; - align-items: flex-end; + justify-content: flex-end; + flex-direction: column; gap: 10px; padding-bottom: 15px; flex-grow: 1; @@ -251,6 +249,9 @@ const Title = styled.div` const UpperAddressValue = styled.div` font-size: 14px; color: #7e7e7e; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; `; const ContentSection = styled.div` From f95e054dc0bfc0227ebf0c11e9eb5727c379218c Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Tue, 3 Jun 2025 20:20:30 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EC=9C=84=EC=B9=98=EB=8F=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=99=95=EC=9D=B8=20=EC=8B=9C=204:3=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=EB=A1=9C=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MapPage/components/InfoTable.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/MapPage/components/InfoTable.tsx b/src/pages/MapPage/components/InfoTable.tsx index 89f9f18..badff77 100644 --- a/src/pages/MapPage/components/InfoTable.tsx +++ b/src/pages/MapPage/components/InfoTable.tsx @@ -88,6 +88,7 @@ const InfoTable = ({ selectItem }: InfotableProps) => { 위치도 handleImageClick( 'position', @@ -96,7 +97,9 @@ const InfoTable = ({ selectItem }: InfotableProps) => { } /> ) : ( - 이미지 없음 + + 이미지 없음 + )} 위치도 @@ -363,8 +366,11 @@ const ImgContainer = styled.div` gap: 5px; `; -const Img = styled.img` +const Img = styled.img<{ $isPosition?: boolean }>` width: 100%; + @media ${({ theme }) => theme.device.mobile} { + aspect-ratio: ${({ $isPosition = false }) => ($isPosition ? '4/3' : '1')}; + } aspect-ratio: 1; object-fit: cover; border-radius: 8px; @@ -372,7 +378,7 @@ const Img = styled.img` transition: transform 0.2s ease; &:hover { - transform: scale(1.02); /* 추가: 호버 시 살짝 확대 */ + transform: scale(1.02); } `; const ImgTag = styled.div` @@ -381,9 +387,13 @@ const ImgTag = styled.div` text-align: center; color: ${({ theme }) => theme.colors.grey[800]}; `; -const NoImagePlaceholder = styled.div` +const NoImagePlaceholder = styled.div<{ $isPosition?: boolean }>` width: 100%; + @media ${({ theme }) => theme.device.mobile} { + aspect-ratio: ${({ $isPosition = false }) => ($isPosition ? '4/3' : '1')}; + } aspect-ratio: 1; + border-radius: 8px; border: 1px solid ${({ theme }) => theme.colors.grey[200]}; background-color: ${({ theme }) => theme.colors.grey[100]}; From b460cc83674262eec1d04686462119a16ffb54a2 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Tue, 3 Jun 2025 20:22:49 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=9C=84=EC=B9=98=EB=8F=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=AC=EA=B8=B0=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20targetHeight=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/mapStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/mapStore.ts b/src/stores/mapStore.ts index f5686e8..8f10c7d 100644 --- a/src/stores/mapStore.ts +++ b/src/stores/mapStore.ts @@ -187,7 +187,7 @@ export const useMapStore = create((set, get) => ({ const coordinates = item.location.coordinates.start.coordinates; mapInstance.panTo(new naver.maps.LatLng(coordinates[1], coordinates[0])); - const targetHeight = window.innerHeight * 0.75; + const targetHeight = window.innerHeight * 0.68; set({ selectedMarkerId: selectedMarkerId === index ? null : index,