[#44] 매장 기능 도입 #45

Merged
pricelees merged 116 commits from feat/#44 into main 2025-09-20 03:15:06 +00:00
4 changed files with 8 additions and 61 deletions
Showing only changes of commit c3cf6e8097 - Show all commits

View File

@ -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}`);
} }

View File

@ -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
} }

View File

@ -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>}

View File

@ -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>