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