Merge branch 'dev' into feature-006

teamViNO · Feb 19, 2024 · aee2d61 · aee2d61
2 parents dab554c + 4f1edc6
commit aee2d61
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 29 deletions.
diff --git a/src/components/SearchPage/SearchResultBox.tsx b/src/components/SearchPage/SearchResultBox.tsx
@@ -2,22 +2,26 @@ import { IVideo } from '@/models/search';
 import Styled from '@/styles/SearchResult';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { userInfoState } from '@/stores/user';
+import { useRecoilValue } from 'recoil';
 
 interface SearchResultProp {
     video : IVideo;
     tags : string[];
 }
 
 const SearchResultBox : React.FC<SearchResultProp>= ({video, tags}) => {
-    const nav = useNavigate();  
+    const nav = useNavigate();
+    const userName = useRecoilValue(userInfoState);
     const date = video.created_at.toString().split('T')[0].split('-');
     const handleImg = (event : React.SyntheticEvent<HTMLImageElement, Event>) => {
         const target = event.target as HTMLImageElement;
         target.style.display = 'none';
     }
     const handleOnclick = () => {
-        nav(`/summary/${video.video_id}`);
+        nav(`/summary/${video.video_id}?insight=${userName?.name === video.user}`);
     }
+
     return (
         <Styled.VideoCard style={{width : '910px', height : '254px'}} onClick={handleOnclick}>
             <div className="main" style={{width : '670px', height : '254px'}}>

diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx
@@ -66,7 +66,7 @@ const Card: React.FC<ICardProps> = ({
 
       <CardStyles.Content
         to={`/summary/${video.video_id}${
-          mode === 'recommend' && '?insights=true'
+          mode === 'recommend' && '?insight=true'
         }`}
       >
         <CardStyles.Title>{video.title}</CardStyles.Title>

diff --git a/src/components/skeleton/ProfilePageSkeleton.tsx b/src/components/skeleton/ProfilePageSkeleton.tsx
@@ -0,0 +1,39 @@
+import * as ProfilePageSkeletonStyles from '@/styles/skeleton/ProfilePageSkeleton.style';
+
+const ProfilePageSkeleton = () => {
+  return (
+    <ProfilePageSkeletonStyles.Container>
+      <ProfilePageSkeletonStyles.Rectangle className="medium" />
+      <ProfilePageSkeletonStyles.Rectangle />
+      <ProfilePageSkeletonStyles.Box />
+      <ProfilePageSkeletonStyles.Wrap>
+        <ProfilePageSkeletonStyles.Box className="large" />
+        <ProfilePageSkeletonStyles.InnerWrap>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="medium" />
+        </ProfilePageSkeletonStyles.InnerWrap>
+      </ProfilePageSkeletonStyles.Wrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+          <ProfilePageSkeletonStyles.Rectangle className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
+      <ProfilePageSkeletonStyles.CommonWrap>
+        <ProfilePageSkeletonStyles.CommonFlex>
+          <ProfilePageSkeletonStyles.Rectangle className="small" />
+          <ProfilePageSkeletonStyles.Chip className="large" />
+        </ProfilePageSkeletonStyles.CommonFlex>
+      </ProfilePageSkeletonStyles.CommonWrap>
+    </ProfilePageSkeletonStyles.Container>
+  );
+};
+
+export default ProfilePageSkeleton;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
@@ -2,9 +2,10 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { Account, ServiceSetting } from '@/components/ProfilePage';
 import { userInfoState, userTokenState } from '@/stores/user';
 import { Wrapper } from '@/styles/ProfilePage';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import WithdrawModal from '@/components/modals/WIthdrawModal';
 import NoticeModal from '@/components/modals/NoticeModal';
+import ProfilePageSkeleton from '@/components/skeleton/ProfilePageSkeleton';
 
 const ProfilePage = () => {
   const [reason, setReason] = useState('');
@@ -36,33 +37,40 @@ const ProfilePage = () => {
 
   return (
     <>
-      <Wrapper>
-        <div className="container">
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 60 }}>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-              <h1 className="title">내 정보</h1>
-              <span className="description">여기서 계정 정보를 관리하세요</span>
-            </div>
+      {!userInfo && <ProfilePageSkeleton />}
+      {userInfo && (
+        <Wrapper>
+          <div className="container">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 60 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <h1 className="title">내 정보</h1>
+                <span className="description">
+                  여기서 계정 정보를 관리하세요
+                </span>
+              </div>
 
-            {userInfo && (
-              <>
-                <Account />
+              {userInfo && (
+                <>
+                  <Account />
 
-                <ServiceSetting />
-              </>
-            )}
-          </div>
+                  <ServiceSetting />
+                </>
+              )}
+            </div>
 
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
-            <button className="other" onClick={handleOpenModal}>
-              회원탈퇴
-            </button>
-            <button className="other" onClick={handleOpenModal}>
-              로그아웃
-            </button>
+            <div
+              style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}
+            >
+              <button className="other" onClick={handleOpenModal}>
+                회원탈퇴
+              </button>
+              <button className="other" onClick={handleOpenModal}>
+                로그아웃
+              </button>
+            </div>
           </div>
-        </div>
-      </Wrapper>
+        </Wrapper>
+      )}
 
       {isLogoutModalOpen && (
         <NoticeModal

diff --git a/src/styles/category/index.style.ts b/src/styles/category/index.style.ts
@@ -14,10 +14,10 @@ const CommonIconBackground = styled.div`
 `;
 
 export const Container = styled.div`
-  padding: 60px 60px 40px 120px;
+  padding: 60px 0 40px;
   width: 100%;
   margin-inline: auto;
-  max-width: 1440px;
+  max-width: 910px;
 `;
 
 export const MenuWrap = styled.div`

diff --git a/src/styles/skeleton/ProfilePageSkeleton.style.ts b/src/styles/skeleton/ProfilePageSkeleton.style.ts
@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+import { CommonBackground } from './CategoryPageSkeleton.style';
+
+export const CommonFlex = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Container = styled.div`
+  padding: 60px 0 121px;
+  margin-inline: auto;
+  width: 873px;
+`;
+
+export const Rectangle = styled(CommonBackground)`
+  width: 220px;
+  height: 20px;
+  margin: 12px 0 59px;
+
+  &.small,
+  &.medium,
+  &.large {
+    margin: 0;
+  }
+  &.small {
+    width: 41px;
+  }
+
+  &.medium {
+    width: 90px;
+    height: 40px;
+  }
+
+  &.large {
+    width: 274px;
+    margin-top: 11px;
+    align-self: flex-end;
+  }
+`;
+
+export const Box = styled(CommonBackground)`
+  width: 40px;
+  height: 40px;
+
+  &.large {
+    width: 84px;
+    height: 84px;
+  }
+`;
+
+export const Wrap = styled.div`
+  display: flex;
+  margin-top: 53px;
+  justify-content: flex-end;
+`;
+
+export const InnerWrap = styled(CommonFlex)`
+  justify-content: space-between;
+  margin-left: 20px;
+`;
+
+export const Chip = styled(CommonBackground)`
+  width: 41px;
+  height: 20px;
+
+  &.medium {
+    width: 734px;
+    height: 43px;
+  }
+
+  &.large {
+    width: 838px;
+    height: 50px;
+    margin-top: 10px;
+  }
+`;
+
+export const CommonWrap = styled(CommonFlex)`
+  margin-top: 45px;
+  align-items: flex-end;
+`;