Skip to content

fix(#45): 6/1 요구사항 피드백 반영 #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kdhqwe1030 merged 4 commits into from
Jun 4, 2025
Merged

fix(#45): 6/1 요구사항 피드백 반영 #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8473ce0
fix: 삭제 확인 모달 제거
kdhqwe1030 Jun 3, 2025
fe6ab6f
chore: 상단 주소 위치 변경 및 주소세부 수정
kdhqwe1030 Jun 3, 2025
f95e054
fix: 위치도 이미지 모바일에서 확인 시 4:3 사이즈로 반응형 구현
kdhqwe1030 Jun 3, 2025
b460cc8
fix: 위치도 이미지 크기에 따른 targetHeight변경
kdhqwe1030 Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 4 additions & 121 deletions src/pages/ManagePage/StepSlope/components/ImgsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string | null>(null);
const [deleteConfirmText, setDeleteConfirmText] = useState('');
const [isSaving, setIsSaving] = useState(false);
const [focusedCategory, setFocusedCategory] = useState<string | null>(null); // 포커스된 카테고리 추적
const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
Expand Down Expand Up @@ -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) {
Expand All @@ -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 () => {
Expand Down Expand Up @@ -453,7 +437,7 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => {
<DeleteImageButton
onClick={(e) => {
e.stopPropagation();
openDeleteModal(category.key);
handleDeleteConfirm(category.key);
}}
>
×
Expand Down Expand Up @@ -490,35 +474,6 @@ const ImgsModal = ({ isOpen, onClose, selectedRow }: ImgsModalProps) => {
{createFileInputs()}
</ModalContent>
</ModalOverlay>
<DeleteModalOverlay $isOpen={deleteModalOpen}>
<DeleteModalContent>
<DeleteModalHeader>
<h3>이미지 삭제</h3>
<CloseButton onClick={closeDeleteModal}>&times;</CloseButton>
</DeleteModalHeader>
<DeleteMessage>
이미지를 삭제하시려면 입력창에 <BoldText>삭제</BoldText>라고 입력해
주세요.
</DeleteMessage>
<DeleteInput>
<input
type="text"
placeholder="삭제"
value={deleteConfirmText}
onChange={(e) => setDeleteConfirmText(e.target.value)}
/>
</DeleteInput>
<DeleteButtonGroup>
<ConfirmButton
onClick={handleDeleteConfirm}
disabled={deleteConfirmText !== '삭제'}
>
확인
</ConfirmButton>
<CancelButton onClick={closeDeleteModal}>취소</CancelButton>
</DeleteButtonGroup>
</DeleteModalContent>
</DeleteModalOverlay>
</>
);
};
Expand Down Expand Up @@ -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;
Expand All @@ -847,11 +735,6 @@ const Button = styled.button`
}
`;

const ConfirmButton = styled(Button)`
background: #24478f;
color: white;
`;

const CancelButton = styled(Button)`
background: #e5e7eb;
color: #374151;
Expand Down
55 changes: 33 additions & 22 deletions src/pages/MapPage/components/InfoTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
<TitleWrapper>
<Title>{selectItem?.name || ''}</Title>
<UpperAddressValue>
{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' ? '산' : ''}
</UpperAddressValue>
</TitleWrapper>

Expand All @@ -88,6 +88,7 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
<Img
src={selectItem.priority.images.position.url}
alt="위치도"
$isPosition={true}
onClick={() =>
handleImageClick(
'position',
Expand All @@ -96,7 +97,9 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
}
/>
) : (
<NoImagePlaceholder>이미지 없음</NoImagePlaceholder>
<NoImagePlaceholder $isPosition={true}>
이미지 없음
</NoImagePlaceholder>
)}
<ImgTag>위치도</ImgTag>
</ImgContainer>
Expand Down Expand Up @@ -159,18 +162,15 @@ const InfoTable = ({ selectItem }: InfotableProps) => {
<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?.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})`
: ''}
Expand Down Expand Up @@ -234,7 +234,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;
Expand All @@ -251,6 +252,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`
Expand Down Expand Up @@ -362,16 +366,19 @@ 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;
cursor: pointer;
transition: transform 0.2s ease;

&:hover {
transform: scale(1.02); /* 추가: 호버 시 살짝 확대 */
transform: scale(1.02);
}
`;
const ImgTag = styled.div`
Expand All @@ -380,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]};
Expand Down
2 changes: 1 addition & 1 deletion src/stores/mapStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const useMapStore = create<MapState>((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,
Expand Down
Loading