faet #13 update init pages

jigume · Feb 16, 2024 · 9e7a811 · 9e7a811
1 parent 08f0ad3
commit 9e7a811
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 168 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -68,7 +68,7 @@ export default function Router() {
           children: [
             { index: true, element: <InitAccessRights /> },
             { path: 'user', element: <InitUser /> },
-            { path: 'address', element: <InitAddress /> },
+            // { path: 'address', element: <InitAddress /> },
             { path: 'image', element: <InitProfileImage /> },
           ],
           loader: () => {

diff --git 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
diff --git a/src/asset/icon/initAccess/position.svg b/src/asset/icon/initAccess/position.svg
diff --git a/src/asset/icon/initAccess/saveArea.svg b/src/asset/icon/initAccess/saveArea.svg
diff --git 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 (
-    <div className="ml-4 mt-20 content-center">
-      <div className="h-[44px] text-[20px] font-bold">앱 접근권한 안내</div>
-      <div className="pb-2 text-[16px] font-semibold">
-        <div className="inline text-[#1EBAD2]">선택적 </div>접근 권한
-      </div>
-      <div className="text-[14px] font-normal text-[#3E404C]">
-        미동의 시에도 지구미 서비스를 이용할 수 있으나. 일부 서비스의 이용이
-        제한 될 수 있습니다.
-      </div>
-      <div className="flex pt-8">
-        <div className="flex size-[40px] justify-center rounded-[20px] bg-[#0D99FF33]">
-          <img
-            className="size-[28px] place-self-center"
-            src={SaveArea}
-            alt="저장공간"
-          />
-        </div>
-        <div className="pl-4">
-          <div className="text-[16px] font-medium text-[#252730]">저장공간</div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            사용자 식별정보등 앱 사용 관련 정보를
-          </div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            사용합니다.
-          </div>
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      <div className="flex h-full flex-col justify-center pb-24">
+        <div className="pb-4 text-xl font-bold">앱 접근권한 안내</div>
+        <div className="text-[#3E404C]">
+          미동의 시, 지구미 서비스의 이용이 제한 될 수 있습니다.
         </div>
-      </div>
-      <div className="flex pt-6">
-        <div className="flex size-[40px] justify-center rounded-[20px] bg-[#0D99FF33]">
-          <img
-            className="size-[28px] place-self-center"
-            src={Position}
-            alt="위치정보"
-          />
-        </div>
-        <div className="pl-4">
-          <div className="text-[16px] font-medium text-[#252730]">위치정보</div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            현재위치를 기반으로 가장 가까운 구매폼
-          </div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            추천해드립니다.
-          </div>
-          <div className="text-[12px] font-medium text-[#858899]">
-            위치기반 서비스 이용약관 자세히 보기 &gt;
+
+        <div className="flex flex-col gap-6 py-10">
+          <div className="flex">
+            <img className="size-12" src={SaveArea} alt="저장공간" />
+            <div className="pl-4">
+              <div className="text-lg font-medium text-[#252730]">저장공간</div>
+              <div className="break-keep text-[#3E404C]">
+                사용자 식별정보등 앱 사용 관련 정보를 사용합니다.
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div className="flex pt-6">
-        <div className="flex size-[40px] justify-center rounded-[20px] bg-[#0D99FF33]">
-          <img
-            className="size-[28px] place-self-center"
-            src={Camera}
-            alt="카메라"
-          />
-        </div>
-        <div className="pl-4">
-          <div className="text-[16px] font-medium text-[#252730]">카메라</div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            구매폼을 작성하며 카메라 및 앨범에서 이미지를
+          <div className="flex">
+            <img className="size-12" src={Position} alt="위치정보" />
+            <div className="pl-4">
+              <div className="text-lg font-medium text-[#252730]">위치정보</div>
+              <div className="break-keep text-[#3E404C]">
+                현재위치를 기반으로 가장 가까운 구매폼 추천해드립니다.
+              </div>
+              <div className="font-light text-[#858899] underline">
+                자세히 보기
+              </div>
+            </div>
           </div>
-          <div className="text-[14px] font-normal text-[#3E404C]">
-            등록합니다.
+          <div className="flex">
+            <img className="size-12" src={Camera} alt="카메라" />
+            <div className="pl-4">
+              <div className="text-lg font-medium text-[#252730]">카메라</div>
+              <div className="break-keep text-[#3E404C]">
+                구매폼을 작성하며 카메라 및 앨범에서 이미지를 등록합니다.
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="pt-8">
-        <div className="text-[13px] font-normal text-[#858899]">
-          ※ 설정 &gt; 애플리케이션 &gt; 지구미 &gt; 권한 메뉴에서도
-        </div>
-        <div className="text-[13px] font-normal text-[#858899]">
+
+        <div className="text-[#858899]">
+          ※ 설정 &gt; 애플리케이션 &gt; 지구미 &gt; 권한 메뉴에서도 <br />
           설정하실 수 있습니다.
         </div>
       </div>
+
+      <NextButton linkTo="/auth/init/user" />
     </div>
   );
 }
diff --git 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 (
-    <>
-      <div className="px-4 pb-24">
+    <div className="flex h-full flex-col justify-between px-4 py-6">
+      <div className="pb-24">
         <div className="pb-10 text-lg font-bold">픽업 위치 지정</div>
 
         <button
@@ -91,9 +91,7 @@ export default function InitAddress() {
         )}
       </div>
 
-      <div className="absolute bottom-0 z-30 w-full max-w-screen-sm px-4">
-        <NextButton isDisabled={!initUser.position} linkTo="/auth/init/image" />
-      </div>
-    </>
+      <NextButton isDisabled={!initUser.position} linkTo="/auth/init/image" />
+    </div>
   );
 }
diff --git 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<InitContextType>();
   const [, setAuth] = useRecoilState<AuthType>(authState);
+  const { initUser, setInitUser } = useOutletContext<InitContextType>();
 
-  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 (
     <div className="flex h-full flex-col justify-between px-4 py-6">
-      <div className="pb-3">프로필 이미지 설정</div>
-      <label htmlFor="image">
-        <input
-          type="file"
-          accept="image/jpg,image/png,image/jpeg,image/gif"
-          className="hidden"
-          id="image"
-          onChange={(e) => {
-            if (e.target.files) encodeFileToBase64(e.target.files[0]);
-          }}
-        />
-        {!initUser.image ? (
-          <div className="mx-auto flex aspect-square w-3/4 flex-col items-center justify-center gap-2 rounded-full bg-gray-100 active:opacity-60">
-            <img src={CameraIcon} alt="사진 등록" />
-            <div className="font-thin">앨범으로 등록</div>
-          </div>
-        ) : (
-          <div
-            className="relative mx-auto aspect-square w-3/4"
-            // onClick={handleImageReset}
-          >
-            <span className="absolute bottom-4 right-8 inline-flex aspect-square w-12 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center rounded-[20px] bg-white p-1.5 text-white shadow-[0px_1px_3px_#0003]">
+      <div className="flex h-full flex-col justify-center pb-16">
+        <div className="pb-16 text-xl font-semibold">
+          프로필을 등록해주세요.
+        </div>
+
+        <label htmlFor="image">
+          <input
+            type="file"
+            accept="image/jpg,image/png,image/jpeg,image/gif"
+            className="hidden"
+            id="image"
+            onChange={(e) => {
+              if (e.target.files) encodeFileToBase64(e.target.files[0]);
+            }}
+          />
+          {!initUser.image ? (
+            <div className="mx-auto flex aspect-square w-3/5 flex-col items-center justify-center gap-2 rounded-full bg-gray-100 active:opacity-60">
+              <img src={CameraIcon} alt="사진 등록" />
+              <div className="font-thin">앨범으로 등록</div>
+            </div>
+          ) : (
+            <div className="relative mx-auto aspect-square w-3/5">
+              <span className="absolute -bottom-4 right-8 inline-flex aspect-square w-12 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center rounded-[20px] bg-white p-1.5 text-white shadow-[0px_1px_3px_#0003]">
+                <img
+                  src={CameraIcon}
+                  className="relative top-[1px] mx-auto inline-block leading-7"
+                  alt="사진 등록"
+                />
+              </span>
               <img
-                src={CameraIcon}
-                className="relative top-[1px] mx-auto inline-block leading-7"
-                alt="사진 등록"
+                className="aspect-square w-full rounded-full border-gray-100 bg-gray-300 object-cover"
+                src={initUser.image}
+                alt="프로필 이미지"
               />
-            </span>
-            <img
-              className="aspect-square w-full rounded-full border-gray-100 bg-gray-300 object-cover"
-              src={initUser.image}
-              alt="프로필 이미지"
-            />
-          </div>
-        )}
-      </label>
-      <button
-        className="text-md h-12 w-full rounded-lg bg-success p-3 text-center text-white transition-all duration-300 ease-in-out active:scale-[99%] disabled:bg-gray-300 active:disabled:scale-100"
-        onClick={newUser.mutate as () => void}
-      >
-        가입 완료하기
-      </button>
+            </div>
+          )}
+        </label>
+      </div>
+
+      <NextButton isDisabled={!initUser.image} onClick={mutate as () => void} />
     </div>
   );
 }