[25. 05. 27 / TASK-195] Feature - '서비스 사용법' 버튼 추가 (#39)

Author: six-standard

.env.sample

@@ -7,4 +7,5 @@ NEXT_PUBLIC_SENTRY_AUTH_TOKEN=<'sentry auth token here'>
 NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=<'channelTalk plugin key here'>
 NEXT_PUBLIC_GA_ID=<'Google Analytics ID here'>
 NEXT_PUBLIC_EVENT_LOG=<'Whether to send an event log here (true | false)'>
-NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>
+NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>
+NEXT_PUBLIC_ARCADE_URL=<'how-to-use url here'>

src/app/(login)/Content.tsx

@@ -5,9 +5,10 @@ import { useForm } from 'react-hook-form';
 import Image from 'next/image';
 import { startHolyLoader, stopHolyLoader } from 'holy-loader';
 import { useRouter } from 'next/navigation';
-import { Input, Button } from '@/components';
+import { Input, Button, Icon } from '@/components';
 import { login, sampleLogin } from '@/apis';
 import { LoginVo } from '@/types';
+import { COLORS, env } from '@/constants';
 
 const responsiveStyle =
   "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16";
@@ -82,15 +83,27 @@ export const Content = () => {
           >
             로그인
           </Button>
-          <span
-            className="text-TEXT-ALT text-I2 max-MBI:text-ST5 after:cursor-pointer after:hover:underline after:ml-2 after:content-['체험_계정으로_로그인'] after:text-PRIMARY-MAIN after:inline-block"
-            onClick={() => {
-              startHolyLoader();
-              sampleMutate();
-            }}
-          >
-            서비스를 체험해보고 싶다면?
-          </span>
+          <div className="w-[400px] justify-center flex items-center gap-10">
+            <button
+              className="flex gap-2 items-center hover:border-b hover:-mb-[1px] border-b-PRIMARY-MAIN cursor-pointer"
+              onClick={() => {
+                startHolyLoader();
+                sampleMutate();
+              }}
+            >
+              <Icon name="Door" color={COLORS.PRIMARY.MAIN} size={18} />
+              <span className="text-I2 max-MBI:text-ST5 text-PRIMARY-MAIN">체험 계정 로그인 →</span>
+            </button>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={env.ARCADE_URL}
+              className="flex gap-2 items-center text-I2 max-MBI:text-ST5 text-PRIMARY-MAIN hover:border-b hover:-mb-[1px] border-b-PRIMARY-MAIN cursor-pointer"
+            >
+              <Icon name="Video" color={COLORS.PRIMARY.MAIN} size={18} />
+              <span className="text-I2 max-MBI:text-ST5 text-PRIMARY-MAIN">서비스 사용법 →</span>
+            </a>
+          </div>
         </div>
       </form>
     </main>

src/components/Icon/icons/Door.svg

@@ -5,3 +5,5 @@ export { default as Like } from './Like.svg';
 export { default as Shortcut } from './Shortcut.svg';
 export { default as Close } from './Close.svg';
 export { default as Loudspeaker } from './Loudspeaker.svg';
+export { default as Door } from './Door.svg';
+export { default as Video } from './Video.svg';

src/components/Icon/icons/Video.svg

@@ -11,6 +11,7 @@ export const env = (() => {
     GA_ID: process.env.NEXT_PUBLIC_GA_ID,
     SENTRY_AUTH_TOKEN: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
     SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    ARCADE_URL: process.env.NEXT_PUBLIC_ARCADE_URL,
   } as const;
 
   if (env.NODE_ENV) {
@@ -19,5 +20,5 @@ export const env = (() => {
     });
   }
 
-  return env as Record<string, string>;
+  return env;
 })();