Merge pull request #103 from dnd-side-project/fix/#81

fix: squash & merge #81

README.md

@@ -0,0 +1 @@
+<!-- test commit -->

src/app/profile/page.tsx

@@ -1,93 +1,48 @@
 'use client'
 
-import Button from '@/components/common/Button'
-import Chip from '@/components/domain/profile/Chip'
-import JobGroupCard from '@/components/domain/profile/JobGroupCard'
-import { useState } from 'react'
+import { JobGroup } from '@/components/domain/profile'
+import { CompanyAndExperience } from '@/components/domain/profile'
+import useProfile from '@/hooks/profile/useProfile'
 
 function Profile() {
-  const [step, setStep] = useState<'직군' | '기업' | '경력'>('직군')
-  const jobGroupData = ['개발자', '디자이너', '기타']
-  const companyData = [
-    '비공개',
-    '대기업',
-    '중견기업',
-    '중소기업',
-    '스타트업',
-    '외국계',
-  ]
-
-  const [isCategorySelect, setIsCategorySelect] = useState<boolean[]>(
-    Array(jobGroupData.length).fill(false),
-  )
-
-  const handleClick = (idx: number) => {
-    const newArr = [...isCategorySelect]
-
-    if (newArr[idx]) {
-      newArr[idx] = false
-    } else {
-      newArr.fill(false)
-      newArr[idx] = true
-    }
-    setIsCategorySelect(newArr)
-  }
-
-  const isAnyCategorySelected = isCategorySelect.some((selected) => selected)
+  const {
+    step,
+    setStep,
+    profileData,
+    companySelected,
+    setCompanySelected,
+    handleJobGroupClick,
+    handleCompanyClick,
+    handleExperienceClick,
+    isAnyJobGroupSelected,
+    isAnyCompanySelected,
+    isAnyExperienceSelected,
+    handleSubmit,
+  } = useProfile()
 
   return (
     <div className="px-4 flex flex-col gap-[351] justify-between h-full text-slate-100">
       {step === '직군' && (
-        <>
-          <div className="mt-[90px] flex flex-col gap-[72px]">
-            <p className="text-h1 text-onSurface-300">
-              반가워요! <br />
-              어떤 직군이신가요?
-            </p>
-            <div className="mt-4 flex flex-col gap-4">
-              {jobGroupData.map((job, idx) => (
-                <JobGroupCard
-                  key={idx}
-                  id={idx + 1}
-                  name={job}
-                  selected={isCategorySelect[idx]}
-                  onClick={() => handleClick(idx)}
-                />
-              ))}
-            </div>
-          </div>
-          <Button
-            isFullWidth
-            type={isAnyCategorySelected ? 'gradient' : 'default'}
-            onClick={() => setStep('기업')}
-            disabled={!isAnyCategorySelected}
-          >
-            다음
-          </Button>
-        </>
+        <JobGroup
+          profileData={profileData}
+          isAnyJobGroupSelected={isAnyJobGroupSelected}
+          handleJobGroupClick={handleJobGroupClick}
+          setStep={setStep}
+        />
       )}
-      {step === '기업' && (
-        <>
-          <div className="mt-[90px] flex flex-col gap-10">
-            <p className="text-h1 text-onSurface-300">
-              어느 기업에서 근무 중이신가요?
-            </p>
-            <div className="mt-4 flex flex-wrap gap-4">
-              {companyData.map((company, idx) => (
-                <Chip id={idx} name={company} key={idx} />
-              ))}
-            </div>
-          </div>
 
-          <Button
-            isFullWidth
-            type={isAnyCategorySelected ? 'gradient' : 'default'}
-            onClick={() => setStep('경력')}
-            disabled={!isAnyCategorySelected}
-          >
-            다음
-          </Button>
-        </>
+      {step === '기업 및 경력' && (
+        <CompanyAndExperience
+          profileData={profileData}
+          isAnyCompanySelected={isAnyCompanySelected}
+          isAnyExperienceSelected={isAnyExperienceSelected}
+          handleCompanyClick={handleCompanyClick}
+          handleExperienceClick={handleExperienceClick}
+          setStep={setStep}
+          setCompanySelected={setCompanySelected}
+          handleSubmit={handleSubmit}
+          companySelected={companySelected}
+        />
       )}
     </div>
   )

src/components/domain/profile/chip/index.tsx

@@ -1,14 +1,11 @@
-import React, { useState } from 'react'
 import { ProfileChip } from '@/types/profileChip'
 
-function Chip({ id, type, name }: ProfileChip) {
-  const [selected, setSelected] = useState(false)
-
-  const handleClick = () => {
-    setSelected(!selected)
-    console.log(`${type}: ${name}`)
-  }
+interface ChipProps extends ProfileChip {
+  selected: boolean
+  onClick: () => void
+}
 
+function Chip({ id, name, selected, onClick }: ChipProps) {
   return (
     <div
       className={`px-5 py-2 rounded-[0.25rem] hover:cursor-pointer ${
@@ -17,10 +14,11 @@ function Chip({ id, type, name }: ProfileChip) {
           : 'border-solid border-[1.5px] border-outline text-onSurface-300'
       }`}
       key={id}
-      onClick={handleClick}
+      onClick={onClick}
     >
       {name}
     </div>
   )
 }
+
 export default Chip

src/components/domain/profile/index.ts

@@ -1,4 +1,3 @@
-export * from './step/company'
-export * from './step/experience'
+export * from './step/companyAndExperience'
 export * from './step/jobGroup'
 export * from './header'

src/components/domain/profile/step/companyAndExperience/CompanyAndExperience.tsx

@@ -0,0 +1,92 @@
+'use client'
+import Chip from '../../Chip'
+import Button from '@/components/common/Button'
+import { companyData, experienceData } from '@/constants/profileData'
+
+interface CompanyAndExperienceProps {
+  profileData: {
+    company: string | null
+    experience: string | null
+  }
+  companySelected: boolean
+  isAnyCompanySelected: boolean
+  isAnyExperienceSelected: boolean
+  handleCompanyClick: (idx: string) => void
+  handleExperienceClick: (idx: string) => void
+  setStep: (step: '직군' | '기업 및 경력') => void
+  setCompanySelected: (select: boolean) => void
+  handleSubmit: () => void
+}
+
+function CompanyAndExperience({
+  profileData,
+  handleCompanyClick,
+  handleExperienceClick,
+  companySelected,
+  isAnyCompanySelected,
+  isAnyExperienceSelected,
+  setCompanySelected,
+  handleSubmit,
+}: CompanyAndExperienceProps) {
+  return (
+    <>
+      <div className="mt-[90px] flex flex-col gap-10">
+        <p className="text-h1 text-onSurface-300">
+          어느 기업에서 근무 중이신가요?
+        </p>
+        <div className="mt-4 flex flex-wrap gap-4">
+          {companyData.map((company, idx) => (
+            <Chip
+              id={idx}
+              name={company}
+              selected={profileData.company === company}
+              onClick={() => handleCompanyClick(company)}
+              key={idx}
+            />
+          ))}
+        </div>
+      </div>
+
+      {!companySelected && (
+        <Button
+          isFullWidth
+          type={isAnyCompanySelected ? 'gradient' : 'disabled'}
+          onClick={() => setCompanySelected(true)}
+        >
+          다음
+        </Button>
+      )}
+
+      {companySelected && (
+        <>
+          <div className="mt-[40px] flex flex-col gap-10">
+            <p className="text-h1 text-onSurface-300">
+              현재 경력이 어떻게 되시나요?
+            </p>
+            <div className="mt-4 flex flex-wrap gap-4">
+              {experienceData.map((experience, idx) => (
+                <Chip
+                  id={idx}
+                  name={experience}
+                  selected={profileData.experience === experience}
+                  onClick={() => handleExperienceClick(experience)}
+                  key={idx}
+                />
+              ))}
+            </div>
+          </div>
+
+          <Button
+            isFullWidth
+            type={isAnyExperienceSelected ? 'gradient' : 'disabled'}
+            onClick={handleSubmit}
+          >
+            다음
+          </Button>
+        </>
+      )}
+    </>
+  )
+}
+
+export default CompanyAndExperience

src/components/domain/profile/step/companyAndExperience/index.ts

@@ -0,0 +1 @@
+export { default as CompanyAndExperience } from './CompanyAndExperience'

src/components/domain/profile/step/jobGroup/JobGroup.tsx

@@ -1,8 +1,52 @@
-import React from 'react'
+'use client'
 
-function JobGroup() {
-
-  return <div>JobGroup</div>
+import { jobGroupData } from '@/constants/profileData'
+import JobGroupCard from '../../JobGroupCard'
+import Button from '@/components/common/Button'
+
+interface JobGroupSelectionProps {
+  profileData: {
+    jobGroup: string | null
+  }
+  isAnyJobGroupSelected: boolean
+  handleJobGroupClick: (idx: number) => void
+  setStep: (step: '직군' | '기업 및 경력') => void
+}
+
+function JobGroup({
+  profileData,
+  isAnyJobGroupSelected,
+  handleJobGroupClick,
+  setStep,
+}: JobGroupSelectionProps) {
+  return (
+    <>
+      <div className="mt-[90px] flex flex-col gap-[72px]">
+        <p className="text-h1 text-onSurface-300">
+          반가워요! <br />
+          어떤 직군이신가요?
+        </p>
+        <div className="mt-4 flex flex-col gap-4">
+          {jobGroupData.map((job, idx) => (
+            <JobGroupCard
+              key={idx}
+              id={idx + 1}
+              name={job}
+              selected={profileData.jobGroup === job}
+              onClick={() => handleJobGroupClick(idx)}
+            />
+          ))}
+        </div>
+      </div>
+      <Button
+        isFullWidth
+        type={isAnyJobGroupSelected ? 'gradient' : 'disabled'}
+        onClick={() => setStep('기업 및 경력')}
+      >
+        다음
+      </Button>
+    </>
+  )
 }
 
 export default JobGroup

src/constants/profileData.ts

@@ -0,0 +1,19 @@
+export const jobGroupData = ['개발자', '디자이너', '기타']
+export const companyData = [
+  '비공개',
+  '대기업',
+  '중견기업',
+  '중소기업',
+  '스타트업',
+  '외국계',
+]
+export const experienceData = [
+  '비공개',
+  '취준생/인턴',
+  '1년 차 미만',
+  '1~2년 차',
+  '2~3년 차',
+  '3~4년 차',
+  '4~5년 차',
+  '5년 차 이상',
+]