Merge pull request #57 from SOPT-36-NINEDOT/feat/#54/jobDropdown

[Feat]: 회원가입 드롭다운 컴포넌트 제작

Author: kwonsaebom

src/common/component/JobDropDown/JobDropDown.css.ts

@@ -0,0 +1,80 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { fonts, colors } from '@/style/token';
+
+export const jobContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '52.2rem',
+  height: '5rem',
+  padding: '1.4rem 2rem',
+  border: `1px solid ${colors.grey4}`,
+  borderRadius: '8px',
+  backgroundColor: colors.grey4,
+  cursor: 'pointer',
+});
+
+export const jobText = recipe({
+  base: {
+    ...fonts.body03,
+    textAlign: 'center',
+  },
+  variants: {
+    state: {
+      default: {
+        color: colors.grey10,
+      },
+      clicked: {
+        color: colors.grey6,
+      },
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+export const dropdownIcon = recipe({
+  base: {
+    width: '2rem',
+    height: '2rem',
+  },
+  variants: {
+    state: {
+      default: {
+        color: colors.grey10,
+        transform: 'rotate(0deg)',
+      },
+      clicked: {
+        color: colors.grey6,
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});
+
+export const textContainer = style({
+  width: '52.2rem',
+  height: '5rem',
+  padding: '1.4rem 2rem',
+  marginTop: '1.6rem',
+  backgroundColor: colors.grey4,
+  border: 'none',
+  borderRadius: '8px',
+  color: colors.grey10,
+  ...fonts.body03,
+
+  selectors: {
+    '&::placeholder': {
+      color: colors.grey6,
+    },
+    '&:focus': {
+      outline: 'none',
+    },
+  },
+});

src/common/component/JobDropDown/JobDropDown.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import { IcDropdown } from '@/assets/svg';
+import JobList from '@/common/component/JobDropDown/JobList';
+import {
+  jobContainer,
+  jobText,
+  dropdownIcon,
+  textContainer,
+} from '@/common/component/JobDropDown/JobDropDown.css';
+import { PLACE_HOLDER, JOB_LIST } from '@/common/component/JobDropDown/constants/job';
+import type { JobType, JobValue } from '@/common/component/JobDropDown/constants/job';
+
+const JobDropDown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedJob, setSelectedJob] = useState<JobValue>(PLACE_HOLDER);
+
+  const isPlaceHolder = typeof selectedJob === 'string';
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleJob = (job: JobType) => {
+    setSelectedJob(job);
+    setIsOpen(false);
+  };
+
+  const state = isOpen ? 'clicked' : 'default';
+  const isTextOpen = !isPlaceHolder && selectedJob.id === JOB_LIST[JOB_LIST.length - 1].id;
+
+  return (
+    <>
+      <button className={jobContainer} onClick={toggleDropdown}>
+        <span className={jobText({ state })}>{isPlaceHolder ? selectedJob : selectedJob.job}</span>
+        <IcDropdown className={dropdownIcon({ state })} />
+      </button>
+
+      {isOpen && <JobList jobList={JOB_LIST} selectedJob={selectedJob} onSelect={handleJob} />}
+      {isTextOpen && <input placeholder="정보를 입력해주세요" className={textContainer} />}
+    </>
+  );
+};
+
+export default JobDropDown;

src/common/component/JobDropDown/JobList.css.ts

@@ -0,0 +1,53 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { colors, fonts, zIndex } from '@/style/token';
+
+export const listContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '52.2rem',
+  height: '24rem',
+  backgroundColor: colors.grey2,
+  borderRadius: '8px',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  cursor: 'pointer',
+  zIndex: zIndex.dropdown,
+});
+
+export const listItem = style({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  height: '5rem',
+  padding: '1.4rem 2rem',
+  borderBottom: `solid 1px ${colors.grey3}`,
+
+  selectors: {
+    '&:last-child': {
+      borderBottom: 'none',
+    },
+    '&:hover': {
+      backgroundColor: colors.grey1,
+    },
+  },
+});
+
+export const listText = recipe({
+  variants: {
+    state: {
+      selected: {
+        ...fonts.body03,
+        color: colors.grey10,
+      },
+      default: {
+        ...fonts.body01,
+        color: colors.grey6,
+      },
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});

src/common/component/JobDropDown/JobList.tsx

@@ -0,0 +1,26 @@
+import { listContainer, listItem, listText } from '@/common/component/JobDropDown/JobList.css';
+import type { JobType, JobValue } from '@/common/component/JobDropDown/constants/job';
+
+type JobProps = {
+  jobList: JobType[];
+  selectedJob: JobValue;
+  onSelect: (type: JobType) => void;
+};
+
+const JobList = ({ jobList, selectedJob, onSelect }: JobProps) => {
+  return (
+    <div className={listContainer}>
+      {jobList.map((job: JobType) => {
+        const state = selectedJob === job ? 'selected' : 'default';
+
+        return (
+          <button key={job.id} className={listItem} onClick={() => onSelect(job)}>
+            <span className={listText({ state })}>{job.job}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default JobList;

src/common/component/JobDropDown/constants/job.ts

@@ -0,0 +1,18 @@
+export const JOB_LIST = [
+  { id: 1, job: '의사' },
+  { id: 2, job: '변호사' },
+  { id: 3, job: '개발자' },
+  { id: 4, job: '학생' },
+  { id: 5, job: '백수' },
+  { id: 6, job: '사업가' },
+  { id: 7, job: '운동선수' },
+  { id: 8, job: '기타 (직접 작성)' },
+];
+
+export const PLACE_HOLDER = '직업을 선택하세요' as const;
+
+export type JobType = {
+  id: number;
+  job: string;
+};
+export type JobValue = JobType | typeof PLACE_HOLDER;