feat: 모바일 GNB에 커피챗 진입점 추가 (#1653)

sopt-makers · Nov 4, 2024 · fe53dc0 · fe53dc0
1 parent 38f6e6b
commit fe53dc0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/src/components/feed/list/MenuEntryIcons/Icons.tsx b/src/components/feed/list/MenuEntryIcons/Icons.tsx
@@ -90,6 +90,30 @@ export const ProjectIcon = ({ size = 30, ...props }: IconProps) => (
   </svg>
 );
 
+export const CoffeeChatIcon = ({ size = 30, ...props }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    {...props}
+  >
+    <path stroke='#4485FF' strokeWidth={1.882} d='M18.36 14.731h5.242a3.898 3.898 0 0 1 0 7.796H18.36' />
+    <path fill='#4485FF' d='M2.5 13.118h20.968v3.495c0 5.79-4.694 10.484-10.484 10.484S2.5 22.403 2.5 16.613v-3.495Z' />
+    <path
+      fill='#253B8C'
+      stroke='#4485FF'
+      strokeWidth={1.2}
+      d='M22.868 13.252c0 .248-.144.572-.604.948-.455.373-1.15.736-2.063 1.051-1.819.63-4.37 1.03-7.217 1.03-2.847 0-5.398-.4-7.217-1.03-.912-.316-1.608-.678-2.063-1.05-.46-.377-.604-.7-.604-.949 0-.248.144-.572.604-.948.455-.373 1.15-.735 2.063-1.051 1.819-.63 4.37-1.03 7.217-1.03 2.847 0 5.398.4 7.217 1.03.912.316 1.608.678 2.063 1.05.46.377.604.701.604.95Z'
+    />
+    <path
+      fill='#4485FF'
+      d='M12.584 5.69c0-1.652-1.38-2.443-2.07-2.787 1.416 0 3.596.826 4.14 2.27.696 1.844-.431 2.989-1.852 4.334-1.198 1.135.872 2.958 1.526 3.612-1.962 0-4.032-1.755-4.032-3.509 0-1.857 2.288-1.857 2.288-3.92Z'
+    />
+  </svg>
+);
+
 export const WordchainIcon = ({ size = 30, ...props }: IconProps) => (
   <svg
     width={size}

diff --git a/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx b/src/components/feed/list/MenuEntryIcons/MenuEntryIcons.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
 import { Flex } from '@toss/emotion-utils';
 import Link from 'next/link';
 import { playgroundLink } from 'playground-common/export';
 import { ReactNode } from 'react';
 
-import { CrewIcon, MemberIcon, ProjectIcon } from '@/components/feed/list/MenuEntryIcons/Icons';
+import { CoffeeChatIcon, CrewIcon, MemberIcon, ProjectIcon } from '@/components/feed/list/MenuEntryIcons/Icons';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
-import { fonts } from '@sopt-makers/fonts';
 
 interface MenuEntry {
   icon: ReactNode;
@@ -19,6 +19,7 @@ const MENU_ENTRY_LIST: MenuEntry[] = [
   { icon: <CrewIcon />, label: '모임', href: playgroundLink.groupList() },
   { icon: <MemberIcon />, label: '멤버', href: playgroundLink.memberList() },
   { icon: <ProjectIcon />, label: '프로젝트', href: playgroundLink.projectList() },
+  { icon: <CoffeeChatIcon />, label: '커피솝', href: playgroundLink.coffeechat() },
 ];
 
 interface MenuEntryIconsProps {
@@ -38,8 +39,7 @@ const MenuEntryIcons = ({ className }: MenuEntryIconsProps) => {
 const StyledMenuEntryIcons = styled(Flex)`
   width: 100%;
   @media ${MOBILE_MEDIA_QUERY} {
-    gap: 6px;
-    padding: 0 20px;
+    gap: 20px;
   }
 `;
 
@@ -54,7 +54,7 @@ interface MenuIconProps {
 const MenuIcon = ({ label, icon, href }: MenuIconProps) => {
   return (
     <MenuIconWrapper href={href}>
-      <Flex align='center'>{icon}</Flex>
+      <MenuIconBox>{icon}</MenuIconBox>
       <MenuLabel>{label}</MenuLabel>
     </MenuIconWrapper>
   );
@@ -63,21 +63,24 @@ const MenuIcon = ({ label, icon, href }: MenuIconProps) => {
 const MenuIconWrapper = styled(Link)`
   @media ${MOBILE_MEDIA_QUERY} {
     display: flex;
-    gap: 5px;
+    flex-direction: column;
+    gap: 4px;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.2s;
-    border-radius: 14px;
-    background: ${colors.gray900};
-    padding: 16px 12px;
-    width: 100%;
 
     &:hover {
       background-color: ${colors.gray800};
     }
   }
 `;
 
+const MenuIconBox = styled.div`
+  border-radius: 12px;
+  background-color: ${colors.gray900};
+  padding: 8px;
+  height: 46px;
+`;
+
 const MenuLabel = styled.div`
   @media ${MOBILE_MEDIA_QUERY} {
     white-space: nowrap;