From 9e7a811f740bf4f8a9ab7ed9f2ba3909507f6460 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8F=84=EA=B2=BD?= Date: Fri, 16 Feb 2024 18:48:02 +0900 Subject: [PATCH] faet #13 update init pages --- src/Router.tsx | 2 +- src/api/user.ts | 6 +- src/asset/icon/initAccess/camera.svg | 8 +- src/asset/icon/initAccess/position.svg | 7 +- src/asset/icon/initAccess/saveArea.svg | 7 +- .../Init/components/initAccessRights.tsx | 106 +++++++----------- .../Init/components/initAddress.tsx | 14 +-- .../Init/components/initProfileImage.tsx | 91 +++++++-------- .../components/Init/components/initUser.tsx | 51 ++++----- src/pages/Auth/components/Init/index.d.ts | 1 + src/pages/Auth/components/Init/index.tsx | 19 +++- 11 files changed, 144 insertions(+), 168 deletions(-) diff --git a/src/Router.tsx b/src/Router.tsx index 25ce045..7586cfd 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -68,7 +68,7 @@ export default function Router() { children: [ { index: true, element: }, { path: 'user', element: }, - { path: 'address', element: }, + // { path: 'address', element: }, { path: 'image', element: }, ], loader: () => { diff --git a/src/api/user.ts b/src/api/user.ts index 16a7be6..f37f689 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -15,11 +15,11 @@ const initProfiles = [img0, img1, img2]; */ export const setNewUser = async (param: InitUserType) => { const randomIdx = Math.round(Math.random() * 2); - if (!param.position) return undefined; + const response = await jigumeAxios.post('/api/member/info', { nickname: param.nickname, - longitude: param.position.lng, - latitude: param.position.lat, + longitude: 0, + latitude: 0, profileImgUrl: param.image || initProfiles[randomIdx], }); diff --git a/src/asset/icon/initAccess/camera.svg b/src/asset/icon/initAccess/camera.svg index a5eaec4..92b1248 100644 --- a/src/asset/icon/initAccess/camera.svg +++ b/src/asset/icon/initAccess/camera.svg @@ -1,5 +1,3 @@ - - - - - + + + diff --git a/src/asset/icon/initAccess/position.svg b/src/asset/icon/initAccess/position.svg index fe9d701..69a1189 100644 --- a/src/asset/icon/initAccess/position.svg +++ b/src/asset/icon/initAccess/position.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/src/asset/icon/initAccess/saveArea.svg b/src/asset/icon/initAccess/saveArea.svg index a9c133a..5ebe6a6 100644 --- a/src/asset/icon/initAccess/saveArea.svg +++ b/src/asset/icon/initAccess/saveArea.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/src/pages/Auth/components/Init/components/initAccessRights.tsx b/src/pages/Auth/components/Init/components/initAccessRights.tsx index c8cc794..e25d0ac 100644 --- a/src/pages/Auth/components/Init/components/initAccessRights.tsx +++ b/src/pages/Auth/components/Init/components/initAccessRights.tsx @@ -1,83 +1,57 @@ import Camera from '@src/asset/icon/initAccess/camera.svg'; import SaveArea from '@src/asset/icon/initAccess/saveArea.svg'; import Position from '@src/asset/icon/initAccess/position.svg'; +import NextButton from '@src/components/NextButton'; export default function InitAccessRights() { return ( -
-
앱 접근권한 안내
-
-
선택적
접근 권한 -
-
- 미동의 시에도 지구미 서비스를 이용할 수 있으나. 일부 서비스의 이용이 - 제한 될 수 있습니다. -
-
-
- 저장공간 -
-
-
저장공간
-
- 사용자 식별정보등 앱 사용 관련 정보를 -
-
- 사용합니다. -
+
+
+
앱 접근권한 안내
+
+ 미동의 시, 지구미 서비스의 이용이 제한 될 수 있습니다.
-
-
-
- 위치정보 -
-
-
위치정보
-
- 현재위치를 기반으로 가장 가까운 구매폼 -
-
- 추천해드립니다. -
-
- 위치기반 서비스 이용약관 자세히 보기 > + +
+
+ 저장공간 +
+
저장공간
+
+ 사용자 식별정보등 앱 사용 관련 정보를 사용합니다. +
+
-
-
-
-
- 카메라 -
-
-
카메라
-
- 구매폼을 작성하며 카메라 및 앨범에서 이미지를 +
+ 위치정보 +
+
위치정보
+
+ 현재위치를 기반으로 가장 가까운 구매폼 추천해드립니다. +
+
+ 자세히 보기 +
+
-
- 등록합니다. +
+ 카메라 +
+
카메라
+
+ 구매폼을 작성하며 카메라 및 앨범에서 이미지를 등록합니다. +
+
-
-
-
- ※ 설정 > 애플리케이션 > 지구미 > 권한 메뉴에서도 -
-
+ +
+ ※ 설정 > 애플리케이션 > 지구미 > 권한 메뉴에서도
설정하실 수 있습니다.
+ +
); } diff --git a/src/pages/Auth/components/Init/components/initAddress.tsx b/src/pages/Auth/components/Init/components/initAddress.tsx index 68e3af7..bb7ff04 100644 --- a/src/pages/Auth/components/Init/components/initAddress.tsx +++ b/src/pages/Auth/components/Init/components/initAddress.tsx @@ -34,8 +34,8 @@ export default function InitAddress() { setInitUser((prev) => ({ ...prev, position: { - latitude: Number(result[0].x), - longitude: Number(result[0].y), + lat: Number(result[0].x), + lng: Number(result[0].y), }, })); setAddress(fullAddress); @@ -51,8 +51,8 @@ export default function InitAddress() { }, []); return ( - <> -
+
+
픽업 위치 지정
); } diff --git a/src/pages/Auth/components/Init/components/initProfileImage.tsx b/src/pages/Auth/components/Init/components/initProfileImage.tsx index 469ae51..038f5c4 100644 --- a/src/pages/Auth/components/Init/components/initProfileImage.tsx +++ b/src/pages/Auth/components/Init/components/initProfileImage.tsx @@ -6,16 +6,16 @@ import { AuthType } from '@src/types/data'; import { authState } from '@src/data'; import CameraIcon from '@src/asset/icon/mdi_camera.svg'; import { setNewUser } from '@src/api/user'; +import NextButton from '@src/components/NextButton'; import { InitContextType } from '../index.d'; export default function InitProfileImage() { const navigate = useNavigate(); - const { initUser, setInitUser } = useOutletContext(); const [, setAuth] = useRecoilState(authState); + const { initUser, setInitUser } = useOutletContext(); - const newUser = useMutation('newUser', () => setNewUser(initUser), { + const { mutate } = useMutation('newUser', () => setNewUser(initUser), { retry: false, - onSuccess: () => { setAuth((prev) => ({ ...prev, role: 'USER' })); navigate('/'); @@ -45,53 +45,56 @@ export default function InitProfileImage() { useEffect(() => { // 잘못된 요청 방지 - if (!initUser.nickname || !initUser.position) navigate('/auth/init'); + if (!initUser.nickname) navigate('/auth/init'); + + setInitUser((prev) => ({ + ...prev, + submitUser: mutate as () => void, + })); }, []); return (
-
프로필 이미지 설정
-
); } diff --git a/src/pages/Auth/components/Init/components/initUser.tsx b/src/pages/Auth/components/Init/components/initUser.tsx index 26a2c0f..cbea3b2 100644 --- a/src/pages/Auth/components/Init/components/initUser.tsx +++ b/src/pages/Auth/components/Init/components/initUser.tsx @@ -7,8 +7,11 @@ import { handleTextFieldColor, validNickname } from '@src/utils'; import CircularProgress from './circularProgress'; import { InitContextType } from '../index.d'; +const initText = '최소 2글자, 최대 10글자까지 한글,영어, 숫자만 입력가능해요.'; + export default function InitUser() { const [valid, setValid] = useState(false); + const [alertText, setAlertText] = useState(initText); const { initUser, setInitUser } = useOutletContext(); const handleNickname = (text: string) => { @@ -16,24 +19,32 @@ export default function InitUser() { setInitUser((prev) => ({ ...prev, nickname: text })); }; - const { mutate, isLoading, isError } = useMutation( + const { mutate, isLoading, isError, isSuccess } = useMutation( 'checkNickname', - () => checkNickname(initUser.nickname), - { - onSuccess: (res) => { - console.log(res); - }, - } + () => checkNickname(initUser.nickname) ); + const getTextColor = () => { + if (initUser.nickname.length === 0) return 'text-gray-600'; + return valid ? 'text-success' : 'text-red-600'; + }; + useEffect(() => { handleNickname(initUser.nickname); }, []); + useEffect(() => { + if (valid) setAlertText('사용가능한 닉네임이에요!'); + else if (isError) setAlertText('중복된 닉네임이에요!'); + else setAlertText(initText); + }, [valid]); + return (
-
닉네임을 입력해주세요.
+
+ 닉네임을 입력해주세요. +
: '중복 확인'}
-
- {valid && ( -
- )} - - 최소 2글자, 최대 10글자까지 한글,영어, 숫자만 입력가능해요. - -
- {isError && ( -
-
- 중복된 닉네임 입니다. -
- )} +
{alertText}
- {valid ? 'oo' : 'ss'} - +
); } diff --git a/src/pages/Auth/components/Init/index.d.ts b/src/pages/Auth/components/Init/index.d.ts index 924ba67..122f2bf 100644 --- a/src/pages/Auth/components/Init/index.d.ts +++ b/src/pages/Auth/components/Init/index.d.ts @@ -4,6 +4,7 @@ export type InitUserType = { nickname: string; position: PositionType | undefined; image: string | undefined; + submitUser?: () => void; }; export type InitContextType = { diff --git a/src/pages/Auth/components/Init/index.tsx b/src/pages/Auth/components/Init/index.tsx index 1ed7df1..0521814 100644 --- a/src/pages/Auth/components/Init/index.tsx +++ b/src/pages/Auth/components/Init/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Outlet, useNavigate } from 'react-router-dom'; +import { Outlet, useLocation, useNavigate } from 'react-router-dom'; import ChevronLeft from '@src/asset/icon/chevronLeft.svg'; import { InitUserType } from './index.d'; @@ -10,12 +10,25 @@ export default function Init() { position: undefined, image: undefined, }); + const location = useLocation(); + + const submitable = () => { + if (initUser.submitUser && location.pathname.includes('image')) return true; + return false; + }; return (
-
navigate(-1)} className="pr-2"> - 뒤로가기 +
+
navigate(-1)} className="pr-2"> + 뒤로가기 +
+ {submitable() && ( + + )}