feat(detail) : 상세 카드 틀 잡기 & 애니메이션 적용 (#9)

* feat: global.css 수정 * feat: 상세 설명 카드 애니메이션 적용 및 틀잡기
danmooozi · Jan 2, 2024 · 4e20982 · 4e20982
1 parent a331db6
commit 4e20982
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 21 deletions.
diff --git a/src/app/detail/detail.module.scss b/src/app/detail/detail.module.scss
@@ -4,8 +4,10 @@
   align-items: center;
   height: 100%;
   overflow-y: auto;
-  padding: 3rem 1rem;
+  padding: 3rem 1rem 11rem 1rem;
   gap: 1.5rem;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 
   &__title {
     display: flex;
@@ -24,10 +26,32 @@
   }
 }
 
+.detail::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera*/
+}
+
 .detailButton {
   background-color: transparent;
 }
 
 .detailButton:hover {
   background-color: transparent;
 }
+
+.cards_scroll {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.card {
+  overflow: hidden;
+  height: 28.125rem;
+  width: 100%;
+  top: 0;
+  text-align: center;
+  margin-bottom: 30px;
+  position: sticky;
+  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.4);
+}
diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx
@@ -4,16 +4,17 @@ import cx from 'classnames';
 import useUserStore from '@/stores/user';
 import styles from './detail.module.scss';
 import Button from '@/components/Button';
-import { useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import MBTICards from '@/components/MBTICards';
-
+import Card from '@/components/Card';
 const pottaOne = Potta_One({ weight: '400', subsets: ['latin'] });
 const poorStory = Poor_Story({ weight: '400', subsets: ['latin'] });
 
 export default function Page() {
   const { userId, mbti } = useUserStore();
   const [isOpen, setIsOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useRef<null | HTMLDivElement>(null);
+  const refs = useRef<null[] | HTMLDivElement[]>([]);
 
   // MOCK_DATA
   const items = [
@@ -51,8 +52,24 @@ export default function Page() {
     },
   ];
 
+  const updateStyle = () => {
+    const headerHeight = 16;
+    if (refs.current && refs.current.length) {
+      refs.current.map((card, i) => {
+        const incValue = i * headerHeight;
+        card?.setAttribute('style', `top: ${incValue}px;`);
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.addEventListener('scroll', updateStyle);
+    }
+  }, []);
+
   return (
-    <div className={styles.detail}>
+    <div className={styles.detail} ref={containerRef}>
       <div className={styles.detail__title}>
         <p>
           {userId}님의
@@ -66,7 +83,67 @@ export default function Page() {
           <p className={poorStory.className}>더 자세히 살펴보기</p>
         </Button>
       ) : (
-        <MBTICards slides={items} />
+        <>
+          <MBTICards slides={items} />
+
+          <section className={styles.cards_scroll}>
+            {/* 팔로워/팔로잉 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[0] = element;
+              }}
+            >
+              <h2>card 1</h2>
+            </Card>
+            {/* 총 커밋 개수 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[1] = element;
+              }}
+            >
+              <h2>card 2</h2>
+            </Card>
+            {/* 주로 커밋한 날 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[2] = element;
+              }}
+            >
+              <h2>card 3</h2>
+            </Card>
+
+            {/* 코딩 라인 수 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[3] = element;
+              }}
+            >
+              <h2>card 4</h2>
+            </Card>
+            {/* 자주 사용하는 언어 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[4] = element;
+              }}
+            >
+              <h2>card 5</h2>
+            </Card>
+            {/* 나와 많이 소통한 커밋터 카드 */}
+            <Card
+              className={styles.card}
+              ref={(element) => {
+                refs.current[5] = element;
+              }}
+            >
+              <h2>card 6</h2>
+            </Card>
+          </section>
+        </>
       )}
     </div>
   );

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -15,15 +15,17 @@
   margin: 0;
 }
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+html {
   background-color: #0d1116;
-  width: 100vw;
   height: 100vh;
   color: var(--gray-30);
-  overflow-y: auto;
+  scrollbar-width: none;
+}
+body {
+  width: 100%;
+  max-width: 375px;
+  min-width: 320px;
+  height: 100%;
 }
 
 body {
@@ -36,6 +38,14 @@ body {
     rgb(var(--background-start-rgb));
 }
 
+@media (min-width: 375px) {
+  body {
+    width: 375px;
+    position: relative;
+    margin: auto;
+  }
+}
+
 a {
   color: inherit;
   text-decoration: none;

diff --git a/src/app/login/login.module.scss b/src/app/login/login.module.scss
@@ -1,4 +1,5 @@
 .login {
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,14 +1,20 @@
 import cx from 'classnames';
 import styles from './Card.module.scss';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ForwardedRef, forwardRef } from 'react';
 
 interface Props {
   className?: string;
 }
 
-export default function Card({
-  className,
-  children,
-}: PropsWithChildren<Props>) {
-  return <div className={cx(styles.Card, className)}>{children}</div>;
+function Card(
+  { className, children }: PropsWithChildren<Props>,
+  ref: ForwardedRef<HTMLDivElement | null>,
+) {
+  return (
+    <div className={cx(styles.Card, className)} ref={ref}>
+      {children}
+    </div>
+  );
 }
+
+export default forwardRef(Card);
diff --git a/src/components/MBTICards/MBTICards.module.scss b/src/components/MBTICards/MBTICards.module.scss
@@ -1,7 +1,11 @@
+.container {
+  width: 100%;
+  height: 17rem;
+}
 .embla {
   overflow-x: hidden;
   width: 100%;
-  height: 17rem;
+  height: 100%;
 }
 .embla__container {
   display: flex;

diff --git a/src/components/MBTICards/MBTICards.tsx b/src/components/MBTICards/MBTICards.tsx
@@ -46,7 +46,7 @@ function MBTICards({ slides }: PropType) {
   }, [emblaApi, onInit, onSelect]);
 
   return (
-    <>
+    <div className={styles.container}>
       <div className={styles.embla} ref={viewportRef}>
         <div className={styles.embla__container}>
           {slides.map((slide, idx) => {
@@ -89,7 +89,7 @@ function MBTICards({ slides }: PropType) {
           ))}
         </div>
       </div>
-    </>
+    </div>
   );
 }