[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450

gxxrxn · 2023-11-25T20:09:10Z

구현 내용

Avatar

기본 아바타 아이콘 디자인이 어색해보여 수정했어요.
Avatar 컴포넌트의 fallback 이미지를 설정했어요.
- 올바르지 않은 이미지 링크가 응답으로 와서 (아마 해당 사용자가 카카오톡 프로필사진을 바꿔서 그런 것 같아요..) 이미지가 깨지는 경우, fallback 이미지가 렌더링돼요!

Loading 컴포넌트 구현

모임 상세페이지를 작업하면서 적절한 로딩 컴포넌트가 있으면 좋겠다고 생각해서 구현해봤어요. 자유롭게 의견 남겨주세요! 😀 (스토리북으로 확인해주세요!)

스켈레톤 UI 구현

모임 상세페이지에 스켈레톤 UI를 적용했어요! 피드백 남겨주세요! 🫢

Suspense 적용

모임 상세페이지에서 사용되는 Query들에 모두 Suspense 옵션을 적용했어요.
Suspense 옵션을 적용하고 Suspense를 감싸지 않으면 무한으로 refetch 되는 이슈가 있어요. 그래서 최상위에 Suspense를 적용하기 위해 app 디렉토리 최상위 루트에 loading.tsx 를 추가했어요. 관련 Tanstack-Query 이슈
모임 상세 정보 조회 API는 사용자 인증이 필요하지 않은 API 예요. 그런데 로그인 상태에 따라 isMember, isOwner 등 응답의 일부가 일치하지 않아 서버에서 렌더링하는 과정에서 하이드레이션 오류가 발생했어요. 그래서 CSR 환경에서만 Suspense가 동작할 수 있도록 하는 SSRSafeSusepnse라는 Custom Suspense를 만들어 적용해봤어요.

모임 상세페이지 TopNavigation 컴포넌트 분리

BookGroupNavigation 이름으로 합성 컴포넌트를 만들었어요.
처음에는 뒤로가기 버튼 등 기본적인 레이아웃은 빠르게 렌더링될 수 있도록 SSR로, 책 제목 부분에는 스켈레톤을 적용하고 싶어서 페이지단으로 끌어올린 후 Suspense를 적용했었어요. 이후 groupId를 공유하기 위해 합성 컴포넌트를 만드는 과정에서 Title이 Suspense로 인해 직접적인 자식이 아니게 되면서 groupId를 context에서 가져오지 못하는 상황이 발생했습니다..
뭔가를 더 하기엔 너무 멀리온 것 같고.. 이 부분은 사용자 경험을 높이기 위한 작업이니 나중에 더 고민해보고 리팩토링해보겠습니다!

// Suspense 적용 잘됨!
<BookGroupNavigation groupId={groupId}>
  <Suspense fallback={<TitleSkeleton />}>
    <PageTitle groupId={groupId} />
  </Suspense>
</BookGroupNavigation>

// Title 컴포넌트가 렌더링되지 않음..
<BookGroupNavigation groupId={groupId}>
  <Suspense fallback={<TitleSkeleton />}>
    <BookGroupNavigation.Title />
  </Suspense>
</BookGroupNavigation>

myProfileQuery

useMyProfileQuery의 staleTime을 Infinity로 설정했어요.

Avatar, BookCover next/image 경고 해결

Avatar, BookCover 컴포넌트에서 fill과 sizes 속성을 함께 사용하지 않아 퍼포먼스 관련 워닝이 노출됐었는데, width, height를 정확히 prop으로 전달하는 방식으로 수정해서 해결했어요.

공유할 내용

📣 env 환경 변수를 업데이트 해주세요!

Suspense를 적용하면서 아래 에러 메세지를 만났어요. node 환경에서 http 요청을 보낼 때 host 정보가 명확하지 않으면 발생할 수 있는 에러라고 이해했어요. 그래서 axios에 baseUrl을 설정해서 해결했어요! production 환경에도 적용 부탁드립니다 민종님..🙏🏻 @minjongbaek

[ local ]
NEXT_HOST=http://local.dev.dadok.site:3000

[ production ]
NEXT_HOST=https://dev.dadok.site

PR 포인트

모임 상세 페이지를 구현하면서 발생하는 이슈들을 한번에 수정하다보니 file changed가 많아졌어요.. 죄송해요..🥹 다음부턴 우선순위를 고려해서 적절히 이슈 분할한 후 작업해보겠습니다..🙇🏻‍♀️

관련 이슈

Close [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #447

- 합성 컴포넌트로 리팩토링

vercel · 2023-11-25T20:09:16Z

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

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 1, 2023 7:54pm

github-actions · 2023-11-25T20:11:15Z

🚀 Storybook: https://64aba10cd478ad51307a8997-hghowvaibb.chromatic.com/

gxxrxn · 2023-11-25T20:12:04Z

src/ui/Base/BottomActionButton.tsx

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import Button from './Button';

 type BottomActionButtonProps = Omit<
-  ComponentPropsWithoutRef<'button'>,
+  ComponentPropsWithoutRef<typeof Button>,


Base/Button 컴포넌트의 props를 사용할 수 있도록 수정했어요.

gxxrxn · 2023-11-25T20:13:45Z

src/ui/Base/BottomActionButton.tsx

@@ -11,7 +11,7 @@ const BottomActionButton = ({
  ...props
 }: BottomActionButtonProps) => {
  return (
-    <div className="fixed bottom-0 left-0 z-10 w-full bg-white px-[2.0rem] py-[1.5rem]">
+    <div className="absolute bottom-0 left-0 z-10 w-full bg-white px-[2.0rem] py-[1.5rem]">


fixed 속성을 적용하니 전체화면에 가득차서 레이아웃 영역 안에서 늘어나도록 absolute로 수정했어요.. 괜찮을까요..?

@gxxrxn 크게 문제될 부분은 없다고 생각해요~

@gxxrxn

크게 문제 될 것 같진 않아 보입니다!

minjongbaek

고생하셨어요. 코멘트 확인 부탁드려요~

minjongbaek · 2023-11-30T10:14:43Z

src/components/SSRSafeSuspense.tsx

minjongbaek · 2023-11-30T10:19:23Z

src/ui/Base/Avatar.tsx

  switch (size) {
    case 'small': {
-      return 'w-[2rem] h-[2rem]';
+      return ['w-[2rem] h-[2rem]', { width: 20, height: 20 }] as const;
    }
    case 'medium': {
-      return 'w-[3.2rem] h-[3.2rem]';
+      return ['w-[3.2rem] h-[3.2rem]', { width: 32, height: 32 }] as const;
    }
    case 'large': {
-      return 'w-[7rem] h-[7rem]';
+      return ['w-[7rem] h-[7rem]', { width: 70, height: 70 }] as const;
    }
  }


p3;
@gxxrxn object 로 반환하는 건 어떨까요? sizeClass, sizeProps key를 가진 object 로 반환하게 된다면 getAvatarSize() 함수만 봐도 어떤 데이터 타입을 반환하는지 유추하기 쉽다는 장점이 있을 것 같아요.

f41081b

코드길이와 변경사항을 최대한 줄여보고자 배열을 리턴했었어요...ㅎㅎ 🙄 민종님 말씀처럼 객체 형태로 반환하는 편이 가독성은 더 좋을 것 같아요! 감사합니다! 👍🏻

minjongbaek · 2023-12-01T05:59:10Z

src/ui/Base/Loading.tsx

+const animations = {
+  0: 'animate-dot-flash',
+  1: 'animate-dot-flash-delay-0.5',
+  2: 'animate-dot-flash-delay-1',
+} as const;


p4;
데이터 타입을 array 로 변경해서 0, 1, 2 와 같은 명확하지 않은 키를 제거할 수 있을 것 같아요.

오.. 민종님 말대로 array로 만든다면 명확하지 않은 키를 제거하면서
<LoadingDot /> 컴포넌트를 map()을 활용해 반복되는 코드를 줄일수도 있을것 같네요

@minjongbaek @hanyugeon

0, 1, 2가 배열의 인덱스와 같은 역할을 한다기보다 애니메이션의 순서를 명시하고 싶었어요. 🫠 0부터 시작하다보니 객체 형태가 무의미해보이긴 해서 타입적으로도 더 안전하게 리팩토링 해봤어요. 이런 형태는 어떨까요?

type AnimationStep = 1 | 2 | 3; type LoadingAnimations = { [key in AnimationStep]: string; }; const animations: LoadingAnimations = { 1: 'animate-dot-flash', 2: 'animate-dot-flash-delay-0.5', 3: 'animate-dot-flash-delay-1', }; const LoadingDot = ({ color, animationStep = 1, }: { color: DotScheme; animationStep?: AnimationStep; }) => ( <span className={`h-[1rem] w-[1rem] rounded-full ${schemes[color]} ${animations[animationStep]}`} ></span> );

4409cee

컴포넌트를 map()을 활용해 반복되는 코드를 줄일수도 있을것 같네요

animations 구현부는 LoadingDot 컴포넌트에서만 알고, LoadingDots에서는 step에 따라 사용만하도록 구현하고 싶었어요. 그래서 아래와 같은 코드가 최선일 것 같은데, 저는 개인적으로 현재 코드가 흐름이 더 잘 읽히는 것 같아요! step이 3개 뿐이고, 그 이상 늘어날 경우는 없을 것 같아서 이 정도의 반복은.. 괜찮을 것 같은데 어떻게 생각하시나요?! 😲

const LoadingDots = ({ color }: { color: DotScheme }) => ( <div className="flex gap-[1rem]"> {([1, 2, 3] as const).map(step => ( <LoadingDot key={step} color={color} animationStep={step} /> ))} </div> );

더 좋은 구조가 있다면 알려주세요!! 🙌🏻

0, 1, 2가 배열의 인덱스와 같은 역할을 한다기보다 애니메이션의 순서를 명시하고 싶었어요. 🫠 0부터 시작하다보니 객체 형태가 무의미해보이긴 해서 타입적으로도 더 안전하게 리팩토링 해봤어요. 이런 형태는 어떨까요?

@gxxrxn 저는 조금 다른 의견이에요 ! 배열에 순서가 애니메이션의 순서를 표현할 수 있다고 생각하고 있어요. 배열 내부에 개발자가 의도대로 요소를 잘 배치해두었다면 어차피 순서대로 애니메이션이 실행될 테니까요 !

그리고 step 이 동적으로 변경될 일이 없다면 as const 키워드로 인덱스 범위를 벗어나는 경우 타입 에러를 발생시켜 타입적으로 안전하게 구현할 수 있을 것 같아요.

작성해주신 코드도 좋아서 이대로 진행해도 괜찮을 것 같아요 👍

minjongbaek · 2023-12-01T06:01:59Z

src/v1/book/BookCover.tsx

+const getCoverSize = (size: BookCoverSize) => {
  switch (size) {
    case 'xsmall': {
-      return 'w-[6.5rem] h-[9.1rem]';
+      return ['w-[6.5rem] h-[9.1rem]', { width: 65, height: 91 }] as const;
    }
    case 'small': {
-      return 'w-[7.0rem] h-[9.8rem]';
+      return ['w-[7.0rem] h-[9.8rem]', { width: 70, height: 98 }] as const;
    }
    case 'medium': {
-      return 'w-[7.5rem] h-[10.5rem]';
+      return ['w-[7.5rem] h-[10.5rem]', { width: 75, height: 105 }] as const;
    }
    case 'large': {
-      return 'w-[9.0rem] h-[12.6rem]';
+      return ['w-[9.0rem] h-[12.6rem]', { width: 90, height: 126 }] as const;
    }
    case 'xlarge': {
-      return 'w-[11.0rem] h-[15.4rem]';
+      return ['w-[11.0rem] h-[15.4rem]', { width: 110, height: 154 }] as const;
    }
    case '2xlarge': {
-      return 'w-[18.0rem] h-[25.2rem]';
+      return ['w-[18.0rem] h-[25.2rem]', { width: 180, height: 252 }] as const;
    }
  }
 };


p3;
@gxxrxn src/ui/Base/Avatar.tsx 파일에 남긴 코멘트처럼 object 로 반환하는 건 어떨까요?

f41081b

해당 커밋에서 반영했어요! 👍🏻

minjongbaek · 2023-12-01T06:06:49Z

Suspense를 적용하면서 아래 에러 메세지를 만났어요. node 환경에서 http 요청을 보낼 때 host 정보가 명확하지 않으면 발생할 수 있는 에러라고 이해했어요. 그래서 axios에 baseUrl을 설정해서 해결했어요! production 환경에도 적용 부탁드립니다 민종님..🙏🏻

@gxxrxn 적용해두었습니다. 추가로 preview 환경에도 https://preview.dev.dadok.site 로 적용해두었어요~

hanyugeon

@gxxrxn

너무 고생하셨습니다 💯
코멘트 확인해주세요..!

hanyugeon · 2023-12-01T11:01:38Z

src/ui/Base/Loading.tsx

+export const LoadingDot = ({
+  color,
+  animationStep = 0,
+}: {


ask;

이후 확장성을 고려해서 export 해놓으신건지 궁금합니다 👀

4409cee

외부 페이지에서 테스트해보다가 제가 놓친 것 같아요! export 제거했습니다. 감사합니다! 👍🏻

hanyugeon · 2023-12-01T11:04:08Z

src/ui/Base/Loading.tsx

+const animations = {
+  0: 'animate-dot-flash',
+  1: 'animate-dot-flash-delay-0.5',
+  2: 'animate-dot-flash-delay-1',
+} as const;


오.. 민종님 말대로 array로 만든다면 명확하지 않은 키를 제거하면서
<LoadingDot /> 컴포넌트를 map()을 활용해 반복되는 코드를 줄일수도 있을것 같네요

hanyugeon · 2023-12-01T12:11:26Z

src/v1/bookGroup/BookGroupNavigation.tsx

+const BackButton = () => {
+  const router = useRouter();
+
+  return (
+    <a onClick={router.back}>
+      <IconArrowLeft />
+    </a>
+  );
+};


ask;

로그인 하지 않았을 때 뒤로가기가 정상적으로 동작하지 않아
이 부분에 문제가 있는 줄 알고 찾아봤는데 이 부분의 문제가 아니라

app/group/[groupId]/page.tsx에서 로그인하지 않아도 useMyGroupsQuery()가 항상 실행되어 그런것이였네요 😢

hanyugeon · 2023-12-01T12:29:59Z

src/v1/bookGroup/detail/CommentList.tsx

+      <p className="py-[2rem] text-center text-sm">
+        {`멤버만 볼 수 있어요 🥲`}
+      </p>


p5;

Figma에 있는 문구와는 살짝 다른데 이 문구로 그대로 가져가는걸까요 총괄 디자이너님!?

맞아요.. 모임에 가입해보세요!가 아래에 있었는데, 모임 가입기간이 지난 경우에도 모임에 가입해보라는 문구가 보이는게 어색해서 제거했어요. 디자인에도 반영해뒀습니다! 👍🏻

hanyugeon · 2023-12-01T12:34:56Z

src/v1/bookGroup/detail/CommentList.tsx

+      <p className="self-center whitespace-pre-line py-[2rem] text-center text-sm">
+        {`아직 게시글이 없어요.
+          가장 먼저 게시글을 남겨보세요!`}
+      </p>


comment;

디자인하면서 놓친 부분인데 잘 추가해주신것 같습니다 👍

hanyugeon · 2023-12-01T13:11:04Z

src/app/group/[groupId]/page.tsx

+      <SSRSafeSuspense fallback={<PageSkeleton />}>
+        <div className="flex flex-col gap-[2rem]">
+          <BookGroupInfo groupId={groupId} />
          <Heading text="게시글" />
          <CommentList groupId={groupId} />
        </div>
-      </div>
+        <JoinBookGroupButton groupId={groupId} />
+      </SSRSafeSuspense>


p2;

Figma상 디자인으로는 (독서 모임 정보, 모임 멤버, 모임 게시글) 컴포넌트들의 배경 색이 bg-white 인것같은데 누락된 것 같습니다.

-여담-
제가 Layout컴포넌트를 작업하면서 디자인적으로 놓쳤던 부분들이 많이 보이네요 😢
(Layout 컴포넌트에 bg-background 속성 누락...)

padding값의 유무도 페이지 별로 달라서...
(이 때문에 유저 책장 페이지에서 민종님이 고생하셨죠 ㅎ)

�회의를 통헤 Layout 컴포넌트 리팩터링을 고민해봐야 할 것 같기도 합니다 😢

body의 배경색이 white 색상이고, 재현님 말씀처럼 layout에 패딩이 적용되어있어서 디자인 구조처럼 구현할 수가 없었어요..🥲 더 고민해서 코드에 반영했는데, 해당 변경사항은 pr에 코멘트 다시 남길게요!

- comment divider style 제거

- 모임 상세페이지 여백 style 조정

gxxrxn · 2023-12-01T20:26:25Z

@minjongbaek @hanyugeon

변경사항

fix: BookGroupNavigation 내부에 SSRSafeSuspense 적용

BookGroupNavigation 내부에서도 Suspense Query를 사용하고 있는데, SSRSafeSuspense로 감싸지않아 WriteButton에서 하이드레이션 오류가 발생하는 것을 발견했어요. (서버/클라이언트 렌더링 위치에 따라 isMember 상태가 다름) 그래서 BookGroupNavigation 컴포넌트 내부 적절한 위치에 Suspense 적용했습니다!
TitleSkeleton도 적용했어요.

fix: 비공개 모임이지만 멤버인 경우 게시글 보이도록 수정

비공개 모임이지만 멤버인 경우에는 게시글이 보이도록 수정했어요.
Comment 사이의 Divider는 분리감을 주기위해 적용해뒀었는데, 아래 page 단에서 Divider를 구현하게 되면서 어색한 것 같아 제거했어요.

feat: w-app css class 추가

cc.
[#449] [책장] 책장 상세 페이지 #451 (review)
[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450 (comment)
모임 상세페이지에서 영역을 나누는 Divider를 구현했어요.
layout의 padding을 무시하고 app에 가득차도록 하기 위해 global.css에 아래와 같은 w-app 클래스를 추가해봤어요. 이런 형태로 사용하는건 어떨까요?! 😲
```
@layer utilities {
  .w-app {
    @apply relative -left-[2rem] w-[calc(100%+4rem)];
  }
}
```

hanyugeon

수고하셨습니다 👍

hanyugeon · 2023-12-03T10:50:29Z

src/styles/global.css

+@layer utilities {
+  .w-app {
+    @apply relative -left-[2rem] w-[calc(100%+4rem)];
+  }
+}


comment;

TailwindCSS를 쓰고 있는 현재 이런 방법을 활용한것도 굉장히 좋은것같아요 💯
궁금한점이 app의 전체 width만큼 공간을 차지해서 w-app 약어로 작명한게 맞을까요??

@gxxrxn @hanyugeon w-full-screen 같은 이름도 괜찮을 것 같아요 ..!

hanyugeon · 2023-12-03T11:22:13Z

src/v1/bookGroup/BookGroupNavigation.tsx

+const TitleSkeleton = () => (
+  <div className="h-[1.5rem] w-[40%] animate-pulse bg-black-400"></div>
+);


comment;

스켈레톤들이 예쁘게 잘 적용된 것 같습니다. 👍

이후 여유가 생기면 새로운 이슈를 통해
페이지마다 유연하게 가져다 쓸 수 있는 Base컴포넌트로 만들어봐도 좋을 것 같네요 👀

hanyugeon · 2023-12-03T12:34:38Z

src/v1/bookGroup/detail/JoinBookGroupButton.tsx

+      // TODO: 모임 가입문제 페이지 생성 후 연결
+      // router.push(`${pathname}/join`);


comment;

지금 당장 수정할 사항은 아니지만
groupId props를 활용하여 router.push(`${groupId}/join`) 와 같이 작성할 수도 있을것같아요 👀

* style: BookGroupNavigation a모임제목 말줄임 적용 * feat: 모임상세 뒤로가기 구현 * feat: Avatar fallback image 설정 * feat: Loading 컴포넌트 작성 * feat: context provider에 Suspense 추가 * fix: axios host 설정 * feat: suspens query 적용 * fix: next/image sizes 관련 경고 해결 * feat: 모임 상세 skeleton 적용 * fix: context provider에서 suspense 제거 * style: TitleSkeleton pulse animation 추가 * fix: avatar next/image 사이즈 경고 해결 * feat: 게시글 없는 경우 메세지 노출 * style: toast 가운데 정렬 * chore: groupAPI 컨벤션에 맞게 네이밍 수정 * refactor: BookGroupNavigation 컴포넌트 분리 - 합성 컴포넌트로 리팩토링 * feat: 모임 가입 버튼 구현 * fix: 비공개 모임인 경우 댓글 보이지 않게 수정 * chore: 모임 가입문제 페이지로 라우팅되지 않도록 수정 * feat: BookInfoCard 클릭 시 책 상세 페이지로 이동 * feat: book query key factory 객체 추가 * refactor: getSize 함수가 객체를 반환하도록 수정 * refactor: AnimationStep 타입 추가, LoadigDot export 제거 * fix: BookGroupNavigation 내부에 SSRSafeSuspense 적용 * fix: 비공개 모임이지만 멤버인 경우 게시글 보이도록 수정 - comment divider style 제거 * feat: w-app css class 추가 - 모임 상세페이지 여백 style 조정

This reverts commit 61ada97.

* Revert "[#634] v1 디렉토리 네이밍 수정 (#635)" This reverts commit 86c304a. * Revert "[#632] 사용하지 않는 라이브러리 제거 (#633)" This reverts commit 34b4efb. * Revert "[#627] 불필요한 utils, hooks, constants 정리 및 import문 통일 (#631)" This reverts commit 254f6bb. * Revert "[#629] tailwind config color 정리 (#630)" This reverts commit 595f476. * Revert "[#622] BottomActionButton 패딩 수정 (#626)" This reverts commit 9796dab. * Revert "[#625] Toast 컴포넌트 icon이 잘리는 문제 해결 (#628)" This reverts commit e868efc. * Revert "[#623] [도서 검색] Input 검색 아이콘 Layout Shift 해결 (#624)" This reverts commit d0392d6. * Revert "[#619] PWA 구현 (#621)" This reverts commit 587f990. * Revert "[#616] 책장 좋아요 뱃지 UI 수정 (#620)" This reverts commit 70af27a. * Revert "[#349] 메타 데이터 추가 (#617)" This reverts commit 209ba3e. * Revert "[#556] 버튼 컴포넌트 disabled style 작성 (#615)" This reverts commit 0425223. * Revert "[#610] 로그인 페이지 구현 (#614)" This reverts commit badcf8e. * Revert "[#608] 페이지 접근 권한 부여 (#611)" This reverts commit 7f1cd21. * Revert "[#612] 북카이브 페이지에서 발생하는 무한 리랜더링 버그 수정 (#613)" This reverts commit bac4ff2. * Revert "[#605] Google LightHouse CI 추가 (#606)" This reverts commit d6cccdb. * Revert "[#602] [모임 생성] 퍼널 progress bar, stepper 구현 (#607)" This reverts commit bcbdc67. * Revert "[#603] [내 프로필] ErrorBoundary 제거 (#604)" This reverts commit f044cd2. * Revert "feat: start-ssl script 작성 (#601)" This reverts commit 8de7079. * Revert "[#596] accessToken이 만료된 직후 다른 페이지 접근할 때 에러 페이지를 보여주지 않고 새로고침 (#600)" This reverts commit 59407c6. * Revert "[#592] [도서 검색] 검색 키워드 및 결과 유지 기능 구현 (#593)" This reverts commit af2413c. * Revert "[#595] Toast UI 개선 (#597)" This reverts commit 52e9992. * Revert "[#591] 3D 책 컴포넌트, 책장 페이지 개선 (#594)" This reverts commit 2beb0f2. * Revert "[#570] [도서 검색] 도서 검색 결과 렌더링 시 search 헤더 숨기고 input sticky 적용 (#589)" This reverts commit 0ff4ca0. * Revert "[#588] 폰트 디자인 시스템 적용 (#590)" This reverts commit 6a054a4. * Revert "[#557] [도서 검색] 최근 검색어 api 요청 (#587)" This reverts commit 591e9a8. * Revert "[#585] [프로필 페이지] '참여한 모임' 영역 사용자가 모임장인 모임에 마크 추가 (#586)" This reverts commit 3a3f263. * Revert "[#575] Drawer 컴포넌트 개선 (#576)" This reverts commit cff01fd. * Revert "[#581] [모임 생성] 모임 생성 퍼널 페이지 작성 (#582)" This reverts commit 55a08ee. * Revert "[#583] Switch 컴포넌트 style 수정 (#584)" This reverts commit e7798f7. * Revert "[#578] iOS 환경에서의 DatePicker UI 수정 (#579)" This reverts commit 24b42bf. * Revert "[#574] FloatingButton 버그 수정 (#577)" This reverts commit dd37ff5. * Revert "[#559] BookInfoCard 컴포넌트 수정 및 goToBookSelectStep 이벤트 추가 (#572)" This reverts commit f1c6a3c. * Revert "[#571] Drawer 컴포넌트 style 개선 (#573)" This reverts commit f21ada4. * Revert "[#561] [모임 생성] 모임 상세 퍼널 개선 (#567)" This reverts commit bbd1123. * Revert "[#552] next custom server 구동 시 hmr이 동작하지 않는 문제 해결 (#569)" This reverts commit 019abd5. * Revert "[#563] [모임 생성] 모임 가입문제 퍼널 (#568)" This reverts commit 4d6a14f. * Revert "[#564] BottomActionButton 컴포넌트 position 속성 수정 (#566)" This reverts commit 94365ee. * Revert "[#562] [모임 생성] 모임 이름 퍼널 (#565)" This reverts commit 0bd1349. * Revert "[#543] [모임 생성] 책 선택 퍼널 (#560)" This reverts commit b2f5236. * Revert "[#553] [모임 생성] 모임 상세 퍼널 (#558)" This reverts commit 31a6d84. * Revert "[#554] 스토리북 preview decorator에서 Layout 제거 (#555)" This reverts commit 495321e. * Revert "[#549] 'unable to verify first certificate' 에러 해결 (#550)" This reverts commit bdfa458. * Revert "fix: 모바일 환경에서의 스크롤 버그 수정 (#551)" This reverts commit 1d56794. * Revert "[#546] [독서모임] 모임 페이지 누락된 작업 및 버그 수정 (#547)" This reverts commit 448e8b5. * Revert "[#531] 로컬 서버에 https 적용 (#541)" This reverts commit f2f4a82. * Revert "[#540] [모임 생성] 모임 상세 퍼널 마크업 (#542)" This reverts commit 5d23ab3. * Revert "[#544] vscode react component snippet 작성 (#545)" This reverts commit 68dc181. * Revert "[#535] [독서모임] 독서모임 목록 페이지 개선 (#539)" This reverts commit 56137df. * Revert "[#505] [모임 상세] 모임 삭제 기능 구현 (#537)" This reverts commit efdb2c5. * Revert "[#530] FloatingButton 컴포넌트 적용 (#536)" This reverts commit 3671624. * Revert "[#529] redirect 페이지 개선, 토큰 업데이트 로직 개선 (#532)" This reverts commit 0867ee4. * Revert "[#523] [모임 상세] 모임 수정 페이지 (#527)" This reverts commit f889a79. * Revert "[#526] 도서 검색 페이지 개선 (#528)" This reverts commit 81b39b7. * Revert "[#524] Menu 컴포넌트 개선 (#525)" This reverts commit 52687da. * Revert "[#521] TextArea 컴포넌트 (#522)" This reverts commit a1673f6. * Revert "[#518] Input 컴포넌트 style 추가 (#519)" This reverts commit 2bd859a. * Revert "[#516] DatePicker 컴포넌트 (#520)" This reverts commit 63af14d. * Revert "[#504] [모임 상세] 모임 게시글 작성 기능 구현 (#517)" This reverts commit e6f8d87. * Revert "[#509] [레이아웃] BottomNavigation 버그 및 UI 수정 (#510)" This reverts commit ada909a. * Revert "feat: 모임 게시글 수정, 삭제 기능 구현 (#513)" This reverts commit 36c1e71. * Revert "[#507] [프로필] 로그아웃 햄버거 구현 (#508)" This reverts commit 90c5855. * Revert "feat: hosts 파일을 수정할 수 있는 updateDevHost script 작성 (#511)" This reverts commit cd297e9. * Revert "[#497] [책 상세] 책 상세 페이지 api 연결 (#500)" This reverts commit 7842028. * Revert "[#498] useFunnel 작성 (#501)" This reverts commit e6f7878. * Revert "[#489] [도서 검색] 도서검색 페이지 개선 작업 (#490)" This reverts commit 0043fe7. * Revert "[#491] [도서 검색] 베스트셀러 클릭 시 라우팅 경로 수정 (알라딘 -> 다독다독) (#492)" This reverts commit e68d1d3. * Revert "[#493] 에러 페이지 (#494)" This reverts commit e95c940. * Revert "[#495] [책 상세] 책 상세 페이지 마크업 (#496)" This reverts commit 052e6d4. * Revert "[#474] 리프레시 토큰이 만료된 경우 에러 페이지로 넘어가는 이슈 수정 (#483)" This reverts commit 633da9f. * Revert "[#486] [책 상세 / 모임 상세] 코멘트 목록 컴포넌트 (#487)" This reverts commit f452642. * Revert "[#443] TopNavigation 컴포넌트 스타일 fixed 적용 (#488)" This reverts commit 60d3311. * Revert "[#468] [검색] 검색 페이지 작성 (#478)" This reverts commit 313d61a. * Revert "[#481] [책 상세] 책 정보 컴포넌트 (#482)" This reverts commit 03fa16e. * Revert "[#442] 스켈레톤 컴포넌트 작성 (#480)" This reverts commit 22b06a2. * Revert "[#453] [모임] 모임 목록 페이지 개선 (#475)" This reverts commit c6b1ab1. * Revert "typo: 오타 수정 (#485)" This reverts commit 395e050. * Revert "[#476] [모임 상세] 비로그인 시 모임 참여하기 버튼 비활성화 (#479)" This reverts commit a2e628d. * Revert "[#472] Drawer 컴포넌트 (#477)" This reverts commit 5e54b72. * Revert "[#470] Menu 컴포넌트 (#471)" This reverts commit 0a4705d. * Revert "[#465] [모임] BookInfoCard 컴포넌트 추상화 (#466)" This reverts commit 81bc6d8. * Revert "[#467] 내가 가입한 모임 상세 페이지 (#469)" This reverts commit 75070ce. * Revert "[#463] Loading 컴포넌트 animation 버그 해결 (#464)" This reverts commit 8219f67. * Revert "[#456] [프로필] 프로필 페이지 (#461)" This reverts commit 150592c. * Revert "[#455] [모임 상세] 모임 가입 문제 페이지 (#462)" This reverts commit 7bbdbaf. * Revert "[#459] [유저 로그인] 로그인 BottomSheet 컴포넌트 작성 (#460)" This reverts commit da3fb33. * Revert "[#457] LikeButton 컴포넌트 (#458)" This reverts commit 9d1a5c7. * Revert "베이스 컴포넌트 위치 변경 (#454)" This reverts commit fd8ad31. * Revert "[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 (#450)" This reverts commit 61ada97. * Revert "[#449] [책장] 책장 상세 페이지 (#451)" This reverts commit 1f389e4. * Revert "[#445] Layout 컴포넌트에서 TopHeader 컴포넌트 분리 (#452)" This reverts commit 9d11c70. * Revert "[#415] [프로필] 프로필 생성 페이지 (#427)" This reverts commit 4175612. * Revert "[fix] group 페이지 타입 에러 수정 (#448)" This reverts commit 66005ea. * Revert "[#434] [모임 상세] 독서모임 상세 페이지 api 연결 (#441)" This reverts commit 617614f. * Revert "[#439] [독서모임] 모임 목록 페이지 리팩토링 (#440)" This reverts commit f50f393. * Revert "[#414] [프로필] 프로필 수정 페이지 (#426)" This reverts commit 91b8171. * Revert "[#437] [독서모임] Avartar, bookGroupStatus 적용 및 typo 수정 (#438)" This reverts commit b56d3d5. * Revert "[#412] [북카이브] 북카이브 페이지 (회원) (#436)" This reverts commit 434dd73. * Revert "[refactor] bookcover v1 폴더로 이동 (#433)" This reverts commit 434dd8c. * Revert "[refactor] 폴더 및 파일 구조, 네이밍 수정 (#432)" This reverts commit 5ba2e21. * Revert "[fix] github 에서 대소문자 구문하지 못하는 문제 해결 (#431)" This reverts commit 549a5e9. * Revert "[#403] [모임 상세] 모임 정보 컴포넌트 (#423)" This reverts commit 378828c. * Revert "fix: 이벤트 핸들러 명칭 변경" This reverts commit de6588c. * Revert "fix: 컴포넌트명 변경" This reverts commit 03899d7. * Revert "fix: 스타일 관련 코드 수정 및 불필요한 요소 제거" This reverts commit 14a6b84. * Revert "feat: 내가 가입한 모임 simple ui 구현" This reverts commit 5dd3e60. * Revert "[#410] [북카이브] 북카이브 페이지 (비회원) (#425)" This reverts commit 08c919d. * Revert "[#411][독서 모임] Detail 독서 모임 컴포넌트 (#428)" This reverts commit cbb032a. * Revert "[#408] [모임 상세] 게시글 컴포넌트 (#429)" This reverts commit 2277b0d. * Revert "[#404][독서모임] 모임 검색 컴포넌트 (#419)" This reverts commit 281beee. * Revert "[#418] Avatar 컴포넌트 (#420)" This reverts commit 51d471e. * Revert "[#406] [모임 상세] 멤버 목록 컴포넌트 (#424)" This reverts commit 199a234. * Revert "[#399] Toast 컴포넌트 (#402)" This reverts commit 9333f87. * Revert "[#405] [레이아웃] 공통 레이아웃 (#421)" This reverts commit fb8d8d6. * Revert "[#398] RadioButton 컴포넌트 (#400)" This reverts commit 9c8bdc2. * Revert "[#413] Issue 템플릿에 v1.0 라벨 추가 (#417)" This reverts commit facb746. * Revert "[#363] BottomActionButton 컴포넌트 (#395)" This reverts commit a653d3b. * Revert "[#366] BottomSheet 컴포넌트 (#394)" This reverts commit a43dea4. * Revert "[#364] Badge 컴포넌트 (#396)" This reverts commit 86edc76. * Revert "[#362] TopNavigation 컴포넌트 리팩터링 (#393)" This reverts commit 55a6b98. * Revert "[#361] BottomNavigation 컴포넌트 (#392)" This reverts commit d7d8ca6. * Revert "[#388] Input, Select 컴포넌트 에러 처리 (#389)" This reverts commit f5bf5ef. * Revert "[#390] storybook snippet 작성 (#391)" This reverts commit 97984a7. * Revert "[#365] Modal 컴포넌트 (#387)" This reverts commit 8e931fc. * Revert "[#367] Switch 컴포넌트 (#386)" This reverts commit e1b1ae9. * Revert "[#382] Assets 정리 (#384)" This reverts commit 182def7. * Revert "[#383] Select 컴포넌트 (#385)" This reverts commit 7c189bc. * Revert "[#357] TopHeader UI 컴포넌트 및 스토리북 작성 (#379)" This reverts commit 4dfbcc8. * Revert "[#358] TopNavigation 컴포넌트 (#378)" This reverts commit 41f8f99. * Revert "[#360] Input 컴포넌트 작성 (#380)" This reverts commit e28792d. * Revert "[#359] Button 컴포넌트 (#381)" This reverts commit 6b84755. * Revert "[#376] Storybook 설정 및 GlobalTheme, Font 수정 (#377)" This reverts commit 3a7a9e6. * Revert "[#374] Tailwind 클래스를 정렬하기 위한 Prettier 플러그인 추가 (#375)" This reverts commit e365160. * Revert "[#372] Theme, GlobalStyle, Font 세팅 (#373)" This reverts commit 4f7df42. * Revert "[#370] Storybook & Headless UI 추가 (#371)" This reverts commit 7ad8aef.

gxxrxn added 19 commits November 23, 2023 19:35

style: BookGroupNavigation a모임제목 말줄임 적용

0465668

feat: 모임상세 뒤로가기 구현

9cb41ff

feat: Avatar fallback image 설정

92bce40

feat: Loading 컴포넌트 작성

8527f8e

feat: context provider에 Suspense 추가

80f95f4

fix: axios host 설정

2055bdd

feat: suspens query 적용

2b7fc35

fix: next/image sizes 관련 경고 해결

45342c8

feat: 모임 상세 skeleton 적용

84099fe

fix: context provider에서 suspense 제거

0c84805

style: TitleSkeleton pulse animation 추가

ae95187

fix: avatar next/image 사이즈 경고 해결

e623e48

feat: 게시글 없는 경우 메세지 노출

42a0133

style: toast 가운데 정렬

c2adb86

chore: groupAPI 컨벤션에 맞게 네이밍 수정

b28649d

refactor: BookGroupNavigation 컴포넌트 분리

494da80

- 합성 컴포넌트로 리팩토링

feat: 모임 가입 버튼 구현

25fdcf3

fix: 비공개 모임인 경우 댓글 보이지 않게 수정

9214c5a

chore: 모임 가입문제 페이지로 라우팅되지 않도록 수정

1c59b0f

gxxrxn added 🐥 프론트 필수! ✨ feature New feature or request 🔥 v.1.0 New feature for releasing v.1.0 labels Nov 25, 2023

gxxrxn requested review from minjongbaek, hanyugeon and WooDaeHyun November 25, 2023 20:09

gxxrxn self-assigned this Nov 25, 2023

gxxrxn commented Nov 25, 2023

View reviewed changes

feat: BookInfoCard 클릭 시 책 상세 페이지로 이동

31767d3

vercel bot deployed to Preview November 26, 2023 01:10 View deployment

feat: book query key factory 객체 추가

7388f8e

vercel bot deployed to Preview November 27, 2023 03:24 View deployment

minjongbaek reviewed Dec 1, 2023

View reviewed changes

hanyugeon reviewed Dec 1, 2023

View reviewed changes

refactor: getSize 함수가 객체를 반환하도록 수정

f41081b

vercel bot deployed to Preview December 1, 2023 16:20 View deployment

refactor: AnimationStep 타입 추가, LoadigDot export 제거

4409cee

vercel bot deployed to Preview December 1, 2023 17:18 View deployment

gxxrxn added 3 commits December 2, 2023 04:50

fix: BookGroupNavigation 내부에 SSRSafeSuspense 적용

fb3917b

fix: 비공개 모임이지만 멤버인 경우 게시글 보이도록 수정

38649da

- comment divider style 제거

feat: w-app css class 추가

a42b6f4

- 모임 상세페이지 여백 style 조정

vercel bot deployed to Preview December 1, 2023 19:54 View deployment

gxxrxn requested review from minjongbaek and hanyugeon December 2, 2023 13:31

hanyugeon approved these changes Dec 3, 2023

View reviewed changes

minjongbaek approved these changes Dec 4, 2023

View reviewed changes

gxxrxn merged commit a9ce2ff into main Dec 4, 2023
2 checks passed

gxxrxn deleted the feat/#447 branch December 4, 2023 15:08

gxxrxn added a commit that referenced this pull request Aug 20, 2024

Revert "[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 (#450)"

8cfa868

This reverts commit 61ada97.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450

[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450

gxxrxn commented Nov 25, 2023 •

edited

Loading

vercel bot commented Nov 25, 2023 •

edited

Loading

github-actions bot commented Nov 25, 2023 •

edited

Loading

gxxrxn Nov 25, 2023

gxxrxn Nov 25, 2023 •

edited

Loading

minjongbaek Dec 1, 2023

hanyugeon Dec 1, 2023

minjongbaek left a comment

minjongbaek Nov 30, 2023

minjongbaek Nov 30, 2023

gxxrxn Dec 1, 2023

minjongbaek Dec 1, 2023

hanyugeon Dec 1, 2023

gxxrxn Dec 1, 2023 •

edited

Loading

minjongbaek Dec 4, 2023

minjongbaek Dec 1, 2023

gxxrxn Dec 1, 2023

minjongbaek commented Dec 1, 2023

hanyugeon left a comment

hanyugeon Dec 1, 2023

gxxrxn Dec 1, 2023

hanyugeon Dec 1, 2023

hanyugeon Dec 1, 2023

hanyugeon Dec 1, 2023

gxxrxn Dec 1, 2023

hanyugeon Dec 1, 2023

hanyugeon Dec 1, 2023

gxxrxn Dec 1, 2023

gxxrxn commented Dec 1, 2023

hanyugeon left a comment

hanyugeon Dec 3, 2023

minjongbaek Dec 4, 2023

hanyugeon Dec 3, 2023

hanyugeon Dec 3, 2023

		// TODO: 모임 가입문제 페이지 생성 후 연결
		// router.push(`${pathname}/join`);

[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450

[#447] [모임 상세] 모임 참여 여부, 모임장 여부에 따른 UI 구현 #450

Conversation

gxxrxn commented Nov 25, 2023 • edited Loading

구현 내용

Avatar

Loading 컴포넌트 구현

스켈레톤 UI 구현

Suspense 적용

모임 상세페이지 TopNavigation 컴포넌트 분리

myProfileQuery

Avatar, BookCover next/image 경고 해결

공유할 내용

📣 env 환경 변수를 업데이트 해주세요!

PR 포인트

관련 이슈

vercel bot commented Nov 25, 2023 • edited Loading

github-actions bot commented Nov 25, 2023 • edited Loading

Choose a reason for hiding this comment

gxxrxn Nov 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minjongbaek 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

gxxrxn Dec 1, 2023 • edited Loading

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

minjongbaek commented Dec 1, 2023

hanyugeon 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

Choose a reason for hiding this comment

gxxrxn commented Dec 1, 2023

변경사항

hanyugeon 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

gxxrxn commented Nov 25, 2023 •

edited

Loading

vercel bot commented Nov 25, 2023 •

edited

Loading

github-actions bot commented Nov 25, 2023 •

edited

Loading

gxxrxn Nov 25, 2023 •

edited

Loading

gxxrxn Dec 1, 2023 •

edited

Loading