Merge pull request #30 from tag-wonder/feat/result-card

tag-wonder · Dec 6, 2023 · be22207 · be22207
2 parents 2fc027b + ba7b2f9
commit be22207
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 27 deletions.
diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx
@@ -17,18 +17,48 @@ function ResultPage() {
       <section className={styles.resultSection}>
         <h2 className={clsx(fonts.samliphopangche, styles.subTitle)}>가장 많이 적혀진 태그</h2>
         <div className={styles.resultContentsWrapper}>
-          <ResultCard color="pink" />
-          <ResultCard color="brown" />
-          <ResultCard color="grey" />
+          <ResultCard
+            color="pink"
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={51}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+            grade={1}
+          />
+          <ResultCard
+            color="brown"
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={29}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+            grade={2}
+          />
+          <ResultCard
+            color="grey"
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={13}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+            grade={3}
+          />
         </div>
       </section>
       <div className={styles.divider} />
       <section className={styles.resultSection}>
-        <h2 className={clsx(fonts.samliphopangche, styles.subTitle)}>가장 많이 적혀진 태그</h2>
+        <h2 className={clsx(fonts.samliphopangche, styles.subTitle)}>내가 받은 태그 목록</h2>
         <div className={styles.resultContentsWrapper}>
-          <div>1등</div>
-          <div>2등</div>
-          <div>3등</div>
+          <ResultCard
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={4}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+          />
+          <ResultCard
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={3}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+          />
+          <ResultCard
+            title="안녕하세요안녕하세요안녕하세요"
+            voteCount={2}
+            voters={['사승민', '안졍군', '한채영', '어쩌고', '저쩌고', '어쩌고저쩌고', '블라블라']}
+          />
         </div>
       </section>
     </main>

diff --git a/src/components/common/ResultCard/index.module.scss b/src/components/common/ResultCard/index.module.scss
@@ -7,14 +7,21 @@
   border-radius: 4px;
   gap: 18px;
   width: 100%;
-  padding: 12px 12px 36px 12px;
+  padding: 12px;
   position: relative;
 
+  &.open {
+    padding: 12px 12px 36px 12px;
+  }
+
   .cardTitleWrapper {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    border-bottom: 1px dashed color("grey/08");
+
+    &.open {
+      border-bottom: 1px dashed color("grey/08");
+    }
 
     .titleDescription {
       display: flex;
@@ -34,6 +41,14 @@
         padding: 0px;
         border: none;
         background-color: transparent;
+
+        .arrowIcon {
+          transform: rotate(0);
+
+          &.open {
+            transform: rotate(180deg);
+          }
+        }
       }
     }
 

diff --git a/src/components/common/ResultCard/index.tsx b/src/components/common/ResultCard/index.tsx
@@ -1,3 +1,7 @@
+'use client';
+
+import { checkEmpty, checkNumber } from '@nf-team/core';
+import { useBoolean } from '@nf-team/react';
 import clsx from 'clsx';
 
 import fonts from '@/app/fonts';
@@ -7,33 +11,45 @@ import { ColorType } from '@/lib/types/color';
 import styles from './index.module.scss';
 
 type Props = {
-  color: ColorType;
+  color?: ColorType;
+  grade?: number;
+  voteCount: number;
+  title: string;
+  voters: string[];
 };
 
-function ResultCard({ color }: Props) {
+function ResultCard({
+  color, grade, voteCount, title, voters,
+}: Props) {
+  const [isOpen, , , toggleOpen] = useBoolean(false);
+
   return (
-    <div className={styles.resultCardWrapper}>
-      <div className={styles.cardTitleWrapper}>
-        <div className={styles.optionTitle}>
-          <div className={clsx(styles.gradBadge, styles[color])}>
-            <div className={clsx(fonts.samliphopangche, styles.grade)}>1등</div>
+    <div className={clsx(styles.resultCardWrapper, isOpen && styles.open)}>
+      <div className={clsx(styles.cardTitleWrapper, isOpen && styles.open)}>
+        {grade && (
+          <div className={styles.optionTitle}>
+            <div className={clsx(styles.gradBadge, color && styles[color])}>
+              <div className={clsx(fonts.samliphopangche, styles.grade)}>{`${checkNumber(grade)}등`}</div>
+            </div>
+            <div className={styles.space} />
+            <div className={clsx(fonts.samliphopangche, styles.voted)}>{`${checkNumber(voteCount)}명 적음`}</div>
           </div>
-          <div className={styles.space} />
-          <div className={clsx(fonts.samliphopangche, styles.voted)}>51명 적음</div>
-        </div>
+        )}
         <div className={styles.titleDescription}>
-          <div className={styles.title}>안녕하세요안녕하세요안녕하세요</div>
-          <button className={styles.arrowButton} type="button">
-            <ArrowIcon />
+          <div className={styles.title}>{`${title}${grade ? '' : `(${checkNumber(voteCount)})`}`}</div>
+          <button className={styles.arrowButton} type="button" onClick={() => toggleOpen()}>
+            <ArrowIcon className={clsx(styles.arrowIcon, isOpen && styles.open)} />
           </button>
         </div>
       </div>
-      <div className={clsx(fonts.samliphopangche, styles.resultCardContents)}>
-        <div className={styles.voterTitle}>태그 적은 사람</div>
-        <div className={styles.voter}>
-          사승민, 안정균, 한채영,어쩌고,저쩌고,어쩌고저쩌고,블라블라,
+      {isOpen && (
+        <div className={clsx(fonts.samliphopangche, styles.resultCardContents)}>
+          <div className={styles.voterTitle}>태그 적은 사람</div>
+          <div className={styles.voter}>
+            {checkEmpty(voters).join(', ')}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }