💄 design: search result 호버 시 효과

42Statistics · Jul 5, 2023 · c6ec75c · c6ec75c
1 parent 5f3de02
commit c6ec75c
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 11 deletions.
diff --git a/...onents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/ProjectSearchItem.tsx b/...onents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/ProjectSearchItem.tsx
@@ -1,6 +1,7 @@
 import { ProjectPreview } from '@/__generated__/graphql';
 import ft_logo from '@assets/42-logo.svg';
 import { Clickable, HStack, Image, Text } from '@components/common';
+import styled from '@emotion/styled';
 
 type ProjectSearchItemProps = {
   project: ProjectPreview;
@@ -12,11 +13,25 @@ export const ProjectSearchItem = ({
   onSubmit,
 }: ProjectSearchItemProps) => {
   return (
-    <Clickable onClick={() => onSubmit(project.name)}>
-      <HStack w="100%" spacing="1.2rem">
+    <Clickable onClick={() => onSubmit(project.name)} style={{ width: '100%' }}>
+      <Layout>
         <Image src={ft_logo} alt="42 로고" width="18px" />
         <Text>{project.name}</Text>
-      </HStack>
+      </Layout>
     </Clickable>
   );
 };
+
+const Layout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: ${({ theme }) => theme.radius.sm};
+  transition: background-color 0.3s ease-out;
+
+  &:hover {
+    background-color: #e8e8e8;
+  }
+`;
diff --git a/...onents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/ProjectSearchList.tsx b/...onents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/ProjectSearchList.tsx
@@ -9,7 +9,7 @@ export const ProjectSearchList = ({
   onSubmit,
 }: ProjectSearchListProps) => {
   return (
-    <VStack w="100%" align="start" spacing="1.2rem">
+    <VStack w="100%" align="start">
       {projects.slice(0, 4).map((project) => (
         <ProjectSearchItem
           key={project.id}

diff --git a/...omponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchItem.tsx b/...omponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchItem.tsx
@@ -1,5 +1,7 @@
 import { UserPreview } from '@/__generated__/graphql';
 import { Avatar, Clickable, HStack, Text } from '@components/common';
+import styled from '@emotion/styled';
+import { rgba } from 'emotion-rgba';
 
 type UserSearchItemProps = {
   user: UserPreview;
@@ -8,11 +10,29 @@ type UserSearchItemProps = {
 
 export const UserSearchItem = ({ user, onSubmit }: UserSearchItemProps) => {
   return (
-    <Clickable key={user.id} onClick={() => onSubmit(user.login)}>
-      <HStack spacing="1.2rem">
+    <Clickable
+      key={user.id}
+      onClick={() => onSubmit(user.login)}
+      style={{ width: '100%' }}
+    >
+      <Layout>
         <Avatar size="xs" src={user.imgUrl} />
         <Text>{user.login}</Text>
-      </HStack>
+      </Layout>
     </Clickable>
   );
 };
+
+const Layout = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: ${({ theme }) => theme.radius.sm};
+  transition: background-color 0.3s ease-out;
+
+  &:hover {
+    background-color: #e8e8e8;
+  }
+`;
diff --git a/...omponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchList.tsx b/...omponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchList.tsx
@@ -6,7 +6,7 @@ type UserSearchListProps = UserSearchResultProps;
 
 export const UserSearchList = ({ users, onSubmit }: UserSearchListProps) => {
   return (
-    <VStack w="100%" align="start" spacing="1.2rem">
+    <VStack w="100%" align="start">
       {users.slice(0, 4).map((user) => (
         <UserSearchItem key={user.id} user={user} onSubmit={onSubmit} />
       ))}

diff --git a/...ponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchResult.tsx b/...ponents/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/UserSearchResult.tsx
@@ -9,7 +9,7 @@ export type UserSearchResultProps = {
 
 export const UserSearchResult = (props: UserSearchResultProps) => {
   return (
-    <VStack w="100%" align="start" spacing="2rem">
+    <VStack w="100%" align="start" spacing="1rem">
       <BoldText>유저</BoldText>
       <Divider style={{ width: '100%' }} />
       <UserSearchList {...props} />

diff --git a/app/src/components/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/index.tsx b/app/src/components/elements/SearchBar/TabletAndAbove/TabletAndAboveSearchResult/index.tsx
@@ -33,12 +33,12 @@ const Layout = styled.div`
   flex-direction: column;
   position: absolute;
   top: 6rem;
-  left: 0;
+  left: 1rem;
   width: 30rem;
   padding: 2.5rem;
   gap: 3rem;
   border-radius: ${({ theme }) => theme.radius.md};
-  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 4px 8px #ccc;
   background-color: ${({ theme }) => theme.colors.mono.white};
   z-index: ${({ theme }) => theme.zIndex.searchResult};
 `;