diff --git a/public/Ellipse1.svg b/public/Ellipse1.svg new file mode 100644 index 0000000..2a4d220 --- /dev/null +++ b/public/Ellipse1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/Ellipse2.svg b/public/Ellipse2.svg new file mode 100644 index 0000000..898a8c5 --- /dev/null +++ b/public/Ellipse2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/Ellipse3.svg b/public/Ellipse3.svg new file mode 100644 index 0000000..249c58d --- /dev/null +++ b/public/Ellipse3.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/background_green.png b/public/background_green.png new file mode 100644 index 0000000..9fbb278 Binary files /dev/null and b/public/background_green.png differ diff --git a/public/background_orange.png b/public/background_orange.png new file mode 100644 index 0000000..f078105 Binary files /dev/null and b/public/background_orange.png differ diff --git a/public/commits.png b/public/commits.png new file mode 100644 index 0000000..3d4b4cc Binary files /dev/null and b/public/commits.png differ diff --git a/src/app/detail/components/CodingLineCard/CodingLineCard.module.scss b/src/app/detail/components/CodingLineCard/CodingLineCard.module.scss new file mode 100644 index 0000000..a17c1c9 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/detail/components/CodingLineCard/CodingLineCard.tsx b/src/app/detail/components/CodingLineCard/CodingLineCard.tsx new file mode 100644 index 0000000..aa8092d --- /dev/null +++ b/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, +) => { + return ( + +

총 1년간 코딩한 라인 수

+

+ {lines.total.toLocaleString('ko-KR')} 개{' '} +

+ +
+
+

작성한 코드

+

+{lines.plus.toLocaleString('ko-KR')}

+
+ +
+

지운 코드

+

-{lines.minus.toLocaleString('ko-KR')}

+
+
+ + ); +}; + +export default forwardRef(CodingLineCard); diff --git a/src/app/detail/components/CommitCountCard/CommitCount.module.scss b/src/app/detail/components/CommitCountCard/CommitCount.module.scss new file mode 100644 index 0000000..e7d529d --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/detail/components/CommitCountCard/CommitCountCard.tsx b/src/app/detail/components/CommitCountCard/CommitCountCard.tsx new file mode 100644 index 0000000..7d9b8b8 --- /dev/null +++ b/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, +) => { + return ( + +

총 커밋 갯수는

+

+ {count.toLocaleString('ko-KR')} 개{' '} +

+ + 커밋 아이콘 +
+

다른 커밋터 분들에 비해

+

+ {isMore ? '많이' : '적게'} 하신 편이에요! +

+
+ + ); +}; + +export default forwardRef(CommitCountCard); diff --git a/src/app/detail/components/CommitCountCard/index.ts b/src/app/detail/components/CommitCountCard/index.ts new file mode 100644 index 0000000..741d84e --- /dev/null +++ b/src/app/detail/components/CommitCountCard/index.ts @@ -0,0 +1,3 @@ +import CommitCountCard from './CommitCountCard'; + +export default CommitCountCard; diff --git a/src/app/detail/components/LanguageCard/LanguageCard.module.scss b/src/app/detail/components/LanguageCard/LanguageCard.module.scss new file mode 100644 index 0000000..626bf87 --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/app/detail/components/LanguageCard/LanguageCard.tsx b/src/app/detail/components/LanguageCard/LanguageCard.tsx new file mode 100644 index 0000000..434de4a --- /dev/null +++ b/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, +) => { + return ( + +

자주 사용하는 언어

+

{languages[0]}

+ +
+
+
+ 1위 언어 + +
+
1위
+

{languages[0]}

+
+
+
+ +
+
+ 2위 언어 + +
+
2위
+

{languages[1]}

+
+
+
+ +
+
+ 3위 언어 + +
+
3위
+

{languages[2]}

+
+
+
+
+ + ); +}; + +export default forwardRef(LanguageCard); diff --git a/src/app/detail/components/LanguageCard/index.ts b/src/app/detail/components/LanguageCard/index.ts new file mode 100644 index 0000000..131d97b --- /dev/null +++ b/src/app/detail/components/LanguageCard/index.ts @@ -0,0 +1,3 @@ +import LanguageCard from './LanguageCard'; + +export default LanguageCard; diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx index 61225cf..80c1a6b 100644 --- a/src/app/detail/page.tsx +++ b/src/app/detail/page.tsx @@ -7,6 +7,10 @@ import Button from '@/components/Button'; import { useEffect, useState, useRef } from 'react'; import MBTICards from '@/components/MBTICards'; import Card from '@/components/Card'; +import LanguageCard from './components/LanguageCard'; +import CommitCountCard from './components/CommitCountCard'; +import CodingLineCard from './components/CodingLineCard/CodingLineCard'; + const pottaOne = Potta_One({ weight: '400', subsets: ['latin'] }); const poorStory = Poor_Story({ weight: '400', subsets: ['latin'] }); @@ -54,6 +58,7 @@ export default function Page() { const updateStyle = () => { const headerHeight = 16; + if (refs.current && refs.current.length) { refs.current.map((card, i) => { const incValue = i * headerHeight; @@ -97,14 +102,15 @@ export default function Page() {

card 1

{/* 총 커밋 개수 카드 */} - { refs.current[1] = element; }} - > -

card 2

- + count={15222} + isMore={true} + /> + {/* 주로 커밋한 날 카드 */} {/* 코딩 라인 수 카드 */} - { refs.current[3] = element; }} - > -

card 4

- + lines={{ total: 21450, minus: 15050, plus: 23000 }} + /> + {/* 자주 사용하는 언어 카드 */} - { refs.current[4] = element; }} - > -

card 5

- + languages={['Typescript', 'Javascript', 'HTML']} + /> {/* 나와 많이 소통한 커밋터 카드 */}