Merge pull request #653 from depromeet/develop

[v2.4.8] 배포용 PR

src/components/Icon/InquiredChannelIcon.tsx

@@ -0,0 +1,26 @@
+import { DEFAULT_ICON_COLOR, type IconComponentProps } from '@/components/Icon';
+import { token } from '@/styled-system/tokens';
+
+function InquiredChannelIcon(props: IconComponentProps) {
+  const { color, size = 20, ...restProps } = props;
+  const iconColor = color ? token.var(`colors.${color}`) : DEFAULT_ICON_COLOR;
+
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      width={size}
+      height={size}
+      color={iconColor}
+      {...restProps}
+    >
+      <path
+        d="M2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10ZM10 3.5C8.27609 3.5 6.62279 4.18482 5.40381 5.40381C4.18482 6.62279 3.5 8.27609 3.5 10C3.5 11.7239 4.18482 13.3772 5.40381 14.5962C6.62279 15.8152 8.27609 16.5 10 16.5C11.7239 16.5 13.3772 15.8152 14.5962 14.5962C15.8152 13.3772 16.5 11.7239 16.5 10C16.5 8.27609 15.8152 6.62279 14.5962 5.40381C13.3772 4.18482 11.7239 3.5 10 3.5ZM8.92 8.085C8.83115 8.26296 8.67625 8.39834 8.48759 8.46135C8.29893 8.52436 8.09296 8.50985 7.915 8.421C7.73704 8.33215 7.60166 8.17625 7.53865 7.98759C7.47564 7.79893 7.49015 7.59296 7.579 7.415C7.748 7.076 8.015 6.714 8.428 6.438C8.845 6.16 9.369 6 10 6C10.5877 5.99598 11.1613 6.17994 11.637 6.525C12.14 6.902 12.5 7.49 12.5 8.25C12.5 8.698 12.385 9.08 12.171 9.4C11.966 9.707 11.701 9.913 11.479 10.062C11.37 10.134 11.259 10.2 11.166 10.257L11.16 10.261C11.072 10.3122 10.9853 10.3656 10.9 10.421C10.7929 10.4839 10.6991 10.5671 10.624 10.666C10.5127 10.8291 10.3415 10.9417 10.1476 10.9794C9.95376 11.017 9.75287 10.9767 9.58855 10.8672C9.42423 10.7576 9.30975 10.5877 9.26996 10.3943C9.23016 10.2008 9.26827 9.99951 9.376 9.834C9.56 9.57 9.796 9.345 10.068 9.173C10.171 9.106 10.275 9.041 10.381 8.978L10.388 8.974C10.488 8.913 10.57 8.864 10.646 8.813C10.7532 8.74987 10.8473 8.66669 10.923 8.568C10.96 8.514 11 8.427 11 8.25C11.0038 8.14755 10.9818 8.04579 10.936 7.95405C10.8902 7.86232 10.8221 7.78356 10.738 7.725C10.5213 7.57528 10.2634 7.49665 10 7.5C9.631 7.5 9.405 7.59 9.26 7.687C9.11366 7.78748 8.99639 7.92476 8.92 8.085ZM11 13C11 13.2652 10.8946 13.5196 10.7071 13.7071C10.5196 13.8946 10.2652 14 10 14C9.73478 14 9.48043 13.8946 9.29289 13.7071C9.10536 13.5196 9 13.2652 9 13C9 12.7348 9.10536 12.4804 9.29289 12.2929C9.48043 12.1054 9.73478 12 10 12C10.2652 12 10.5196 12.1054 10.7071 12.2929C10.8946 12.4804 11 12.7348 11 13Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default InquiredChannelIcon;

src/components/Icon/index.tsx

@@ -37,6 +37,7 @@ import AppleLoginIcon from './AppleLoginIcon';
 import EllipseCameraIcon from './EllipseCameraIcon';
 import InputArrowDownIcon from './InputArrowDownIcon';
 import InputCloseCircleIcon from './InputCloseCircleIcon';
+import InquiredChannelIcon from './InquiredChannelIcon';
 import KakaoLoginIcon from './KakaoLoginIcon';
 import NormalCalender from './NormalCalenderIcon';
 import NormalClose from './NormalClose';
@@ -72,6 +73,7 @@ export const IconComponentMap = {
   'normal-close': NormalClose,
   'input-close-circle': InputCloseCircleIcon,
   'input-arrow-down': InputArrowDownIcon,
+  'inquired-channel': InquiredChannelIcon,
   refresh: RefreshIcon,
   'plus-circle-large': PlusCircleLarge,
   '10mm-symbol': TENMMSymbolIcon,

src/pages/mypage/setting_and_private/MenuList.tsx

@@ -9,13 +9,16 @@ import { flex } from '@/styled-system/patterns';
 function MenuList() {
   const { isOpen, openModal, closeModal } = useModal();
 
+  const inquiredChannelUrl = 'https://forms.gle/pGRPA3NmUCHghbJM6';
+
   const onLogoutClick = () => {
     openModal();
   };
 
   return (
     <main className={mainCss}>
       <ul className={listCss}>
+        <MenuItem name="문의 채널" iconName="inquired-channel" url={inquiredChannelUrl} target="_blank" />
         <MenuItem name="이용약관" iconName="terms" url={ROUTER.MYPAGE.TERMS} />
         {/*<MenuItem name="로그인정보" iconName="log-in-information" url={ROUTER.MYPAGE.LOGIN_INFO} />*/}
         <MenuItem name="로그아웃" iconName="log-out" url="#" onClick={onLogoutClick} />
@@ -43,12 +46,13 @@ interface MenuItemProps {
   name: string;
   iconName: keyof typeof IconComponentMap;
   url: string;
+  target?: string;
   onClick?: () => void;
 }
 
 function MenuItem(props: MenuItemProps) {
   return (
-    <Link href={props.url} passHref>
+    <Link href={props.url} passHref target={props?.target}>
       <li className={itemCss} onClick={props.onClick}>
         <Icon name={props.iconName} width={20} height={20} />
         <p className={nameCss}>{props.name}</p>