Merge pull request #379 from woowacourse-teams/feat/#376

다락방 api를 페이지에 연결

frontend/.gitignore

@@ -4,3 +4,5 @@ dist
 .env
 .env*
 coverage
+
+public/firebaseConfig.js

frontend/src/apis/gets.ts

@@ -10,9 +10,14 @@ import {
   GetChamyoMine,
   GetChat,
   GetChattingPreview,
+  GetDarakbangInviteCode,
+  GetDarakbangMembers,
+  GetDarakbangMine,
+  GetDarakbangNameByCode,
   GetMoim,
   GetMoims,
   GetMyInfo,
+  GetMyRoleInDarakbang,
   GetNotifications,
   GetPleases,
   GetZzimMine,
@@ -120,3 +125,52 @@ export const getNotifications = async () => {
   const json: GetNotifications = await response.json();
   return json.data.notifications;
 };
+
+export const getMyDarakbangs = async () => {
+  const response = await ApiClient.getWithAuth('darakbang/mine');
+
+  const json: GetDarakbangMine = await response.json();
+  return json.data.darakbangResponses;
+};
+
+export const getMyRoleInDarakbang = async (darakbangId: number) => {
+  const response = await ApiClient.getWithAuth(
+    'darakbang/' + darakbangId + '/role',
+  );
+
+  const json: GetMyRoleInDarakbang = await response.json();
+  return json.data.role;
+};
+
+export const getDarakbangMembers = async (darakbangId: number) => {
+  const response = await ApiClient.getWithAuth(
+    'darakbang/' + darakbangId + '/members',
+  );
+
+  const json: GetDarakbangMembers = await response.json();
+  return json.data.darakbangMemberResponses;
+};
+
+export const getDarakbangInviteCode = async (darakbangId: number) => {
+  const response = await ApiClient.getWithAuth(
+    'darakbang/' + darakbangId + '/code',
+  );
+
+  const json: GetDarakbangInviteCode = await response.json();
+  return json.data.code;
+};
+
+export const getDarakbangNameByCode = async (code: string) => {
+  const response = await ApiClient.getWithAuth(
+    'darakbang/validation?code=' + code,
+  ).catch(() => {
+    return {
+      json: () => {
+        return { data: { name: '' } };
+      },
+    };
+  });
+
+  const json: GetDarakbangNameByCode = await response.json();
+  return json.data.name;
+};

frontend/src/apis/posts.ts

@@ -96,3 +96,28 @@ export const postNotificationToken = async (currentToken: string) => {
     token: currentToken,
   });
 };
+
+export const postDarakbang = async ({
+  name,
+  nickname,
+}: {
+  name: string;
+  nickname: string;
+}) => {
+  await ApiClient.postWithAuth('darakbang', {
+    name,
+    nickname,
+  });
+};
+
+export const postDarakbangEntrance = async ({
+  code,
+  nickname,
+}: {
+  code: string;
+  nickname: string;
+}) => {
+  await ApiClient.postWithAuth('darakbang/entrance?code=' + code, {
+    nickname,
+  });
+};

frontend/src/apis/responseTypes.ts

@@ -1,6 +1,8 @@
 import {
   Chat,
   ChattingPreview,
+  Darakbang,
+  DarakbangRole,
   MoimInfo,
   Notification,
   Participation,
@@ -71,3 +73,37 @@ export interface GetNotifications {
     notifications: Notification[];
   };
 }
+
+export interface GetDarakbangMine {
+  data: {
+    darakbangResponses: Darakbang[];
+  };
+}
+
+export interface GetMyRoleInDarakbang {
+  data: {
+    role: DarakbangRole;
+  };
+}
+
+export interface GetDarakbangMembers {
+  data: {
+    darakbangMemberResponses: {
+      memberId: number;
+      nickname: string;
+      profile: string;
+    }[];
+  };
+}
+
+export interface GetDarakbangInviteCode {
+  data: {
+    code: string;
+  };
+}
+
+export interface GetDarakbangNameByCode {
+  data: {
+    name: string;
+  };
+}

frontend/src/components/OptionsPanel/OptionsPanel.stories.tsx

@@ -74,7 +74,7 @@ export const Decorated: Story = {
       },
     ],
     width: '200px',
-    movedWidth: '24px',
+    movedHeight: '24px',
   },
   decorators: function (Story) {
     const [isStoryOpen, setIsStoryOpen] = useState(false);

frontend/src/components/OptionsPanel/OptionsPanel.style.ts

@@ -1,11 +1,21 @@
 import { Theme } from './../../common/theme/theme.type';
 import { css } from '@emotion/react';
 
-export const panel = (width: string, movedWidth: string) => css`
+export const panel = ({
+  width,
+  movedHeight,
+  movedWidth,
+}: {
+  width: string;
+  movedHeight: string;
+  movedWidth: string;
+}) => css`
   position: absolute;
-  transform: translate(0, ${movedWidth});
+  transform: translateX(${movedWidth}) translateY(${movedHeight});
 
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   width: ${width};
 

frontend/src/components/OptionsPanel/OptionsPanel.tsx

@@ -1,10 +1,14 @@
+export interface OptionsPanelOption {
+  description: string;
+  onClick: () => void;
+  hasTopBorder?: boolean;
+}
+
 interface OptionsPanelProps {
-  options: {
-    description: string;
-    onClick: () => void;
-    hasTopBorder?: boolean;
-  }[];
+  options: OptionsPanelOption[];
   onClose: () => void;
+  onAfterSelect: () => void;
+  movedHeight?: string;
   movedWidth?: string;
   width?: string;
 }
@@ -15,22 +19,32 @@ import { useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 
 export default function OptionsPanel(props: OptionsPanelProps) {
-  const { options, onClose, width, movedWidth } = props;
+  const { options, onClose, onAfterSelect, width, movedHeight, movedWidth } =
+    props;
   const theme = useTheme();
 
   useEffect(() => {
     document.addEventListener('click', onClose);
     return () => document.removeEventListener('click', onClose);
   }, [onClose]);
 
-  console.log(options);
   return (
-    <div css={S.panel(width || '100px', movedWidth || '0px')}>
+    <div
+      css={S.panel({
+        width: width || '100px',
+        movedHeight: movedHeight || '0px',
+        movedWidth: movedWidth || '0px',
+      })}
+    >
       {options.map(({ description, onClick, hasTopBorder }) => {
         return (
           <div
             key={description}
-            onClick={onClick}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick();
+              onAfterSelect();
+            }}
             css={S.option({ theme, hasTopBorder })}
           >
             <span css={theme.typography.b1}>{description}</span>

frontend/src/constants/queryKeys.ts

@@ -15,6 +15,11 @@ const QUERY_KEYS = {
   please: 'please',
   pleases: 'pleases',
   notifications: 'notifications',
+  myDarakbangs: 'myDarakbangs',
+  myRoleInDarakbang: 'myRoleInDarakbang',
+  darakbangMembers: 'darakbangMembers',
+  darakbangInviteCode: 'darakbangInviteCode',
+  darakbangNameByCode: 'darakbangNameByCode',
 };
 
 export default QUERY_KEYS;

frontend/src/hooks/mutaions/useCreateDarakbang.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import QUERY_KEYS from '@_constants/queryKeys';
+import { postDarakbang } from '@_apis/posts';
+
+export default function useCreateDarakbang(onSuccess?: () => void) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: postDarakbang,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.myDarakbangs] });
+
+      if (onSuccess) onSuccess();
+    },
+  });
+}

frontend/src/hooks/mutaions/useEnterDarakbang.ts

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { ApiError } from '@_utils/customError/ApiError';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { postDarakbangEntrance } from '@_apis/posts';
+
+export default function useEnterDarakbang({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: () => void;
+  onError: (string: string) => void;
+}) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ code, nickname }: { code: string; nickname: string }) =>
+      postDarakbangEntrance({ code, nickname }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.myDarakbangs] });
+
+      if (onSuccess) onSuccess();
+    },
+
+    onError: (err) => {
+      if (err instanceof ApiError) {
+        onError(err.message);
+      }
+      throw err;
+    },
+  });
+}

frontend/src/hooks/queries/useDarakbangInviteCode.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getDarakbangInviteCode } from '@_apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useDarakbangInviteCode(darakbangId: number) {
+  const { data: inviteCode, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.darakbangInviteCode, darakbangId],
+    queryFn: () => getDarakbangInviteCode(darakbangId),
+  });
+
+  return { inviteCode, isLoading };
+}

frontend/src/hooks/queries/useDarakbangMembers.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getDarakbangMembers } from '@_apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useDarakbangMembers(darakbangId: number) {
+  const { data: members, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.darakbangMembers, darakbangId],
+    queryFn: () => getDarakbangMembers(darakbangId),
+  });
+
+  return { members, isLoading };
+}

frontend/src/hooks/queries/useDarakbangNameByCode.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getDarakbangNameByCode } from '@_apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useDarakbangNameByCode(code: string) {
+  const { data: darakbangName, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.darakbangNameByCode, code],
+    queryFn: () => getDarakbangNameByCode(code),
+  });
+
+  return { darakbangName, isLoading };
+}

frontend/src/hooks/queries/useMyDarakbang.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getMyDarakbangs } from '@_apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useMyDarakbangs() {
+  const { data: myDarakbangs, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.myDarakbangs],
+    queryFn: getMyDarakbangs,
+  });
+
+  return { myDarakbangs, isLoading };
+}

frontend/src/hooks/queries/useMyDarakbangRole.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getMyRoleInDarakbang } from './../../apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useMyRoleInDarakbang(darakbangId: number) {
+  const { data: myRoleInDarakbang, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.myRoleInDarakbang, darakbangId],
+    queryFn: () => getMyRoleInDarakbang(darakbangId),
+  });
+
+  return { myRoleInDarakbang, isLoading };
+}

frontend/src/layouts/CompleteLayout/CompleteBottomWrapper/CompleteBottomWrapper.style.ts

@@ -1,10 +1,9 @@
-import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 // TODO: 바텀 버튼 UI에 대한 기획 논의 필요
 export const bottomFixedStyle = css`
   position: fixed;
   bottom: 26px;
-  width: ${DISPLAY_MAX_WIDTH};
+  width: 100%;
   padding: 0 16px;
 `;

frontend/src/layouts/SelectLayout/SelectContentContainer/SelectContentContainer.style.ts

@@ -10,7 +10,4 @@ export const contentStyle = css`
   width: 100%;
   height: 100vh;
   padding: 16px 22px;
-
-  font-size: 5rem;
-  font-weight: 700;
 `;