카드 퍼블리싱1 (#10)

* feat: 자주 사용하는 언어 카드 퍼블리싱

* feat: 커밋 개수 카드 퍼블리싱

* feat: 코딩 라인수 카드 퍼블리싱

src/app/detail/components/CodingLineCard/CodingLineCard.module.scss

@@ -0,0 +1,57 @@
+.card {
+  padding: 2.5rem 2.75rem;
+  font-family: 'Pretendard Variable', Pretendard;
+  align-items: center;
+  > p {
+    color: #8fa6c7;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+  > h3 {
+    color: #13c299;
+    font-size: 3rem;
+    font-weight: 700;
+  }
+}
+
+.description {
+  margin-top: 5.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    p {
+      color: #dce8f8;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+    h4 {
+      font-size: 2.5rem;
+      font-weight: 700;
+    }
+  }
+  &_plus {
+    h4 {
+      color: transparent;
+      background:
+        url('/background_green.png'),
+        linear-gradient(#13c299, #13c29900) 0% 0% / 100px 100px repeat;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+  }
+
+  &_minus {
+    h4 {
+      color: transparent;
+      background:
+        url('/background_orange.png'),
+        linear-gradient(#ffaa00, #e5990000) 0% 0% / 100px 100px repeat;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+  }
+}

src/app/detail/components/CodingLineCard/CodingLineCard.tsx

@@ -0,0 +1,42 @@
+import { ForwardedRef, forwardRef } from 'react';
+import cx from 'classnames';
+
+import Card from '@/components/Card';
+import styles from './CodingLineCard.module.scss';
+
+interface Props {
+  className: string;
+  lines: {
+    total: number;
+    plus: number;
+    minus: number;
+  };
+}
+
+const CodingLineCard = (
+  { className, lines }: Props,
+  ref: ForwardedRef<HTMLDivElement | null>,
+) => {
+  return (
+    <Card ref={ref} className={cx(className, styles.card)}>
+      <p>총 1년간 코딩한 라인 수</p>
+      <h3>
+        {lines.total.toLocaleString('ko-KR')} <span>개</span>{' '}
+      </h3>
+
+      <div className={styles.description}>
+        <div className={styles.description_plus}>
+          <p>작성한 코드</p>
+          <h4>+{lines.plus.toLocaleString('ko-KR')}</h4>
+        </div>
+
+        <div className={styles.description_minus}>
+          <p>지운 코드</p>
+          <h4>-{lines.minus.toLocaleString('ko-KR')}</h4>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default forwardRef(CodingLineCard);

src/app/detail/components/CommitCountCard/CommitCount.module.scss

@@ -0,0 +1,35 @@
+.card {
+  padding: 2.5rem 2.75rem;
+  font-family: 'Pretendard Variable', Pretendard;
+  align-items: center;
+  > p {
+    color: #8fa6c7;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+  > h3 {
+    color: #13c299;
+    font-size: 3rem;
+    font-weight: 700;
+  }
+}
+
+.icon {
+  margin-top: 3.2rem;
+  margin-bottom: 2rem;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  p {
+    color: #8ea1b9;
+    font-size: 1.125rem;
+    font-weight: 500;
+    > span {
+      color: #13c299;
+      font-weight: 700;
+    }
+  }
+}

src/app/detail/components/CommitCountCard/CommitCountCard.tsx

@@ -0,0 +1,42 @@
+import { ForwardedRef, forwardRef } from 'react';
+import cx from 'classnames';
+import Image from 'next/image';
+
+import Card from '@/components/Card';
+import styles from './CommitCount.module.scss';
+
+interface Props {
+  className: string;
+  count: number;
+  isMore: boolean;
+}
+
+const CommitCountCard = (
+  { className, count, isMore }: Props,
+  ref: ForwardedRef<HTMLDivElement | null>,
+) => {
+  return (
+    <Card ref={ref} className={cx(className, styles.card)}>
+      <p>총 커밋 갯수는</p>
+      <h3>
+        {count.toLocaleString('ko-KR')} <span>개</span>{' '}
+      </h3>
+
+      <Image
+        src="/commits.png"
+        alt="커밋 아이콘"
+        width={203}
+        height={140}
+        className={styles.icon}
+      />
+      <div className={styles.description}>
+        <p>다른 커밋터 분들에 비해</p>
+        <p>
+          <span>{isMore ? '많이' : '적게'}</span> 하신 편이에요!
+        </p>
+      </div>
+    </Card>
+  );
+};
+
+export default forwardRef(CommitCountCard);

src/app/detail/components/CommitCountCard/index.ts

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

src/app/detail/components/LanguageCard/LanguageCard.module.scss

@@ -0,0 +1,96 @@
+.card {
+  padding: 2.5rem 2.75rem;
+  font-family: 'Pretendard Variable', Pretendard;
+  > p {
+    color: #8fa6c7;
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+  > h3 {
+    color: #13c299;
+    font-size: 3rem;
+    font-weight: 700;
+  }
+}
+
+.description {
+  position: relative;
+  margin-top: 2.94rem;
+
+  .ellipse1Wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .ellipse1 {
+    position: relative;
+    &_text {
+      position: absolute;
+      color: #00cb9c;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      h5 {
+        font-size: 1.375rem;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+      }
+      p {
+        font-size: 1.25rem;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .ellipse2Wrapper {
+    position: absolute;
+    top: 4.8rem;
+    right: 1.1rem;
+  }
+
+  .ellipse2 {
+    position: relative;
+    &_text {
+      position: absolute;
+      color: #00a881;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      h5 {
+        font-size: 1.125rem;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+      }
+      p {
+        font-size: 1.125rem;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .ellipse3Wrapper {
+    position: absolute;
+    top: 8.75rem;
+    left: 3.3rem;
+  }
+
+  .ellipse3 {
+    position: relative;
+    &_text {
+      position: absolute;
+      color: #00a881;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1rem;
+      h5 {
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+      }
+      p {
+        font-weight: 500;
+      }
+    }
+  }
+}

src/app/detail/components/LanguageCard/LanguageCard.tsx

@@ -0,0 +1,70 @@
+import { ForwardedRef, forwardRef } from 'react';
+import cx from 'classnames';
+import Image from 'next/image';
+
+import Card from '@/components/Card';
+import styles from './LanguageCard.module.scss';
+
+interface Props {
+  className: string;
+  languages: string[];
+}
+
+const LanguageCard = (
+  { className, languages }: Props,
+  ref: ForwardedRef<HTMLDivElement | null>,
+) => {
+  return (
+    <Card ref={ref} className={cx(className, styles.card)}>
+      <p>자주 사용하는 언어</p>
+      <h3>{languages[0]}</h3>
+
+      <div className={styles.description}>
+        <div className={styles.ellipse1Wrapper}>
+          <div className={styles.ellipse1}>
+            <Image
+              src="/Ellipse1.svg"
+              alt="1위 언어"
+              width={144}
+              height={144}
+            />
+
+            <div className={styles.ellipse1_text}>
+              <h5>1위</h5>
+              <p>{languages[0]}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.ellipse2Wrapper}>
+          <div className={styles.ellipse2}>
+            <Image
+              src="/Ellipse2.svg"
+              alt="2위 언어"
+              width={108}
+              height={108}
+            />
+
+            <div className={styles.ellipse2_text}>
+              <h5>2위</h5>
+              <p>{languages[1]}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.ellipse3Wrapper}>
+          <div className={styles.ellipse3}>
+            <Image src="/Ellipse3.svg" alt="3위 언어" width={93} height={93} />
+
+            <div className={styles.ellipse3_text}>
+              <h5>3위</h5>
+              <p>{languages[2]}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default forwardRef(LanguageCard);

src/app/detail/components/LanguageCard/index.ts

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