[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용 #235

SeojinSeojin · 2023-10-24T08:47:07Z

close 프로젝트 탭에 '최근 출시한 프로젝트' 파트 추가, 캐러셀 컴포넌트 만들기 #229

Summary

Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용했습니다

Screenshot

2023-10-25.10.46.33.mov

Comment

이 피쳐와 관련 없는 수정도 있습니다 .. 코드를 틈틈이 고치거나, 시간을 넉넉하게 잡고 다른 이슈로 만들었으면 좋았을 것 같습니다 ㅜㅜ
전체적인 프로젝트 스타일 수정은 여기서 다루기엔 너무 길어질 것 같아서 프로젝트 탭 전체적인 레이아웃 디자인 반영 #236 에서 다루겠습니다!

…recent-carousel

SeojinSeojin · 2023-10-25T01:35:32Z

src/components/Layout/Layout.tsx

@@ -1,11 +1,16 @@
 import styled from '@emotion/styled';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { SerializedStyles } from '@emotion/react';


((지금 피쳐랑 큰 관련은 없는 부분입니다))

레이아웃에 moreStyle이라는 프로퍼티를 주었는데, CSSProperties로 들어가면 매번 객체로 들어가는 것이라 좋아 보이지 않아서 css`` 로 넣을 수 있도록 바꿨습니다!!

객체가 매번 새롭게 생성되다 보니 성능상으로 좋지 않아 바꾸신 걸로 이해하면 될까요?

emotion css props 대한 아티클인데 같이 읽어보면 좋을 것 같아요!

객체가 매번 새롭게 생성되다 보니 성능상으로 좋지 않아 바꾸신 걸로 이해하면 될까요?

맞습니다!! 그런데 우영언니가 준 글을 읽어보니 이것 또한 그렇게 좋지는 않은 방법이네요 ..!!

emotion css props 대한 아티클인데 같이 읽어보면 좋을 것 같아요!

음 css 프롭을 styled component로 넘기지 말고 바로 css로 넘기는 방식으로 일단은 개선하겠습니다!!

SeojinSeojin · 2023-10-25T01:38:38Z

src/components/common/Carousel/index.tsx

+import { S } from './style';
+
+interface CarouselProps {
+  itemWidth: number;


프롭 이름 하는 일 비고

itemWidth 아이템 너비

stride 보폭 - 한 번에 넘어가는 페이지 수

leftArrowType 왼쪽 Arrow의 타입 현재는 보여준다 / 안 보여준다 밖에 없지만 나중에 확장 가능!

rightArrowType 오른쪽 Arrow의 타입 위와 같다

overflowType 넘치는 부분을 어떻게 보여줄 것인가? 현재는 blur / show 둘 뿐

children React Children

SeojinSeojin · 2023-10-25T01:39:19Z

src/components/common/Carousel/index.tsx

+  const [startX, setStartX] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {


stride가 달라지면 전체 페이지 수가 달라지므로, 현재 페이지를 0으로 초기화합니다

SeojinSeojin · 2023-10-25T01:39:29Z

src/components/common/Carousel/index.tsx

+  };
+
+  const translateX = -currentIndex * itemWidth;
+  console.log(Array(children.length / stride));


머하냐.. 당장 지우겠습니다

SeojinSeojin · 2023-10-25T01:40:29Z

src/hooks/useDevice.ts

+
+type DeviceType = 'desktop' | 'iOS' | 'Android';
+
+export function useDeviceType() {


접속한 장치 판단하는 훅입니다!

하나 만들어 두었어요~

SeojinSeojin · 2023-10-25T01:41:20Z

src/views/ProjectPage/ProjectPage.tsx

+    <PageLayout
+      showScrollTopButton
+      moreStyle={css`
+        overflow-x: hidden;


캐러셀이 가로로 길어서 overflow-x가 생겨 일단 숨겼습니다!!

SeojinSeojin · 2023-10-25T01:41:49Z

src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx

+import { useDeviceType, useIsDesktop, useIsTablet } from '@src/hooks/useDevice';
+import { CarouselArrowType, CarouselOverflowType } from '@src/lib/types/universal';
+
+function RecentProjectListCarousel({ children }: { children: JSX.Element[] }) {


프로젝트 리스트에 쓰이는 캐러셀의 프롭을 조건에 따라 넘겨주기만 하는 컴포넌트입니다

solar3070

고생하셨습니다~~~ 짱짱 서진깅!! 🚀 🚀 🚀

몇 가지 궁금한 점이 있어서 질문 드려요!

1920px 부터 이렇게 보이는데 정상인가요??
몇몇 프로젝트는 사용해보기 버튼이 안보이는데 원래 그런건가요?
사용해보기 버튼 인터랙션이 빠진 것 같습니다!

solar3070 · 2023-10-25T08:13:50Z

src/components/Layout/Layout.tsx

@@ -1,11 +1,16 @@
 import styled from '@emotion/styled';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { SerializedStyles } from '@emotion/react';


객체가 매번 새롭게 생성되다 보니 성능상으로 좋지 않아 바꾸신 걸로 이해하면 될까요?

solar3070 · 2023-10-25T08:33:30Z

src/components/common/Carousel/index.tsx

+  children: JSX.Element[];
+}
+
+const Carousel: React.FC<CarouselProps> = ({


export default function 컴포넌트명이 저희 컨벤션입니다! FC를 사용하신 이유가 있을까요?

저의 습관성 rsc 때문에 ...........
고쳐오겠습니다!

solar3070 · 2023-10-25T08:36:25Z

src/components/common/Carousel/style.ts

+const Wrapper = styled(HideScrollbar)`
+  width: 100%;
+  position: relative;
+`;


프로젝트 탭에서 스크롤바를 숨기는 이유가 뭔가요? 궁금합니다!

요건 프로젝트 목록이 담겨 있는 캐러셀이라서, overflow-x가 생기게 됩니다! 그럼 가로 방향 스크롤바가 생기게 되는데요..!
디자인 의도는 그것이 아닐 것 같아서 스크롤바를 숨겼어요!!

캐러셀의 스크롤 뿐만이 아니라 페이지의 스크롤까지 같이 없어지는 거 같은데 맞나요..?!
...가 아니군요.. 저희 원래 스크롤이 없는 것 같네요.....? 공홈 초기부터 이렇게 했던 거 같은데 의도된 디자인인가요?

solar3070 · 2023-10-25T08:41:46Z

src/views/ProjectPage/components/RecentProjectList/index.tsx

+import RecentProjectListCarousel from './Carousel';
+import RecentProjectListItem from './Item';
+
+function RecentProjectList() {


export default를 앞에 붙이는 게 컨벤션인데 이 부분 말고도 거의 모든 컴포넌트에서 안지켜지고 있는 것 같습니다!
사실 저도 스니펫을 쓰는데 export default를 하단에서 해주다 보니 자꾸 깜빡하는 것 같습니다..

그것은 다 고쳐오겠습니다 ㅜㅜㅜ 습관성 rsf 이후 고치질 않았네요..

solar3070 · 2023-10-25T08:47:14Z

src/components/common/Carousel/index.tsx

+    const deltaX = startX - endX;
+
+    if (deltaX > 50) {
+      handleNext();
+    } else if (deltaX < -50) {
+      handlePrev();
+    }


혹시 여기 deltaX와 50은 어떤 의미인지 설명해주실 수 있나요?

너무 조금 터치하면 넘기지 않으려고 추가한 값들입니다!

deltaX : 터치를 시작한 지점과 끝낸 지점의 x값 차이
50 : 페이지 넘기는 기준이 되는 마진

50은 매직넘버니까 정리해둘게요!!

f0rever0

꽤 복잡한 작업이었을텐데 pr에 설명을 잘 달아줘서 고마워요~
확인했습니다!!

f0rever0 · 2023-10-25T12:28:34Z

src/components/Layout/Layout.tsx


-export function Layout({ children, moreStyle }: PropsWithChildren<{ moreStyle?: CSSProperties }>) {
-  return <Main style={moreStyle}>{children}</Main>;
+export function Layout({


suggestion;

컨벤션에 맞게 export default function~ 으로 적어주면 좋을 것 같아요!

이것 제가 많이 어겼네요 .. 다 고치겠습니다!!

이건 이번에 추가된게 아니라 저번에 추가된 것이고, 한 번 바꾸면 너무나 많은 파일을 건드리게 되네요 ..
다른 이슈에서 해야 할 것 같습니다!!

f0rever0 · 2023-10-25T12:31:09Z

src/components/Layout/Layout.tsx

@@ -1,11 +1,16 @@
 import styled from '@emotion/styled';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { SerializedStyles } from '@emotion/react';


emotion css props 대한 아티클인데 같이 읽어보면 좋을 것 같아요!

f0rever0 · 2023-10-25T12:40:36Z

src/views/ProjectPage/components/RecentProjectList/Item/style.ts

+  border-radius: 10px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {


question;

모바일 뷰에서 max-width가 767px이어야 하는 것 아닌가요...?!

잘못 주워온 것 같습니다. . 꼼꼼한 확인 감사드려요!!

SeojinSeojin · 2023-10-25T14:56:55Z

너무너무 꼼꼼한 리뷰 감사드려요!!
혜준언니 댓글에 대한 답변입니당

1920px 부터 이렇게 보이는데 정상인가요??

~~useIsDesktop 쓰면 1920px부터 다른게 나오네요 ... 이 부분은 수정하겠습니다!!!~~
뭔가 오해가 있었습니다 .. 이제 고칠 수 있습니다!

몇몇 프로젝트는 사용해보기 버튼이 안보이는데 원래 그런건가요?

사용해보기 버튼의 경우, 유효한 링크가 있는 경우에만 띄우고 있어요..!!
예를 들어, 안드로이드 앱만 있는 경우에는 맥북에서 접속했을 때에 링크를 띄우지 않고 있어요
이 부분 스펙은 슬랙에 여쭤보고 확정하겠습니다!

사용해보기 버튼 인터랙션이 빠진 것 같습니다!

이런 .. 거의 눈을 감고 개발했네요 ..... 찾아주셔서 정말 감사합니다!!

SeojinSeojin added 3 commits October 24, 2023 17:45

feat: implement carousel component

355b450

feat: implement carousel component in Project Page

f1ede9c

chore: misc styles and utils

0d7dd6e

pull-request-size bot added the size/L label Oct 24, 2023

SeojinSeojin added 3 commits October 25, 2023 09:41

fix: fix detail of recent project list style

4735350

fix: change type of moreStyle property

5ebe2d1

feat: implement page indicator dot in carousel

f1eb479

pull-request-size bot added size/XL and removed size/L labels Oct 25, 2023

SeojinSeojin added 2 commits October 25, 2023 10:30

Merge remote-tracking branch 'origin/develop' into feat/#229_project-…

f418ea7

…recent-carousel

chore: replace lib/colors to sopt-makers/colors

78c5e4a

SeojinSeojin commented Oct 25, 2023

View reviewed changes

chore: remove console.log

d828e3b

SeojinSeojin commented Oct 25, 2023

View reviewed changes

SeojinSeojin marked this pull request as ready for review October 25, 2023 01:42

SeojinSeojin requested review from f0rever0 and solar3070 October 25, 2023 01:43

SeojinSeojin self-assigned this Oct 25, 2023

SeojinSeojin mentioned this pull request Oct 25, 2023

[SP2] 프로젝트 탭 레이아웃 스타일 반영 #237

Merged

solar3070 reviewed Oct 25, 2023

View reviewed changes

f0rever0 approved these changes Oct 25, 2023

View reviewed changes

f0rever0 reviewed Oct 25, 2023

View reviewed changes

SeojinSeojin added 2 commits October 26, 2023 00:01

fix: alter moreStyle prop with css prop

cef6bc1

fix: apply convention of component default export

751a6b2

SeojinSeojin added 3 commits October 26, 2023 00:08

refactor: make magic number into const

a65f4cc

fix: fix responsive related style values

7df93c1

feat: add interaction to try link button

39c07bd

SeojinSeojin merged commit e28e3a8 into develop Oct 28, 2023
1 check passed

SeojinSeojin deleted the feat/#229_project-recent-carousel branch October 28, 2023 11:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용 #235

[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용 #235

SeojinSeojin commented Oct 24, 2023 •

edited

Loading

SeojinSeojin Oct 25, 2023

solar3070 Oct 25, 2023

f0rever0 Oct 25, 2023

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023 •

edited

Loading

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023 •

edited

Loading

solar3070 left a comment

solar3070 Oct 25, 2023

solar3070 Oct 25, 2023

SeojinSeojin Oct 25, 2023

solar3070 Oct 25, 2023

SeojinSeojin Oct 25, 2023

solar3070 Oct 26, 2023 •

edited

Loading

solar3070 Oct 25, 2023

SeojinSeojin Oct 25, 2023

solar3070 Oct 25, 2023

SeojinSeojin Oct 25, 2023

f0rever0 left a comment

f0rever0 Oct 25, 2023

SeojinSeojin Oct 25, 2023

SeojinSeojin Oct 25, 2023

f0rever0 Oct 25, 2023

f0rever0 Oct 25, 2023

SeojinSeojin Oct 25, 2023 •

edited

Loading

SeojinSeojin commented Oct 25, 2023 •

edited

Loading

프롭 이름	하는 일	비고
itemWidth	아이템 너비
stride	보폭 - 한 번에 넘어가는 페이지 수
leftArrowType	왼쪽 Arrow의 타입	현재는 보여준다 / 안 보여준다 밖에 없지만 나중에 확장 가능!
rightArrowType	오른쪽 Arrow의 타입	위와 같다
overflowType	넘치는 부분을 어떻게 보여줄 것인가?	현재는 blur / show 둘 뿐
children	React Children


		type DeviceType = 'desktop' \| 'iOS' \| 'Android';

		export function useDeviceType() {

[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용 #235

[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용 #235

Conversation

SeojinSeojin commented Oct 24, 2023 • edited Loading

Summary

Screenshot

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

SeojinSeojin Oct 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeojinSeojin Oct 25, 2023 • edited Loading

Choose a reason for hiding this comment

solar3070 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

solar3070 Oct 26, 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

Choose a reason for hiding this comment

f0rever0 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

SeojinSeojin Oct 25, 2023 • edited Loading

Choose a reason for hiding this comment

SeojinSeojin commented Oct 25, 2023 • edited Loading

SeojinSeojin commented Oct 24, 2023 •

edited

Loading

SeojinSeojin Oct 25, 2023 •

edited

Loading

SeojinSeojin Oct 25, 2023 •

edited

Loading

solar3070 Oct 26, 2023 •

edited

Loading

SeojinSeojin Oct 25, 2023 •

edited

Loading

SeojinSeojin commented Oct 25, 2023 •

edited

Loading