[Feat/#28] 회원가입 / 로그인 퍼블리싱

src/app/mobile/admin/dashboard/page.tsx

@@ -5,7 +5,7 @@ import MobileLayout from '@/components/mobile/layout';
 import Header from '@/components/mobile/Header';
 import Dropdown from '@/components/mobile/Dropdown';
 import useDropdown from '@/hooks/useDropdown';
-import IconArrow from 'public/assets/icon-arrow.svg';
+import IconArrow from 'public/assets/icons/icon-arrow.svg';
 import { cn } from '@/lib/utils';
 import DashboardItem from './_components/DashboardItem';
 

src/app/mobile/sign-in/page.tsx

@@ -1,3 +1,30 @@
-export default function SignUp() {
-  return <div />;
+'use client';
+
+import MobileLayout from '@/components/mobile/layout';
+import ImageLoginLogo from 'public/assets/images/image-login-logo.svg';
+import IconGoogle from 'public/assets/icons/icon-google.svg';
+
+export default function SignIn() {
+  return (
+    <MobileLayout>
+      <section className="relative flex h-dvh w-full flex-col items-center justify-start overflow-hidden">
+        <section className="mt-[128px] flex flex-col items-center justify-start gap-1.5">
+          <div className="text-2xl font-normal">
+            국민대학교 소프트웨어융합대학
+          </div>
+          <div className="text-3xl font-semibold">복지물품 대여 시스템</div>
+        </section>
+        <ImageLoginLogo className="absolute top-24" />
+        {/* onClick 구글 로그인 연결하기 */}
+        <button
+          className="absolute bottom-44 flex w-11/12 justify-between rounded-2xl border bg-white-primary px-6 py-4"
+          type="button"
+        >
+          <IconGoogle />
+          <div className="flex font-medium">Google로 시작하기</div>
+          <div className="h-6 w-6" />
+        </button>
+      </section>
+    </MobileLayout>
+  );
 }

src/app/mobile/sign-up/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import MobileLayout from '@/components/mobile/layout';
+
+export default function SignUp() {
+  return (
+    <MobileLayout>
+      <section className="relative flex h-dvh w-full flex-col items-center justify-start overflow-hidden">
+        <section className="mt-20 flex w-11/12 flex-col items-start">
+          <div className="text-heading-3_M font-semibold">
+            복지물품 대여 시스템
+          </div>
+          <div className="text-heading-2_M font-bold">
+            빌릴게에 오신 것을 환영합니다!
+          </div>
+        </section>
+        <section className="mt-[50px] flex w-11/12 flex-col items-start gap-6">
+          <section className="flex w-full flex-col gap-1.5">
+            <div>이름을 입력해 주세요.</div>
+            {/* TODO : 이름 유효성 검사 */}
+            <input
+              placeholder="이름을 정확히 입력해 주세요."
+              className="flex w-full rounded-xl border px-3.5 py-4"
+            />
+          </section>
+          <section className="flex w-full flex-col gap-1.5">
+            <div>학번을 입력해 주세요.</div>
+            {/* TODO : 학번 8자 + 유효성 검사사 */}
+            <input
+              placeholder="8자 모두 입력해 주세요."
+              className="flex w-full rounded-xl border px-3.5 py-4"
+            />
+          </section>
+        </section>
+
+        {/* TODO : onClick 연결하기 */}
+        <button
+          className="bg-on-kookmin absolute bottom-7 flex w-11/12 justify-between rounded-2xl border px-6 py-4 text-white-primary"
+          type="button"
+        >
+          <div className="h-6 w-6" />
+          <div className="flex font-medium">작성 완료</div>
+          <div className="h-6 w-6" />
+        </button>
+      </section>
+    </MobileLayout>
+  );
+}

src/components/mobile/Header/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import IconArrow from 'public/assets/icon-arrow.svg';
-import IconHamburger from 'public/assets/icon-hamburger.svg';
+import IconArrow from 'public/assets/icons/icon-arrow.svg';
+import IconHamburger from 'public/assets/icons/icon-hamburger.svg';
 
 interface HeaderProps {
   title: string;

src/components/mobile/NotificationItem/index.tsx

@@ -8,7 +8,7 @@ import {
   UserNotificationText,
 } from '@/constants/notificationStatus';
 import { NotificationProps } from '@/types/notificationType';
-import IconBell from 'public/assets/icon-bell.svg';
+import IconBell from 'public/assets/icons/icon-bell.svg';
 
 export default function NotificationItem({
   message,

tailwind.config.ts

@@ -30,6 +30,7 @@ export default {
         'gray-secondary': '#898C8E',
         'gray-tertiary': '#F2F1F1',
         'gray-border': '#DCDDDE',
+        'on-kookmin': '#004A98',
         card: {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',