Merge pull request #64 from LIKELION-SOGANG/feature/apply-page-interaction#59

Feature/apply page interaction#59

Author: rmdnps10

.eslintrc.json

@@ -10,6 +10,12 @@
   "rules": {
     "react/no-unescaped-entities": 0,
     "@typescript-eslint/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "error"
+    "unused-imports/no-unused-imports": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
   }
 }

.prettierrc

@@ -6,4 +6,4 @@
   "endOfLine": "lf",
   "trailingComma": "none",
   "arrowParens": "avoid"
-}
+}

src/app/(apply)/apply/components/CheckingPass.tsx

@@ -5,10 +5,16 @@ import Passed from './Passed'
 import Nonpassed from './Nonpassed'
 
 const CheckingPass = () => {
+  const onChangeInput = () => {
+    console.log('not yet')
+  }
   return (
     <div className="flex flex-col items-center bg-white">
       <div className="w-[56.2rem]">
         <SmallInput
+          onChangeInput={onChangeInput}
+          value=""
+          name="gitURL"
           title=""
           placeholder="이메일로 발송된 고유 번호를 입력해주세요."
         />
@@ -18,11 +24,8 @@ const CheckingPass = () => {
           isable={false}
         />
       </div>
-
       <Passed />
       <Nonpassed />
     </div>
   )
 }
-
-export default CheckingPass

src/app/(apply)/apply/components/Progress.tsx

@@ -1,17 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react'
 
 const Progress = ({ step }: { step: number }) => {
-  const mountRef = useRef(false)
-  const [progress, setProgress] = useState([false, false, false])
-
   const allSteps = ['인적사항 입력', '지원서 작성', '지원서 저장']
+  const mountRef = useRef(false)
+  const [progress, setProgress] = useState(Array(allSteps.length).fill(false))
 
   useEffect(() => {
     if (!mountRef.current) {
       mountRef.current = true
       return
     }
-
     setProgress(prev => {
       const newProgress = [...prev]
       newProgress[step - 1] = true
@@ -35,7 +33,7 @@ const Progress = ({ step }: { step: number }) => {
           ) : (
             <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>
+                className={`m-[0_1.4rem] w-[12.2rem] h-[1px] ${progress[index + 1] ? 'bg-black ' : 'bg-[#d9d9d9]'}`}></div>
             </div>
           )}
         </div>

src/app/(apply)/apply/components/SelectTimeDay.tsx

@@ -5,7 +5,7 @@ const SelectTimeDay = () => {
   return (
     <div className="flex flex-col gap-[2rem]">
       <div className="text-[1.6rem] font-medium">
-        6. 면접 가능한 날짜와 시간을 모두 선택해주세요.
+        5. 면접 가능한 날짜와 시간을 모두 선택해주세요.
       </div>
       {meeting.map((item, index1) => {
         return (

src/app/(apply)/apply/components/SmallInput.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
 interface SmallInputProps {
-  onChangeInput?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  placeholder?: string
-  name?: string
-  value?: string
-  title?: string
+  onChangeInput: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder: string
+  name: string
+  value: string
+  title: string
 }
 
 const SmallInput = ({

src/app/(apply)/apply/container/ApplySection.tsx

@@ -1,50 +1,80 @@
+'use client'
+
+import React, { useState } from 'react'
 import Button from '../components/Button'
 import SmallInput from '../components/SmallInput'
-// import ApplyHeader from '../components/ApplyHeader'
-// import SaveComplete from './SaveComplete'
-// import EditPersonalInfo from './EditPersonalInfo'
-// import CheckingPass from '../components/CheckingPass'
-// import PersonalInformationForm from './PersonalInformationForm'
-// import PersonalStatementForm from './PersonalStatementForm'
-// import Passed from '../components/Passed'
-// import Nonpassed from '../components/Nonpassed'
-
-//
-//
-//
+import PersonalInformationForm from './PersonalInformationForm'
+import PersonalStatementForm from './PersonalStatementForm'
+import Progress from '../components/Progress'
+import SaveComplete from './SaveComplete'
 
 const ApplySection = () => {
+  const [step, setStep] = useState(0)
+
+  const onClickStep = () => {
+    setStep(prev => prev + 1)
+    window.scrollTo(0, 0)
+  }
+
+  const onChangeInput = () => {
+    console.log('not yet')
+  }
+
   return (
-    <>
-      <div className="mb-[19rem]"></div>
-      <div>
-        <div className="text-[1.6rem] font-medium mb-[1.2rem]">
-          처음 지원서를 작성하신다면,
-        </div>
-        <div>
-          <Button
-            title="지원서 생성하기"
-            isable={true}
-          />
-        </div>
-      </div>
+    <section className="overflow-x-hidden pt-[2rem] bg-white text-black">
+      <div className="flex flex-col items-center h-full">
+        <div className="w-[56.2rem]">
+          {step !== 0 ? <Progress step={step} /> : null}
 
-      <div className="mb-[7rem]"></div>
-
-      <div>
-        <SmallInput
-          title="이미 작성하던 지원서가 있으시다면,"
-          placeholder="이메일로 발송된 고유번호를 입력해주세요."
-        />
-        <div className="mb-[1.2rem]"></div>
-        <Button
-          title="지원서 수정하기"
-          isable={false}
-        />
-      </div>
+          {step === 0 ? (
+            <div>
+              <div className="mb-[15rem]"></div>
 
-      <div className="mb-[1.2rem]"></div>
-    </>
+              <div>
+                <div className="text-[1.6rem] font-medium mb-[1.2rem]">
+                  처음 지원서를 작성하신다면,
+                </div>
+                <div
+                  onClick={onClickStep}
+                  className="cursor-pointer">
+                  <Button
+                    title="지원서 생성하기"
+                    isable={true}
+                  />
+                </div>
+              </div>
+
+              <div className="mb-[7rem]"></div>
+
+              <div>
+                <SmallInput
+                  onChangeInput={onChangeInput}
+                  value=""
+                  name="uniqueNumber"
+                  title="이미 작성하던 지원서가 있으시다면,"
+                  placeholder="이메일로 발송된 고유번호를 입력해주세요."
+                />
+                <div className="mb-[1.2rem]"></div>
+                <Button
+                  title="지원서 수정하기"
+                  isable={false}
+                />
+              </div>
+            </div>
+          ) : null}
+
+          {step === 1 ? (
+            <PersonalInformationForm onClickStep={onClickStep} />
+          ) : null}
+
+          {step === 2 ? (
+            <PersonalStatementForm onClickStep={onClickStep} />
+          ) : null}
+
+          {step === 3 ? <SaveComplete /> : null}
+        </div>
+      </div>
+    </section>
   )
 }
 

src/app/(apply)/apply/container/EditPersonalInfo.tsx

@@ -4,11 +4,18 @@ import SelectPart from '../components/SelectPart'
 import Button from '../components/Button'
 
 const EditPersonalInfo = () => {
+  const onChangeInput = () => {
+    console.log('not yet')
+  }
+
   return (
     <div className="w-[56.2rem] relative">
       <div className="flex flex-col gap-[5rem] mb-[5rem]">
         {personalInformation.map((item, index) => (
           <SmallInput
+            onChangeInput={onChangeInput}
+            value=""
+            name="gitURL"
             key={index}
             title={item.title}
             placeholder={item.placeholder}

src/app/(main)/recruit/components/PCOnly.tsx renamed to src/app/(apply)/apply/container/PCOnly.tsx

@@ -1,12 +1,17 @@
+'use client'
+
 import React from 'react'
 import CloseXWhite from '../../../../../public/icon/button/closeX-white.svg'
 import { PCONLY_MODAL } from '@/style/zIndex'
+import { useRouter } from 'next/navigation'
 
-interface PcOnlyProps {
-  setPcOnly: React.Dispatch<React.SetStateAction<boolean>>
-}
+const PCOnly = () => {
+  const router = useRouter()
+
+  const onClickCloseXWhite = () => {
+    router.push('/recruit')
+  }
 
-const PCOnly = ({ setPcOnly }: PcOnlyProps) => {
   return (
     <main
       className="w-screen h-screen bg-black fixed py-[5rem] px-[3rem] flex flex-col justify-between text-white"
@@ -16,12 +21,7 @@ const PCOnly = ({ setPcOnly }: PcOnlyProps) => {
           Like<span className="italic ">lion</span> So
           <span className="italic">gang</span>
         </div>
-        <button
-          onClick={() =>
-            setPcOnly(prev => {
-              return !prev
-            })
-          }>
+        <button onClick={onClickCloseXWhite}>
           <CloseXWhite />
         </button>
       </div>

src/app/(apply)/apply/container/PersonalInformationForm.tsx

@@ -1,39 +1,24 @@
-'use client'
-
-import React, { useState } from 'react'
+import React from 'react'
 import SmallInput from '../components/SmallInput'
 import Button from '../components/Button'
 import {
   personalInformation,
   personalPhoneNumber
 } from '@/utils/recruitMockData'
 
+//
+//
+//
+
 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 }
-    })
+  const onChangeInput = () => {
+    console.log('not yet')
   }
 
   return (
@@ -42,18 +27,18 @@ const PersonalInformationForm = ({
         {personalInformation.map((item, index) => (
           <SmallInput
             onChangeInput={onChangeInput}
-            name={item.name}
+            value=""
+            name=""
             key={index}
             title={item.title}
-            value={personalInfo[item.name as keyof typeof personalInfo]}
             placeholder={item.placeholder}
           />
         ))}
 
         <SmallInput
           onChangeInput={onChangeInput}
-          name="phone"
-          value={personalInfo.phone}
+          value=""
+          name=""
           title={personalPhoneNumber.title}
           placeholder={personalPhoneNumber.placeholder}
         />