feat(detail): detail페이지 틀 생성 (#7)

* feat(detail): detail페이지 틀 생성

* feat(mbti): 궁합 작성

* feat: mbti 상세 카드 퍼블리싱 (#8)

* fix(app/page): detail to login

* fix(detail): key 추가 및 100vh 되돌림

* 데스크톱 이슈로 되돌려놓음

---------

Co-authored-by: SeoYoung Bae <[email protected]>

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.2",
+    "embla-carousel-react": "^8.0.0-rc17",
     "next": "14.0.3",
     "next-auth": "^4.24.5",
     "react": "^18",

src/app/detail/detail.module.scss

@@ -0,0 +1,33 @@
+.detail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  overflow-y: auto;
+  padding: 3rem 1rem;
+  gap: 1.5rem;
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+  }
+
+  &__mbti {
+    font-size: 6rem;
+    color: #13c299;
+    line-height: 1.2;
+  }
+}
+
+.detailButton {
+  background-color: transparent;
+}
+
+.detailButton:hover {
+  background-color: transparent;
+}

src/app/detail/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { Potta_One, Poor_Story } from 'next/font/google';
+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 MBTICards from '@/components/MBTICards';
+
+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);
+
+  // MOCK_DATA
+  const items = [
+    {
+      MBTI: 'E',
+      description: ['Star 수 총 0000개', '팔로잉 / 팔로워 총 00000명'],
+      subDescription: [
+        { title: '팔로잉/팔로워', contents: '50명 ⬆' },
+        { title: '작성률', contents: '30개 ⬆' },
+      ],
+    },
+    {
+      MBTI: 'N',
+      description: ['Star 수 총 0000개', '팔로잉 / 팔로워 총 00000명'],
+      subDescription: [
+        { title: '팔로잉/팔로워', contents: '50명 ⬆' },
+        { title: '작성률', contents: '30개 ⬆' },
+      ],
+    },
+    {
+      MBTI: 'F',
+      description: ['Star 수 총 0000개', '팔로잉 / 팔로워 총 00000명'],
+      subDescription: [
+        { title: '팔로잉/팔로워', contents: '50명 ⬆' },
+        { title: '작성률', contents: '30개 ⬆' },
+      ],
+    },
+    {
+      MBTI: 'P',
+      description: ['Star 수 총 0000개', '팔로잉 / 팔로워 총 00000명'],
+      subDescription: [
+        { title: '팔로잉/팔로워', contents: '50명 ⬆' },
+        { title: '작성률', contents: '30개 ⬆' },
+      ],
+    },
+  ];
+
+  return (
+    <div className={styles.detail}>
+      <div className={styles.detail__title}>
+        <p>
+          {userId}님의
+          <br />
+          COMMIT 엠비티아이
+        </p>
+        <p className={cx(styles.detail__mbti, pottaOne.className)}>{mbti}</p>
+      </div>
+      {!isOpen ? (
+        <Button className={styles.detailButton} onClick={() => setIsOpen(true)}>
+          <p className={poorStory.className}>더 자세히 살펴보기</p>
+        </Button>
+      ) : (
+        <MBTICards slides={items} />
+      )}
+    </div>
+  );
+}

src/app/globals.css

@@ -20,9 +20,10 @@ body {
   max-width: 100vw;
   overflow-x: hidden;
   background-color: #0d1116;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
   color: var(--gray-30);
+  overflow-y: auto;
 }
 
 body {

src/app/layout.tsx

@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Poor_Story } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Poor_Story } from 'next/font/google';
+import './globals.css';
 
-const poorStory = Poor_Story({ weight: "400", subsets: ["latin"] });
+const poorStory = Poor_Story({ weight: '400', subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "커밋 결산",
-  description: "2023 커밋 결산",
+  title: '커밋 결산',
+  description: '2023 커밋 결산',
 };
 
 export default function RootLayout({

src/components/Card/Card.module.scss

@@ -0,0 +1,9 @@
+.Card {
+  width: 100%;
+  height: 100%;
+  background-color: #1e2228;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 1rem;
+}

src/components/Card/Card.tsx

@@ -0,0 +1,14 @@
+import cx from 'classnames';
+import styles from './Card.module.scss';
+import { PropsWithChildren } from 'react';
+
+interface Props {
+  className?: string;
+}
+
+export default function Card({
+  className,
+  children,
+}: PropsWithChildren<Props>) {
+  return <div className={cx(styles.Card, className)}>{children}</div>;
+}

src/components/Card/index.ts

@@ -0,0 +1,3 @@
+import Card from './Card';
+
+export default Card;

src/components/MBTICards/MBTICards.module.scss

@@ -0,0 +1,80 @@
+.embla {
+  overflow-x: hidden;
+  width: 100%;
+  height: 17rem;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  flex: 0 0 100%;
+  //min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.card {
+  font-family: 'Pretendard Variable', Pretendard;
+}
+
+.topFrame {
+  padding: 1.5rem 0;
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  align-items: center;
+  > p {
+    color: #13c299;
+    font-size: 3.75rem;
+    font-weight: 700;
+  }
+  > ul {
+    line-height: 180%;
+  }
+}
+
+.bottomFrame {
+  padding: 1rem;
+  display: flex;
+  gap: 2rem;
+  > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+  h4 {
+    color: #8fa6c7;
+    font-weight: 400;
+  }
+  p {
+    color: #13c299;
+    font-size: 2rem;
+    font-weight: 700;
+  }
+}
+
+.divider {
+  width: 1px;
+  border-right: 2px solid #536174;
+  height: 6rem;
+}
+
+.embla__dots {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.embla__dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: #2b313a;
+  border: none;
+
+  &--selected {
+    background-color: #13c299;
+  }
+}