diff --git a/src/components/account/SessionButtons.tsx b/src/components/account/SessionButtons.tsx new file mode 100644 index 0000000..3039087 --- /dev/null +++ b/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 ( + <> + + + + + + + + ); + } + return ( + + + + ); +}; + +export default SessionButtons; diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx index 441bb24..add0278 100644 --- a/src/components/common/button/Button.tsx +++ b/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 = ({ children, theme }) => ( + ); +}; + +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}; +`; diff --git a/src/components/community/postDetail/Comment.tsx b/src/components/community/postDetail/Comment.tsx index 558625b..1509a0d 100644 --- a/src/components/community/postDetail/Comment.tsx +++ b/src/components/community/postDetail/Comment.tsx @@ -15,7 +15,7 @@ const CommentList: FC = ({ characterId, postId }) => { const { loading, comments, fetchComments } = useCommentStore(); useEffect(() => { if (characterId && postId) { - fetchComments(characterId, postId); + fetchComments(postId); } }, [characterId, postId, fetchComments]); diff --git a/src/components/community/postDetail/CommentInput.tsx b/src/components/community/postDetail/CommentInput.tsx index 63f1878..dda599e 100644 --- a/src/components/community/postDetail/CommentInput.tsx +++ b/src/components/community/postDetail/CommentInput.tsx @@ -20,8 +20,8 @@ const CommentInput : FC = ({ 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(''); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 635c495..51173e9 100644 --- a/src/pages/index.tsx +++ b/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(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 = () => { />
- { - session - ? ( - <> - - - - - - - - ) : ( - - - - ) - } + {isInApp ? : }
diff --git a/src/store/comment.ts b/src/store/comment.ts index a057b76..020f1f1 100644 --- a/src/store/comment.ts +++ b/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((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) { diff --git a/src/styles/color.tsx b/src/styles/color.tsx index de5bd3e..4b43a6e 100644 --- a/src/styles/color.tsx +++ b/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; diff --git a/src/utils/api/accounts.ts b/src/utils/api/accounts.ts index 5bdab42..67e61b6 100644 --- a/src/utils/api/accounts.ts +++ b/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; }; diff --git a/src/utils/api/boards.ts b/src/utils/api/boards.ts index 7e3db26..0b61335 100644 --- a/src/utils/api/boards.ts +++ b/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(`boards/${characterId}/${postId}/comments`); +export const readComment = async (postId: string) => { + const result = await webServerInstance.get(`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; }; diff --git a/src/utils/api/character.ts b/src/utils/api/character.ts index b8ac9c2..839d1e8 100644 --- a/src/utils/api/character.ts +++ b/src/utils/api/character.ts @@ -13,11 +13,11 @@ export const findCharacterById = async (characterId: string) => { }; export const ssrFindAllCharacters = async () => { - const result = await ssrInstance.get('/api/characters'); + const result = await ssrInstance.get('/characters'); return result.data; }; export const ssrFindCharacterById = async (characterId: string) => { - const result = await ssrInstance.get(`/api/characters/${characterId}`); + const result = await ssrInstance.get(`/characters/${characterId}`); return result.data; }; diff --git a/src/utils/axiosInstance/webServerInstance.ts b/src/utils/axiosInstance/webServerInstance.ts index 5ec5fc9..18cd472 100644 --- a/src/utils/axiosInstance/webServerInstance.ts +++ b/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' }, });