Merge pull request #1620 from sopt-makers/feat/#1606-detail

feat: 커피챗 상세 페이지 구현

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/components/coffeechat/detail/CoffeechatContents/index.tsx

@@ -0,0 +1,116 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+import { Tag } from '@sopt-makers/ui';
+
+import { useGetCoffeechatDetail } from '@/api/endpoint/coffeechat/getCoffeechatDetail';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
+interface CoffeechatContentsProps {
+  memberId: string;
+}
+
+export default function CoffeechatContents({ memberId }: CoffeechatContentsProps) {
+  const { data: openerProfile } = useGetCoffeechatDetail(memberId);
+
+  return (
+    <>
+      {openerProfile && (
+        <CoffeechatContentsWrapper>
+          <ContentsBox>
+            <Text>{openerProfile.introduction}</Text>
+          </ContentsBox>
+          <ContentsBox>
+            <EachContent>
+              <Subtitle>제가 이야기 나누고 싶은 주제는</Subtitle>
+              <Tags>
+                {openerProfile.topicTypeList.map((topicType) => {
+                  return (
+                    <CoffeechatTag key={topicType} shape='pill' size='lg' type='solid' variant='default'>
+                      {topicType}
+                    </CoffeechatTag>
+                  );
+                })}
+              </Tags>
+              <Text>{openerProfile.topic}</Text>
+            </EachContent>
+            <EachContent>
+              <Subtitle>진행방법</Subtitle>
+              <Tag shape='pill' size='lg' type='solid' variant='default'>
+                {openerProfile.meetingType}
+              </Tag>
+            </EachContent>
+            <EachContent>
+              <Subtitle>유의사항</Subtitle>
+              <Text>{openerProfile.guideline}</Text>
+            </EachContent>
+          </ContentsBox>
+        </CoffeechatContentsWrapper>
+      )}
+    </>
+  );
+}
+
+const Subtitle = styled.p`
+  color: ${colors.gray300};
+  ${fonts.TITLE_16_SB};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.TITLE_14_SB};
+  }
+`;
+
+const EachContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const Text = styled.p`
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  color: ${colors.white};
+  ${fonts.BODY_18_M};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.BODY_16_M};
+  }
+`;
+
+const ContentsBox = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  border-radius: 20px;
+  background-color: ${colors.gray900};
+  padding: 32px 40px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    gap: 28px;
+  }
+`;
+
+const CoffeechatContentsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 28px;
+  margin-bottom: 24px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    gap: 18px;
+    margin-top: 24px;
+    margin-bottom: 18px;
+  }
+`;
+
+const Tags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+const CoffeechatTag = styled(Tag)`
+  padding: 4px 14px;
+`;