[Feat/#473] admin 글감 반응형 구현

[namdaeun]

✨ 해당 이슈 번호 ✨

closed #473

todo

• 관리자 페이지 - 글감 반응형 구현
• 글감 input 모달 공통 컴포넌트로 분리

📌 내가 알게 된 부분

글감 수정/생성시 쓰이는 모달을 InputModal이라는 공통 컴포넌트로 분리했습니다. (다른 모달과 비교했을 때 인풋이 있는 게 가장 눈에 띄는 차이점인 것 같아서 이렇게 명명했는데, 다른 의견있으면 환영이에요!)

  topicPlaceholder?: string;
  tagPlaceholder?: string;
  descPlaceholder?: string;

• 현재 인풋 모달 뷰에서 큰 variant가 없어서 placeholder를 prop으로 받게끔만 수정했습니다.

전체적으로 데탑 뷰에만 필요한 컴포넌트들은 Responsive를 사용해서 배치해주었으며, 전체적으로 데탑에서 고정되어있는 width값들은 media query를 사용해서 모웹 뷰 크기일 때 따로 width를 지정해주는 식으로 구현했습니다.

MobileNav에 isClicked라는 Prop을 추가해서 Record 타입을 사용하여 Menu의 타입들 ('글감 설정', '멤버 관리', '모임 정보 수정')에 대해 isClicked라는 boolean 값을 가지도록 작성했습니다.

interface MobileNavPropTypes {
  isClicked: Record<Menu, boolean>;
  handleMenuItem: (menu: Menu) => void;
}

또한 각각의 메뉴가 선택되었는지에 대한 상태를 관리해주는 useMenu라는 커스텀 훅을 작성해서 데탑 nav와 모바일 nav에서 사용해주는 식으로 수정해주었습니다.

📌 질문할 부분

• 뷰 줄어들 때 글감 생성(+) 버튼 쭈르륵 움직이는 거 거슬리나요 ? 고정 시키는 게 좋을런가요

요건 후에 회의때 여쭤볼 사항이긴 하지만, 태블릿 뷰와 모바일 뷰에 차이가 있는 부분이 있었습니다.
표 상에서 글감 제목 영역이 달라지는 이슈가 있어서 일단은 모바일 뷰로 통일해놓은 상황입니다
요것도 브포를 하나 더 추가하는 게 나을 수 있겠네요

📌스크린샷(선택)

2024-12-03.1.29.33.mov

2024-12-03.1.31.22.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 3, 2024 1:24pm

[eastlaw80]

1. 영상 확인했는데, 데탑 뷰에서도 모바일처럼 너비 줄어들때 +버튼은 위치 고정되서 따라오는게 나을거 같네요! 뭔가 +버튼 혼자 움직임이 좀 눈에 띄네요

2. 태블릿뷰와 모바일뷰 차이 있는 부분 혹시 여유 되시면 스윗에 정리해서 남겨주세요! 그러면 뭔가 회의때 솔루션을 가져오기도 편할 것 같습니다. 다현이도 그때 문의 있어서 스윗에 남겨준 부분 수정하려고 보니깐 생각보다 조금 고민이 필요하더라구요,,,미리 남겨주시면 회의때까지 고민해오겠습니다.

3. 반응형이라 PR 내용 남길게 별로 없을 줄 알았는데, 이렇게 관련 내용 깔끔하게 정리해주니깐 개발자가 아닌데도 무엇을 어디까지 만든건지 보기 좋네요ㅎㅎ 새벽에 PR 메일 날라와있길래 궁금해서 들어왔는데 재밌게 봤습니다:) 앞으로도 종종 볼게유

[ljh0608]

고생 많으셨습니다! + 버튼은 움직이지 않는게 사용자 경험에 더 좋을 것 같아요!
몇가지 의견이랑 요청드릴것이 있는데

1. 850뷰, 375뷰 모두 오른쪽에 padding이 2rem들어간 상태로 고정되어있으니 이렇게 고정해주시면 될 것 같습니다
   

2. 아래 이미지에 오른쪽 패딩이 사라졌습니다! padding을 유지시켜주세요!
   

3. 추가로 모달 움직이는 부분에 대해서는 오늘 회의 때 논의해봐야할 것 같아요!

1,2 번 수정하신 후 3번 회의 결과에 따라 반영부탁드리고 특이사항없으면 머지해주세요~

[ljh0608]

[p4] 요건 뭔가요?

[namdaeun]

빌드할 때 데이터 셋이 어떻게 분리되어있는지 보여주는 파일이 생기는데, 해당 파일의 용량이 크기도 하고 빌드할 때마다 생겨서 gitignore에 추가해줬습니다!

[namdaeun]

1. 영상 확인했는데, 데탑 뷰에서도 모바일처럼 너비 줄어들때 +버튼은 위치 고정되서 따라오는게 나을거 같네요! 뭔가 +버튼 혼자 움직임이 좀 눈에 띄네요
2. 태블릿뷰와 모바일뷰 차이 있는 부분 혹시 여유 되시면 스윗에 정리해서 남겨주세요! 그러면 뭔가 회의때 솔루션을 가져오기도 편할 것 같습니다. 다현이도 그때 문의 있어서 스윗에 남겨준 부분 수정하려고 보니깐 생각보다 조금 고민이 필요하더라구요,,,미리 남겨주시면 회의때까지 고민해오겠습니다.
3. 반응형이라 PR 내용 남길게 별로 없을 줄 알았는데, 이렇게 관련 내용 깔끔하게 정리해주니깐 개발자가 아닌데도 무엇을 어디까지 만든건지 보기 좋네요ㅎㅎ 새벽에 PR 메일 날라와있길래 궁금해서 들어왔는데 재밌게 봤습니다:) 앞으로도 종종 볼게유

코멘트 감사합니다 :)

[namdaeun]

고생 많으셨습니다! + 버튼은 움직이지 않는게 사용자 경험에 더 좋을 것 같아요! 몇가지 의견이랑 요청드릴것이 있는데

1. 850뷰, 375뷰 모두 오른쪽에 padding이 2rem들어간 상태로 고정되어있으니 이렇게 고정해주시면 될 것 같습니다
   
2. 아래 이미지에 오른쪽 패딩이 사라졌습니다! padding을 유지시켜주세요!
   
3. 추가로 모달 움직이는 부분에 대해서는 오늘 회의 때 논의해봐야할 것 같아요!

1,2 번 수정하신 후 3번 회의 결과에 따라 반영부탁드리고 특이사항없으면 머지해주세요~

패딩 반영했구 버튼도 반영했슴니다! 꼼꼼하게 봐주셔서 감사함다 ~

[moondda]

당니 수고햇서~!

[se0jinYoon]

lgtm 고생햇서요~

[se0jinYoon]

p5) 옹 구우웃