feat: 커피챗 오픈/수정 로직 구현

src/api/endpoint/coffeechat/editCoffeechat.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+
+export const editCoffeechat = createEndpoint({
+  request: (requestBody: CoffeechatFormContent) => ({
+    method: 'PUT',
+    url: 'api/v1/members/coffeechat/details',
+    data: requestBody,
+  }),
+  serverResponseScheme: z.unknown(),
+});

src/api/endpoint/coffeechat/uploadCoffeechat.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+
+export const uploadCoffeechat = createEndpoint({
+  request: (reqeustBody: CoffeechatFormContent) => ({
+    method: 'POST',
+    url: 'api/v1/members/coffeechat/details',
+    data: reqeustBody,
+  }),
+  serverResponseScheme: z.unknown(),
+});

src/components/coffeechat/mediaQuery.ts

@@ -0,0 +1,5 @@
+export const COFFEECHAT_TABLET_MAX_WIDTH = 1260;
+export const COFFEECHAT_MOBILE_MAX_WIDTH = 430;
+
+export const COFFEECHAT_TABLET_MEDIA_QUERY = `screen and (max-width: ${COFFEECHAT_TABLET_MAX_WIDTH}px)`;
+export const COFFEECHAT_MOBILE_MEDIA_QUERY = `screen and (max-width: ${COFFEECHAT_MOBILE_MAX_WIDTH}px)`;

src/components/coffeechat/page/CoffeechatUploadPage.tsx

@@ -0,0 +1,113 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FieldValues, FormProvider, useForm } from 'react-hook-form';
+
+import DesktopCoffeechatUploadLayout from '@/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout';
+import MobileCoffeechatUploadLayout from '@/components/coffeechat/page/layout/MobileCoffeechatUploadLayout';
+import CoffeechatForm from '@/components/coffeechat/upload/CoffeechatForm';
+import { coffeeChatchema } from '@/components/coffeechat/upload/CoffeechatForm/schema';
+import SubmitDialog from '@/components/coffeechat/upload/CoffeechatForm/SubmitDialog';
+import { CoffeechatFormContent } from '@/components/coffeechat/upload/CoffeechatForm/types';
+import UploadButton from '@/components/coffeechat/upload/CoffeechatForm/UploadButton';
+import ProgressBox from '@/components/coffeechat/upload/ProgressBox';
+import UploadHeader from '@/components/coffeechat/upload/UploadHeader';
+import useModalState from '@/components/common/Modal/useModalState';
+import Responsive from '@/components/common/Responsive';
+interface CoffeechatUploadPageProps {
+  uploadType: '오픈' | '수정';
+  form: CoffeechatFormContent;
+  onSubmit: <T extends FieldValues>(values: T) => void;
+}
+
+export default function CoffeechatUploadPage({ uploadType, form, onSubmit }: CoffeechatUploadPageProps) {
+  const methods = useForm<CoffeechatFormContent>({ resolver: yupResolver(coffeeChatchema), defaultValues: form });
+  const { handleSubmit, setFocus, watch } = methods;
+  const { isOpen, onClose, onOpen } = useModalState();
+
+  const findFirstErrorFieldInOrder = (errors: FieldValues): string | null => {
+    const fieldOrder = [
+      'memberInfo.career',
+      'memberInfo.introduction',
+      'coffeeChatInfo.sections',
+      'coffeeChatInfo.bio',
+      'coffeeChatInfo.topicTypes',
+      'coffeeChatInfo.topic',
+      'coffeeChatInfo.meetingType',
+      'coffeeChatInfo.guideline',
+    ];
+
+    for (const fieldPath of fieldOrder) {
+      const keys = fieldPath.split('.');
+      let currentError = errors;
+
+      for (const key of keys) {
+        currentError = currentError[key];
+        if (!currentError) break;
+      }
+
+      if (currentError?.message) {
+        return fieldPath;
+      }
+    }
+
+    return null;
+  };
+
+  const onError = (errors: FieldValues) => {
+    const firstErrorField = findFirstErrorFieldInOrder(errors);
+
+    if (firstErrorField) {
+      setFocus(firstErrorField as keyof CoffeechatFormContent);
+      const errorElement = document.querySelector(`[name="${firstErrorField}"]`);
+
+      if (errorElement) {
+        errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onOpen, onError)}>
+        <SubmitDialog isOpen={isOpen} onClose={onClose} onSubmit={onSubmit} />
+        <>
+          <Responsive only='desktop'>
+            <DesktopCoffeechatUploadLayout
+              main={
+                <>
+                  <UploadHeader uploadType={uploadType} />
+                  <CoffeechatForm />
+                </>
+              }
+              aside={
+                <ProgressBox
+                  uploadType={uploadType}
+                  myInfoInprogress={!!(watch('memberInfo.career') && watch('memberInfo.introduction'))}
+                  coffeechatInfoInprogress={
+                    !!(
+                      watch('coffeeChatInfo.sections') &&
+                      watch('coffeeChatInfo.bio') &&
+                      watch('coffeeChatInfo.topicTypes') &&
+                      watch('coffeeChatInfo.topic')
+                    )
+                  }
+                />
+              }
+              submitButton={<UploadButton uploadType={uploadType} />}
+            />
+          </Responsive>
+          <Responsive only='mobile'>
+            <MobileCoffeechatUploadLayout
+              main={
+                <>
+                  <UploadHeader uploadType={uploadType} />
+                  <CoffeechatForm />
+                </>
+              }
+              submitButton={<UploadButton uploadType={uploadType} />}
+            />
+          </Responsive>
+        </>
+      </form>
+    </FormProvider>
+  );
+}

src/components/coffeechat/page/layout/DesktopCoffeechatUploadLayout.tsx

@@ -0,0 +1,56 @@
+import { COFFEECHAT_TABLET_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery';
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+interface DesktopCoffeechatUploadLayoutProps {
+  main: ReactNode;
+  aside: ReactNode;
+  submitButton: ReactNode;
+}
+
+export default function DesktopCoffeechatUploadLayout({
+  main,
+  aside,
+  submitButton,
+}: DesktopCoffeechatUploadLayoutProps) {
+  return (
+    <Layout>
+      <Main>
+        <Body>{main}</Body>
+        <Footer>{submitButton}</Footer>
+      </Main>
+      <Aside>{aside}</Aside>
+    </Layout>
+  );
+}
+
+const Footer = styled.footer`
+  margin: 62px 0 50px;
+`;
+
+const Layout = styled.div`
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  margin: 0 30px;
+  margin-top: 48px;
+  margin-bottom: 180px;
+
+  @media ${COFFEECHAT_TABLET_MEDIA_QUERY} {
+    margin-top: 0;
+  }
+`;
+
+const Body = styled.section`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin: 0 40px;
+`;
+
+const Aside = styled.aside``;

src/components/coffeechat/page/layout/MobileCoffeechatUploadLayout.tsx

@@ -0,0 +1,38 @@
+import { COFFEECHAT_MOBILE_MEDIA_QUERY } from '@/components/coffeechat/mediaQuery';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+interface MobileCoffeechatUploadLayoutProps {
+  main: ReactNode;
+  submitButton: ReactNode;
+}
+
+export default function MobileCoffeechatUploadLayout({ main, submitButton }: MobileCoffeechatUploadLayoutProps) {
+  return (
+    <Layout>
+      <>{main}</>
+      <Footer>{submitButton}</Footer>
+    </Layout>
+  );
+}
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+  margin-bottom: 180px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    margin-top: 48px;
+  }
+
+  @media ${COFFEECHAT_MOBILE_MEDIA_QUERY} {
+    margin-top: 0;
+  }
+`;
+
+const Footer = styled.footer`
+  margin: 40px 0 56px;
+  width: 100%;
+`;

src/components/coffeechat/upload/CoffeechatForm/ChipField/index.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import { Chip } from '@sopt-makers/ui';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { CoffeechatFormContent, CoffeechatFormPaths } from '@/components/coffeechat/upload/CoffeechatForm/types';
+import FormItem from '@/components/common/form/FormItem';
+import Responsive from '@/components/common/Responsive';
+
+interface ChipFieldProps {
+  field: CoffeechatFormPaths;
+  errorMessage: string;
+  chipList: readonly string[];
+  isSingleSelect?: boolean;
+}
+
+export default function ChipField({ field, errorMessage, chipList, isSingleSelect = false }: ChipFieldProps) {
+  const { control } = useFormContext<CoffeechatFormContent>();
+
+  return (
+    <FormItem errorMessage={errorMessage}>
+      <Controller
+        name={field}
+        control={control}
+        render={({ field }) => (
+          <ChipsWrapper {...field}>
+            {chipList.map((chip) => (
+              <div
+                key={chip}
+                onClick={() => {
+                  if (isSingleSelect) {
+                    field.onChange([chip]);
+                  } else {
+                    const newValue =
+                      Array.isArray(field.value) && field.value.includes(chip)
+                        ? field.value.filter((item) => item !== chip) // MEMO: 이미 선택된 경우 제거
+                        : [...(Array.isArray(field.value) ? field.value : []), chip]; // MEMO: 복수 선택 모드일 경우 추가
+
+                    field.onChange(newValue); // MEMO: 배열 업데이트
+                  }
+                }}
+              >
+                <Responsive only='desktop'>
+                  <Chip size='sm' active={Array.isArray(field.value) && field.value.includes(chip)}>
+                    {chip}
+                  </Chip>
+                </Responsive>
+                <Responsive only='mobile'>
+                  <Chip size='md' active={Array.isArray(field.value) && field.value.includes(chip)}>
+                    {chip}
+                  </Chip>
+                </Responsive>
+              </div>
+            ))}
+          </ChipsWrapper>
+        )}
+      />
+    </FormItem>
+  );
+}
+
+const ChipsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+`;