Merge branch 'main' into feat/#1608

functions/coffeechat/[id].ts

@@ -0,0 +1,10 @@
+// /coffeechat/[id] 주소로 직접 접근 시 /coffeechat/[id].html 로 보내기
+export const onRequest = async (context) => {
+  const { next, params } = context;
+
+  if (/\d+/.test(`${params.id}`)) {
+    return next('/coffeechat/[id]');
+  }
+
+  return next();
+};

functions/coffeechat/edit/[id].ts

@@ -0,0 +1,10 @@
+// /coffeechat/edit/[id] 주소로 직접 접근 시 /coffeechat/edit/[id].html 로 보내기
+export const onRequest = async (context) => {
+  const { next, params } = context;
+
+  if (/\d+/.test(`${params.id}`)) {
+    return next('/coffeechat/edit/[id]');
+  }
+
+  return next();
+};

functions/coffeechat/index.ts

@@ -0,0 +1,6 @@
+// /coffeechat 주소로 직접 접근 시 /coffeechat.html 로 보내기
+export const onRequest = async (context) => {
+  const { next } = context;
+
+  return next('/coffeechat');
+};

package.json

@@ -45,7 +45,7 @@
     "@sopt-makers/colors": "^3.0.0",
     "@sopt-makers/fonts": "^1.0.0",
     "@sopt-makers/icons": "^1.0.5",
-    "@sopt-makers/ui": "2.4.4",
+    "@sopt-makers/ui": "^2.7.1",
     "@tanstack/react-query": "^5.4.3",
     "@toss/emotion-utils": "^1.1.10",
     "@toss/error-boundary": "^1.4.6",

src/api/endpoint/coffeechat/getCoffeechatDetail.ts

@@ -0,0 +1,42 @@
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+import { useQuery } from '@tanstack/react-query';
+
+const CoffeechatDetailSchema = z.object({
+  bio: z.string(),
+  memberId: z.number(),
+  name: z.string(),
+  career: z.string(),
+  organization: z.string().nullable(),
+  memberCareerTitle: z.string().nullable(),
+  phone: z.string(),
+  email: z.string(),
+  introduction: z.string(),
+  topicTypeList: z.array(z.string()),
+  topic: z.string(),
+  meetingType: z.string(),
+  guideline: z.string().nullable(),
+  isMine: z.boolean().nullable(),
+  isBlind: z.boolean().nullable(),
+  profileImage: z.string().nullable(),
+  isCoffeeChatActivate: z.boolean().nullable(),
+});
+
+export const getCoffeechatDetail = createEndpoint({
+  request: (memberId: string) => ({
+    method: 'GET',
+    url: `api/v1/members/coffeechat/${memberId}`,
+  }),
+  serverResponseScheme: CoffeechatDetailSchema,
+});
+
+export const useGetCoffeechatDetail = (memberId: string | undefined) => {
+  const id = memberId ?? '';
+
+  return useQuery({
+    queryKey: getCoffeechatDetail.cacheKey(id),
+    queryFn: () => getCoffeechatDetail.request(id),
+    enabled: !!memberId,
+  });
+};

src/api/endpoint/coffeechat/postCoffeechatIsBlind.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+
+export const changeIsBlindCoffeechat = createEndpoint({
+  request: (open: boolean) => ({
+    method: 'PATCH',
+    url: 'api/v1/members/coffeechat/open',
+    data: { open: open },
+  }),
+  serverResponseScheme: z.unknown(),
+});

src/api/endpoint_LEGACY/members/type.ts

@@ -160,7 +160,8 @@ export interface ProfileRequest {
 
 export interface PostMemberMessageVariables {
   receiverId: string;
-  senderEmail: string;
+  senderEmail?: string;
+  senderPhone?:string;
   category: string;
   content: string;
 }

src/components/coffeechat/CoffeeChatCard/index.tsx

@@ -1,20 +1,20 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
-
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
-import HorizontalScroller from '@/components/common/HorizontalScroller';
-import { Flex } from '@toss/emotion-utils';
 import { Tag } from '@sopt-makers/ui';
-import IconCoffee from '@/public/icons/icon-coffee.svg';
-import { useState } from 'react';
-import { MessageModalState } from '@/components/members/main/MemberList';
-import MessageModal, { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal';
+import { Flex } from '@toss/emotion-utils';
+import { m } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { playgroundLink } from 'playground-common/export';
-import { css } from '@emotion/react';
-import { m } from 'framer-motion';
+import { useState } from 'react';
+
+import HorizontalScroller from '@/components/common/HorizontalScroller';
 import ResizedImage from '@/components/common/ResizedImage';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
+import MessageModal, { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal';
+import { MessageModalState } from '@/components/members/main/MemberList';
+import IconCoffee from '@/public/icons/icon-coffee.svg';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 interface MentoringCardProps {
   id: string;

src/components/coffeechat/CoffeeChatModal/CoffeeChatCustomPortalModal.tsx

@@ -0,0 +1,134 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import FocusTrap from 'focus-trap-react';
+import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useRef } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+
+import Portal from '@/components/common/Portal';
+import { useEscapeCallback } from '@/hooks/useEscapeCallback';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
+import IconModalCheck from '@/public/icons/icon-modal-check.svg';
+import IconModalClose from '@/public/icons/icon-modal-close.svg';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { textStyles } from '@/styles/typography';
+
+/**
+ * @deprecated CoffeeChatMessageModal 만을 위한 임시 모달 입니다. 모바일 화면에 대응하기 위해 임시로 사용돼요.
+ */
+export interface ModalProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  confirmIcon?: boolean;
+  title?: string;
+  content?: ReactNode;
+  isOpen?: boolean;
+  width?: number;
+  className?: string;
+  onClose: () => void;
+}
+
+
+
+const Modal: FC<ModalProps> = (props) => {
+  const { confirmIcon, children, title = '', content, isOpen, onClose, width, ...restProps } = props;
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEscapeCallback({
+    callback: onClose,
+  });
+
+  useOnClickOutside(modalRef, onClose);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <StyledBackground>
+        <FocusTrap>
+          <RemoveScroll>
+            <StyledModal ref={modalRef} role='dialog' width={width} {...restProps}>
+              <StyledCloseButton type='button' onClick={onClose}>
+                <StyledIconClose />
+              </StyledCloseButton>
+              <ModalContent>
+                {confirmIcon && <StyledIconCheck />}
+                {title && <StyledTitle>{title}</StyledTitle>}
+                {content && <StyledContent>{content}</StyledContent>}
+                {children}
+              </ModalContent>
+            </StyledModal>
+          </RemoveScroll>
+        </FocusTrap>
+      </StyledBackground>
+    </Portal>
+  );
+};
+
+export default Modal;
+
+const StyledBackground = styled.div<{ visible?: boolean }>`
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  background-color: rgb(0 0 0 / 30%);
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledModal = styled.div<{ width?: number }>`
+  position: relative;
+  z-index: 101;
+  border-radius: 22.94px;
+  background: ${colors.gray800};
+  width: ${({ width }) => width ?? 450}px;
+  color: ${colors.gray10};
+`;
+
+const StyledCloseButton = styled.button`
+  display: flex;
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    top: 24px;
+    right: 20px;
+  }
+`;
+
+const StyledIconClose = styled(IconModalClose)``;
+
+const StyledIconCheck = styled(IconModalCheck)`
+  margin-bottom: 18px;
+`;
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    padding: 0;
+  }
+`;
+
+const StyledTitle = styled.h1`
+  ${textStyles.SUIT_24_B}
+`;
+
+const StyledContent = styled.div`
+  margin-top: 18px;
+  color: ${colors.gray200};
+
+  ${textStyles.SUIT_18_M};
+`;