디자인 요청 사항 메인 브랜치 반영

depromeet · Feb 2, 2024 · dd084a0 · dd084a0
2 parents e3391ce + 4ddb1f4
commit dd084a0
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 16 deletions.
diff --git a/src/app/on-boarding-clap/index.tsx b/src/app/on-boarding-clap/index.tsx
@@ -41,7 +41,10 @@ export const OnBoardingClap = () => {
       >
         <Background angle={angle} />
         <Carousel setAngle={setAngle} userNickname={userNickname} />
-        <ButtonProvider className="z-10 !bg-transparent px-40px">
+        <ButtonProvider
+          className="z-10 !bg-transparent px-40px"
+          isGuideExternalBrowser={true}
+        >
           <ButtonProvider.Primary
             onClick={() => navigate("/clap", { state: { postId } })}
           >

diff --git a/src/app/on-boarding/index.tsx b/src/app/on-boarding/index.tsx
@@ -20,15 +20,19 @@ export const OnBoarding = () => {
     return (
       <Fragment>
         <ArticleWrapper className="flex flex-col items-center justify-center gap-y-[135px]">
-          <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[39px]">
-            <FirstImg width={193} height={161} className=" -z-10 w-full" />
+          <div className="absolute left-1/2 top-1/2 -mt-10 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[38px]">
+            <FirstImg width={193} height={161} className="-z-10 w-full" />
             <Header
               text="칭찬으로 소통하는 프레이즈 업에\n오신 것을 환영해요"
               className="!text-h3 w-full text-center"
             />
           </div>
         </ArticleWrapper>
-        <ButtonProvider isOnBoarding={true} className="!bg-transparent">
+        <ButtonProvider
+          isOnBoarding={true}
+          className="!bg-transparent"
+          isGuideExternalBrowser={true}
+        >
           <ButtonProvider.Primary
             onClick={() => {
               setChapter(1);
@@ -48,11 +52,7 @@ export const OnBoarding = () => {
         <ArticleWrapper className="flex flex-col items-center justify-center gap-y-[135px]">
           <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[50px]">
             <div className="flex h-[300px] items-center justify-center">
-              <TwiceImg
-                width={352}
-                height={281}
-                className="-z-10 h-auto w-full"
-              />
+              <TwiceImg width={352} height={281} className="-z-10" />
             </div>
             <div className="mb-[66px] flex w-full justify-center">
               <Header
@@ -82,7 +82,7 @@ export const OnBoarding = () => {
         <ArticleWrapper className="flex flex-col justify-center gap-y-[135px]">
           <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[50px]">
             <div className="flex h-[300px] items-center justify-center">
-              <ThirdImg width={327} height={280} className="-z-10 w-full" />
+              <ThirdImg width={353} height={264} className="-z-10" />
             </div>
             <div className="mb-[66px] flex w-full justify-center">
               <Header
@@ -112,7 +112,7 @@ export const OnBoarding = () => {
         <ArticleWrapper className="flex flex-col items-center justify-center gap-y-[135px]">
           <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-y-[50px]">
             <div className="flex h-[300px] items-center justify-center">
-              <FourthImg width={320} height={324} className="-z-10" />
+              <FourthImg width={294} height={298} className="-z-10" />
             </div>
             <div className="mb-[66px] flex w-full justify-center">
               <Header

diff --git a/src/app/post/done.tsx b/src/app/post/done.tsx
@@ -51,7 +51,7 @@ export const Done = () => {
         />
         <DoneContainer />
       </ArticleWrapper>
-      <ButtonProvider className="bg-transparent">
+      <ButtonProvider className="!bg-transparent">
         <ButtonProvider.Primary onClick={handleShare} tooltip={toolTipText}>
           링크 공유하고 칭찬 받기
         </ButtonProvider.Primary>

diff --git a/src/components/common/button-provider.tsx b/src/components/common/button-provider.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import Cookies from "js-cookie";
 import {
   PropsWithChildren,
   useEffect,
@@ -11,6 +12,7 @@ import {
 
 import { ButtonProps, FilledButton } from "./fiiled-button";
 
+import { InformationSVG } from "@/assets/icons/information";
 import { handleKakaoLogin } from "@/components/app/login/kakao/kakao-login";
 
 const Primary = (props: ButtonProps) => {
@@ -24,6 +26,7 @@ const White = (props: ButtonProps) => {
 export const ButtonProvider = ({
   children,
   className,
+  isGuideExternalBrowser = false,
   isOnBoarding = false,
   ...props
 }: PropsWithChildren<ButtonProps>) => {
@@ -85,6 +88,16 @@ export const ButtonProvider = ({
         className,
       )}
     >
+      {isGuideExternalBrowser && Cookies.get("isEnternalBrowser") ? (
+        <div className="mb-[2px] flex w-full items-center justify-center">
+          <div className="flex items-center justify-center gap-[4px]">
+            <InformationSVG />
+            <span className="text-b3-long text-teritary">
+              시스템 브라우저에서의 사용을 권장해요
+            </span>
+          </div>
+        </div>
+      ) : null}
       {Children.map(children, (child) => {
         if (isValidElement(child)) {
           return cloneElement(child, { isFullStyle, ...props });

diff --git a/src/components/common/fiiled-button.tsx b/src/components/common/fiiled-button.tsx
@@ -9,6 +9,7 @@ export type ButtonProps = {
   isFull?: boolean;
   isFullStyle?: boolean;
   isOnBoarding?: boolean;
+  isGuideExternalBrowser?: boolean;
   tooltip?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">;
 

diff --git a/src/hooks/useExternalBrowser.ts b/src/hooks/useExternalBrowser.ts
@@ -1,10 +1,27 @@
+import Cookies from "js-cookie";
+
 export function UseExternalBrowser() {
   const agent = navigator.userAgent;
+  const URL = document.URL;
+  let isExternalBrowser = false;
+
   // NOTE: 카카오톡 인앱 브라우저 방지
   if (agent.indexOf("KAKAO") !== -1) {
-    const URL = document.URL;
     window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+  } else if (agent.indexOf("Instagram") !== -1) {
+    // NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
+    window.open(`https://www.praise-up.app`, "_system");
+  } else {
+    isExternalBrowser = true;
   }
-  // TODO: 라인, 인스타그램 추후 대응
+
+  if (!isExternalBrowser) {
+    Cookies.set("isEnternalBrowser", "false");
+  } else {
+    if (Cookies.get("isEnternalBrowser")) {
+      Cookies.remove("isEnternalBrowser");
+    }
+  }
+
   return null;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -65,9 +65,9 @@ export default {
           "66%": { visibility: "hidden" },
           "100%": { visibility: "hidden" },
         },
-        fadeOut: {
+        fadeIn: {
           "0%": {
-            opacity: 0,
+            opacity: 0.3,
           },
           "100%": {
             opacity: 1,