generated from pricelees/issue-pr-template
refactor: 회원가입 페이지에서 행정동 입력 제외
This commit is contained in:
parent
7530e1038e
commit
c3cf6e8097
@ -1,5 +1,5 @@
|
|||||||
import apiClient from "@_api/apiClient";
|
import apiClient from "@_api/apiClient";
|
||||||
import type { DongListResponse, RegionCodeResponse, SidoListResponse, SigunguListResponse } from "./regionTypes";
|
import type { RegionCodeResponse, SidoListResponse, SigunguListResponse } from "./regionTypes";
|
||||||
|
|
||||||
export const fetchSidoList = async (): Promise<SidoListResponse> => {
|
export const fetchSidoList = async (): Promise<SidoListResponse> => {
|
||||||
return await apiClient.get(`/regions/sido`);
|
return await apiClient.get(`/regions/sido`);
|
||||||
@ -9,10 +9,6 @@ export const fetchSigunguList = async (sidoCode: string): Promise<SigunguListRes
|
|||||||
return await apiClient.get(`/regions/sigungu?sidoCode=${sidoCode}`);
|
return await apiClient.get(`/regions/sigungu?sidoCode=${sidoCode}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const fetchDongList = async (sidoCode: string, sigunguCode: string): Promise<DongListResponse> => {
|
export const fetchRegionCode = async (sidoCode: string, sigunguCode: string): Promise<RegionCodeResponse> => {
|
||||||
return await apiClient.get(`/regions/dong?sidoCode=${sidoCode}&sigunguCode=${sigunguCode}`);
|
return await apiClient.get(`/regions/code?sidoCode=${sidoCode}&sigunguCode=${sigunguCode}`);
|
||||||
}
|
|
||||||
|
|
||||||
export const fetchRegionCode = async (sidoCode: string, sigunguCode: string, dongCode: string): Promise<RegionCodeResponse> => {
|
|
||||||
return await apiClient.get(`/regions/code?sidoCode=${sidoCode}&sigunguCode=${sigunguCode}&dongCode=${dongCode}`);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,15 +16,6 @@ export interface SigunguListResponse {
|
|||||||
sigunguList: SigunguResponse[]
|
sigunguList: SigunguResponse[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DongResponse {
|
|
||||||
code: string,
|
|
||||||
name: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DongListResponse {
|
|
||||||
dongList: DongResponse[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RegionCodeResponse {
|
export interface RegionCodeResponse {
|
||||||
code: string
|
code: string
|
||||||
}
|
}
|
||||||
|
|||||||
@ -325,7 +325,7 @@ const MyReservationPage: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="my-reservation-container-v2">
|
<div className="my-reservation-container-v2">
|
||||||
<h1>내 예약 V2</h1>
|
<h1>내 예약</h1>
|
||||||
|
|
||||||
{isLoading && <p>목록 로딩 중...</p>}
|
{isLoading && <p>목록 로딩 중...</p>}
|
||||||
{error && <p className="error-message-v2">{error}</p>}
|
{error && <p className="error-message-v2">{error}</p>}
|
||||||
|
|||||||
@ -1,11 +1,9 @@
|
|||||||
import {
|
import {
|
||||||
fetchDongList,
|
|
||||||
fetchRegionCode,
|
fetchRegionCode,
|
||||||
fetchSidoList,
|
fetchSidoList,
|
||||||
fetchSigunguList,
|
fetchSigunguList,
|
||||||
} from '@_api/region/regionAPI';
|
} from '@_api/region/regionAPI';
|
||||||
import type {
|
import type {
|
||||||
DongResponse,
|
|
||||||
SidoResponse,
|
SidoResponse,
|
||||||
SigunguResponse,
|
SigunguResponse,
|
||||||
} from '@_api/region/regionTypes';
|
} from '@_api/region/regionTypes';
|
||||||
@ -27,10 +25,8 @@ const SignupPage: React.FC = () => {
|
|||||||
|
|
||||||
const [sidoList, setSidoList] = useState<SidoResponse[]>([]);
|
const [sidoList, setSidoList] = useState<SidoResponse[]>([]);
|
||||||
const [sigunguList, setSigunguList] = useState<SigunguResponse[]>([]);
|
const [sigunguList, setSigunguList] = useState<SigunguResponse[]>([]);
|
||||||
const [dongList, setDongList] = useState<DongResponse[]>([]);
|
|
||||||
const [selectedSidoCode, setSelectedSidoCode] = useState('');
|
const [selectedSidoCode, setSelectedSidoCode] = useState('');
|
||||||
const [selectedSigunguCode, setSelectedSigunguCode] = useState('');
|
const [selectedSigunguCode, setSelectedSigunguCode] = useState('');
|
||||||
const [selectedDongCode, setSelectedDongCode] = useState('');
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
@ -52,9 +48,7 @@ const SignupPage: React.FC = () => {
|
|||||||
try {
|
try {
|
||||||
const response = await fetchSigunguList(selectedSidoCode);
|
const response = await fetchSigunguList(selectedSidoCode);
|
||||||
setSigunguList(response.sigunguList);
|
setSigunguList(response.sigunguList);
|
||||||
setDongList([]);
|
|
||||||
setSelectedSigunguCode('');
|
setSelectedSigunguCode('');
|
||||||
setSelectedDongCode('');
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('시/군/구 목록을 불러오는 데 실패했습니다.', error);
|
console.error('시/군/구 목록을 불러오는 데 실패했습니다.', error);
|
||||||
}
|
}
|
||||||
@ -62,30 +56,10 @@ const SignupPage: React.FC = () => {
|
|||||||
fetchSigungu();
|
fetchSigungu();
|
||||||
} else {
|
} else {
|
||||||
setSigunguList([]);
|
setSigunguList([]);
|
||||||
setDongList([]);
|
|
||||||
setSelectedSigunguCode('');
|
setSelectedSigunguCode('');
|
||||||
setSelectedDongCode('');
|
|
||||||
}
|
}
|
||||||
}, [selectedSidoCode]);
|
}, [selectedSidoCode]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (selectedSidoCode && selectedSigunguCode) {
|
|
||||||
const fetchDong = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetchDongList(selectedSidoCode, selectedSigunguCode);
|
|
||||||
setDongList(response.dongList);
|
|
||||||
setSelectedDongCode('');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('읍/면/동 목록을 불러오는 데 실패했습니다.', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
fetchDong();
|
|
||||||
} else {
|
|
||||||
setDongList([]);
|
|
||||||
setSelectedDongCode('');
|
|
||||||
}
|
|
||||||
}, [selectedSigunguCode]);
|
|
||||||
|
|
||||||
const validate = () => {
|
const validate = () => {
|
||||||
const newErrors: Record<string, string> = {};
|
const newErrors: Record<string, string> = {};
|
||||||
|
|
||||||
@ -106,8 +80,8 @@ const SignupPage: React.FC = () => {
|
|||||||
newErrors.phone = '올바른 휴대폰 번호 형식이 아닙니다. (예: 01012345678)';
|
newErrors.phone = '올바른 휴대폰 번호 형식이 아닙니다. (예: 01012345678)';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (selectedSidoCode || selectedSigunguCode || selectedDongCode) {
|
if (selectedSidoCode || selectedSigunguCode) {
|
||||||
if (!selectedSidoCode || !selectedSigunguCode || !selectedDongCode) {
|
if (!selectedSidoCode || !selectedSigunguCode) {
|
||||||
newErrors.region = '모든 지역 정보를 선택해주세요.';
|
newErrors.region = '모든 지역 정보를 선택해주세요.';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -120,7 +94,7 @@ const SignupPage: React.FC = () => {
|
|||||||
if (hasSubmitted) {
|
if (hasSubmitted) {
|
||||||
setErrors(validate());
|
setErrors(validate());
|
||||||
}
|
}
|
||||||
}, [email, password, name, phone, hasSubmitted, selectedSidoCode, selectedSigunguCode, selectedDongCode]);
|
}, [email, password, name, phone, hasSubmitted, selectedSidoCode, selectedSigunguCode]);
|
||||||
|
|
||||||
const handleSignup = async (e: React.FormEvent) => {
|
const handleSignup = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -132,12 +106,11 @@ const SignupPage: React.FC = () => {
|
|||||||
if (Object.keys(newErrors).length > 0) return;
|
if (Object.keys(newErrors).length > 0) return;
|
||||||
|
|
||||||
let regionCode: string | null = null;
|
let regionCode: string | null = null;
|
||||||
if (selectedSidoCode && selectedSigunguCode && selectedDongCode) {
|
if (selectedSidoCode && selectedSigunguCode) {
|
||||||
try {
|
try {
|
||||||
const response = await fetchRegionCode(
|
const response = await fetchRegionCode(
|
||||||
selectedSidoCode,
|
selectedSidoCode,
|
||||||
selectedSigunguCode,
|
selectedSigunguCode,
|
||||||
selectedDongCode
|
|
||||||
);
|
);
|
||||||
regionCode = response.code;
|
regionCode = response.code;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -253,19 +226,6 @@ const SignupPage: React.FC = () => {
|
|||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
<select
|
|
||||||
className="form-input"
|
|
||||||
value={selectedDongCode}
|
|
||||||
onChange={e => setSelectedDongCode(e.target.value)}
|
|
||||||
disabled={!selectedSigunguCode}
|
|
||||||
>
|
|
||||||
<option value="">읍/면/동</option>
|
|
||||||
{dongList.map(d => (
|
|
||||||
<option key={d.code} value={d.code}>
|
|
||||||
{d.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
{hasSubmitted && errors.region && (
|
{hasSubmitted && errors.region && (
|
||||||
<p className="error-text">{errors.region}</p>
|
<p className="error-text">{errors.region}</p>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user