>(
{}
);
+ const [errorMsg, setErrorMsg] = useState
- (
+ data.location || null
+ );
+ const [isLocationLoading, setLocationLoading] = useState(false);
+
const handleAgeChange = (e: React.ChangeEvent) => {
const value = e.target.value;
- if (value === "") {
- setAge("");
- } else {
- const numValue = parseInt(value.replace(/[^0-9]/g, ""), 10);
- setAge(numValue);
- }
+ if (value === "") setAge("");
+ else setAge(parseInt(value.replace(/[^0-9]/g, ""), 10));
};
- const handleSubmit = () => {
- if (age === "") {
- alert("나이를 입력해주세요.");
- return;
- }
- if (Number(age) >= MAX_AGE_LIMIT) {
- alert(`나이는 ${MAX_AGE_LIMIT} 미만으로 입력해주세요.`);
- return;
- }
- if (age < 1) {
- alert("나이를 올바르게 입력해주세요.");
- return;
- }
- if (!nickname || !age || !experience || !bio) {
- alert("모든 항목을 입력해주세요.");
+ const handleGetLocation = () => {
+ if (!navigator.geolocation) {
+ toast.error("사용하시는 기기가 위치 정보 기능을 지원하지 않습니다.");
return;
}
- const experienceValue = parseInt(experience, 10);
+ setLocationLoading(true);
+
+ const options = {
+ enableHighAccuracy: true,
+ timeout: 10000,
+ maximumAge: 0,
+ };
- onNext({ nickname, age: Number(age), experience: experienceValue, bio });
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ const { latitude, longitude } = position.coords;
+ setLocation({ lat: latitude, lng: longitude });
+ setLocationLoading(false);
+ toast.success("위치 정보 수집 완료!");
+ },
+ (error) => {
+ setLocationLoading(false);
+ if (error.code === error.PERMISSION_DENIED) {
+ toast.error("위치 정보 제공을 거부하셨습니다.");
+ } else if (error.code === error.TIMEOUT) {
+ toast.error("위치 정보를 가져오는 데 시간이 너무 오래 걸립니다.");
+ } else {
+ toast.error("위치 정보를 가져올 수 없습니다.");
+ }
+ },
+ options
+ );
+ };
+
+ const handleSubmit = () => {
+ if (age === "") return toast.error("나이를 입력해주세요.");
+ if (age >= MAX_AGE_LIMIT)
+ return toast.error(`나이는 ${MAX_AGE_LIMIT}세 미만으로 입력해주세요.`);
+ if (age < 1) return toast.error("나이를 올바르게 입력해주세요.");
+ if (!nickname || !experience || !bio)
+ return toast.error("모든 항목을 입력해주세요.");
+ if (!location) return toast.error("위치 정보를 불러와주세요.");
+
+ const experienceValue = parseInt(experience.replace(/[^0-9]/g, ""), 10);
+ onNext({ nickname, age, experience: experienceValue, bio, location });
};
return (
@@ -68,7 +98,6 @@ export function OnboardingStep1({ onNext, data }: StepProps) {
setNickname(e.target.value)}
className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary"
@@ -79,8 +108,6 @@ export function OnboardingStep1({ onNext, data }: StepProps) {
+ className="focus:bg-brand-primary"
+ >
{year}년차
))}
@@ -112,20 +140,40 @@ export function OnboardingStep1({ onNext, data }: StepProps) {
+
);
}
diff --git a/src/pages/onboarding/__components/OnboardingStep1.tsx b/src/pages/onboarding/__components/OnboardingStep1.tsx
index 28ffec4..6e76519 100644
--- a/src/pages/onboarding/__components/OnboardingStep1.tsx
+++ b/src/pages/onboarding/__components/OnboardingStep1.tsx
@@ -1,5 +1,8 @@
import { useState } from "react";
-import type { OnboardingData } from "@/pages/onboarding/OnboardingPage";
+import type {
+ OnboardingData,
+ Coordinates,
+} from "@/pages/onboarding/OnboardingPage";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
@@ -12,6 +15,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
+import toast from "react-hot-toast";
const MAX_AGE_LIMIT = 120;
@@ -28,37 +32,63 @@ export function OnboardingStep1({ onNext, data }: StepProps) {
);
const [bio, setBio] = useState(data.bio || "");
+ const [location, setLocation] = useState
+ {step < TOTAL_STEPS && (
+
{step < TOTAL_STEPS && (
-
+
+ {getStepTitle()}
+
+
)}
-
- {step < TOTAL_STEPS && (
-
-
- {getStepTitle()}
-
-
+
+ {errorMsg && (
+
- {step === 1 && (
-
-
-
+ {step === 4 &&
+
+
+ )}
+
-
-
+ {errorMsg}
+ )}
+ {step === 1 && (
+