Feature: 인앱 브라우저인 경우 외부 브라우저로 옮겨가도록 조치

src/components/account/SessionButtons.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import Button from '@/components/common/button/Button';
+import { useSession } from 'next-auth/react';
+
+const SessionButtons = () => {
+  const { data: session }: any = useSession();
+
+  if (session) {
+    return (
+      <>
+        <Link href="/friends">
+          <Button theme="green">
+            시작하기
+          </Button>
+        </Link>
+        <Link href="/chats/2">
+          <Button theme="white">
+            영준이와 대화하기
+          </Button>
+        </Link>
+      </>
+    );
+  }
+  return (
+    <Link href="/login">
+      <Button theme="green">
+        Log in
+      </Button>
+    </Link>
+  );
+};
+
+export default SessionButtons;

src/components/common/button/Button.tsx

@@ -1,25 +1,12 @@
 import { FC, ReactNode } from 'react';
 import { css } from '@emotion/react';
-import color from '@/styles/color';
-
-type Theme = 'green' | 'white'
+import { Theme, themeTable } from '@/styles/color';
 
 interface ButtonProps {
   children: ReactNode,
   theme: Theme
 }
 
-const themeTable = {
-  green: {
-    backgroundColor: color.darkGreen,
-    color: color.offWhite,
-  },
-  white: {
-    backgroundColor: color.offWhite,
-    color: color.greenGray,
-  },
-};
-
 const Button: FC<ButtonProps> = ({ children, theme }) => (
   <button css={ButtonCSS(theme)} type="submit">
     {children}

src/components/common/inApp/InApp.tsx

@@ -0,0 +1,30 @@
+import { Theme, themeTable } from '@/styles/color';
+import { css } from '@emotion/react';
+
+const InApp = () => {
+  const handleButtonClick = () => {
+    if (typeof window !== 'undefined') {
+      window.open(window.location.href, '_blank');
+    }
+  };
+
+  return (
+    <button onClick={handleButtonClick} css={ButtonCSS('green')} type="button">
+      외부 브라우저에서 열기
+    </button>
+  );
+};
+
+export default InApp;
+
+const ButtonCSS = (theme: Theme) => css`
+  width: 100%;
+  background-color: ${themeTable[theme].backgroundColor};
+  border: none;
+  padding: 1rem;
+  border-radius: 1rem;
+  margin-top: 0.625rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: ${themeTable[theme].color};
+`;

src/components/community/postDetail/Comment.tsx

@@ -15,7 +15,7 @@ const CommentList: FC<postProps> = ({ characterId, postId }) => {
   const { loading, comments, fetchComments } = useCommentStore();
   useEffect(() => {
     if (characterId && postId) {
-      fetchComments(characterId, postId);
+      fetchComments(postId);
     }
   }, [characterId, postId, fetchComments]);
 

src/components/community/postDetail/CommentInput.tsx

@@ -20,8 +20,8 @@ const CommentInput : FC<postProps> = ({ characterId, postId }) => {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     if (message && characterId && postId) {
-      createComment(characterId, postId, message).then(() => {
-        fetchComments(characterId, postId);
+      createComment(postId, message).then(() => {
+        fetchComments(postId);
       });
       setMessage('');
     }

src/pages/index.tsx

@@ -1,13 +1,22 @@
 import { css } from '@emotion/react';
-import Link from 'next/link';
 import Image from 'next/image';
 import SEO from '@/components/common/head/SEO';
-import Button from '@/components/common/button/Button';
-import { useSession } from 'next-auth/react';
+import InApp from '@/components/common/inApp/InApp';
+import SessionButtons from '@/components/account/SessionButtons';
+import { useEffect, useState } from 'react';
 
 const Home = () => {
-  console.log();
-  const { data: session }: any = useSession();
+  const [isInApp, setIsInApp] = useState<boolean>(false);
+
+  const isInAppBrowser = () => {
+    const agents = ['kakao', '[fb', 'instagram', 'trill', 'line'];
+    const userAgent = (typeof window !== 'undefined') ? window.navigator.userAgent.toLowerCase() : '';
+    return agents.some((agent) => userAgent.includes(agent));
+  };
+
+  useEffect(() => {
+    setIsInApp(isInAppBrowser());
+  }, []);
 
   return (
     <>
@@ -22,29 +31,7 @@ const Home = () => {
           />
         </main>
         <footer css={css`width:100%; padding: 1.5rem;`}>
-          {
-            session
-              ? (
-                <>
-                  <Link href="/friends">
-                    <Button theme="green">
-                      시작하기
-                    </Button>
-                  </Link>
-                  <Link href="/chats/2">
-                    <Button theme="white">
-                      영준이와 대화하기
-                    </Button>
-                  </Link>
-                </>
-              ) : (
-                <Link href="/login">
-                  <Button theme="green">
-                    Log in
-                  </Button>
-                </Link>
-              )
-          }
+          {isInApp ? <InApp /> : <SessionButtons />}
         </footer>
       </section>
     </>

src/store/comment.ts

@@ -1,20 +1,20 @@
 import { CommentData } from '@/types/post';
-import { findCommentsByPostAndCharacterId } from '@/utils/api/boards';
+import { readComment } from '@/utils/api/boards';
 import { create } from 'zustand';
 
 interface CommentState {
   comments: CommentData[],
   loading: boolean,
-  fetchComments: (characterId: string, postId: string) => void;
+  fetchComments: (postId: string) => void;
 }
 
 const useCommentStore = create<CommentState>((set) => ({
   comments: [],
   loading: true,
-  fetchComments: async (characterId, postId) => {
+  fetchComments: async (postId) => {
     set({ loading: false });
     try {
-      const response = await findCommentsByPostAndCharacterId(characterId, postId);
+      const response = await readComment(postId);
       console.log(response);
       set({ comments: response, loading: true });
     } catch (error) {

src/styles/color.tsx

@@ -11,4 +11,17 @@ const color = {
   white: '#FFFFFF',
 };
 
+export type Theme = 'green' | 'white'
+
+export const themeTable = {
+  green: {
+    backgroundColor: color.darkGreen,
+    color: color.offWhite,
+  },
+  white: {
+    backgroundColor: color.offWhite,
+    color: color.greenGray,
+  },
+};
+
 export default color;

src/utils/api/accounts.ts

@@ -24,7 +24,7 @@ interface SocialLoginForm {
 }
 
 export const credentialsLoginAPI = async (credentials : Credentials) => {
-  const result = await ssrInstance.post('members/login', JSON.stringify(credentials));
+  const result = await ssrInstance.post('members/login', credentials);
   return result.data;
 };
 
@@ -63,7 +63,7 @@ export const credentialsSignupAPI = async ({
 };
 
 export const refreshAccessToken = async (refreshToken: string) => {
-  const result = await ssrInstance.post('members/refreshToken', { refreshToken });
+  const result = await ssrInstance.post('members/refreshtoken', { refreshToken });
   return result.data;
 };
 

src/utils/api/boards.ts

@@ -16,18 +16,23 @@ export const createPost = async (characterId: string, title: string, content: st
   return result;
 };
 
-export const findCommentsByPostAndCharacterId = async (characterId: string, postId: string) => {
-  const result = await webServerInstance.get<CommentData[]>(`boards/${characterId}/${postId}/comments`);
+export const readComment = async (postId: string) => {
+  const result = await webServerInstance.get<CommentData[]>(`comments/${postId}`);
   return result.data;
 };
 
-export const createComment = async (characterId: string, postId: string, comment: string) => {
-  const result = await webServerInstance.post(`boards/${characterId}/${postId}/comments`, { comment });
+export const createComment = async (postId: string, comment: string) => {
+  const result = await webServerInstance.post(`comments/${postId}`, { comment });
   return result.data;
 };
 
-export const deleteComment = async (commentId: string) => {
-  const result = await webServerInstance.put(`comments/${commentId}`);
+export const deleteComment = async (postId: string, commentId: string) => {
+  const result = await webServerInstance.delete(`comments/${postId}/${commentId}`);
+  return result.data;
+};
+
+export const updateComment = async (postId: string, commentId: string) => {
+  const result = await webServerInstance.put(`comments/${postId}/${commentId}`);
   return result.data;
 };
 

src/utils/api/character.ts

@@ -13,11 +13,11 @@ export const findCharacterById = async (characterId: string) => {
 };
 
 export const ssrFindAllCharacters = async () => {
-  const result = await ssrInstance.get<CharacterInfo[]>('/api/characters');
+  const result = await ssrInstance.get<CharacterInfo[]>('/characters');
   return result.data;
 };
 
 export const ssrFindCharacterById = async (characterId: string) => {
-  const result = await ssrInstance.get<CharacterInfo>(`/api/characters/${characterId}`);
+  const result = await ssrInstance.get<CharacterInfo>(`/characters/${characterId}`);
   return result.data;
 };

src/utils/axiosInstance/webServerInstance.ts

@@ -2,7 +2,7 @@ import axios, { AxiosError } from 'axios';
 import { getSession } from 'next-auth/react';
 
 const webServerInstance = axios.create({
-  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/'}api/`,
+  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/'}/`,
   // headers: { 'Content-Type': 'application/json' },
 });