[FE] v2.1.1에서 구현한 랜딩페이지 개선 #777

Todari · 2024-10-21T13:18:24Z

issue

close [FE] v2.1.1에서 구현한 랜딩페이지 개선 #764

구현 목적

기존 랜딩페이지에서 누락된 부분(만든사람들 section)이 존재합니다.
화면의 최하단 스크롤 시 배경 이미지가 보여 어색한 부분이 있습니다.
ios에서 svg의 이미지들이 깨져서 보이는 문제가 있습니다.
feature들의 섹션이 세로로 너무 길다고 판단하여, 가로로 스크롤 되는 feature container section을 별도로 생성하고자 합니다.
기존 svg image들 중에, 비트맵 파일을 포함하고 있는 svg가 있었고, 이 용량이 너무 커서 파일을 다시 제작하였습니다.

구현 사항

1. 만든사람들 section 제작

디바이스 해상도에 따라 변경되는 반응형 레이아웃을 구현하였습니다.

2024-10-21.10.06.13.mov

2. 최하단 스크롤 시 배경이미지 보이지 않도록 변경

// 13:22:src/hooks/useMainSectionBackgroundScroll.ts
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const handleScroll = () => {
      setIsVisible(window.scrollY <= window.innerHeight);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

// 53:59:src/pages/MainPage/Section/MainSection/MainSection.style.ts
export const backgroundImageStyle = (isVisible: boolean) =>
  css({
    objectFit: 'cover',
    height: '100vh',
    width: '100vw',
    opacity: isVisible ? 1 : 0,
  });

mainSection에서 scroll이 100vh 보다 더 많이 될 경우, backgroundImage의 opacity를 0으로 조절하여 첫 화면을 벗어난 뒤에는 배경 이미지가 보이지 않도록 변경하였습니다.

3. ios svg가 깨지는 문제

img 태그 내부에 svg 소스를 넣어주게 되면, ios에서 이를 비트맵 방식으로 렌더하는 경우가 있습니다.
애플 디스플레이의 경우 3~~4배수의 DPI를 사용하므로 이 과정에서 3~~4배의 픽셀 저하 현상이 발생할 수 있습니다.
렌더링 과정에서 이를 비트맵으로 처리하지 않게 하기 위해서 <img> 태그가 아닌, <object>태그를 이용하여 svg 파일을 넘겨주였습니다.

개선 전

<img src={`${process.env.IMAGE_URL}/feature1.svg`} css={imageStyle} />

개선 후

<object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature1.svg`} css={imageStyle} />

4. 좌로 스크롤되는 featureSection 구현

2024-10-21.10.18.45.mov

// 3:33:src/hooks/useMainPageYScroll.ts
const useMainPageYScroll = () => {
  const featureSectionRef = useRef<HTMLDivElement>(null);
  const translateX = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      if (featureSectionRef.current) {
        const featureSectionTop = featureSectionRef.current.offsetTop;
        const scrollY = window.scrollY;

        if (scrollY >= featureSectionTop && translateX.current < window.innerWidth * 4) {
          window.scrollTo(0, featureSectionTop);
          translateX.current += scrollY - featureSectionTop;
          const newTransform = `translateX(calc(200vw - ${translateX.current > 0 ? translateX.current : 0}px))`;
          featureSectionRef.current.style.transform = newTransform;
        }
        if (scrollY <= featureSectionTop && translateX.current > 0) {
          window.scrollTo(0, featureSectionTop);
          translateX.current += scrollY - featureSectionTop;
          const newTransform = `translateX(calc(200vw - ${translateX.current < window.innerWidth * 4 ? translateX.current : window.innerWidth * 4}px))`;
          featureSectionRef.current.style.transform = newTransform;
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return {featureSectionRef};
};

featureSection의 상단에 스크롤이 도달하면, window.scrollTo(0, featureSectionTop)을 통해 스크롤y 위치를 featureSection 상단에 고정합니다.
scrollY가 증가한 만큼 translateX에 더해줍니다.
증가한 translateX 만큼 featureSectionRef를 transfomX 시킵니다.

jinhokim98

덕분에 메인페이지를 유려한 애니메이션과 함께 보여줄 수 있을 것 같아요! 고생했습니다~~

jinhokim98 · 2024-10-22T11:27:28Z

client/src/hooks/useMainPageYScroll.ts

+          translateX.current += scrollY - featureSectionTop;
+          const newTransform = `translateX(calc(200vw - ${translateX.current > 0 ? translateX.current : 0}px))`;


top속성 대신에 translateX를 사용해서 reflow가 일어나지 않게 신경써주신 점 너무 좋아요!

jinhokim98 · 2024-10-22T11:31:03Z

client/src/hooks/useMainPageYScroll.ts

+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);


개인적인 의견이지만 scroll이벤트도 좋지만 IntersectionObserver를 이용해보는 것도 좋지 않을까 싶어요!

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

intersectionObserver는 threshold에 따라서 콜백이 실행되는것 아닌가요?
여기에서는 스크롤 되는 매 시점마다의 높이가 필요합니다
intersectionObserver를 사용해서 구현을 하면 뚝뚝 끊기게 구현이 될 것 같은데,
쿠키가 생각하는 intersectionObserver 사용 방향이 어떻게 되는건가요? 이해가 잘 안가서용

jinhokim98 · 2024-10-22T11:33:57Z

client/src/hooks/useMainSectionBackgroundScroll.ts

+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);


이 부분도 IntersetionObserver를 이용해서 마지막 section이 viewport에 관측되면 visible을 false로 줘도 좋을 것 같아요!

좋은 방법인 것 같네요!
그런데, 현재 이 hook을 MainSection에서 사용하고 있고, 쿠키의 말대로라면 마지막 section의 targetRef 를 받아와야 하는데, 두세단계를 걸쳐서 targetReff를 받아오면 코드가 많이 더러워질 것 같다는 생각이 드네요...
쿠키라면 어떻게 하실건가요?

jinhokim98 · 2024-10-22T11:37:03Z

client/src/pages/MainPage/MainPage.tsx


 const MainPage = () => {
  const {trackStartCreateEvent} = useAmplitude();
-
+  const {featureSectionRef} = useMainPageYScroll();


useMainPageYScroll을 MainPage가 아니라 FeatureSection에서 호출해도 되지 않을까 생각합니다!!

좋은 방법이네요~

오 리팩토링 하는 과정에서 MainPage에 작성했던 기능이다 보니 자연스럽게 여기에 넣어버렸네요, 역시 꼼꼼한 쿠키~!
사용처에서 바로 사용하면 prop으로 넘겨주지 않아도 되겠네요~
b4360ae
반영했습니다~

jinhokim98 · 2024-10-22T11:39:37Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.style.ts

+  '@media (min-width: 640px)': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '2rem',
+  },


640px부터는 flex로 한 줄로 보여지는 건가요?

넵 맞습니다~!

jinhokim98 · 2024-10-22T11:40:59Z

client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx

+
+const Avatar = ({imagePath, name, onClick}: Props) => {
+  return (
+    <button


이것도 개인적인 의견이지만 버튼을 눌렀을 때 링크로 이동하는 기능이라면 a태그도 괜찮아보입니다!

접근성에 더 좋을 것 같네요..!

확실히 interaction이 중요한 button보다는, 링크로 이동할 수 있는 a 태그가 직관적이고 접근성에도 좋겠네요,
avatar 자체가 링크 말고도 다른 기능들이 있을 수 있겠다 싶어서 button으로 만들었는데, 우선은 a 태그가 목적에 더 부합하는 것 같습니다.

374ac23
반영했습니다~!

jinhokim98 · 2024-10-22T11:42:10Z

client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx

@@ -6,7 +6,7 @@ const AutoCalculate = () => {
  return (
    <section css={sectionStyle}>
      <article css={articleStyle}>
-        <img src={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />


이런 태그가 있다는 것 처음 알았어요.. 덕분에 배워갑니다🙇‍♂️

pakxe

이런 기상천외한 방법을 생각하시다니 역시 멋진 토다리...!!! 다양한 디바이스에서 보여질 것도 상정하고 개발하느라 고생많았습니다. 그리고 색다른 사용 경험을 위해 수평방향의 스크롤이 생겼네요! 사용자 입장에선 재밌는 요소라고 생각합니다 ㅎ,ㅎ 수고했어요 😆

그런데 모바일과 데스크탑(+마우스휠)에서 옆으로 이동되는 Feature부분이 부자연스러운 것 같아요.

KakaoTalk_Video_2024-10-23-03-25-01.mp4

모바일에서는 속도가 굉장히 빠르고, 화면이 여기저기로 이동됩니다. 그리고 밑에 프로젝트 참여자부분으로 스크롤이 옮겨졌다가 재정립되는 그 시간 차가 꽤나 커서 사용자들에게 의아함을 줄 것 같아요.

그리고 데스크탑(+마우스휠)환경에서도 비슷하게 프로젝트 참여자부분이 계속 보였다 안보였다 하는 문제가 있습니다. 반대로 스크롤할 때도 마찬가지로 위 영역이 보였다안보였다 하는 문제가 있어요.

pakxe · 2024-10-22T18:29:52Z

client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx

+
+const Avatar = ({imagePath, name, onClick}: Props) => {
+  return (
+    <button


접근성에 더 좋을 것 같네요..!

pakxe · 2024-10-22T18:31:28Z

client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx

+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '0.5rem',
+        '@media (min-width: 1200px)': {
+          gap: '1rem',
+        },


css를 분리하는건 어떨까유..?!
개인적으로는 분리하는게 더 컴포넌트 구조를 파악하기 수월하다고 생각해요

0eecb95
반영했습니다~

pakxe · 2024-10-22T18:32:10Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx

+  return (
+    <div css={sectionStyle}>
+      <Text size="subTitle" textColor="white" responsive={true}>
+        행동대장을 만든 행동대장들


pakxe · 2024-10-22T18:32:38Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx

+            name="쿠키"
+            onClick={() => window.open('https://github.com/jinhokim98', '_blank')}
+          />
+          <Avatar imagePath="soha" name="소하" onClick={() => window.open('https://github.com/soi-ha', '_blank')} />


링크를 다 넣어주셨군요..! 감덩.....🥹

pakxe · 2024-10-22T18:33:22Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx

+          FRONTEND
+        </Text>
+        <div css={avatarContainerStyle}>
+          <Avatar imagePath="todari" name="토다리" onClick={() => window.open('https://github.com/Todari', '_blank')} />


객체 배열로 만들고 arr.map(info => <Avatar {...info}/> 처럼 바꿔보는건 어떨까요?

이 방법이 코드 파악할 때 깔끔하고 좋을 것 같아요!

좋은 의견이네요~!
key는 꼭 빼먹지 마세요!!

2b949f2

soi-ha

토다리가 만들어준 랜딩페이지 덕분에 랜딩 페이지만 봐도 진짜 개 짱 멋있는 서비스 같아 보이네요!

다만, 웨디와 동일한 이유로 RC를 드렸어요~ 아무래도 모바일 웹이 퍼스트다보니.. 꼭 수정된 후에 배포가 되어야 할 것 같아요!

soi-ha · 2024-10-23T01:54:16Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx

+          FRONTEND
+        </Text>
+        <div css={avatarContainerStyle}>
+          <Avatar imagePath="todari" name="토다리" onClick={() => window.open('https://github.com/Todari', '_blank')} />


이 방법이 코드 파악할 때 깔끔하고 좋을 것 같아요!

soi-ha · 2024-10-23T01:58:24Z

client/src/pages/MainPage/Section/CreatorSection/CreatorSection.tsx

+          <Avatar
+            imagePath="2sang"
+            name="이상"
+            onClick={() => window.open('https://github.com/kunsanglee', '_blank')}


위에서 다른 팀원들이 말해줬지만 저 역시도 onClick에 window.open을 통해 링크로 이동하는 것 보다는 a 태그를 활용하는게 더 좋을 것 같아요.
후에 접근성을 개선해야 할 때, 결국에는 a태그로 변경될 것 같거든요!
그래서 onClick을 넘기기 보다는 link를 props로 받는게 좋을 것 같습니다!

그런데 혹시, onClick에 window.open을 통해 링크로 이동하는 방법으로 하신 이유가 있으신걸까요? 나중에 Avatar를 클릭했을 때, 링크 이동이 아닌 modal을 띄운다던가 같은 거요!

넹 원래는 다른 기능들도 고려하긴 했었습니다만, avatar가 다른곳에서도 사용되지 않을 것 같기도 하고, 다른 기능이 추가되지 않을 것 같아서 a 태그로 변경했습니다~

soi-ha · 2024-10-23T01:59:04Z

client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts

@@ -7,7 +7,7 @@ export const sectionStyle = css({
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
-  backgroundColor: '#ffffff',
+  // backgroundColor: '#ffffff',


필요없는 주석이라면 삭제해주시면 좋을 것 같습니다!
나중에 다시 사용하게 되는 건지 혼동이 되거등요 :)

테스트 할 때 주석처리 해놓고 잊고 있었네요 ㅜㅜ
반영했습니다!
23b913a

soi-ha · 2024-10-23T02:00:22Z

client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx

@@ -6,7 +6,7 @@ const AutoCalculate = () => {
  return (
    <section css={sectionStyle}>
      <article css={articleStyle}>
-        <img src={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />


갤릭시와 데스크탑에서는 svg 이미지가 안 깨졌는데 ios에서만 깨지는 이유를 파악하여 해결해주셨다니.. 징초ㅑ 최고에요!

그렇다면 행댕이 svg 이미지에서도 위와 같은 방식으로 적용하면 모두 해결될까요?!

행댕이는 가짜 svg라 문제가 조금 다른 부분이긴 합니다 ㅜㅜ
애초에 비트맵 이미지를 강제로 svg로 변환한 것이기 때문에, 기존 vertex와 path로 이루어진 svg의 특징이 그대로 남아있지 않아서 svg라고 보기엔 어려워요 ㅜㅜ

저런... 행댕이 ios에서 깨지는 부분은 더 찾아봐야겠네욯

soi-ha · 2024-10-23T02:01:09Z

client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts

@@ -7,7 +7,7 @@ export const sectionStyle = css({
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
-  backgroundColor: '#DFC1FF',
+  // backgroundColor: '#DFC1FF',


soi-ha · 2024-10-23T02:03:03Z

client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts

@@ -36,6 +36,8 @@ export const textContainerStyle = css({
 });

 export const imageStyle = css({
+  objectFit: 'cover',
+  aspectRatio: '1/1',


Flutter만을 위한 코드인건가요?!

만약 Flutter만을 위한 코드라면 모바일 웹 코드와 같이 작성해두어도 괜찮을지 고민이네용

아니용~ flutter를 위한 코드는 아니었고, img 태그를 object 로 바꾸면서, image의 사이즈가 적용되는 방식이 변경되어서 추가된 코드입니다!

… into feature/#764

github-actions · 2024-10-23T07:32:42Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-maiztharle.chromatic.com/

soi-ha

반영해주신 부분 확인했습니다!
빠르게 반영해줘서 고마워용!

soi-ha · 2024-10-23T07:39:20Z

client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx

  return (
-    <button onClick={onClick} css={avatarStyle}>
+    <a href={navigateUrl} target="_blank" css={avatarStyle}>


크하 ~ 편안합니댜

soi-ha · 2024-10-23T07:40:23Z

client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx

@@ -6,7 +6,7 @@ const AutoCalculate = () => {
  return (
    <section css={sectionStyle}>
      <article css={articleStyle}>
-        <img src={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />
+        <object type="image/svg+xml" data={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />


저런... 행댕이 ios에서 깨지는 부분은 더 찾아봐야겠네욯

github-actions · 2024-10-23T07:44:24Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-djfbmexzst.chromatic.com/

github-actions · 2024-10-23T07:46:19Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qktzirzskm.chromatic.com/

github-actions · 2024-10-23T07:48:55Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-fkohcwccnd.chromatic.com/

* feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거

* refactor: 랜딩 페이지 디렉토리 구조 변경 (#767) * refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경 * refactor: App을 제외한 페이지 컴포넌트 lazy loading * refactor: QueryClient가 필요하지 않은 랜딩 페이지에서 tanstack-query script 제거 * refactor: tree shaking을 deep하게 적용하기 위해 package.json에 sideEffects false 적용 * feat: prod build 파일에서 sourcemap과 license 파일 제거 * feat: 문의하기 페이지 구현 (#772) * feat: 문의하기 구글 forms 페이지 링크 연결 * fix: chromatic 에러 해결 * refactor 성능 개선 : Preconnect to requered origins (#771) * refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정 * refactor: 성능 개선 : 랜딩 페이지 이미지를 필요한 만큼만 불러오기 (#774) * feat: intersection api를 이용해서 특정 영역이 관측될 때 이미지 src를 채우는 hook 구현 * feat: useImageLazyLoading 훅 적용 * feat: 이미지 alt 값을 한국말로 변경 * fix: feature4,5 이미지를 4 불러올 때 한 번에 불러오는 방식으로 변경 * feat: threshold를 0.1에서 0.05로 조금 더 빨리 불러오도록 변경 * feat: alt 행댕이를 행댕이 - 행동대장 마스코트 라고 자세하게 설명 * feat: threshold default value 0.1 -> 0.05로 변경 * feat: 0.1 -> 0.05 놓친 부분 수정 * refactor: 성능 개선 : Kakao script를 필요한 곳에서 다운로드 받기 (#776) * feat: Kakao script 동적으로 불러올 수 있는 함수 작성 * feat: 드롭다운 버튼 베이스 onClick 메서드 추가 * feat: 모바일 환경에서 초대버튼 눌렀을 때 카카오 스크립트를 불러오도록 설정 * feat: KakaoInitializer 제거 * refactor: v2.1.1에서 구현한 랜딩페이지 개선 (#777) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거 * fix: 이벤트 홈 페이지에 있을 땐 토큰이 있어도 지출 상세로 접근 불가하도록 수정 (#781) * fix: cypress에서는 sideEffects를 tree shaking하지 않음 * refactor: 성능 개선 : Serve images in next-gen formats (#784) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * chore: webp포맷의 이미지 추가 * chore: webp타입 추가 * feat: 이미지 호스팅 경로를 생성하는 함수 구현 * feat: src, fallbackSrc를 지정해 대체 이미지를 보여줄 수 있는 Image 컴포넌트 구현 * feat: Image컴포넌트를 사용해 이미지를 불러오도록 수정 * feat: Avatar 컴포넌트에서 이미지 경량화를 위한 Image 컴포넌트를 사용 * chore: 사용하지 않고있는 토스 아이콘 제거 * feat: 용량 큰 이미지를 사용하는 곳에선 webp이미지를 사용하도록 수정 * feat: 이미지 경로를 받아오는 함수가 svg포맷도 받아들일 수 있도록 수정 * fix: 이미지 크기가 넘쳐버리지 않도록 width 속성 추가 * feat: 은행 목록 이미지를 webp로 이미지 호스팅 서버에서 가져오도록 수정 * chore: 사용하지 않는 이미지 제거 * feat: 흔듯콘을 webp로 불러오도록 함 * fix: 흔듯콘에 width부여 * design: 행동개시 행댕이의 크기가 너무 커지지 않도록 maxWidth 속성 추가 --------- Co-authored-by: 이태훈 <[email protected]> * feat: QR코드로 초대하기 기능 추가 (#783) * fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기 --------- Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: TaehunLee <[email protected]> Co-authored-by: Pakxe <[email protected]> Co-authored-by: 이태훈 <[email protected]>

Todari added 6 commits October 21, 2024 20:57

feat: 랜딩페이지 개선

a9940e4

fix: 첫 스크롤이 이상하게 되던 오류 수정

f5acd6d

design: image가 꽉차게 보이도록 변경

820bd05

move: CreatorSection 파일 위치 변경

8dbdfdf

fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경

966e3e4

fix: import 잘못된 오류 수정

1c19efa

Todari added 🖥️ FE Frontend ⚙️ feat feature labels Oct 21, 2024

Todari added this to the v2.1.2 milestone Oct 21, 2024

Todari requested review from pakxe, soi-ha and jinhokim98 October 21, 2024 13:18

Todari self-assigned this Oct 21, 2024

style: lint 적용

adb844b

jinhokim98 approved these changes Oct 22, 2024

View reviewed changes

pakxe mentioned this pull request Oct 22, 2024

[FE] 성능 개선 : Serve images in next-gen formats #784

Merged

pakxe requested changes Oct 22, 2024

View reviewed changes

soi-ha requested changes Oct 23, 2024

View reviewed changes

Todari added 6 commits October 23, 2024 14:58

fix: useMainPageYScroll.ts를 FeatureSection 내부에서 호출하도록 변경

b4360ae

refactor: avatar style 분ㄹ

0eecb95

fix: avatar를 button이 아니라 a태그로 감싸도록 변경

374ac23

style: lint 적용 및 사용하지 않는 주석과 코드 제거

23b913a

refactor: Avatar 부분 리스트 렌더링으로 변경

2b949f2

Merge branch 'fe-dev' of github.com:woowacourse-teams/2024-haeng-dong…

7cfce63

… into feature/#764

pakxe approved these changes Oct 23, 2024

View reviewed changes

soi-ha approved these changes Oct 23, 2024

View reviewed changes

Todari and others added 2 commits October 23, 2024 16:41

Merge branch 'fe-dev' into feature/#764

0ecc883

style: fix 적용

9a366f1

fix: object tag에 alt property 제거

f5ca423

Todari merged commit ccf8327 into fe-dev Oct 23, 2024
2 checks passed

Todari deleted the feature/#764 branch October 23, 2024 07:49

Todari mentioned this pull request Oct 23, 2024

[FE] v2.1.2 배포 #788

Merged

		translateX.current += scrollY - featureSectionTop;
		const newTransform = `translateX(calc(200vw - ${translateX.current > 0 ? translateX.current : 0}px))`;

		window.addEventListener('scroll', handleScroll);
		return () => window.removeEventListener('scroll', handleScroll);

[FE] v2.1.1에서 구현한 랜딩페이지 개선 #777

[FE] v2.1.1에서 구현한 랜딩페이지 개선 #777

Conversation

Todari commented Oct 21, 2024 • edited Loading

issue

구현 목적

구현 사항

1. 만든사람들 section 제작

2. 최하단 스크롤 시 배경이미지 보이지 않도록 변경

3. ios svg가 깨지는 문제

4. 좌로 스크롤되는 featureSection 구현

jinhokim98 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

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

pakxe left a comment • 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

pakxe Oct 22, 2024 • 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

soi-ha 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 23, 2024

soi-ha left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024

Todari commented Oct 21, 2024 •

edited

Loading

pakxe left a comment •

edited

Loading

pakxe Oct 22, 2024 •

edited

Loading