fix: 레이아웃 쉬프트 방지 및 메인 페이지 이미지 css수정

codeit-bootcamp-frontend · May 28, 2024 · e865644 · e865644
1 parent 297e423
commit e865644
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git a/components/Nav/Nav.styled.ts b/components/Nav/Nav.styled.ts
@@ -4,6 +4,7 @@ export const NavModal = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 3rem;
 `;
 
 export const UserProfile = styled.div`

diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import useGetFolder from '@/hooks/useGetFolder';
 import ContentsContainer from '@/components/ContentsContainer';
+import Loading from '@/components/Loading/Loading';
 
 function Shared() {
   const [searchKeyword, setSearchKeyWord] = useState('');
@@ -24,22 +25,21 @@ function Shared() {
   const [userId, setUserId] = useState('');
   const { linkList, loading } = useGetFolder(userId, searchKeyword, folderId);
 
-  const loadOwnerFolderData = async () => {
-    const folder = await getFolderData(folderId);
-    if (folder) {
-      setFolderName(folder[0].name);
-      setUserId(folder[0].user_id);
-    }
-  };
-
-  const loadOwnerData = async () => {
-    const user = await getUserData(userId);
-    if (user) {
-      setOwner(user[0]);
-    }
-  };
-
   useEffect(() => {
+    const loadOwnerFolderData = async () => {
+      const folder = await getFolderData(folderId);
+      if (folder) {
+        setFolderName(folder[0].name);
+        setUserId(folder[0].user_id);
+      }
+    };
+
+    const loadOwnerData = async () => {
+      const user = await getUserData(userId);
+      if (user) {
+        setOwner(user[0]);
+      }
+    };
     if (folderId) {
       loadOwnerFolderData();
     }
@@ -50,6 +50,7 @@ function Shared() {
 
   return (
     <>
+      {loading && <Loading />}
       <S.OwnerProfile>
         <Image
           src={owner.image_source}
@@ -62,7 +63,11 @@ function Shared() {
       </S.OwnerProfile>
       <S.SharedContent>
         <SearchBar setSearchKeyWord={setSearchKeyWord} />
-        {searchKeyword && <p>{searchKeyword}로 검색한 결과입니다.</p>}
+        {searchKeyword && (
+          <S.SearchResult>
+            <p>{searchKeyword}</p>로 검색한 결과입니다.
+          </S.SearchResult>
+        )}
         <ContentsContainer content={linkList.length}>
           {linkList.length > 0 ? (
             linkList.map((item) => <Card item={item} key={item.id} />)

diff --git a/styles/index.styled.ts b/styles/index.styled.ts
@@ -34,7 +34,7 @@ export const Header__contents = styled.div`
   width: 100%;
 
   @media (max-width: 768px) {
-    gap: 1.5rem;
+    gap: 2.4rem;
 
     a {
       width: 100%;
@@ -68,25 +68,25 @@ export const Slogan_gradient = styled.span`
 export const Header__image = styled.div`
   width: 120rem;
   height: 59rem;
-  padding: 5rem 4rem 0;
+  padding: 5rem 4.1rem 0;
   overflow: hidden;
 
   @media (max-width: 1199px) {
-    width: 70rem;
-    height: 34rem;
-    padding: 3rem 2.4rem 0;
+    width: 69.8rem;
+    height: 34.3rem;
+    padding: 2.9rem 2.4rem 0;
   }
 
   @media (max-width: 768px) {
-    height: 16rem;
-    width: 32.5rem;
-    padding: 1.3rem 1rem 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 2 / 1;
   }
 `;
 
 export const HeaderImage = styled.div`
   position: relative;
-  height: 66rem;
+  height: 65.9rem;
   width: 100%;
 
   img {
@@ -99,7 +99,8 @@ export const HeaderImage = styled.div`
   }
 
   @media (max-width: 768px) {
-    height: 18rem;
+    aspect-ratio: 1.7 / 1;
+    height: auto;
   }
 `;
 

diff --git a/styles/shared.styled.ts b/styles/shared.styled.ts
@@ -17,6 +17,7 @@ export const OwnerName = styled.p`
   font-weight: 400;
   line-height: 2.4rem;
   margin-top: 1.2rem;
+  height: 2.4rem;
 `;
 
 export const FolderName = styled.p`
@@ -29,6 +30,7 @@ export const FolderName = styled.p`
   font-weight: 600;
   line-height: normal;
   margin-top: 2rem;
+  height: 5.5rem;
 `;
 
 export const SharedContent = styled.div`
@@ -70,3 +72,20 @@ export const EmptyFolder = styled.div`
   align-items: center;
   padding: 8rem 0;
 `;
+
+export const SearchResult = styled.div`
+  display: flex;
+  width: 100%;
+  margin-bottom: 4rem;
+  color: var(--Linkbrary-gray60);
+  font-family: Pretendard;
+  font-size: 3.2rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.2px;
+
+  p {
+    color: var(--Linkbrary-gray100);
+  }
+`;