Merge pull request #54 from LIKELION-SOGANG/feature/recruit-page#53

Recruit-page 스크롤 인터렉션 구현 완료
LIKELION-SOGANG · Oct 10, 2024 · ca861d6 · ca861d6
2 parents e62e644 + e52e899
commit ca861d6
Show file tree

Hide file tree

Showing 24 changed files with 428 additions and 172 deletions.
diff --git a/public/icon/button/FAQ-arrow-button.svg b/public/icon/button/FAQ-arrow-button.svg
diff --git a/public/images/recruit/obj2.png b/public/images/recruit/obj2.png
diff --git a/public/images/recruit/obj2.webp b/public/images/recruit/obj2.webp
diff --git a/public/lottie/animation.json → public/lottie/animationDesktop.json b/public/lottie/animation.json → public/lottie/animationDesktop.json
diff --git a/public/lottie/animationMobile.json b/public/lottie/animationMobile.json
diff --git a/src/app/(apply)/apply/components/ApplyHeader.tsx b/src/app/(apply)/apply/components/ApplyHeader.tsx
@@ -1,17 +1,27 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
 import React from 'react'
 
 const ApplyHeader = () => {
+  const router = useRouter()
+
+  const onClickReturnHome = () => {
+    router.push('/')
+  }
   return (
-    <div className="flex flex-row justify-between">
+    <div className="flex flex-row justify-between ">
       <div className="font-pp text-[2rem] ">
         Like<span className="italic">Lion </span>So
         <span className="italic">gang </span>12
         <span className="italic">th </span>Re
         <span className="italic">cruitment</span>
       </div>
-      <div className="p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
+      <button
+        onClick={onClickReturnHome}
+        className="cursor-pointer p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
         홈으로 돌아가기
-      </div>
+      </button>
     </div>
   )
 }

diff --git a/src/app/(apply)/apply/components/Progress.tsx b/src/app/(apply)/apply/components/Progress.tsx
@@ -1,36 +1,45 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-const Progress = () => {
-  return (
-    <div className="flex justify-between mt-[2.7rem] mb-[4rem]">
-      <div className="flex items-center justify-center font-bold">
-        <div className="w-[2.4rem] h-[2.4rem] mr-[0.5rem] bg-black rounded-[50%] text-white flex items-center justify-center text-[1.2rem] ">
-          1
-        </div>
-        <div>인적사항 입력</div>
-      </div>
+const Progress = ({ step }: { step: number }) => {
+  const mountRef = useRef(false)
+  const [progress, setProgress] = useState([false, false, false])
 
-      <div className="flex justify-center items-center ">
-        <div className="m-[0_1.4rem] w-[12.2rem] h-[1px] bg-black"></div>
-      </div>
+  const allSteps = ['인적사항 입력', '지원서 작성', '지원서 저장']
 
-      <div className="flex items-center font-bold">
-        <div className="w-[2.4rem] h-[2.4rem] mr-[0.5rem] bg-black rounded-[50%] text-white flex items-center justify-center text-[1.2rem] ">
-          2
-        </div>
-        <div>지원서 작성</div>
-      </div>
+  useEffect(() => {
+    if (!mountRef.current) {
+      mountRef.current = true
+      return
+    }
 
-      <div className="flex justify-center items-center">
-        <div className="m-[0_1.4rem] w-[12.2rem] h-[1px] bg-black"></div>
-      </div>
+    setProgress(prev => {
+      const newProgress = [...prev]
+      newProgress[step - 1] = true
+      return newProgress
+    })
+  }, [step])
 
-      <div className="flex items-center font-bold">
-        <div className="w-[2.4rem] h-[2.4rem] mr-[0.5rem] bg-black rounded-[50%] text-white flex items-center justify-center text-[1.2rem]">
-          3
+  return (
+    <div className="flex justify-between mt-[2.7rem] mb-[4rem]">
+      {allSteps.map((value, index) => (
+        <div
+          className="flex items-center font-bold"
+          key={index}>
+          <div
+            className={`w-[2.4rem] h-[2.4rem] mr-[0.5rem] ${progress[index] ? 'bg-black text-white ' : 'bg-white text-black border-solid border-[1px] border-[#d9d9d9]'}  rounded-[50%] flex items-center justify-center text-[1.2rem]`}>
+            {index + 1}
+          </div>
+          <div>{value}</div>
+          {allSteps.length - 1 === index ? (
+            ''
+          ) : (
+            <div className="flex justify-center items-center ">
+              <div
+                className={`m-[0_1.4rem] w-[12.2rem] h-[1px] ${progress[index + 1] ? 'bg-black' : 'bg-[#d9d9d9]'}`}></div>
+            </div>
+          )}
         </div>
-        <div>지원서 저장</div>
-      </div>
+      ))}
     </div>
   )
 }

diff --git a/src/app/(apply)/apply/components/SaveButton.tsx b/src/app/(apply)/apply/components/SaveButton.tsx
@@ -13,7 +13,7 @@ const SaveButton = () => {
         완료하시기 바랍니다.
       </div>
 
-      <div className="mb-[1rem] mt-[2.4rem]">
+      <div className="mb-[1rem] mt-[2.4rem] cursor-pointer">
         <Button
           title="지원서 저장하기"
           isable={true}

diff --git a/src/app/(apply)/apply/components/SmallInput.tsx b/src/app/(apply)/apply/components/SmallInput.tsx
@@ -1,17 +1,29 @@
 import React from 'react'
 
 interface SmallInputProps {
-  placeholder: string
-  title: string
+  onChangeInput?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+  name?: string
+  value?: string
+  title?: string
 }
 
-const SmallInput = ({ title, placeholder }: SmallInputProps) => {
+const SmallInput = ({
+  title,
+  placeholder,
+  name,
+  value,
+  onChangeInput
+}: SmallInputProps) => {
   return (
     <div>
       <div className="text-[1.6rem] font-medium mb-[1.2rem]">{title}</div>
       <input
         className="text-[1.5rem] border-[1px] border-[#B7B7B7] w-full h-[5rem] shrink-0 rounded-[1rem]  p-[1.6rem_1.4rem]"
-        placeholder={placeholder}></input>
+        placeholder={placeholder}
+        name={name}
+        value={value || ''}
+        onChange={onChangeInput}></input>
     </div>
   )
 }

diff --git a/src/app/(apply)/apply/container/PersonalInformationForm.tsx b/src/app/(apply)/apply/container/PersonalInformationForm.tsx
@@ -1,40 +1,71 @@
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
 import SmallInput from '../components/SmallInput'
 import Button from '../components/Button'
 import {
   personalInformation,
   personalPhoneNumber
 } from '@/utils/recruitMockData'
-import Progress from '../components/Progress'
 
-const PersonalInformationForm = () => {
+interface PersonalStatementFormProps {
+  onClickStep: () => void
+}
+
+// 해야할 것
+// 1. 미입력시 예외 처리
+// 2. 이메일로 고유번호 발송
+// 3. 정상 입력 후 버튼 클릭시 데이터 페칭, 다음으로 넘어가기
+
+const PersonalInformationForm = ({
+  onClickStep
+}: PersonalStatementFormProps) => {
+  const [personalInfo, setPersonalInfo] = useState({
+    name: '',
+    studentNumbder: '',
+    email: '',
+    phone: ''
+  })
+
+  const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(personalInfo)
+    const { name, value } = e.target
+
+    setPersonalInfo(prev => {
+      return { ...prev, [name]: value }
+    })
+  }
+
   return (
     <div className="w-[56.2rem] ">
-      <div className="w-[56.2rem]">
-        <Progress />
-
-        <div className="flex flex-col gap-[5rem] mb-[5rem]">
-          {personalInformation.map((item, index) => (
-            <SmallInput
-              key={index}
-              title={item.title}
-              placeholder={item.placeholder}
-            />
-          ))}
-
+      <div className="flex flex-col gap-[5rem] mb-[5rem]">
+        {personalInformation.map((item, index) => (
           <SmallInput
-            title={personalPhoneNumber.title}
-            placeholder={personalPhoneNumber.placeholder}
+            onChangeInput={onChangeInput}
+            name={item.name}
+            key={index}
+            title={item.title}
+            value={personalInfo[item.name as keyof typeof personalInfo]}
+            placeholder={item.placeholder}
           />
-        </div>
+        ))}
 
-        <div className="pb-[1rem]">
-          <div></div>
-          <Button
-            title="입력한 이메일로 고유 번호 전송"
-            isable={true}
-          />
-        </div>
+        <SmallInput
+          onChangeInput={onChangeInput}
+          name="phone"
+          value={personalInfo.phone}
+          title={personalPhoneNumber.title}
+          placeholder={personalPhoneNumber.placeholder}
+        />
+      </div>
+
+      <div
+        onClick={onClickStep}
+        className="pb-[1rem] mt-[19.6rem] cursor-pointer">
+        <Button
+          title="입력한 이메일로 고유 번호 전송"
+          isable={true}
+        />
       </div>
     </div>
   )

diff --git a/src/app/(apply)/apply/container/PersonalStatementForm.tsx b/src/app/(apply)/apply/container/PersonalStatementForm.tsx
@@ -6,7 +6,15 @@ import SelectTimeDay from '../components/SelectTimeDay'
 import SmallInput from '../components/SmallInput'
 import SaveButton from '../components/SaveButton'
 
-const PersonalStatementForm = () => {
+interface PersonalStatementFormProps {
+  onClickStep: () => void
+}
+
+const onChangeInput = () => {
+  console.log('not yet')
+}
+
+const PersonalStatementForm = ({ onClickStep }: PersonalStatementFormProps) => {
   return (
     <div className="w-[56.2rem] flex flex-col gap-[5rem]">
       <SelectPart />
@@ -23,13 +31,18 @@ const PersonalStatementForm = () => {
       <SelectTimeDay />
 
       <SmallInput
+        onChangeInput={onChangeInput}
+        value=""
+        name="gitURL"
         title="7. GitHub 계정이 있다면 링크를 올려주세요. (선택)"
         placeholder="ex) https://github.com/likelionsg"
       />
 
       <div className="mb-[4.7rem]"></div>
 
-      <SaveButton />
+      <div onClick={onClickStep}>
+        <SaveButton />
+      </div>
     </div>
   )
 }

diff --git a/src/app/(apply)/apply/container/SaveComplete.tsx b/src/app/(apply)/apply/container/SaveComplete.tsx
@@ -3,29 +3,31 @@ import LikelionGreyLogo from '../../../../../public/icon/logo/likelion-grey.svg'
 
 const SaveComplete = () => {
   return (
-    <div className="mt-[24.7rem] flex flex-col items-center">
-      <div>
-        <LikelionGreyLogo />
-      </div>
-      <div className="mt-[3.4rem] text-[1.6rem] font-bold">
-        김경우 님, 지원서 저장이 완료되었습니다.
-      </div>
-      <div className="text-[1.2rem] font-medium">
-        [email protected]로 발송된 고유 번호를 입력하여 지원서를 수정할 수
-        있습니다.
-      </div>
-      <div className="mt-[1.2rem] text-[#b7b7b7] text-[1.2rem] font-semibold">
-        최종 제출 시각: {new Date().toLocaleDateString()}
-        <span> </span>
-        {new Date().toLocaleTimeString()}
-      </div>
-
-      <div className="flex mt-[5.8rem] gap-[0.8rem]">
-        <div className="p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
-          홈으로 돌아가기
+    <div className="flex items-center justify-center">
+      <div className="flex flex-col items-center">
+        <div>
+          <LikelionGreyLogo />
         </div>
-        <div className="p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
-          지원서 수정하기
+        <div className="mt-[3.4rem] text-[1.6rem] font-bold">
+          김경우 님, 지원서 저장이 완료되었습니다.
+        </div>
+        <div className="text-[1.2rem] font-medium">
+          [email protected]로 발송된 고유 번호를 입력하여 지원서를 수정할 수
+          있습니다.
+        </div>
+        <div className="mt-[1.2rem] text-[#b7b7b7] text-[1.2rem] font-semibold">
+          최종 제출 시각: {new Date().toLocaleDateString()}
+          <span> </span>
+          {new Date().toLocaleTimeString()}
+        </div>
+
+        <div className="flex mt-[5.8rem] gap-[0.8rem]">
+          <div className="cursor-pointer p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
+            홈으로 돌아가기
+          </div>
+          <div className="cursor-pointer p-[0.6rem_1.3rem] bg-grey text-[#b7b7b7] text-[1.3rem] font-semibold rounded-[2rem]">
+            지원서 수정하기
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/app/(apply)/apply/page.tsx b/src/app/(apply)/apply/page.tsx
@@ -5,12 +5,14 @@ import PersonalInformationForm from './container/PersonalInformationForm'
 import PersonalStatementForm from './container/PersonalStatementForm'
 import SaveComplete from './container/SaveComplete'
 
+//
+//
+//
+
 export default function ApplyPage() {
   return (
     <main>
       <ApplySection />
-      <PersonalInformationForm />
-      <PersonalStatementForm />
       <SaveComplete />
       <EditPersonalInfo />
     </main>