🔀 세션 페이지 퍼블리싱

src/app/(pages)/signIn/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SignIn from '@/views/signIn/ui/signIn';
+
+const page = () => {
+  return (
+    <div>
+      <SignIn />
+    </div>
+  );
+};
+
+export default page;

src/app/(pages)/signUp/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SignUp from '@/views/signUp/ui/signUp';
+
+const page = () => {
+  return (
+    <div>
+      <SignUp />
+    </div>
+  );
+};
+
+export default page;

src/entities/main/index.tsx

@@ -0,0 +1 @@
+export { default as ExpoListItem } from './ui/ExpoListItem';

src/entities/signIn/index.tsx

@@ -0,0 +1,2 @@
+export { default as SignInForm } from './ui/SignInForm';
+export { default as SignupPrompt } from './ui/SignupPrompt';

src/entities/signIn/ui/SignInForm/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '@/shared/ui/Button';
+import Input from '@/shared/ui/Input';
+
+const SignInForm = () => {
+  return (
+    <div>
+      <div className="space-y-6">
+        <p className="text-h4 text-black">이메일</p>
+        <Input type="text" placeholder="이메일을 입력해주세요." />
+        <p className="text-h4 text-black">비밀번호</p>
+        <Input placeholder="비밀번호를 입력해주세요." type="password" />
+      </div>
+      <div className="mt-[160px]">
+        <Button text="로그인" />
+      </div>
+    </div>
+  );
+};
+
+export default SignInForm;

src/entities/signIn/ui/SignupPrompt/index.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import React from 'react';
+
+const SignupPrompt = () => {
+  return (
+    <div className="mt-[10px] flex gap-6">
+      <p className="text-caption2 text-gray-300">
+        아직 관리자 로그인을 안 하셨나요?
+      </p>
+      <Link href="/signUp" className="text-caption2 text-gray-500">
+        회원가입
+      </Link>
+    </div>
+  );
+};
+
+export default SignupPrompt;

src/entities/signUp/index.tsx

@@ -0,0 +1 @@
+export { default as SignUpForm } from './ui/SignUpForm';

src/entities/signUp/ui/SignUpForm/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Input } from '@/shared/ui';
+
+const SignUpForm = () => {
+  return (
+    <div>
+      <div className="space-y-6">
+        <div className="space-y-3">
+          <p className="text-h4 text-black">이름</p>
+          <Input type="text" placeholder="이름을 입력해주세요." />
+        </div>
+        <div className="space-y-3">
+          <p className="text-h4 text-black">이메일</p>
+          <Input placeholder="이메일을 입력해주세요." type="email" />
+        </div>
+        <div className="space-y-3">
+          <p className="text-h4 text-black">비밀번호</p>
+          <Input
+            placeholder="(8~24자 영어(대소문자)/숫자 특수문자 1개이상)"
+            type="password"
+          />
+          <Input placeholder="비밀번호를 다시 입력해주세요." type="password" />
+        </div>
+        <div className="space-y-3">
+          <p className="text-h4 text-black">연락처</p>
+          <Input placeholder="연락처을 입력해주세요." type="text" />
+        </div>
+      </div>
+      <div className="mt-[160px]">
+        <Button text="로그인" />
+      </div>
+    </div>
+  );
+};
+
+export default SignUpForm;

src/shared/styles/globals.css

@@ -134,5 +134,5 @@ html {
   font-family: 'Pretendard';
 }
 body {
-  background-color: #e9e9e9;
+  background-color: #fff;
 }

src/shared/ui/Input/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ChangeEvent,
   DetailedHTMLProps,
@@ -16,10 +18,11 @@ interface Props
   error?: string;
   label?: string;
   type: string;
+  placeholder: string;
 }
 
 const Input = forwardRef<HTMLInputElement, Props>(
-  ({ error, label, type, ...props }, ref) => {
+  ({ error, label, type, placeholder, ...props }, ref) => {
     const [value, setValue] = useState<string>('');
     const [showPassword, setShowPassword] = useState<boolean>(false);
 
@@ -53,6 +56,7 @@ const Input = forwardRef<HTMLInputElement, Props>(
             className="w-full border-none bg-transparent text-body4 outline-none"
             onChange={onChange}
             style={inputStyle}
+            placeholder={placeholder}
           />
 
           {label && <div className="break-keep">{label}</div>}

src/shared/ui/index.tsx

@@ -0,0 +1,3 @@
+export { default as Button } from './Button';
+export { default as Input } from './Input';
+export { default as Modal } from './Modal';

src/views/signIn/index.tsx

@@ -0,0 +1 @@
+export { default as signIn } from './ui/signIn';

src/views/signIn/ui/signIn/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from '@/widgets/layout/ui/Header';
+import SignInContainer from '@/widgets/signIn/ui/signIn';
+
+const SignIn = () => {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <div className="flex flex-grow items-center justify-center">
+        <div className="w-full max-w-[792px]">
+          <SignInContainer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignIn;

src/views/signUp/index.tsx

@@ -0,0 +1 @@
+export { default as signUp } from './ui/signUp';

src/views/signUp/ui/signUp/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Header } from '@/widgets/layout';
+import { SignUpContainer } from '@/widgets/signUp';
+
+const SignUp = () => {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <div className="flex flex-grow items-center justify-center">
+        <div className="w-full max-w-[792px]">
+          <SignUpContainer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;

src/widgets/expoDetails/index.tsx

@@ -0,0 +1 @@
+export { default as QRcode } from './ui/QRcode';

src/widgets/layout/index.tsx

@@ -0,0 +1 @@
+export { default as Header } from './ui/Header';

src/widgets/layout/ui/Header/index.tsx

@@ -3,7 +3,7 @@ import { Logo, Navigation } from '@/entities/layout/Header';
 
 const Header = () => {
   return (
-    <div className="flex h-[90px] w-full items-center justify-between py-[30px]">
+    <div className="flex h-[90px] w-full items-center justify-around py-[30px]">
       <Logo />
       <Navigation />
     </div>

src/widgets/signIn/index.tsx

@@ -0,0 +1 @@
+export { default as signIn } from './ui/signIn';

src/widgets/signIn/ui/signIn/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import SignInForm from '@/entities/signIn/ui/SignInForm';
+import SignupPrompt from '@/entities/signIn/ui/SignupPrompt';
+
+const SignInContainer = () => {
+  return (
+    <div>
+      <div className="space-y-[50px]">
+        <p className="text-center text-h1 text-black">관리자 로그인</p>
+        <SignInForm />
+      </div>
+      <SignupPrompt />
+    </div>
+  );
+};
+
+export default SignInContainer;

src/widgets/signUp/index.tsx

@@ -0,0 +1 @@
+export { default as SignUpContainer } from './ui/SignUpContainer';

src/widgets/signUp/ui/SignUpContainer/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SignUpForm } from '@/entities/signUp';
+
+const SignUpContainer = () => {
+  return (
+    <div>
+      <div className="space-y-[50px]">
+        <p className="text-center text-h1 text-black">관리자 회원가입</p>
+        <SignUpForm />
+      </div>
+    </div>
+  );
+};
+
+export default SignUpContainer;