7iw8nQa/#186/finishMatch

package.json

@@ -29,6 +29,7 @@
     "@types/stompjs": "^2.3.9",
     "axios": "^1.6.5",
     "emotion-reset": "^3.0.1",
+    "framer-motion": "^11.0.18",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/Router.tsx

@@ -3,17 +3,17 @@ import Login from './login';
 import AuthKakao from './login/AuthKakao';
 import Landing from './landing/Landing';
 import Register from './register/RegisterPage';
-// // import MainPage from './main/pages/mainPage';
-// import DetailPage from './main/pages/DetailPage';
-// import FinishMatch from './main/pages/finishMatch';
-// import NungilList from './nungilList/pages/nungilList';
-// import ReceivedDetailPage from './nungilList/pages/receivedDetailPage';
-// import SendDetailPage from './nungilList/pages/sendDetailPage';
-// import MyPage from './mypage/pages/myPage';
-// import EditProfilePage from './mypage/pages/editProfilePage';
-// import Chat from './chat/Chat';
-// import ChatRoom from './chat/components/chatRoom/ChatRoom';
-import 사전신청완료 from './common/components/RegisterAdvanceApplication';
+import MainPage from './main/pages/mainPage';
+import DetailPage from './main/pages/DetailPage';
+import FinishMatch from './main/pages/finishMatch';
+import NungilList from './nungilList/pages/nungilList';
+import ReceivedDetailPage from './nungilList/pages/receivedDetailPage';
+import SendDetailPage from './nungilList/pages/sendDetailPage';
+import MyPage from './mypage/pages/myPage';
+import EditProfilePage from './mypage/pages/editProfilePage';
+import Chat from './chat/Chat';
+import ChatRoom from './chat/components/chatRoom/ChatRoom';
+// import 사전신청완료 from './common/components/RegisterAdvanceApplication';
 
 const router = createBrowserRouter([
   {
@@ -30,20 +30,20 @@ const router = createBrowserRouter([
       },
       {
         path: '/main-page',
-        element: <사전신청완료 />,
+        element: <MainPage />,
       },
-      // {
-      //   path: 'detailpage/:nungilId',
-      //   element: <DetailPage />,
-      // },
-      // { path: 'finishmatch/:nungilId', element: <FinishMatch /> },
-      // { path: 'nungillist', element: <NungilList /> },
-      // { path: 'receiveddetailpage/:nungilId', element: <ReceivedDetailPage /> },
-      // { path: 'senddetailpage/:nungilId', element: <SendDetailPage /> },
-      // { path: 'mypage', element: <MyPage /> },
-      // { path: 'editprofilepage', element: <EditProfilePage /> },
-      // { path: 'chat', element: <Chat /> },
-      // { path: 'chat/:chatRoomId', element: <ChatRoom /> },
+      {
+        path: 'detailpage/:nungilId',
+        element: <DetailPage />,
+      },
+      { path: 'finishmatch/:nungilId', element: <FinishMatch /> },
+      { path: 'nungillist', element: <NungilList /> },
+      { path: 'receiveddetailpage/:nungilId', element: <ReceivedDetailPage /> },
+      { path: 'senddetailpage/:nungilId', element: <SendDetailPage /> },
+      { path: 'mypage', element: <MyPage /> },
+      { path: 'editprofilepage', element: <EditProfilePage /> },
+      { path: 'chat', element: <Chat /> },
+      { path: 'chat/:chatRoomId', element: <ChatRoom /> },
     ],
   },
   {

src/chat/components/InfoModal.tsx

@@ -110,7 +110,6 @@ export default InfoModal;
 const StInfoModalContainer = styled.div`
   position: absolute;
   top: 0;
-  left: -50%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -119,13 +118,10 @@ const StInfoModalContainer = styled.div`
   max-width: 45rem;
   height: 100vh;
   background: rgb(0 0 0 / 50%);
-  transform: translateX(50%);
+  transform: translateX(-5%);
 `;
 
 const StInfoModalWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
   max-width: 32rem;
   padding-top: 3rem;
   background: ${({ theme }) => theme.colors.white};
@@ -138,6 +134,10 @@ const StXButton = styled.button`
   align-items: center;
   justify-content: end;
   padding: 0 2.5rem;
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const StInfoTitle = styled.span`

src/chat/components/chatRoom/ChatRoomHeader.tsx

@@ -109,7 +109,7 @@ const StSenderJob = styled.p`
 `;
 
 const StChatModalWrapper = styled.button`
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: 1.5rem;
   align-items: center;
@@ -125,11 +125,12 @@ const StChatModalWrapper = styled.button`
   text-align: center;
   background: #fcf3e2;
   border-radius: 10px;
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const ModalBox = css`
   z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;

src/common/components/AnimalProfile.tsx

@@ -71,6 +71,7 @@ const AnimalProfile = ({ animalFace }: { animalFace: string }) => {
     default:
       break;
   }
+
   return <div>{AnimalFace && <AnimalFace />}</div>;
 };
 

src/common/components/ProfileCard.tsx

@@ -33,13 +33,15 @@ const ProfileCard = ({
   ClickProfileCard: (nungilId: number, nickname: string) => void;
   nungilState: string;
 }) => {
+  const detailbtn = '상세 프로필 보기 >';
+
   return (
     <div css={Container}>
       {profileData &&
         profileData.map((profile) => (
-          <div
+          <StProfileWrapper
             key={profile.nungilId}
-            css={Profile.Wrapper}
+            animalFace={profile.animalFace}
             onClick={() => ClickProfileCard(profile.nungilId, profile.nickname)}
           >
             <div css={Profile.Top}>
@@ -58,9 +60,10 @@ const ProfileCard = ({
                 <span>
                   프로필 삭제까지 D-{calculateDday(profile.expiredAt)}
                 </span>
+                <StDetailBtn>{detailbtn}</StDetailBtn>
               </StDdaySection>
             ) : null}
-          </div>
+          </StProfileWrapper>
         ))}
     </div>
   );
@@ -77,21 +80,40 @@ const Container = css`
   background: ${theme.colors.white};
 `;
 
-const Profile = {
-  Wrapper: css`
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    width: 34rem;
-    padding: 2.5rem 2.7rem;
-    line-height: 2rem;
-    color: ${theme.colors.white};
-    ${theme.fonts.body2b}
+const StProfileWrapper = styled.div<{ animalFace: string }>`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 34rem;
+  padding: 2.5rem 2.7rem;
+  line-height: 2rem;
+  color: ${theme.colors.white};
+  ${theme.fonts.body2b}
 
-    background: linear-gradient(116deg, #ff6264 0%, #ffa490 70.79%);
-    border-radius: 15px;
-  `,
+  background: ${(props) =>
+    props.animalFace === '여우상'
+      ? '#FF9052'
+      : props.animalFace === '강아지상'
+        ? '#E5A582'
+        : props.animalFace === '토끼상'
+          ? '#F27D72'
+          : props.animalFace === '공룡상'
+            ? '#66CB9B'
+            : props.animalFace === '사슴상'
+              ? '#F3AB72'
+              : props.animalFace === '늑대상'
+                ? '#939DF9'
+                : props.animalFace === '말상'
+                  ? '#FF9E88'
+                  : props.animalFace === '고양이상'
+                    ? '#FFC159'
+                    : props.animalFace === '곰상'
+                      ? '#C48A86'
+                      : ''};
+  border-radius: 15px;
+`;
 
+const Profile = {
   Top: css`
     display: flex;
     flex-direction: row;
@@ -109,13 +131,13 @@ const Profile = {
   CompanyName: css`
     font-size: 1.4rem;
     font-weight: 600;
-    color: ${theme.colors.gray0};
+    color: ${theme.colors.white};
   `,
 
   Job: css`
     font-size: 1.2rem;
     font-weight: 500;
-    color: ${theme.colors.gray2};
+    color: ${theme.colors.white};
   `,
 
   DescriptionBox: css`
@@ -136,6 +158,14 @@ const StDdaySection = styled.div`
   width: 100%;
   padding-top: 1.5rem;
   margin-top: 2rem;
-  border-top: 1px solid ${({ theme }) => theme.colors.white};
   ${({ theme }) => theme.fonts.body3};
 `;
+
+const StDetailBtn = styled.p`
+  margin-left: 8.5rem;
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.gray0};
+  text-align: center;
+  letter-spacing: -0.3px;
+`;

src/main/assets/svgs/index.ts

@@ -9,6 +9,7 @@ import Chat from './chat.svg?react';
 import Lock from './lock-icon.svg?react';
 import Check from './check.svg?react';
 import CheckPink from './checkpink.svg?react';
+import TimeLine from './timeline.svg?react';
 
 export {
   Arrow,
@@ -22,4 +23,5 @@ export {
   Lock,
   Check,
   CheckPink,
+  TimeLine,
 };

src/main/components/CountDown.tsx

@@ -5,45 +5,41 @@ export const calculateTimeLeft = () => {
   const now = new Date();
   const targetTime = new Date();
 
-  targetTime.setHours(11, 0, 0, 0);
-
-  if (now.getHours() >= 11) {
-    targetTime.setDate(targetTime.getDate() + 1);
-  }
-
-  targetTime.setHours(10, 0, 0, 0);
-
-  const matchingTime = now.getHours() >= 11 || now.getHours() < 10;
+  targetTime.setHours(24, 0, 0, 0);
 
   const timeDifference = targetTime.getTime() - now.getTime();
-  const minutesLeft = Math.floor(timeDifference / (1000 * 60));
+  const totalSecondsLeft = Math.floor(timeDifference / 1000);
+
+  const hours = Math.floor(totalSecondsLeft / 3600);
+  const minutes = Math.floor((totalSecondsLeft % 3600) / 60);
+  const seconds = totalSecondsLeft % 60;
 
   return {
-    minutes: minutesLeft % 60,
-    hours: Math.floor(minutesLeft / 60),
-    matchingTime,
+    hours: formatTime(hours),
+    minutes: formatTime(minutes),
+    seconds: formatTime(seconds),
   };
 };
 
+const formatTime = (time: number) => {
+  return time < 10 ? `0${time}` : `${time}`;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const CountDown = ({ onMatchingTime }: any) => {
+const CountDown = () => {
   const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {
     const timer = setInterval(() => {
-      const newTime = calculateTimeLeft().matchingTime;
       setTimeLeft(calculateTimeLeft());
-      onMatchingTime(newTime);
     }, 1000);
 
     return () => clearInterval(timer);
-  }, [onMatchingTime, timeLeft.matchingTime]);
+  }, []);
 
   return (
     <div>
-      <p>
-        {timeLeft.hours}시간 {timeLeft.minutes}분
-      </p>
+      {timeLeft.hours}:{timeLeft.minutes}:{timeLeft.seconds}
     </div>
   );
 };