feat(bottle): admin page for QA (#59)

apps/bottle/src/app/admin/login/loginStyle.css.ts

@@ -0,0 +1,25 @@
+import { spacings } from '@bottlesteam/ui';
+import { style } from '@vanilla-extract/css';
+
+export const containerStyle = style({
+  marginTop: spacings.xxl,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.xl,
+});
+
+export const fieldStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacings.sm,
+});
+
+export const birthDateWrapper = style({
+  display: 'flex',
+  gap: spacings.xxs,
+});
+
+export const buttonsWrapper = style({
+  display: 'flex',
+  gap: spacings.sm,
+});

apps/bottle/src/app/admin/login/page.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { Header } from '@/components/common/header';
+import { POST } from '@/features/server';
+import { Step } from '@/features/steps/StepContainer';
+import { spacings, TextField } from '@bottlesteam/ui';
+import { setCookie } from 'cookies-next';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { containerStyle, fieldStyle } from './loginStyle.css';
+
+const ERROR_MESSAGE = '아이디 혹은 비밀번호가 틀렸어요.';
+
+interface AdminLoginResponse {
+  accessToken1: string;
+  accessToken2: string;
+  refreshToken1: string;
+  refreshToken2: string;
+}
+
+export default function LoginPage() {
+  const router = useRouter();
+
+  const [id, setId] = useState('');
+  const [password, setPassword] = useState('');
+  const [isError, setIsError] = useState(false);
+
+  const handleLogin = async () => {
+    if (id === process.env.NEXT_PUBLIC_ADMIN_ID_1 && password === process.env.NEXT_PUBLIC_ADMIN_PASSWORD) {
+      const { accessToken1, refreshToken1 } = (await POST('/api/v1/admin/login', {
+        accessToken: '',
+        refreshToken: '',
+      })) as AdminLoginResponse;
+      setCookie('accessToken', accessToken1);
+      setCookie('refreshToken', refreshToken1);
+      router.push('/admin');
+      return;
+    }
+    if (id === process.env.NEXT_PUBLIC_ADMIN_ID_2 && password === process.env.NEXT_PUBLIC_ADMIN_PASSWORD) {
+      const { accessToken2, refreshToken2 } = (await POST('/api/v1/admin/login', {
+        accessToken: '',
+        refreshToken: '',
+      })) as AdminLoginResponse;
+      setCookie('accessToken', accessToken2);
+      setCookie('refreshToken', refreshToken2);
+      router.push('/admin');
+      return;
+    }
+    setIsError(true);
+  };
+
+  return (
+    <>
+      <Header />
+      <Step>
+        <Step.Title style={{ marginTop: spacings.xl }}>{'인증을 진행할게요'}</Step.Title>
+        <section className={containerStyle}>
+          <div className={fieldStyle}>
+            <Step.Subtitle>아이디</Step.Subtitle>
+            <TextField
+              value={id}
+              placeholder="아이디를 입력해 주세요"
+              onChange={e => {
+                setId(e.currentTarget.value);
+              }}
+            />
+          </div>
+          <div className={fieldStyle}>
+            <Step.Subtitle>비밀번호</Step.Subtitle>
+            <TextField
+              value={password}
+              onChange={e => {
+                setPassword(e.currentTarget.value);
+              }}
+              type="password"
+              placeholder="비밀번호를 입력해 주세요"
+              caption={isError && <TextField.Caption>{ERROR_MESSAGE}</TextField.Caption>}
+            />
+          </div>
+        </section>
+        <Step.FixedButton disabled={id.trim().length === 0 || password.trim().length === 0} onClick={handleLogin}>
+          로그인
+        </Step.FixedButton>
+      </Step>
+    </>
+  );
+}

apps/bottle/src/app/admin/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Header } from '@/components/common/header';
+import { POST } from '@/features/server';
+import { getClientSideTokens } from '@/features/server/clientSideTokens';
+import { Step } from '@/features/steps/StepContainer';
+import { Button, spacings } from '@bottlesteam/ui';
+import Link from 'next/link';
+
+export default function AdminPage() {
+  return (
+    <>
+      <Header />
+      <Step>
+        <Step.Title style={{ margin: `${spacings.xl} 0` }}>{'뭐할래?'}</Step.Title>
+        <Button
+          size="md"
+          variant="solid"
+          onClick={async () => {
+            try {
+              await POST('/api/v1/admin/after-bottle-receive', getClientSideTokens());
+              window.alert('차은우에게 보틀을 보냈어요!');
+            } catch (error) {
+              console.log('ERROR', error);
+              window.alert('차은우에게 보틀을 보내는 데 실패했어요!');
+            }
+          }}
+        >
+          차은우에게 보틀 도착한 상태 만들기
+        </Button>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: spacings.md, marginTop: spacings.xl }}>
+          <Link href={'/profile/create'}>
+            <Button size="md" variant="outlined">
+              프로필 생성 이동{' >'}
+            </Button>
+          </Link>
+          <Link href={'/profile/edit'}>
+            <Button size="md" variant="outlined">
+              프로필 수정 이동{' >'}
+            </Button>
+          </Link>
+          <Link href={'/bottles'}>
+            <Button size="md" variant="outlined">
+              도착한 보틀 이동{' >'}
+            </Button>
+          </Link>
+        </div>
+      </Step>
+    </>
+  );
+}

apps/bottle/src/features/server/utils.ts

@@ -23,7 +23,6 @@ async function fetchWrapperWithTokenHandler<Data>(uri: string, tokens: Tokens, i
    * NOTE: handles ONLY Unauthorized status
    */
   if (response.status === STATUS.UNAUTHORIZED) {
-    console.log('HERE', tokens.accessToken);
     const newTokens = await refreshAuth(tokens);
 
     return await fetchWrapperWithTokenHandler<Data>(uri, newTokens, {

turbo.json

@@ -2,7 +2,14 @@
   "$schema": "https://turbo.build/schema.json",
   "ui": "tui",
   "globalEnv": ["NEXT_PUBLIC_SERVER_BASE_URL"],
-  "globalPassThroughEnv": ["TEST_ACCESS_TOKEN", "TEST_REFRESH_TOKEN", "NEXT_PUBLIC_MODE"],
+  "globalPassThroughEnv": [
+    "TEST_ACCESS_TOKEN",
+    "TEST_REFRESH_TOKEN",
+    "NEXT_PUBLIC_MODE",
+    "NEXT_PUBLIC_ADMIN_ID_1",
+    "NEXT_PUBLIC_ADMIN_ID_2",
+    "NEXT_PUBLIC_ADMIN_PASSWORD"
+  ],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],