[Feat/#482] 반응형 헤더 구현 #486

moondda · 2024-12-04T13:38:23Z

✨ 해당 이슈 번호 ✨

closed #482

todo

반응형 헤더 작업

📌 내가 알게 된 부분

에디터 헤더는 서진언니가 했다고 해서 그거 뺴고 3개 했고,

사이드바는 로그인/비로그인 상태 나눠서 2개입니다.
헤더 + 사이드바 영역 바깥 클릭하면 useOutsideClick 이용해서 닫히게 구현했어요

데탑 뷰 내 글 모임, 로그인/로그아웃, 글모임 만들기 버튼들이
모바일 뷰에선 사이드바 내로 이동하게 되어서 파일이 아예 달라요.
그래서 공통 버튼으로 빼고, basicCSS 활용해서 HeaderButton으로 분리해뒀습니다.
버튼은 패딩이 일정치 않아서 최소패딩만 통일시키고 width:100%로 잡아서 사이즈 조정했슴니다

📌 질문할 부분

📌스크린샷(선택)

로그인했을 때 헤더

Screen.Recording.2024-12-04.at.10.51.24.PM.mov

로그아웃 헤더

Screen.Recording.2024-12-04.at.10.52.28.PM.mov

관리자페이지 헤더

Screen.Recording.2024-12-04.at.10.53.26.PM.mov

vercel · 2024-12-04T13:38:29Z

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 17, 2024 10:02am

eastlaw80 · 2024-12-05T06:49:14Z

LGTM^__^

namdaeun

헤더 구현 고생하셨습니다 !! 잘 사용해볼게유 ✨👍🏻

namdaeun · 2024-12-05T08:52:41Z

src/components/commons/Header.tsx

@@ -119,11 +186,66 @@ export const DefaultHeader = () => {
  const { navigateToHome } = useNavigateHome();
  return (
    <HeaderWrapper>
-      <HeaderLogoIcon onClick={navigateToHome} />
+      <HeaderLogoIcon onClick={navigateToHome}></HeaderLogoIcon>


P3) self closing에서 변경해준 이유가 궁금해요 !

오호 이것저것 수정하다가 vscode에서 자동으로 바꾼거 같아요 다시 바꾸겠습니다!

namdaeun · 2024-12-05T09:00:04Z

src/components/commons/Header.tsx

+    padding-right: 2rem;
+    padding-left: 2rem;


P2) padding: 0 2rem 으로 작성해줄 수 있을 것 같슴다 !

namdaeun · 2024-12-05T09:03:47Z

src/pages/groupFeed/components/MyMobileSidebar.tsx

P3) MobileSidebar는 어떠신가요 ?

namdaeun · 2024-12-05T09:04:19Z

src/pages/groupFeed/components/MyMobileSidebar.tsx

+  onClose,
+  groupCount,
+  groupData,
+}: {
+  onClose: () => void;
+  groupCount: number;
+  groupData: Moim[] | [];


P3) 전달받는 props가 3개인 만큼 인터페이스로 분리해서 작성해주면 가독성이 높아질 것 같습니다 !

namdaeun · 2024-12-05T09:07:51Z

src/pages/groupFeed/components/MyMobileSidebar.tsx

+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const { navigateToLogin } = useNavigateLoginWithPath();
+
+  useClickOutside(sidebarRef, () => {
+    //헤더 이외부분 클릭시 닫히게
+    if (sidebarRef.current) onClose();
+  });


P2) sidebarRef가 리턴하는 DOM 요소에 지정되어 있지 않아서 해당 코드가 동작하지 않을 것 같은데, 한 번 확인 부탁드릴게요!

ref를 dom요소에 지정해주면 Background로 감싸주지 않아도 괜찮을 것 같아요

어머 그러게요..? 퇴근하고나서 하다보니 뇌가 굳었었나

namdaeun · 2024-12-05T09:09:53Z

src/pages/groupJoinCongrats/GroupJoinCongrats.tsx

+          <Spacing marginBottom="4.8" />
+          <picture>
+            <source srcSet={groupJoinCongratsWebp} />
+            <img src={groupJoinCongratsIlust} />


P3) alt 속성을 통해 어떤 이미지인지에 대한 설명을 덧붙이면 좋을 것 같습니다 :)

moondda · 2024-12-06T01:34:44Z

@namdaeun 당니 코드 반영 완료~!

se0jinYoon

lgtm 코멘트 몇ㄱㅐ만 확인해주세영

se0jinYoon · 2024-12-06T08:12:33Z

src/components/commons/Header.tsx

+    if (data?.data?.moims) setMoims(data?.data.moims);
+  }, [data?.data?.moims]);


p2) 이거 데이터 타고 타고 들어가서 사용하는 것 보다 쿼리에서 받아올 때 moims만 받아오는 건 어떤가요

se0jinYoon · 2024-12-06T08:13:26Z

src/components/commons/HeaderButton.tsx

+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+const basicCSS = css`


p5)굿이여요

se0jinYoon · 2024-12-06T08:15:34Z

src/components/commons/MyMobileSidebar.tsx

+  height: 2px;
+  margin: 0.4rem 0;
+
+  background-color: #eaeaea;


p1) 얘는 디자인시스템이 없던가요?

se0jinYoon · 2024-12-06T08:15:46Z

src/components/commons/MyMobileSidebar.tsx

+  height: 100vh;
+  padding: 1.2rem 1.6rem;
+
+  background-color: white;


p1) 이것두 theme으로~!

se0jinYoon · 2024-12-06T08:17:50Z

src/pages/createGroup/CreateGroup.tsx

+      <CreateGroupWrapper>
+        {currentPage === 'GroupInfoPage' && (
+          <CreateGroupInfo
+            setCurrentPage={setCurrentPage}
+            groupName={groupName}
+            setGroupName={setGroupName}
+            groupInfo={groupInfo}
+            setGroupInfo={setGroupInfo}
+            isPublic={isPublic}
+            setIsPublic={setIsPublic}
+            topic={topic}
+            topicTag={topicTag}
+            topicDesc={topicDesc}
+            setTopic={setTopic}
+            setTopicTag={setTopicTag}
+            setTopicDesc={setTopicDesc}
+            groupImageView={groupImageView}
+            setGroupImageView={setGroupImageView}
+            setImageFile={setImageFile}
+          />
+        )}
+        {currentPage === 'GroupLeaderInfoPage' && (
+          <CreateGroupLeaderInfo
+            leaderPenName={leaderPenName}
+            setLeaderPenName={setLeaderPenName}
+            leaderDesc={leaderDesc}
+            setIsGroupLeaderValid={setIsGroupLeaderValid}
+            setLeaderDesc={setLeaderDesc}
+            isGroupLeaderValid={isGroupLeaderValid}
+          />
+        )}
+        {currentPage === 'GroupLeaderInfoPage' && (
+          <BtnWrapper>
+            <CreateGroupBtn type="button" onClick={handleShowModal}>
+              생성하기
+            </CreateGroupBtn>
+            <BackPageBtn type="button" onClick={handleBackBtn}>
+              뒤로가기
+            </BackPageBtn>
+          </BtnWrapper>
+        )}


p2) 여기 다 groupLeaderInfoPage일 때 렌더링하는 거면 한 번에 묶어서 해도 되지 않아요?

글게유..? 이유가 있나요? 바꿔도되는지..~ @ljh0608

오 그런것 같네요 이 PR에서 수정 해주실 수 있나요??

moondda · 2024-12-06T08:32:34Z

@se0jinYoon 서진언니 코리반영 완료

ljh0608

고생하셨습니다~

ljh0608 · 2024-12-06T17:35:02Z

src/pages/createGroup/CreateGroup.tsx

+      <CreateGroupWrapper>
+        {currentPage === 'GroupInfoPage' && (
+          <CreateGroupInfo
+            setCurrentPage={setCurrentPage}
+            groupName={groupName}
+            setGroupName={setGroupName}
+            groupInfo={groupInfo}
+            setGroupInfo={setGroupInfo}
+            isPublic={isPublic}
+            setIsPublic={setIsPublic}
+            topic={topic}
+            topicTag={topicTag}
+            topicDesc={topicDesc}
+            setTopic={setTopic}
+            setTopicTag={setTopicTag}
+            setTopicDesc={setTopicDesc}
+            groupImageView={groupImageView}
+            setGroupImageView={setGroupImageView}
+            setImageFile={setImageFile}
+          />
+        )}
+        {currentPage === 'GroupLeaderInfoPage' && (
+          <CreateGroupLeaderInfo
+            leaderPenName={leaderPenName}
+            setLeaderPenName={setLeaderPenName}
+            leaderDesc={leaderDesc}
+            setIsGroupLeaderValid={setIsGroupLeaderValid}
+            setLeaderDesc={setLeaderDesc}
+            isGroupLeaderValid={isGroupLeaderValid}
+          />
+        )}
+        {currentPage === 'GroupLeaderInfoPage' && (
+          <BtnWrapper>
+            <CreateGroupBtn type="button" onClick={handleShowModal}>
+              생성하기
+            </CreateGroupBtn>
+            <BackPageBtn type="button" onClick={handleBackBtn}>
+              뒤로가기
+            </BackPageBtn>
+          </BtnWrapper>
+        )}


오 그런것 같네요 이 PR에서 수정 해주실 수 있나요??

ljh0608 · 2024-12-06T17:36:10Z

src/pages/groupFeed/hooks/queries.ts

@@ -119,7 +119,9 @@ export const useFetchHeaderGroup = () => {
    queryFn: () => fetchHeaderGroup(),
    retry: 3,
  });
-  return { data };
+
+  const moimsData = data?.data.moims;


p3) 저번에 비동기 데이터 받아올 때 옵셔널체이닝 모든 상위 객체에 걸어주지 않아서 에러가 발생했던 걸로 기억하는데

data?.data?.moims

로 사용하는거 어떨까요?

ljh0608 · 2024-12-06T17:37:10Z

src/pages/groupInvite/GroupInvite.tsx

+    if (moimsData && moimsData?.length >= 5) {
      handleShowModal();
    }
-  }, [data?.data.moims.length]);
+  }, [moimsData?.length]);


p5) 깔끔하네요! 좋습니다~

moondda added 15 commits December 1, 2024 17:10

chore/#482 : 모바일용 마일 로고 import

3e925c1

feat/#482 : 로그아웃된 경우 모바일 헤더

9e8e435

feat/#482 : 로고만 있는 헤더(GroupInvite,congrats)

fc72717

chore/#482 : 모바일 로고를 기존 로고 사이즈 조절해서 사용하는 것으로 변경

a9493d5

feat/#482 : 관리자페이지 헤더

0a40f6b

feat/#482 : 모바일 버튼용 공통 컴포넌트

6e3bcca

chore/#482 : 필요한 공통 버튼 export

bf05172

feat/#482 : useOutsideClick 적용

73dddeb

fix/#482 : 사이드바 mobile 환경에서만 보이게 이동

96eddcf

feat/#482 : 로그인/비로그인 사이드헤더 분기

460d773

feat/#482 : 헤더버튼 공통css 빼서 정리

0640f41

chore/#482 : import build error

83ecadd

Feat/#482 : 내 글모임 list

7f80b2b

feat/#482 : 햄버거바 클릭시 사이드바

b45d7f4

Feat/#482 : 초대 링크 복사

1d31398

moondda self-assigned this Dec 4, 2024

moondda added ✨ Feature 새로운 기능 추가 (새로운 구현) 다현 labels Dec 4, 2024

github-actions bot added the size/l size/l label Dec 4, 2024

moondda requested review from se0jinYoon, ljh0608 and namdaeun December 4, 2024 13:56

namdaeun approved these changes Dec 5, 2024

View reviewed changes

moondda added 2 commits December 6, 2024 10:35

fix/#482/다은이 코리 반영

c53f2a8

chore/#482 : delete stat.html

4fb9fc2

vercel bot deployed to Preview December 6, 2024 01:36 View deployment

se0jinYoon approved these changes Dec 6, 2024

View reviewed changes

moondda added 3 commits December 6, 2024 17:27

fix/#482 : 서진언니 코리 반영

5561560

chore/#482 : delete stats.html

e2038e4

chore/#482 : stat html gitignore

ead1158

vercel bot had a problem deploying to Preview December 6, 2024 08:29 Failure

feat/#482 : groupInvite 에서 받아오는 값 수정

804df4a

vercel bot deployed to Preview December 6, 2024 08:31 View deployment

ljh0608 approved these changes Dec 6, 2024

View reviewed changes

moondda added 2 commits December 17, 2024 18:52

fix/#492: groupLeaderInfoPage 렌더링 1번으로 변경

0d7e7f8

fix/#492 : 옵셔널 체이닝

6ee146d

vercel bot deployed to Preview December 17, 2024 09:54 View deployment

moondda added 2 commits December 17, 2024 19:00

Merge branch 'develop' into feat/#482/responsiveHeader

b36424d

fix/#482 : 관리자페이지 conflict

ea8f2b3

vercel bot deployed to Preview December 17, 2024 10:02 View deployment

moondda merged commit 6044156 into develop Dec 17, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat/#482] 반응형 헤더 구현 #486

[Feat/#482] 반응형 헤더 구현 #486

moondda commented Dec 4, 2024 •

edited

Loading

vercel bot commented Dec 4, 2024 •

edited

Loading

eastlaw80 commented Dec 5, 2024

namdaeun left a comment

namdaeun Dec 5, 2024

moondda Dec 6, 2024

namdaeun Dec 5, 2024

namdaeun Dec 5, 2024

namdaeun Dec 5, 2024

namdaeun Dec 5, 2024

moondda Dec 6, 2024

namdaeun Dec 5, 2024

moondda commented Dec 6, 2024

se0jinYoon left a comment

se0jinYoon Dec 6, 2024

se0jinYoon Dec 6, 2024

se0jinYoon Dec 6, 2024

se0jinYoon Dec 6, 2024

se0jinYoon Dec 6, 2024

moondda Dec 6, 2024 •

edited

Loading

ljh0608 Dec 6, 2024

moondda commented Dec 6, 2024

ljh0608 left a comment

ljh0608 Dec 6, 2024

ljh0608 Dec 6, 2024

ljh0608 Dec 6, 2024

		if (data?.data?.moims) setMoims(data?.data.moims);
		}, [data?.data?.moims]);

[Feat/#482] 반응형 헤더 구현 #486

[Feat/#482] 반응형 헤더 구현 #486

Conversation

moondda commented Dec 4, 2024 • edited Loading

✨ 해당 이슈 번호 ✨

todo

📌 내가 알게 된 부분

📌 질문할 부분

📌스크린샷(선택)

vercel bot commented Dec 4, 2024 • edited Loading

eastlaw80 commented Dec 5, 2024

namdaeun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moondda commented Dec 6, 2024

se0jinYoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moondda Dec 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moondda commented Dec 6, 2024

ljh0608 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moondda commented Dec 4, 2024 •

edited

Loading

vercel bot commented Dec 4, 2024 •

edited

Loading

moondda Dec 6, 2024 •

edited

Loading