Merge pull request #422 from woowacourse-teams/fix/#413

qa에서 나온 버그 수정

frontend/src/apis/apiClient.ts

@@ -11,7 +11,6 @@ const DEFAULT_HEADERS = {
 const BASE_URL = `${process.env.BASE_URL}/v1`;
 
 function addBaseUrl(endpoint: string, isNeedLastDarakbang: boolean = false) {
-  if (endpoint[0] !== '/') endpoint = '/' + endpoint;
   if (isNeedLastDarakbang)
     endpoint = '/darakbang/' + (getLastDarakbangId() || 0) + endpoint;
   return BASE_URL + endpoint;

frontend/src/apis/auth.ts

@@ -2,14 +2,14 @@ import ApiClient from './apiClient';
 
 export const login = async (loginInputInfo: { nickname: string }) => {
   const response = await ApiClient.postWithoutAuth(
-    'auth/login',
+    '/auth/login',
     loginInputInfo,
   );
   return response.json();
 };
 
 export const kakaoOAuth = async (code: string) => {
-  const response = await ApiClient.postWithoutAuth('auth/kakao/oauth', {
+  const response = await ApiClient.postWithoutAuth('/auth/kakao/oauth', {
     code,
   });
   console.log(response);

frontend/src/apis/deletes.ts

@@ -1,7 +1,7 @@
 import ApiClient from './apiClient';
 
 export const deleteCancelChamyo = async (moimId: number) => {
-  await ApiClient.deleteWithLastDarakbangId(`chamyo`, {
+  await ApiClient.deleteWithLastDarakbangId(`/chamyo`, {
     moimId,
   });
 };

frontend/src/apis/gets.ts

@@ -27,7 +27,7 @@ import ApiClient from './apiClient';
 import { Filter } from '@_components/MyMoimListFilters/MyMoimListFilters';
 
 export const getMoims = async (): Promise<MoimInfo[]> => {
-  const response = await ApiClient.getWithLastDarakbangId('moim');
+  const response = await ApiClient.getWithLastDarakbangId('/moim');
 
   const json: GetMoims = await response.json();
   return json.data.moims;
@@ -37,29 +37,29 @@ export const getMyFilteredMoims = async (
   filter: Filter['api'],
 ): Promise<MoimInfo[]> => {
   const response = await ApiClient.getWithLastDarakbangId(
-    `moim/mine?filter=${filter}`,
+    `/moim/mine?filter=${filter}`,
   );
 
   const json: GetMoims = await response.json();
   return json.data.moims;
 };
 
 export const getMyZzimMoims = async (): Promise<MoimInfo[]> => {
-  const response = await ApiClient.getWithLastDarakbangId('moim/zzim');
+  const response = await ApiClient.getWithLastDarakbangId('/moim/zzim');
 
   const json: GetMoims = await response.json();
   return json.data.moims;
 };
 
 export const getMoim = async (moimId: number): Promise<MoimInfo> => {
-  const response = await ApiClient.getWithLastDarakbangId(`moim/${moimId}`);
+  const response = await ApiClient.getWithLastDarakbangId(`/moim/${moimId}`);
 
   const json: GetMoim = await response.json();
   return json.data;
 };
 
 export const getChatPreview = async (): Promise<ChattingPreview[]> => {
-  const response = await ApiClient.getWithLastDarakbangId(`chat/preview`);
+  const response = await ApiClient.getWithLastDarakbangId(`/chat/preview`);
 
   const json: GetChattingPreview = await response.json();
   return json.data.chatPreviewResponses;
@@ -70,23 +70,23 @@ export const getChat = async (
   recentChatId?: number,
 ): Promise<Chat[]> => {
   const response = await ApiClient.getWithLastDarakbangId(
-    `chat?moimId=${moimId}&recentChatId=${recentChatId || 0}`,
+    `/chat?moimId=${moimId}&recentChatId=${recentChatId || 0}`,
   );
 
   const json: GetChat = await response.json();
   return json.data.chats;
 };
 
 export const getMyMoims = async (): Promise<MoimInfo[]> => {
-  const response = await ApiClient.getWithLastDarakbangId(`moim/mine`);
+  const response = await ApiClient.getWithLastDarakbangId(`/moim/mine`);
 
   const json: GetMoims = await response.json();
   return json.data.moims;
 };
 
 export const getChamyoMine = async (moimId: number): Promise<Role> => {
   const response = await ApiClient.getWithLastDarakbangId(
-    `chamyo/mine?moimId=${moimId}`,
+    `/chamyo/mine?moimId=${moimId}`,
   );
 
   const json: GetChamyoMine = await response.json();
@@ -95,7 +95,7 @@ export const getChamyoMine = async (moimId: number): Promise<Role> => {
 
 export const getZzimMine = async (moimId: number): Promise<boolean> => {
   const response = await ApiClient.getWithLastDarakbangId(
-    `zzim/mine?moimId=${moimId}`,
+    `/zzim/mine?moimId=${moimId}`,
   );
 
   const json: GetZzimMine = await response.json();
@@ -106,36 +106,36 @@ export const getChamyoAll = async (
   moimId: number,
 ): Promise<Participation[]> => {
   const response = await ApiClient.getWithLastDarakbangId(
-    `chamyo/all?moimId=${moimId}`,
+    `/chamyo/all?moimId=${moimId}`,
   );
 
   const json: GetChamyoAll = await response.json();
   return json.data.chamyos;
 };
 
 export const getPleases = async () => {
-  const response = await ApiClient.getWithLastDarakbangId('please');
+  const response = await ApiClient.getWithLastDarakbangId('/please');
 
   const json: GetPleases = await response.json();
   return json.data.pleases;
 };
 
 export const getMyInfo = async () => {
-  const response = await ApiClient.getWithLastDarakbangId('member/mine');
+  const response = await ApiClient.getWithLastDarakbangId('/member/mine');
 
   const json: GetMyInfo = await response.json();
   return json.data;
 };
 
 export const getNotifications = async () => {
-  const response = await ApiClient.getWithLastDarakbangId('notification/mine');
+  const response = await ApiClient.getWithLastDarakbangId('/notification/mine');
 
   const json: GetNotifications = await response.json();
   return json.data.notifications;
 };
 
 export const getMyDarakbangs = async () => {
-  const response = await ApiClient.getWithAuth('darakbang/mine');
+  const response = await ApiClient.getWithAuth('/darakbang/mine');
 
   const json: GetDarakbangMine = await response.json();
   return json.data.darakbangResponses;
@@ -164,7 +164,7 @@ export const getDarakbangInviteCode = async () => {
 
 export const getDarakbangNameByCode = async (code: string) => {
   const response = await ApiClient.getWithAuth(
-    'darakbang/validation?code=' + code,
+    '/darakbang/validation?code=' + code,
   ).catch(() => {
     return {
       json: () => {
@@ -176,3 +176,10 @@ export const getDarakbangNameByCode = async (code: string) => {
   const json: GetDarakbangNameByCode = await response.json();
   return json.data.name;
 };
+
+export const getDarakbangNameById = async () => {
+  const response = await ApiClient.getWithLastDarakbangId('');
+
+  const json: GetDarakbangNameByCode = await response.json();
+  return json.data.name;
+};

frontend/src/apis/patches.ts

@@ -3,13 +3,13 @@ import { MoimInputInfo } from '@_types/index';
 import { PostMoimBody } from './responseTypes';
 
 export const patchCompleteMoim = async (moimId: number) => {
-  await ApiClient.patchWithLastDarakbangId(`moim/${moimId}/complete`, {
+  await ApiClient.patchWithLastDarakbangId(`/moim/${moimId}/complete`, {
     moimId,
   });
 };
 
 export const patchCancelMoim = async (moimId: number) => {
-  await ApiClient.patchWithLastDarakbangId(`moim/${moimId}/cancel`, {
+  await ApiClient.patchWithLastDarakbangId(`/moim/${moimId}/cancel`, {
     moimId,
   });
 };
@@ -22,18 +22,18 @@ export const patchModifyMoim = async (moimId: number, moim: MoimInputInfo) => {
     place: moim.place || undefined,
   };
 
-  await ApiClient.patchWithLastDarakbangId(`moim`, {
+  await ApiClient.patchWithLastDarakbangId(`/moim`, {
     moimId,
     ...parsedMoim,
   });
 };
 
 export const patchReopenMoim = async (moimId: number) => {
-  await ApiClient.patchWithLastDarakbangId(`moim/${moimId}/reopen`, {
+  await ApiClient.patchWithLastDarakbangId(`/moim/${moimId}/reopen`, {
     moimId,
   });
 };
 
 export const patchOpenChat = async (moimId: number) => {
-  await ApiClient.patchWithLastDarakbangId(`chat/open?moimId=${moimId}`);
+  await ApiClient.patchWithLastDarakbangId(`/chat/open?moimId=${moimId}`);
 };

frontend/src/apis/posts.ts

@@ -11,20 +11,20 @@ export const postMoim = async (moim: MoimInputInfo): Promise<number> => {
     place: moim.place || undefined,
   };
 
-  const response = await ApiClient.postWithLastDarakbangId('moim', parsedMoim);
+  const response = await ApiClient.postWithLastDarakbangId('/moim', parsedMoim);
 
   const json: PostMoim = await response.json();
   return json.data;
 };
 
 export const postJoinMoim = async (moimId: number) => {
-  await ApiClient.postWithLastDarakbangId('chamyo', {
+  await ApiClient.postWithLastDarakbangId('/chamyo', {
     moimId,
   });
 };
 
 export const postChangeZzim = async (moimId: number) => {
-  await ApiClient.postWithLastDarakbangId('zzim', {
+  await ApiClient.postWithLastDarakbangId('/zzim', {
     moimId,
   });
 };
@@ -34,26 +34,26 @@ export const postWriteComment = async (
   message: string,
 ) => {
   if (selectedComment === 0) {
-    await ApiClient.postWithLastDarakbangId(`moim/${moimId}`, {
+    await ApiClient.postWithLastDarakbangId(`/moim/${moimId}`, {
       content: message,
     });
   } else {
-    await ApiClient.postWithLastDarakbangId(`moim/${moimId}`, {
+    await ApiClient.postWithLastDarakbangId(`/moim/${moimId}`, {
       parentId: selectedComment,
       content: message,
     });
   }
 };
 
 export const postChat = async (moimId: number, content: string) => {
-  await ApiClient.postWithLastDarakbangId('chat', {
+  await ApiClient.postWithLastDarakbangId('/chat', {
     moimId,
     content,
   });
 };
 
 export const postInterest = async (pleaseId: number, isInterested: boolean) => {
-  await ApiClient.postWithLastDarakbangId('interest', {
+  await ApiClient.postWithLastDarakbangId('/interest', {
     pleaseId,
     isInterested,
   });
@@ -62,7 +62,7 @@ export const postLastReadChatId = async (
   moimId: number,
   lastReadChatId: number,
 ) => {
-  await ApiClient.postWithLastDarakbangId('chat/last', {
+  await ApiClient.postWithLastDarakbangId('/chat/last', {
     moimId,
     lastReadChatId,
   });
@@ -73,26 +73,26 @@ export const postConfirmDatetime = async (
   date: string,
   time: string,
 ) => {
-  await ApiClient.postWithLastDarakbangId('chat/datetime', {
+  await ApiClient.postWithLastDarakbangId('/chat/datetime', {
     moimId,
     date,
     time,
   });
 };
 
 export const postConfirmPlace = async (moimId: number, place: string) => {
-  await ApiClient.postWithLastDarakbangId('chat/place', {
+  await ApiClient.postWithLastDarakbangId('/chat/place', {
     moimId,
     place,
   });
 };
 
 export const postPlease = async (please: PleaseInfoInput) => {
-  await ApiClient.postWithLastDarakbangId('please', please);
+  await ApiClient.postWithLastDarakbangId('/please', please);
 };
 
 export const postNotificationToken = async (currentToken: string) => {
-  await ApiClient.postWithAuth('notification/register', {
+  await ApiClient.postWithAuth('/notification/register', {
     token: currentToken,
   });
 };
@@ -104,7 +104,7 @@ export const postDarakbang = async ({
   name: string;
   nickname: string;
 }) => {
-  const response = await ApiClient.postWithAuth('darakbang', {
+  const response = await ApiClient.postWithAuth('/darakbang', {
     name,
     nickname,
   });
@@ -121,7 +121,7 @@ export const postDarakbangEntrance = async ({
   code: string;
   nickname: string;
 }) => {
-  await ApiClient.postWithAuth('darakbang/entrance?code=' + code, {
+  await ApiClient.postWithAuth('/darakbang/entrance?code=' + code, {
     nickname,
   });
 };

frontend/src/common/getRoutes.ts

@@ -24,6 +24,7 @@ const GET_ROUTES = {
     darakbangManagement: () => getNowDarakbangRoute() + '/darakbang-management',
     darakbangMembers: () => getNowDarakbangRoute() + '/darakbang-members',
     darakbangInvitation: () => getNowDarakbangRoute() + '/darakbang-invitation',
+    darakbangLanding: () => getNowDarakbangRoute() + '/darakbang-landing',
   },
 };
 export default GET_ROUTES;

frontend/src/components/MineInfoCard/MineInfoCard.tsx

@@ -2,6 +2,7 @@ import * as S from '@_components/MineInfoCard/MineInfoCard.style';
 
 import ProfileFrame from '@_components/Profile/ProfileFrame';
 import { common } from '@_common/common.style';
+import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById';
 import { useTheme } from '@emotion/react';
 
 interface MineInfoCardProps {
@@ -11,6 +12,7 @@ interface MineInfoCardProps {
 export default function MineInfoCard(props: MineInfoCardProps) {
   const { nickname, profile } = props;
   const theme = useTheme();
+  const { darakbangName } = useNowDarakbangName();
   return (
     <div css={S.MineInfoContainer()}>
       <ProfileFrame
@@ -23,7 +25,7 @@ export default function MineInfoCard(props: MineInfoCardProps) {
         <span css={theme.typography.s1}>안녕하세요</span>
         <span css={theme.typography.h4}>{nickname}</span>
         <span css={[theme.typography.c1, common.nonScroll]}>
-          우아한테크코스 6기
+          {darakbangName}
         </span>
       </div>
     </div>

frontend/src/components/NavigationBar/NavigationBar.tsx

@@ -9,17 +9,16 @@ import { useTheme } from '@emotion/react';
 
 export type Tab = '홈' | '채팅' | '해주세요' | '마이페이지';
 
-const tabRoutes: Record<Tab, string> = {
-  홈: GET_ROUTES.nowDarakbang.main(),
-  채팅: GET_ROUTES.nowDarakbang.chat(),
-  해주세요: GET_ROUTES.nowDarakbang.addPlease(),
-  마이페이지: GET_ROUTES.nowDarakbang.myPage(),
-};
-
 export default function NavigationBar() {
   const theme = useTheme();
   const navigate = useNavigate();
   const location = useLocation();
+  const tabRoutes: Record<Tab, string> = {
+    홈: GET_ROUTES.nowDarakbang.main(),
+    채팅: GET_ROUTES.nowDarakbang.chat(),
+    해주세요: GET_ROUTES.nowDarakbang.please(),
+    마이페이지: GET_ROUTES.nowDarakbang.myPage(),
+  };
 
   const [currentTab, setCurrentTab] = useState<Tab>(
     Object.keys(tabRoutes).find(
@@ -34,7 +33,7 @@ export default function NavigationBar() {
 
   return (
     <nav css={S.navigationBarContainer({ theme })}>
-      <ul css={S.navigationBarList}>
+      <ul css={[S.navigationBarList]}>
         {Object.keys(tabRoutes).map((tab) => (
           <NavigationBarItem
             key={tab}