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

[wuzoo]

✨ 구현 기능 명세

• 각 섹션(메인 버튼, 파트별 소개, 최신 소식) 컴포넌트 분리하여 퍼블리싱
• LivedButton (실제 공식 홈페이지에 반영된 버튼) 퍼블리싱
• ImageInput 컴포넌트 퍼블리싱
• 최신 소식 삭제 모달 / 최신 소식 추가 모달 퍼블리싱

2024-10-24.3.37.00.mov

✅ PR Point

📍 진행 사항

먼저 퍼블리싱만 우선적으로 진행하였습니다. 필요한 상태는 선언만 해놓고, 또한 각 모달들은 모달을 트리거하는 버튼이 눌렸을 때 열리고 "취소"를 눌렀을 때 닫히도록만 일단 연결해두었습니다 !

추후 로직 연결할 때 zod + react hook form 연결하겠습니다.

📍 mds TextArea

먼저 mds를 최신 버전으로 버전업하였습니다. 왜냐하면 TextArea를 사용해야하는데, 기존에 사용하고 있던 2.0.0 버전에서는 maxLength prop을 넘기지 않았을 때 밑에 0/ 으로만 띄워지더라구요. 현재 홈 페이지의 파트별 소개 textarea는 아예 인풋 value 길이를 count 하는 부분이 없어야 하는데, 이게 mds latest 버전에 반영이 된 상태였습니다. 따라서 mds 버전을 업그레이드 해주었습니다.

📍 Image Input

mds에 파일 인풋이 없어서 ImageInput은 직접 구현하였습니다. style component를 제외한 구조는 다음과 같습니다.

<div>
      <p aria-labelledby={label}>
        {label}
        <span>*</span> // required 시 표시되는 별 모양
      </p>
      <p>{description}</p>

      <label htmlFor={label}>
        <IconImagePlus color={colors.white} />
      </label>
      <input type="file" accept="image/*" id={label} />
</div>

먼저 type=file의 인풋 클릭을 어떻게 트리거할 것이냐에 대해 고민을 했습니다. 왜냐면 라벨의 htmlFor와 인풋의 id를 활용하면 쉽게 구현이 가능한데, 문제는 위에 "이미지"라고 표시될 또 하나의 인풋에 대한 라벨이 존재했기 때문입니다. ( 하나의 Input에 대해서는 하나의 Label이 권장됨 )

따라서 "이미지"라는 텍스트를 label 요소로 하되, 클릭될 이미지 영역인 위 코드에서의 label을 그냥 div로 하고 인풋에 ref를 연결해주어 프로그래밍적으로 트리거할 지, 아니면 기초적으로 label + input으로 트리거할 지에 대해 고민했습니다.

최종 결정은 "이미지" 텍스트로 표현되는 이 라벨은 p태그를 활용하되 aria를 활용하여 스크린 리더에게 "id={label}인 인풋을 설명해주는 요소이다" 라는 정도만 알려주는 식으로 구현하였습니다.
그리고 실제 label과 input은 htmlFor, id로 구현하여 라벨을 클릭했을 시 쉽게 파일 업로드 창이 뜨도록 하였습니다 ! 이 부분에서 더 나은 방향이 있다면 피드백해주시면 감사하겠습니다.

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[jungwoo3490]

@Brokyeom @suwonthugger @sohee-K

알림 Modal 개발할때도 느낀거지만 file input이나 image input도 디자인 시스템 레벨에서 지원한다면 좋을 것 같다는 생각이 드네요!!
추후에 여러 프로덕트에서 사용될 여지가 많은 것 같아요.

[eonseok-jeon]

고생하셨어요~
최신 소식 삭제 버튼 등에서 cursor pointer 처리 안 되던데 수정 부탁드려용~

mds에 파일 인풋이 없어서 ImageInput은 직접 구현하였습니다.

저는 이거 react-dropzone 이용해서 구현했는데 나중에 쓸람쓸~

[Brokyeom]

알림 Modal 개발할때도 느낀거지만 file input이나 image input도 디자인 시스템 레벨에서 지원한다면 좋을 것 같다는 생각이 드네요!!
추후에 여러 프로덕트에서 사용될 여지가 많은 것 같아요.

이거는 시스템 레벨에서 추가하는게 좋아보입니다. tds에서도 FileUploader, DropZone 컴포넌트가 존재했어요!

[lydiacho]

고생하셨습니다 해당 페이지에 자잘한 작업거리들이 엄청 많네요 😭🥲😭🥲😭🥲

코멘트 한번 확인해주시고
그 공통으로 빼야하는 부분들이 저희 작업물들 전반적으로 좀 많은데,
이부분 지금 빼주거나, 좀 비효율적이다 싶으면 그냥 일단 머지 후에 나중에 따로 이슈파서 겹치는 스타일/컴포넌트들 다 공통으로 바꿔주는 작업 해도 될 것 같어요

[lydiacho]

이거 언석오빠가 만든 react-dropzone 컴포넌트 참고해서 둘중 어떤거 사용할지, 혹은 어떻게 혼합할지 정하면 좋을 것 같아요! 완전 똑같이 생긴 친구들이니!
그래서 정하고 나서 변경사항 필요하면 그거 머지 전에 반영하면 좋을듯 합니당

[wuzoo]

네 한 번 논의해보고 논의 내용 토대로 반영하겠습니다.

[lydiacho]

언석오빠가 앞서 만들어준 드래그드랍 가능한 이미지 컴포넌트 작업 PR 머지해줘서요!
해당 작업 풀받아서 적용시키고 머지하시면 될 것 같아용

[cloudflare-workers-and-pages]

Deploying sopt-admin with    Cloudflare Pages

Latest commit:	df4f640
Status:	✅  Deploy successful!
Preview URL:	https://a7caf396.sopt-admin.pages.dev
Branch Preview URL:	https://feature-org-admin-home-1.sopt-admin.pages.dev

View logs