Merge pull request #148 from Gamegoo-repo/design/#147

[Design] 매너레벨 디자인 변경사항 적용
Gamegoo-repo · Oct 30, 2024 · 45f87f2 · 45f87f2
2 parents db79113 + 304ad14
commit 45f87f2
Show file tree

Hide file tree

Showing 20 changed files with 149 additions and 51 deletions.
diff --git a/public/assets/icons/check_level4.svg → public/assets/icons/check_level.svg b/public/assets/icons/check_level4.svg → public/assets/icons/check_level.svg
diff --git a/public/assets/icons/check_level1.svg b/public/assets/icons/check_level1.svg
diff --git a/public/assets/icons/check_level2.svg b/public/assets/icons/check_level2.svg
diff --git a/public/assets/icons/check_level3.svg b/public/assets/icons/check_level3.svg
diff --git a/public/assets/icons/check_level5.svg b/public/assets/icons/check_level5.svg
diff --git a/public/assets/icons/check_level_ring.svg b/public/assets/icons/check_level_ring.svg
diff --git a/public/assets/icons/check_level_ring1.svg b/public/assets/icons/check_level_ring1.svg
diff --git a/public/assets/icons/check_level_ring2.svg b/public/assets/icons/check_level_ring2.svg
diff --git a/public/assets/icons/check_level_ring3.svg b/public/assets/icons/check_level_ring3.svg
diff --git a/public/assets/icons/check_level_ring4.svg b/public/assets/icons/check_level_ring4.svg
diff --git a/public/assets/icons/chevron_down.svg b/public/assets/icons/chevron_down.svg
diff --git a/src/app/icon.png → public/icon.png b/src/app/icon.png → public/icon.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -92,6 +92,7 @@ export default function RootLayout({
           content="리그 오브 레전드 유저를 위한 실시간 듀오 매칭 서비스입니다.
 듀오 찾기 게시판, 실시간 채팅, 친구 추가 기능을 통해 원하는 게임 친구를 바로 찾아보세요."
         />
+        <link rel="icon" href="/icon.png" />
       </head>
       <body>
         <HelmetProvider>

diff --git a/src/app/matching/complete/page.tsx b/src/app/matching/complete/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useCallback } from "react";
 import styled from "styled-components";
 import HeaderTitle from "@/components/common/HeaderTitle";
 import SquareProfile from "@/components/match/SquareProfile";
@@ -99,6 +99,61 @@ const Complete = () => {
   //   };
   // }, []);
 
+  /* 뒤로가기 이벤트 감지 */
+  // useEffect(() => {
+  //   const handleBack = () => {
+  //     alert("뒤로가기");
+  //     window.history.go(-2); // 두 단계 뒤로 이동
+  //     // if (role === "receiver") {
+  //     // } else {
+  //     //   window.history.go(-1); // 한 단계 뒤로 이동
+  //     // }
+  //   };
+
+  //   window.addEventListener("popstate", handleBack);
+
+  //   return () => {
+  //     window.removeEventListener("popstate", handleBack);
+  //   };
+  // }, [router]);
+
+  // useEffect(() => {
+  //   const handleBack = (event: any) => {
+  //     // window.history.go(-2);
+  //     event.preventDefault(); // 기본 뒤로 가기 동작 방지
+  //     router.back(); // 커스텀 동작
+  //     router.back(); // 커스텀 동작
+  //   };
+
+  //   window.addEventListener("popstate", handleBack);
+
+  //   return () => {
+  //     window.removeEventListener("popstate", handleBack);
+  //   };
+  // }, [router]);
+  const isClickedFirst = useRef(false);
+
+  const handlePopState = useCallback(() => {
+    // 1. 뒤로 가기를 클릭한 순간 16라인이 바로 제거된다.
+    history.go(-2); // 현재 경로를 다시 추가
+  }, []);
+
+  // 최초 한 번 실행
+  // useEffect(() => {
+  //   if (!isClickedFirst) {
+  //     history.pushState(null, "", ""); // 처음 렌더링될 때 추가되고 뒤로 가기 클릭 시 제거된다.
+  //     isClickedFirst.current = true;
+  //   }
+  // }, []);
+
+  // 이벤트
+  useEffect(() => {
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [handlePopState]);
+
   useEffect(() => {
     const userString = searchParams.get("user");
 
@@ -247,6 +302,7 @@ const Complete = () => {
 
   // matching-success 수신 시 타이머 종료 및 채팅방 열기
   const handleChatUuidgetWithTimerClear = (res: any) => {
+    setTimeLeft(0);
     clearAllTimers(); // 모든 타이머 정리
     setIsCompleted("true");
     // dispatch(setComplete(true));

diff --git a/src/app/mypage/review/page.tsx b/src/app/mypage/review/page.tsx
@@ -49,7 +49,10 @@ const MyReviewPage = () => {
                 매너 키워드는 하나 당 1점, 비매너 키워드는 -2점으로 계산해요.
               </Gray>
             </Top>
-            <MannerLevelBar recentLevel={myManner?.mannerLevel || 1} />
+            <MannerLevelBar
+              recentLevel={myManner?.mannerLevel || 1}
+              mannerRank={myManner?.mannerRank}
+            />
           </Box>
         </Review>
         <Private>
@@ -165,7 +168,10 @@ const Private = styled.header`
 
 const Box = styled.div`
   width: 100%;
-  height: 177px;
+  height: 195px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   padding: 29px 36px;
   border-radius: 20px;
   background: ${theme.colors.gray500};

diff --git a/src/app/user/[id]/page.tsx b/src/app/user/[id]/page.tsx
@@ -27,6 +27,7 @@ const UserProfilePage = () => {
       try {
         const response = await getOtherProfile(Number(id));
         setOtherProfile(response.result);
+        console.log(response);
       } catch (error) {
         console.error(error);
       }

diff --git a/src/components/common/MannerLevelBar.tsx b/src/components/common/MannerLevelBar.tsx
@@ -2,7 +2,6 @@ import { theme } from "@/styles/theme";
 import Image from "next/image";
 import styled, { css } from "styled-components";
 import ChevronDownIcon from "../../../public/assets/icons/chevron_down.svg";
-import BlindProfile from "../user/BlindProfile";
 
 const levelColors = [
   theme.colors.purple400,
@@ -13,8 +12,8 @@ const levelColors = [
 ];
 
 interface MannerLevelBarProps {
-  recentLevel?: number;
-  mannerRank?: number;
+  recentLevel: number;
+  mannerRank?: number | null;
   isBlind?: boolean;
 }
 
@@ -24,17 +23,17 @@ const MannerLevelBar = (props: MannerLevelBarProps) => {
   return (
     <Container>
       <Bar>
-        <PurpleBar $isBlind={isBlind} />
+        <PurpleBar $recentLevel={recentLevel} $isBlind={isBlind} />
         <BlackBar $isBlind={isBlind} />
       </Bar>
       <Check>
         {[1, 2, 3, 4, 5].map((level) => (
-          <LevelBox key={level} level={level - 1}>
+          <LevelBox key={level} $isColor={recentLevel === level}>
             {recentLevel === level && (
               <Recent>
                 {mannerRank && (
                   <Percentage>{`상위 ${
-                    mannerRank || 0
+                    Math.floor(mannerRank) || 0
                   }% 의 매너레벨`}</Percentage>
                 )}
                 <DownIconWrapper level={level - 1}>
@@ -53,11 +52,31 @@ const MannerLevelBar = (props: MannerLevelBarProps) => {
                     ? level <= 1
                       ? "/assets/icons/check_level_blind.svg"
                       : "/assets/icons/check_level_blind_ring.svg"
-                    : `/assets/icons/check_level${level}.svg`
+                    : level === recentLevel
+                    ? `/assets/icons/check_level.svg`
+                    : level < recentLevel
+                    ? `/assets/icons/check_level_ring${level}.svg`
+                    : `/assets/icons/check_level_ring.svg`
                 }
                 alt={`check_level${level}`}
-                width={isBlind ? (level > 1 ? 17 : 39) : level === 5 ? 17 : 39}
-                height={isBlind ? (level > 1 ? 17 : 39) : level === 5 ? 17 : 39}
+                width={
+                  isBlind
+                    ? level > 1
+                      ? 17
+                      : 39
+                    : level !== recentLevel
+                    ? 17
+                    : 39
+                }
+                height={
+                  isBlind
+                    ? level > 1
+                      ? 17
+                      : 39
+                    : level !== recentLevel
+                    ? 17
+                    : 39
+                }
                 style={{
                   ...(isBlind === false && {
                     marginBottom: level === 5 ? "0px" : undefined,
@@ -83,35 +102,43 @@ const Container = styled.div`
 `;
 
 const Bar = styled.div`
-  width: calc(100% - 25px);
+  width: calc(100% - 30px);
+  width: 100%;
   height: 3.8px;
   display: flex;
   align-items: center;
   position: absolute;
   bottom: 17px;
-  left: 0;
+  left: 15px;
 `;
 
-const PurpleBar = styled.div<{ $isBlind: boolean }>`
-  width: 80%;
+const PurpleBar = styled.div<{ $recentLevel: number; $isBlind: boolean }>`
+  /* width: ${({ $recentLevel }) => `${($recentLevel - 1) * 25}%`}; */
+  width: ${({ $recentLevel }) =>
+    `calc((${($recentLevel - 1) * 25}%) - ${($recentLevel - 1) * 7.5}px)`};
+
   height: 3.8px;
   background: linear-gradient(90deg, #dbd6fe 0%, #5a42ee 100%);
   ${({ $isBlind }) =>
     $isBlind &&
     css`
       background: ${theme.colors.gray700};
     `}
+  position: absolute;
+  z-index: 10;
 `;
 
 const BlackBar = styled.div<{ $isBlind: boolean }>`
-  width: 20%;
+  width: calc(100% - 30px);
   height: 3.8px;
   background: #606060;
   ${({ $isBlind }) =>
     $isBlind &&
     css`
       background: ${theme.colors.gray700};
     `}
+
+  position: absolute;
 `;
 
 const Check = styled.div`
@@ -125,15 +152,17 @@ const Check = styled.div`
   left: 0;
 `;
 
-const LevelBox = styled.div<{ level: number }>`
+const LevelBox = styled.div<{ $isColor: boolean }>`
   display: flex;
   width: 39px;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  color: ${(props) => levelColors[props.level]};
+  color: ${({ theme, $isColor }) =>
+    $isColor ? theme.colors.purple100 : theme.colors.gray700};
   position: relative;
+  z-index: 20;
 `;
 
 const Recent = styled.div`
@@ -151,10 +180,7 @@ const Percentage = styled.div`
 const DownIconWrapper = styled.div<{ level: number }>`
   width: 10px;
   height: 12px;
-  path {
-    fill: ${(props) => levelColors[props.level]};
-    transform: scale(1.42857);
-  }
+  margin-bottom: 4px;
   svg {
     width: 10px;
     height: 10px;
@@ -164,7 +190,7 @@ const DownIconWrapper = styled.div<{ level: number }>`
 const Level = styled.div<{ bold: boolean; $isBlind: boolean }>`
   ${(props) =>
     props.bold ? props.theme.fonts.bold14 : props.theme.fonts.regular14};
-  margin-bottom: 5px;
+  margin-bottom: ${(props) => (props.bold ? "15px" : "5px")};
   ${({ $isBlind }) =>
     $isBlind &&
     css`

diff --git a/src/components/user/BlindProfile.tsx b/src/components/user/BlindProfile.tsx
@@ -79,7 +79,7 @@ const BlindProfile = () => {
                   최근 <Span>0</Span>명의 사용자가{` `}
                   탈퇴한 사용자{` `}님에게 긍정적 매너 평가를 남겼어요.
                 </Text>
-                <MannerLevelBar isBlind={true} />
+                <MannerLevelBar recentLevel={0} isBlind={true} />
               </Box>
             </div>
             <div>

diff --git a/src/components/user/UserProfile.tsx b/src/components/user/UserProfile.tsx
@@ -76,13 +76,14 @@ const UserProfile = ({
                   매너 레벨은 겜구 사용자로부터 받은 매너평가, 비매너평가를
                   반영한 지표예요.
                   <br />
-                  최근 <Span>{profile.mannerRatingCount}</Span>명의 사용자가{` `}
+                  최근 <Span>{profile.mannerRatingCount}</Span>명의 사용자가
+                  {` `}
                   {profile.gameName}
                   {` `}님에게 긍정적 매너 평가를 남겼어요.
                 </Text>
                 <MannerLevelBar
                   recentLevel={manner.mannerLevel}
-                  mannerRank={manner.mannerRank}
+                  mannerRank={profile.mannerRank || null}
                 />
               </Box>
             </div>

diff --git a/src/interface/profile.ts b/src/interface/profile.ts
@@ -20,7 +20,7 @@ export interface User {
   tier: string;
   rank: number;
   manner: number;
-  mannerRank?: null | number;
+  mannerRank: null | number;
   mannerRatingCount?: number;
   updatedAt: string;
   mainP: number;