feat: sign-form을 추가한다

app/(site)/auth/layout.module.scss

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 120px);
+}

app/(site)/auth/layout.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react'
+
+import styles from './layout.module.scss'
+
+export default function Layout({ children }: PropsWithChildren) {
+  return <main className={styles.container}>{children}</main>
+}

app/(site)/auth/sign-in/page.tsx

@@ -0,0 +1,5 @@
+import { SignInSection } from '@/widgets/auth'
+
+export default function Page() {
+  return <SignInSection />
+}

app/(site)/auth/sign-up/page.tsx

@@ -0,0 +1,5 @@
+import { SignUpSection } from '@/widgets/auth'
+
+export default function Page() {
+  return <SignUpSection />
+}

src/widgets/layout/GuestButtons.tsx → src/features/auth/GuestButtons.tsx

@@ -11,11 +11,11 @@ export function GuestButtons() {
   const router = useRouter()
 
   const moveToSignIn = () => {
-    router.push(SITE_PATH.sign_in_modal)
+    router.push(SITE_PATH.sign_in)
   }
 
   const moveToSignUp = () => {
-    router.push(SITE_PATH.sign_up_modal)
+    router.push(SITE_PATH.sign_up)
   }
 
   return (

src/features/auth/SignForm.module.scss

@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/features/auth/SignInForm.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { KeyRound, Mail } from 'lucide-react'
+import { ChangeEventHandler, useState } from 'react'
+
+import { SubmitButton } from '@/features/auth/SubmitButton'
+import { TextFiled } from '@/shared/ui/TextFiled'
+
+import styles from './SignForm.module.scss'
+
+export function SignInForm() {
+  const [id, setId] = useState(() => '')
+  const [pw, setPw] = useState(() => '')
+
+  const onIdChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setId(e.target.value)
+  }
+
+  const onPasswordChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setPw(e.target.value)
+  }
+  return (
+    <form className={styles.form}>
+      <TextFiled name={'id'} placeholder="Email" value={id} onChange={onIdChange} icon={<Mail color="#475069" />} />
+      <TextFiled
+        name={'pw'}
+        placeholder="password"
+        value={pw}
+        onChange={onPasswordChange}
+        icon={<KeyRound color="#475069" />}
+      />
+      <SubmitButton>로그인</SubmitButton>
+    </form>
+  )
+}

src/features/auth/SignUpForm.tsx

@@ -0,0 +1,3 @@
+export function SignUpForm() {
+  return <form></form>
+}

src/features/auth/SubmitButton.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+
+import { poppins } from '@/shared/font'
+
+import styles from './submit-button.module.scss'
+
+export function SubmitButton({ children }: PropsWithChildren) {
+  return (
+    <button type="submit" className={`${styles.button} ${poppins.className}`}>
+      {children}
+    </button>
+  )
+}

src/features/auth/index.ts

@@ -0,0 +1,4 @@
+export { GuestButtons } from './GuestButtons'
+export {} from './SignInForm'
+export {} from './SignUpForm'
+export { UserButton } from './UserButton'

src/features/auth/submit-button.module.scss

@@ -0,0 +1,18 @@
+.button {
+  display: flex;
+  padding: 1rem 2rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1 0 0;
+
+  border-radius: 0.75rem;
+  border: 2px solid #7B6EF6;
+  background: #7B6EF6;
+
+  color: white;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+}

src/features/search/index.ts

@@ -0,0 +1 @@
+export { HeaderSearchBar } from './HeaderSearchBar'

src/shared/constants/SITE_PATH.ts

@@ -3,14 +3,14 @@ type MyMenu = 'famous' | 'like' | 'review'
 type Image = 'backdrop' | 'poster'
 export const SITE_PATH = {
   home: '/home',
+  my: '/profile',
+  sign_in: '/auth/sign-in',
+  sign_up: '/auth/sign-up',
   detail: (movieId: string | number) => `/detail/${movieId}`,
   list: (path: Movie) => `/list/${path}`,
   search: (keyword: string) => `/search?keyword=${keyword}`,
-  my: '/profile',
   my_menu: (path: MyMenu) => `/profile/${path}`,
   movie_modal: (movieId: string | number) => `/i/info/${movieId}`,
   image_modal: (movieId: string | number, imageType: Image, imageUrl: string) =>
     `/i/image/${movieId}/${imageType}/${imageUrl}`,
-  sign_in_modal: '/i/sign-in',
-  sign_up_modal: '/i/sign-up',
 }

src/shared/hook/index.ts

@@ -1,4 +1,5 @@
 export { useBlockScroll } from './use-block-scroll'
 export { useDragHandler } from './use-drag-handler'
 export { useHistoryBack } from './use-history-back'
+export { useScrollDown } from './use-scroll-down'
 export { useTextInterval } from './use-title-interval'

src/shared/hook/use-scroll-down.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useScrollDown() {
+  const [isScrollDown, setIsScrollDown] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollY = window.scrollY
+      if (scrollY > 500) {
+        setIsScrollDown(true)
+      } else {
+        setIsScrollDown(false)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return { isScrollDown }
+}

src/shared/ui/TextFiled.tsx

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { poppins } from '@/shared/font'
+
+import styles from './text-filed.module.scss'
+type Props = {
+  icon: ReactNode
+  error?: string
+} & ComponentPropsWithoutRef<'input'>
+
+export function TextFiled({ name, onChange, icon, value, error }: Props) {
+  return (
+    <div>
+      <label className={styles.label}>
+        {icon}
+        <input className={`${styles.input} ${poppins.className}`} name={name} value={value} onChange={onChange} />
+      </label>
+      {error && <span className={styles.error}>{error}</span>}
+    </div>
+  )
+}

src/shared/ui/text-filed.module.scss

@@ -0,0 +1,37 @@
+.label {
+  display: flex;
+  padding: 0.75rem 1rem;
+  align-items: center;
+  gap: 1rem;
+  flex: 1 0 0;
+
+  background: rgba(0,0,0,10%);
+  border-radius: 0.75rem;
+  border: 1px solid #323B54;
+}
+
+.input {
+  display: flex;
+  height: 2.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+
+  background: transparent;
+  border: none;
+  outline: none;
+
+  color: white;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  &::placeholder{
+    color: #475069;
+  }
+}
+
+.error {
+
+}

src/widgets/auth/SignInSection.tsx

@@ -0,0 +1,18 @@
+import { SignInForm } from '@/features/auth/SignInForm'
+import { SignLottie } from '@/widgets/auth/SignLottie'
+
+import styles from './sign-section.module.scss'
+
+export function SignInSection() {
+  return (
+    <section className={styles.container}>
+      <SignLottie src="/lottie/movie-sign-in.json" />
+      <div className={styles.actionBox}>
+        <h4 className={styles.actionTitle}>로그인</h4>
+        <div className={styles.form}>
+          <SignInForm />
+        </div>
+      </div>
+    </section>
+  )
+}

src/widgets/auth/SignLottie.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { Player } from '@lottiefiles/react-lottie-player'
+
+type Props = {
+  src: string
+}
+
+export function SignLottie({ src }: Props) {
+  return <Player speed={1} autoplay loop src={src} style={{ width: 600, height: 600 }} />
+}

src/widgets/auth/SignUpSection.tsx

@@ -0,0 +1,18 @@
+import { SignUpForm } from '@/features/auth/SignUpForm'
+import { SignLottie } from '@/widgets/auth/SignLottie'
+
+import styles from './sign-section.module.scss'
+
+export function SignUpSection() {
+  return (
+    <section className={styles.container}>
+      <SignLottie src="/lottie/movie-sign-up.json" />
+      <div className={styles.actionBox}>
+        <h4 className={styles.actionTitle}>회원가입</h4>
+        <div className={styles.form}>
+          <SignUpForm />
+        </div>
+      </div>
+    </section>
+  )
+}

src/widgets/auth/index.ts

@@ -1,2 +1,2 @@
-export { SignInModal } from './SignInModal'
-export { SignUpModal } from './SignUpModal'
+export { SignInSection } from './SignInSection'
+export { SignUpSection } from './SignUpSection'

src/widgets/auth/sign-section.module.scss

@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.actionBox {
+  flex: 1
+}
+
+.actionTitle {
+  text-align: left;
+  font-weight: bold;
+  font-size: 40px;
+}
+
+.form {
+  margin: 2.5rem 0;
+}

src/widgets/layout/Header.tsx

@@ -1,46 +1,29 @@
 'use client'
 
 import classNames from 'classnames'
-import { useEffect, useState } from 'react'
 
-import { GuestButtons } from './GuestButtons'
+import { HeaderSearchBar } from '@/features/search'
+import { useScrollDown } from '@/shared/hook'
+
 import styles from './header.module.scss'
 import { HeaderNav } from './HeaderNav'
-import { HeaderSearchBar } from './HeaderSearchBar'
 import { MainLogo } from './MainLogo'
-import { UserButton } from './UserButton'
+import { UserStatusButton } from './UserStatusButton'
 
 export function Header() {
-  const [isHeaderHidden, setIsHeaderHidden] = useState(false)
   const isLogin = false
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const scrollY = window.scrollY
-      if (scrollY > 500) {
-        setIsHeaderHidden(true)
-      } else {
-        setIsHeaderHidden(false)
-      }
-    }
-
-    window.addEventListener('scroll', handleScroll)
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+  const { isScrollDown } = useScrollDown()
 
   return (
-    <header className={classNames(styles.container, isHeaderHidden && styles.hidden)}>
+    <header className={classNames(styles.container, isScrollDown && styles.hidden)}>
       <div className={styles.box}>
         <div className={styles.section}>
           <MainLogo />
           <HeaderNav />
         </div>
         <div className={styles.section}>
           <HeaderSearchBar />
-          {isLogin ? <UserButton /> : <GuestButtons />}
+          <UserStatusButton isLogin={isLogin} />
         </div>
       </div>
     </header>