feat: 활동내역 구현 및 Activity컴포넌트 스타일 수정 (#35)

Mogazoa-team20 · Jun 3, 2024 · dc19430 · dc19430
1 parent 704eb85
commit dc19430
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 20 deletions.
diff --git a/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss b/src/app/(userpage)/otherpage/[userId]/OtherPage.module.scss
@@ -2,8 +2,33 @@
 @import "@/styles/_media";
 
 .container {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: center;
+  gap: 50px;
+  margin-top: 60px;
+}
+
+.activity {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-start;
+  width: 940px;
+  gap: 80px;
+}
+
+.activityDetails {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   justify-content: center;
+  gap: 20px;
+}
+
+.activityDetailText {
+  padding-bottom: 30px;
+  font-size: 20px;
+  font-weight: 600;
 }
diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserAction/.gitkeep b/src/app/(userpage)/otherpage/[userId]/components/UserAction/.gitkeep
diff --git a/src/app/(userpage)/otherpage/[userId]/page.tsx b/src/app/(userpage)/otherpage/[userId]/page.tsx
@@ -2,6 +2,7 @@
 
 // import { useParams } from "next/navigation";
 import React from "react";
+import Activity from "@/components/Card/Activity/Activity";
 import cn from "@/utils/classNames";
 // 추후 데이터 연결시 받아온데이터로 변환 예정
 import { DEFAULT_PROFILE_IMAGE } from "@/utils/constant";
@@ -12,6 +13,11 @@ export default function OtherPage() {
   // userId를 받아오는 useParams function
   // const { userId } = useParams<{ userId: string }>();
 
+  const mock = {
+    name: "전자기기",
+    id: 1,
+  };
+
   return (
     <div className={cn(styles.container)}>
       <UserInfo
@@ -23,7 +29,25 @@ export default function OtherPage() {
         folloing={102}
         isfollow={false}
       />
-      <div>hi</div>
+      <div className={styles.activity}>
+        <section>
+          <p className={styles.activityDetailText}>활동 내역</p>
+          <div className={styles.activityDetails}>
+            <Activity
+              title='남긴 별점 평균'
+              averageRating={4.1}
+            />
+            <Activity
+              title='남긴 리뷰'
+              reviewCount={4}
+            />
+            <Activity
+              title='관심 카테고리'
+              chipCategoty={mock}
+            />
+          </div>
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Card/Activity/Activity.module.scss b/src/components/Card/Activity/Activity.module.scss
@@ -10,15 +10,31 @@
 
   max-width: 300px;
 
-  gap: 20px;
-
   @include rounded-lg;
   background: $black-200;
   border: 1px solid $gray-300;
 
   @include respond-to(tablet) {
     padding: 20px 21px;
+  }
+}
+
+.borderBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 68px;
+  gap: 20px;
+
+  @include respond-to(tablet) {
+    height: 60px;
     gap: 15px;
+
+  }
+
+  @include respond-to(mobile) {
+    height: 80px;
   }
 }
 
@@ -43,6 +59,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 29px;
 
   span {
     @include text-xl;

diff --git a/src/components/Card/Activity/Activity.tsx b/src/components/Card/Activity/Activity.tsx
@@ -45,24 +45,26 @@ export default function Activity({ title, averageRating, reviewCount, chipCatego
 
   return (
     <div className={styles.container}>
-      <div className={styles.title}>
-        <span>{namgin}</span>
-        <span>{namuji}</span>
-      </div>
-      {title === "관심 카테고리" ? (
-        <Category>{chipCategoty?.name}</Category>
-      ) : (
-        <div className={styles.contentBox}>
-          <figure className={styles.imageBox}>
-            <Image
-              src={changeImageSrc as string}
-              alt='title'
-              fill
-            />
-          </figure>
-          <span>{mainContent}</span>
+      <div className={styles.borderBox}>
+        <div className={styles.title}>
+          <span>{namgin}</span>
+          <span>{namuji}</span>
         </div>
-      )}
+        {title === "관심 카테고리" ? (
+          <Category>{chipCategoty?.name}</Category>
+        ) : (
+          <div className={styles.contentBox}>
+            <figure className={styles.imageBox}>
+              <Image
+                src={changeImageSrc as string}
+                alt='title'
+                fill
+              />
+            </figure>
+            <span>{mainContent}</span>
+          </div>
+        )}
+      </div>
     </div>
   );
 }