Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: 임시 반응형 UI 적용(모바일 한정) #227

Merged
merged 21 commits into from
Jun 28, 2024

Conversation

prgmr99
Copy link
Member

@prgmr99 prgmr99 commented Jun 25, 2024

구현 내용/방법

간단하게 구현한 내용과 방법에 대한 설명

  • 임시 반응형 UI를 적용했습니다. 임시이기 때문에 모바일에만 대응되는 UI를 구현했습니다.
  • 추가로 임시이기 때문에 추후에 디자인이 변경될 가능성이 큽니다.

To Do

  • 헤더 반응형 적용
  • 푸터 반응형 적용
  • 구인글 목록 페이지 작업
    • 필터 - 드롭다운
    • 구인글 카드
    • 검색바
  • 구인글 상세 페이지 작업
    • 기본 정보
    • 상단 글쓴이 프로필
    • 상세내용
    • 푸터
    • 신청모달
  • 일부 모달 작업
    • 로그인 필요
    • 구인글 삭제
    • 구인글 마감
    • 신청 취소
    • 오픈채팅방 튜토리얼
    • 구인글 생성 유효성 검사
  • 구인글 생성 페이지 작업
  • 구인글 관리 페이지 작업 (PC 버전으로 접근을 요구하는 UI 렌더링)
  • 신청자 관리 페이지 작업
  • 계정 관리 페이지 작업
  • 빌드 에러 수정 - resetFormData 함수

리뷰 필요

나중에 다시 고민해야할 내용이 있는 내용

없을 경우 작성 X

있을 경우 작성 후 이슈 남기고 해당 PR 링크

  • 구인글 관리 페이지는 좀 힘든 작업이어서 일단 PC 환경으로 접속하도록 UX 라이팅을 작성해보았습니다.

close #201

@prgmr99 prgmr99 requested a review from kimsuyeon0916 June 26, 2024 12:05
@prgmr99 prgmr99 self-assigned this Jun 26, 2024
@prgmr99 prgmr99 added Priority: Critical 우선순위: 긴급 Status: Review Needed 상태: 리뷰 대기중인 상태 Type: Feature 유형: 기능 추가 Type: Improvement 유형: 기능 개선 labels Jun 26, 2024

interface MuiDatepicker {
handleChange: (value: Date | null) => void;
defaultValue?: Date;
value?: Date;
inputRef?: React.Ref<HTMLInputElement>;
invalid?: boolean;
type?: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type 프로퍼티를 추가한 이유가 궁금합니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전에 시작일을 선택하면 종료일을 선택할 때, 시작일 이후만 진한 UI가 되도록 하는 요청이 있어서 추가하여 사용했습니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그래서 시작일 이전 날짜는 선택 못하도록 했습니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오! 저도 그럼 해당 부분을 적용하고 싶은데 지금으로써는 const formData = useRecoilValue(recruitInputState);만 가능한거죠??!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 그렇군요..!! 이 부분도 공통으로 사용할 수 있도록 코드를 수정해봐야겠네요!
저는 구인글을 생성할 때, 백엔드로 formData를 전송하고 있어요! 수연님도 구현하시게 되면 어떻게 하는게 좋을까요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분은 해당 PR보다는 따로 이슈를 파서 하는게 좋을 것 같네요!!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵~! 일단 인지하고 저도 함 더 고민해봐야 할 부분인것 같아요!

@kimsuyeon0916
Copy link
Contributor

max-width 에 대한 450, 431 등의 수치는 어떤 기준으로 나누신건지 궁금합니다!

@prgmr99
Copy link
Member Author

prgmr99 commented Jun 27, 2024

max-width 에 대한 450, 431 등의 수치는 어떤 기준으로 나누신건지 궁금합니다!

이 부분은 조금 더 세밀하게 작업이 필요한데 450는 제가 임의로 정한 것이고,
431인 콘솔창에서 제공하는 디바이스 환경을 확인해보니 가장 가로폭이 큰 휴대폰을 431로 잡고 진행했었습니다.

image

@kimsuyeon0916 kimsuyeon0916 force-pushed the release-1.0 branch 3 times, most recently from cedddc6 to b90528e Compare June 27, 2024 06:26

interface MuiDatepicker {
handleChange: (value: Date | null) => void;
defaultValue?: Date;
value?: Date;
inputRef?: React.Ref<HTMLInputElement>;
invalid?: boolean;
type?: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오! 저도 그럼 해당 부분을 적용하고 싶은데 지금으로써는 const formData = useRecoilValue(recruitInputState);만 가능한거죠??!

@kimsuyeon0916
Copy link
Contributor

이 부분은 조금 더 세밀하게 작업이 필요한데 450는 제가 임의로 정한 것이고, 431인 콘솔창에서 제공하는 디바이스 환경을 확인해보니 가장 가로폭이 큰 휴대폰을 431로 잡고 진행했었습니다.

아하! 이해했습니다! 근데 왜 430이 아닌 431로 1을 더하신건지 궁금합니다! 혹시 이부분도 별도의 이유가 있나용?!

@prgmr99
Copy link
Member Author

prgmr99 commented Jun 28, 2024

이 부분은 조금 더 세밀하게 작업이 필요한데 450는 제가 임의로 정한 것이고, 431인 콘솔창에서 제공하는 디바이스 환경을 확인해보니 가장 가로폭이 큰 휴대폰을 431로 잡고 진행했었습니다.

아하! 이해했습니다! 근데 왜 430이 아닌 431로 1을 더하신건지 궁금합니다! 혹시 이부분도 별도의 이유가 있나용?!

제 착각이었는지 기억이 나지 않는데, 딱 430으로 맞추니까 안 되었던거 같아서? 그런거 같습니다..!

@prgmr99 prgmr99 merged commit dfd32a6 into release-1.0 Jun 28, 2024
@prgmr99 prgmr99 deleted the feature/#201_reactive_UI branch October 24, 2024 07:39
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Priority: Critical 우선순위: 긴급 Status: Review Needed 상태: 리뷰 대기중인 상태 Type: Feature 유형: 기능 추가 Type: Improvement 유형: 기능 개선
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: 해상도에 맞는 반응형 구현
2 participants