[FEATURE] 공홈 어드민 지원하기 페이지 퍼블리싱

[eonseok-jeon]

✨ 구현 기능 명세

• 지원하기 페이지 퍼블리싱
• react-dropzone을 통해 img 드롭다운 구현
• react-hook-form 연결

✅ PR Point

😈 dropzone 구현

img 넣을 때 편하게 드롭다운으로 넣으라고 react-dropzone 이용해서 구현해줬어요
공통으로 빼놔서 나중에 다른 곳에서도 이용해도 좋을 거 같아요

코드보기

import { type MouseEvent, useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import type { UseFormReturn } from 'react-hook-form';

import { VALIDATION_CHECK } from '@/utils/org';

import { StErrorMessage } from '../style';
import {
  StImgButton,
  StImgButtonWrapper,
  StImgIcon,
  StImgPreview,
} from './style';

interface MyDropzoneProps {
  method: UseFormReturn;
  label: string;
}

const MyDropzone = ({ method, label }: MyDropzoneProps) => {
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const {
    register,
    setValue,
    formState: { errors },
  } = method;

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      const file = acceptedFiles[0];
      if (file) {
        const reader = new FileReader();
        reader.onloadend = () => {
          setPreviewUrl(reader.result as string);
          setValue(label, reader.result, { shouldValidate: true });
        };
        reader.readAsDataURL(file);
      }
    },
    [label, setValue],
  );

  const handleClick = (e: MouseEvent<HTMLInputElement>) => {
    e.preventDefault();
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/jpeg': [],
      'image/jpg': [],
      'image/png': [],
    },
  });

  return (
    <StImgButtonWrapper>
      <StImgButton
        {...getRootProps({
          onClick: handleClick, // input의 클릭 이벤트 핸들링
        })}
        isError={errors[label]?.message != undefined}>
        <input
          {...getInputProps({})}
          {...register(label, {
            required: true && VALIDATION_CHECK.required.errorText,
          })}
          {...getInputProps()}
        />
        {previewUrl ? (
          <StImgPreview src={previewUrl} alt="공홈 지원하기 탭 헤더 이미지" />
        ) : isDragActive ? (
          <p>이미지를 드래그 해주세요...</p>
        ) : (
          <StImgIcon />
        )}
      </StImgButton>
      {errors[label] && (
        <StErrorMessage>
          <>{errors[label].message}</>
        </StErrorMessage>
      )}
    </StImgButtonWrapper>
  );
};

export default MyDropzone;

😈 파트 카테고리 공통 분리

파트 카테고리도 다른 곳에서 많이 사용되는 거 같아서 공통으로 분리했어요

코드보기

import { Chip } from '@sopt-makers/ui';


import { PART_LIST } from '@/utils/org';


import { StPartCategoryWrapper } from './style';


const PartCategory = () => {
  return (
    <StPartCategoryWrapper>
      {PART_LIST.map((part) => (
        <Chip key={`${part}-${part}`}>{part}</Chip>
      ))}
    </StPartCategoryWrapper>
  );
};


export default PartCategory;

[lydiacho]

예쁘네용 고생하셨습니다!!

스타일 등 몇가지 공통으로 빼면 좋을 것 같은 친구들이 보이는데 분리해주거나 아니면 그냥 나중에 차차 리팩해도 괜찮을것같아유 리소스에 맞게 편하게 해주세요 ~~

그리고 주용오빠 코드리뷰할때 주용오빠가 만들어둔 이미지 file input과 react-dropzone으로 언석오빠가 만든 input 컴포넌트 어떻게 통합하면 좋을지 생각해보면 좋을것같아여 그거 절충하면 그 친구로 제 소개탭에서도 쓸 수 있게 확장하는 작업 마저 할게요 !

[lydiacho]

여기 현재 비율 안맞는 이미지 넣으면 cover 말고 contain으로 보여지고 있는데 cover이 낫지 않을까요??
근데 추후 로직 구현할 때 이미지 input들은 다 비율 제한 로직 추가해줘야 할 것 같아서 크게 상관없을 것 같긴 합니당

[lydiacho]

이친구 살짝 다른 아이콘인거같아요!

이렇게 보이는데 저희는 플러스가 달려잇습니다

[lydiacho]

높이 설정이 디자인(178px)보다 큰 230px 인거같아요!

[lydiacho]

여기 플레이스홀더가 이렇게 짤리는데...

이게 mds padding이랑 저희 padding이랑 살짝 달라서 생기는 문제인 것 같아요
저희는 왼쪽 여백 16px, 오른쪽 여백 14px인데
mds는 보니까 padding이 왼쪽 16, 오른쪽 8 + 오른쪽margin 8 이렇게 들어가있더라고요?
그래서 StTextArea 스타일에 margin 6px 로 오버라이딩 시켜주면 될 것 같아요
그리구 그 친구가 다른 곳에서도 쓰여야하니까 공통 스타일로 빼주면 좋을 것 같아요 !

[lydiacho]

react-dropzone이 생소해서 그럴 수 있는데
여기 input태그에 getInputProps가 두번 들어가있는데 의도하신건가유?