Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

[SP2] 블로그 페이지 스켈레톤 UI, scrollToTop, react-query #251

Merged
merged 17 commits into from
Nov 6, 2023
Merged

[SP2] 블로그 페이지 스켈레톤 UI, scrollToTop, react-query #251

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f7c1911
style : 블로그 페이지 게시물 호버 opacity
f0rever0 Oct 29, 2023
2a86d6b
feat : BlogPost 스켈레톤 UI
f0rever0 Oct 29, 2023
c234433
feat : showScrollTopButton 추가
f0rever0 Oct 29, 2023
52a2959
chore : 불필요한 import 문 삭제
f0rever0 Oct 29, 2023
e0caa9e
style : 불필요한 style 삭제
f0rever0 Oct 31, 2023
7153650
refact : BlogPostSkeletonUI array 변경
f0rever0 Nov 1, 2023
7836dda
refact : BlogPostList 보여주는 로직 변경
f0rever0 Nov 1, 2023
95bde73
chore : 불필요한 import 삭제
f0rever0 Nov 1, 2023
dd998ad
refact : 블로그 페이지 react-query 적용
f0rever0 Nov 2, 2023
39f9e4f
fix : export 추가
f0rever0 Nov 2, 2023
bca49e1
style : blog layout moreStyle 분리
f0rever0 Nov 3, 2023
bca7ac1
refact : blog response 공통 type 지정
f0rever0 Nov 3, 2023
91be630
fix : review api type 변경
f0rever0 Nov 3, 2023
10711ac
refact : useInfiniteScroll param type 변경
f0rever0 Nov 3, 2023
58f9b12
style : BlogPostList style refactor
f0rever0 Nov 4, 2023
ecc8594
refact : delete console.log warning message
f0rever0 Nov 4, 2023
389618e
refact : BlogPageList 조건문 수정
f0rever0 Nov 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions src/views/BlogPage/BlogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import PageLayout from '@src/components/common/PageLayout';
import useStorage from '@src/hooks/useStorage';
import { activeGenerationCategoryList } from '@src/lib/constants/tabs';
import { PartCategoryType } from '@src/lib/types/blog';
import BlogPostSkeletonUI from '@src/views/BlogPage/components/BlogPostSkeletonUI';
import { OvalSpinner } from '@src/views/ProjectPage/components';
import BlogPostList from './components/BlogPostList';
import BlogTab from './components/BlogTab';
Expand Down Expand Up @@ -39,7 +40,7 @@ export default function BlogPage() {
if (!(response._TAG === 'OK' || response._TAG === 'LOADING')) return null;

return (
<PageLayout>
<PageLayout showScrollTopButton>
<BlogTab
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
Expand All @@ -48,16 +49,22 @@ export default function BlogPage() {
selectedSubCategory={selectedSubCategory}
setSubCategory={setSubCategory}
/>
<BlogPostList
selectedTap={selectedTab}
setMajorCategory={setMajorCategory}
setSubCategory={setSubCategory}
blogPostList={response.data}
/>
{(canGetMoreResponse || response._TAG === 'LOADING') && (
<S.SpinnerWrapper ref={canGetMoreResponse ? ref : undefined}>
<OvalSpinner />
</S.SpinnerWrapper>
{response.data.length === 0 ? (
response._TAG === 'LOADING' && <BlogPostSkeletonUI />
Copy link
Member

Choose a reason for hiding this comment

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

BlogPostLlist.tsx 안에 있는

<S.EmptyBlogPostList>
  {`아직 올라온 ${selectedTap === 'article' ? '아티클이' : '활동후기가'} 없어요`}
</S.EmptyBlogPostList>

이 친구도 여기로 빼면 어떨까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

해당 코드 리팩토링 하면서 반영해볼게요!

) : (
Copy link
Member

Choose a reason for hiding this comment

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

이전에 코멘트 드렸던 대로 이 부분은 항상 삼항 연산자 밖에 있어도 괜찮을 것 같아요!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

이번에 작업하면서 다시 안으로 들어갔나봐요....😂 다시 조건문 고민해볼게요!!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@SeojinSeojin 서진 ~ 이부분 코멘트 좀 더 자세히 해줄 수 있을까요?
위 코멘트도 다시 읽어봤는데...!

저의생각))
BlogPostList를 선택적으로 띄울 필요가 없다!!
왜냐면, 위에서 제가 제안한 대로 '아직 올라온 아티클이/활동후기가 없어요' 부분이 여기로 빠진다면,
-> BlogPostList는 response.data를 띄우는 역할만 할 것이고,
-> 그럼 자연스럽게 response.data.length가 0이면 아무것도 안 보일 것이기 때문에
굳이 패칭 시작해서 data.length가 0이 될 때마다 마운트/언마운트를 시키지 않아도 괜찮을 거라고 생각합니다!!!!!!!!!

여기서 BlogPostList를 선택적을 띄울 필요가 없는 것은 이해하겠는데, 아직 올라온 아티클이/활동후기가 없어요' 게 어디로 빠지면 좋겠다는지 이해가 잘 안돼서요..!

Copy link
Member

Choose a reason for hiding this comment

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

이전에는 문구가 blogPostList 컴포넌트 아래에 있었는데, 그것의 부모 컴포넌트인 이곳으로 오면 좋겠다는 뜻이었어요..!!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

아,..! 저렇게 두어도 좋겠다는 뜻이었구뇨! 이해했습니다 !!

Copy link
Member

Choose a reason for hiding this comment

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

혹시 이 부분 의도하신 흐름에 대해서 말로 풀어서 설명해주실 수 있나요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

      {!response ? (
        <BlogPostSkeletonUI />
      ) : (
        <>
          {response.length === 0 ? (
            <S.EmptyBlogPostListWrapper>
              <S.EmptyBlogPostList>
                {`아직 올라온 ${selectedTab === 'article' ? '아티클이' : '활동후기가'} 없어요`}
              </S.EmptyBlogPostList>
              <S.Total onClick={showTotalPostList}>{`${
                selectedTab === 'article' ? '아티클' : '활동후기'
              } 전체 보기`}</S.Total>
            </S.EmptyBlogPostListWrapper>
          ) : (
            <>
              <BlogPostList selectedTap={selectedTab} blogPostList={response} />
              {(hasNextPage || isFetching) && (
                <S.SpinnerWrapper ref={hasNextPage ? ref : undefined}>
                  <OvalSpinner />
                </S.SpinnerWrapper>
              )}
            </>
          )}
        </>
      )}

이렇게 수정하였습니다!
데이터가 ㅐ처음 패칭중일때 undefined를 반환해서 그때는 BlogPostSkeletonUI 를 보여주고
response.length === 0 으로 아티클이 없을때는 없다는 문구가, !== 0으로 있을때는 리스트가 보여지게 됩니다!

<>
<BlogPostList
Copy link
Member

Choose a reason for hiding this comment

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

저의생각))
BlogPostList를 선택적으로 띄울 필요가 없다!!
왜냐면, 위에서 제가 제안한 대로 '아직 올라온 아티클이/활동후기가 없어요' 부분이 여기로 빠진다면,
-> BlogPostList는 response.data를 띄우는 역할만 할 것이고,
-> 그럼 자연스럽게 response.data.length가 0이면 아무것도 안 보일 것이기 때문에
굳이 패칭 시작해서 data.length가 0이 될 때마다 마운트/언마운트를 시키지 않아도 괜찮을 거라고 생각합니다!!!!!!!!!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

아! BlogPostList는 항상 보여지고 데이터가 없을때만 없다는 안내 문구 를 띄우면 되겠네요..!
조건을 수정해볼게요!! 의견 감사합니다 !!

selectedTap={selectedTab}
setMajorCategory={setMajorCategory}
setSubCategory={setSubCategory}
blogPostList={response.data}
/>
{(canGetMoreResponse || response._TAG === 'LOADING') && (
<S.SpinnerWrapper ref={canGetMoreResponse ? ref : undefined}>
<OvalSpinner />
</S.SpinnerWrapper>
)}
</>
)}
</PageLayout>
);
Expand Down
2 changes: 1 addition & 1 deletion src/views/BlogPage/components/BlogPost/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const BlogPost = styled.section`
cursor: pointer;
transition: opacity 0.2s linear;
&:hover {
opacity: 0.8;
opacity: 0.7;
}

/* 모바일 뷰 */
Expand Down
30 changes: 30 additions & 0 deletions src/views/BlogPage/components/BlogPostSkeletonUI/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as S from './style';

export default function BlogPostSkeletonUI() {
const array = new Array(3).fill(0);
Copy link
Member

Choose a reason for hiding this comment

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

  • 여기서부터 [0,0,0]으로 �선언해서 뒤에선 .map(_, index)로 key값을 쓰는 것 같은데, 여기서부터 [0,1,2]를 갖게 하는건 어떤가요?
  • array라는 이름보다 명확한 이름이면 더 좋을 것 같아요 ..!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ProjectSkeletionUI를 참고해서 만들었는데 그게 더 깔끔한 것 같네요!


return (
<S.BlogPostListWrapper>
<S.BlogPostList>
{array.map((_, index) => (
<S.BlogPost key={index}>
<S.HeaderWrapper>
<S.Header></S.Header>
<S.Body>
<S.Title />
<S.Description />
</S.Body>
<S.TagList>
<S.Tag />
<S.Tag />
</S.TagList>
</S.HeaderWrapper>
<S.ThumbnailWrapper>
<S.Thumbnail />
</S.ThumbnailWrapper>
</S.BlogPost>
))}
</S.BlogPostList>
</S.BlogPostListWrapper>
);
}
184 changes: 184 additions & 0 deletions src/views/BlogPage/components/BlogPostSkeletonUI/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
import styled from '@emotion/styled';
import { colors } from '@sopt-makers/colors';

export const BlogPostListWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;

padding-left: 20px;
padding-right: 20px;
margin-bottom: 108px;
`;

export const BlogPostList = styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
max-width: 900px;
width: 100%;

margin-top: 30px;

/* 모바일 뷰 */
@media (max-width: 767px) {
width: 100%;
margin-top: 24px;
gap: 36px;
}
`;

export const BlogPost = styled.section`
display: flex;
justify-content: space-between;
width: 100%;
gap: 36px;

transition: opacity 0.2s linear;

/* 모바일 뷰 */
@media (max-width: 767px) {
gap: 16px;
}
`;

export const HeaderWrapper = styled.section`
display: flex;
flex-direction: column;
width: 100%;
`;

export const Header = styled.div`
display: flex;
height: 23px;
width: 30px;
border-radius: 6px;
margin-bottom: 4px;
background-color: ${colors.gray800};

/* 모바일 뷰 */
@media (max-width: 767px) {
height: 16px;
margin-bottom: 0;
}
`;

export const Body = styled.div`
height: 94px;
width: 100%;

/* 모바일 뷰 */
@media (max-width: 767px) {
display: flex;
align-items: center;
height: 53px;
}
`;

export const Profile = styled.div`
display: flex;
align-items: center;
gap: 6px;
`;

export const ProfileImage = styled.div`
border-radius: 18px;
width: 18px;
height: 18px;
background-color: ${colors.gray800};

/* 모바일 뷰 */
@media (max-width: 767px) {
width: 15px;
height: 15px;
}
`;

export const Divider = styled.div`
padding: 0 2px 0 2px;
`;

export const Title = styled.div`
height: 36px;
background-color: ${colors.gray800};
border-radius: 6px;
margin-bottom: 5px;
width: 100%;

@media (max-width: 767px) {
height: 24px;
}
`;

export const Description = styled.div`
display: -webkit-box;
border-radius: 6px;

background-color: ${colors.gray800};
height: 52px;

/* 모바일 뷰 */
@media (max-width: 767px) {
display: none;
}
`;

export const TagList = styled.div`
display: flex;
gap: 8px;
margin-top: 10px;

/* 모바일 뷰 */
@media (max-width: 767px) {
margin-top: 18px;
}
`;

export const Tag = styled.div`
display: flex;
justify-content: center;
align-items: center;

height: 28px;
width: 24px;

border-radius: 6px;
background-color: ${colors.gray800};

/* 모바일 뷰 */
@media (max-width: 767px) {
height: 20px;
}
`;

export const ThumbnailWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;

position: relative;
width: 239px;

/* 모바일 뷰 */
@media (max-width: 767px) {
width: 105px;
}
`;

export const Thumbnail = styled.div`
border: 1px solid ${colors.gray900};
border-radius: 8px;
object-fit: cover;
background-color: ${colors.gray800};
width: 239px;
height: 160px;

/* 모바일 뷰 */
@media (max-width: 767px) {
width: 105px;
height: 70px;
border-radius: 5px;
}
`;
Loading