✨ feat: 웹뷰에서 앱으로 별도 브라우저 열어 하이코리아로 이동 Team-inglo#127

naarang · Jan 31, 2025 · 31abdec · 31abdec
1 parent 4559b0d
commit 31abdec
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/src/components/ApplicationDetail/ApplicationDetailStep5.tsx b/src/components/ApplicationDetail/ApplicationDetailStep5.tsx
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useState } from 'react';
 import ApplicationDetailBottomSheet from '@/components/ApplicationDetail/ApplicationDetailBottomSheet';
 import { usePatchApplyHiKorea } from '@/hooks/api/useApplication';
+import { sendReactNativeMessage } from '@/utils/reactNativeMessage';
 
 const ApplicationDetailStep5 = () => {
   const navigate = useNavigate();
@@ -14,8 +15,12 @@ const ApplicationDetailStep5 = () => {
   const [isShowBottomsheet, setIsShowBottomSheet] = useState<boolean>(false);
 
   const onClickBlackButton = () => {
-    window.location.href =
-      'https://www.hikorea.go.kr/cvlappl/CvlapplStep1.pt#this';
+    const isWebView = Boolean(window.ReactNativeWebView);
+    if (isWebView) sendReactNativeMessage({ type: 'GO_HIKOREA' });
+    else {
+      window.location.href =
+        'https://www.hikorea.go.kr/cvlappl/CvlapplStep1.pt#this';
+    }
   };
 
   const onClickYellowButton = () => {

diff --git a/src/components/Information/InformationStep.tsx b/src/components/Information/InformationStep.tsx
@@ -87,6 +87,36 @@ const InformationStep = ({
             canDelete={false}
           />
         </div>
+        {/* 전화번호 선택, dropdown으로 앞 번호를, 중간 번호와 뒷 번호는 각각 input으로 입력 받음 */}
+        <div className="w-full">
+          <div className="w-full flex flex-row items-center justify-start body-3 color-[#222] px-[0.25rem] py-[0.375rem]">
+            Telephone No.
+          </div>
+          <div className="w-full flex flex-row gap-2 justify-between">
+            <div className="w-full h-[2.75rem]">
+              <Dropdown
+                value={phoneNum.start}
+                placeholder="+82"
+                options={phone}
+                setValue={(value) => setPhoneNum({ ...phoneNum, start: value })}
+              />
+            </div>
+            <Input
+              inputType={InputType.TEXT}
+              placeholder="0000"
+              value={phoneNum.middle}
+              onChange={(value) => setPhoneNum({ ...phoneNum, middle: value })}
+              canDelete={false}
+            />
+            <Input
+              inputType={InputType.TEXT}
+              placeholder="0000"
+              value={phoneNum.end}
+              onChange={(value) => setPhoneNum({ ...phoneNum, end: value })}
+              canDelete={false}
+            />
+          </div>
+        </div>
         <div className="w-full">
           <div className="w-full flex items-center justify-start body-3 color-[#222] px-[0.25rem] py-[0.375rem]">
             Gender
@@ -136,7 +166,7 @@ const InformationStep = ({
           />
         </div>
         {/* 비자 선택 */}
-        <div className="w-full">
+        <div className="w-full mb-[7.125rem]">
           <div className="w-full flex items-center justify-start body-3 color-[#222] px-[0.25rem] py-[0.375rem]">
             Visa Status
           </div>
@@ -149,36 +179,6 @@ const InformationStep = ({
             }
           />
         </div>
-        {/* 전화번호 선택, dropdown으로 앞 번호를, 중간 번호와 뒷 번호는 각각 input으로 입력 받음 */}
-        <div className="w-full">
-          <div className="w-full flex flex-row items-center justify-start body-3 color-[#222] px-[0.25rem] py-[0.375rem]">
-            Telephone No.
-          </div>
-          <div className="w-full flex flex-row gap-2 justify-between mb-[30rem]">
-            <div className="w-full h-[2.75rem]">
-              <Dropdown
-                value={phoneNum.start}
-                placeholder="+82"
-                options={phone}
-                setValue={(value) => setPhoneNum({ ...phoneNum, start: value })}
-              />
-            </div>
-            <Input
-              inputType={InputType.TEXT}
-              placeholder="0000"
-              value={phoneNum.middle}
-              onChange={(value) => setPhoneNum({ ...phoneNum, middle: value })}
-              canDelete={false}
-            />
-            <Input
-              inputType={InputType.TEXT}
-              placeholder="0000"
-              value={phoneNum.end}
-              onChange={(value) => setPhoneNum({ ...phoneNum, end: value })}
-              canDelete={false}
-            />
-          </div>
-        </div>
       </div>
       {/* 정보 입력 시마다 유효성을 검사해 모든 값이 유효하면 버튼이 활성화 */}
       <BottomButtonPanel>