diff --git a/index.html b/index.html index 24a5399..d4e8312 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + - - - - - DIGLOG - - -
- - + + + + + DIGLOG + + +
+ + diff --git a/src/App.tsx b/src/App.tsx index 9691eaf..8832f46 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,8 @@ -import { RouterProvider } from 'react-router-dom' -import root from './common/router/root' +import { RouterProvider } from 'react-router-dom'; +import root from './common/router/root'; function App() { - - return ( - - ) + return ; } -export default App \ No newline at end of file +export default App; diff --git a/src/common/apis/AxiosApi.tsx b/src/common/apis/AxiosApi.tsx index 33245ab..c15bbdd 100644 --- a/src/common/apis/AxiosApi.tsx +++ b/src/common/apis/AxiosApi.tsx @@ -1,26 +1,26 @@ -import axios from "axios"; -import store from "../../store.tsx"; -import { login } from "../slices/loginSlice.tsx"; +import axios from 'axios'; +import store from '../../store.tsx'; +import { login } from '../slices/loginSlice.tsx'; const axiosApi = axios.create({ baseURL: `${import.meta.env.VITE_SERVER_URL}/api`, }); axiosApi.interceptors.request.use( - (config) => { - config.headers['Authorization'] = store.getState().loginSlice.accessToken + config => { + config.headers['Authorization'] = store.getState().loginSlice.accessToken; return config; }, - (error) => { + error => { return Promise.reject(error); - } + }, ); axiosApi.interceptors.response.use( - (response) => { + response => { return response; }, - async (error) => { + async error => { const originalRequest = error.config; if (error.response && error.response.status >= 401 && error.response.status <= 403 && !originalRequest._retry) { @@ -30,12 +30,14 @@ axiosApi.interceptors.response.use( const refreshResponse = await axiosApi.get('/member/refresh', { withCredentials: true }); if (refreshResponse.data.status === 200) { - store.dispatch(login({ - email: refreshResponse.data.email, - username: refreshResponse.data.username, - roles: refreshResponse.data.roles, - accessToken: refreshResponse.headers.authorization, - })); + store.dispatch( + login({ + email: refreshResponse.data.email, + username: refreshResponse.data.username, + roles: refreshResponse.data.roles, + accessToken: refreshResponse.headers.authorization, + }), + ); } else { return Promise.reject(); } @@ -49,7 +51,7 @@ axiosApi.interceptors.response.use( } return Promise.reject(error); - } + }, ); -export default axiosApi; \ No newline at end of file +export default axiosApi; diff --git a/src/common/apis/blog.tsx b/src/common/apis/blog.tsx index a096818..6642095 100644 --- a/src/common/apis/blog.tsx +++ b/src/common/apis/blog.tsx @@ -1,18 +1,15 @@ -import { FolderDeleteRequest, FolderRequest, PostListMemberRequest } from "../types/blog.tsx"; -import axiosApi from "./AxiosApi.tsx"; -import { postListMemberRequestToParameter } from "../util/url.tsx"; +import { FolderDeleteRequest, FolderRequest, PostListMemberRequest } from '../types/blog.tsx'; +import axiosApi from './AxiosApi.tsx'; +import { postListMemberRequestToParameter } from '../util/url.tsx'; export const getMemberPosts = (postListMemberRequest: PostListMemberRequest) => axiosApi.get(`/post/member${postListMemberRequestToParameter(postListMemberRequest)}`); -export const getMemberFolders = (username: string) => - axiosApi.get(`/folders/${username}`); +export const getMemberFolders = (username: string) => axiosApi.get(`/folders/${username}`); -export const getMemberTags = (username: string) => - axiosApi.get(`/tag/${username}`); +export const getMemberTags = (username: string) => axiosApi.get(`/tag/${username}`); -export const saveAndUpdateFolder = (folderRequestList: FolderRequest[]) => - axiosApi.put("/folders", folderRequestList); +export const saveAndUpdateFolder = (folderRequestList: FolderRequest[]) => axiosApi.put('/folders', folderRequestList); export const deleteFolder = (folderDeleteRequestList: FolderDeleteRequest[]) => - axiosApi.delete("/folders", { data: folderDeleteRequestList }); \ No newline at end of file + axiosApi.delete('/folders', { data: folderDeleteRequestList }); diff --git a/src/common/apis/comment.tsx b/src/common/apis/comment.tsx index 49e1dd2..8b8c485 100644 --- a/src/common/apis/comment.tsx +++ b/src/common/apis/comment.tsx @@ -1,16 +1,14 @@ -import axiosApi from "./AxiosApi.tsx"; -import { CommentListRequest, CommentRequest, CommentUpdateRequest } from "../types/comment.tsx"; -import { commentListRequestToParameter } from "../util/url.tsx"; +import axiosApi from './AxiosApi.tsx'; +import { CommentListRequest, CommentRequest, CommentUpdateRequest } from '../types/comment.tsx'; +import { commentListRequestToParameter } from '../util/url.tsx'; export const getComments = async (commentListRequest: CommentListRequest) => await axiosApi.get(`/comment${commentListRequestToParameter(commentListRequest)}`); -export const saveComment = async (commentRequest: CommentRequest) => - await axiosApi.post("/comment", commentRequest); +export const saveComment = async (commentRequest: CommentRequest) => await axiosApi.post('/comment', commentRequest); export const updateComment = async (commentUpdateRequest: CommentUpdateRequest) => { - await axiosApi.patch("/comment", commentUpdateRequest); -} + await axiosApi.patch('/comment', commentUpdateRequest); +}; -export const deleteComment = async (id: string) => - await axiosApi.patch(`/comment/delete/${id}`); \ No newline at end of file +export const deleteComment = async (id: string) => await axiosApi.patch(`/comment/delete/${id}`); diff --git a/src/common/apis/image.tsx b/src/common/apis/image.tsx index 0d68d64..7501742 100644 --- a/src/common/apis/image.tsx +++ b/src/common/apis/image.tsx @@ -1,8 +1,8 @@ -import axiosApi from "./AxiosApi.tsx"; +import axiosApi from './AxiosApi.tsx'; export const uploadImage = async (blogInfo: any) => { const formData = new FormData(); - formData.append("file", blogInfo.blob()); + formData.append('file', blogInfo.blob()); - return await axiosApi.post("/image", formData); -} + return await axiosApi.post('/image', formData); +}; diff --git a/src/common/apis/member.tsx b/src/common/apis/member.tsx index bfae393..8cbcc9a 100644 --- a/src/common/apis/member.tsx +++ b/src/common/apis/member.tsx @@ -1,56 +1,61 @@ -import axiosApi from "./AxiosApi.tsx"; -import { MemberProfileSearchRequest } from "../types/member.tsx"; -import { memberProfileSearchRequestToParameter } from "../util/url.tsx"; +import axiosApi from './AxiosApi.tsx'; +import { MemberProfileSearchRequest } from '../types/member.tsx'; +import { memberProfileSearchRequestToParameter } from '../util/url.tsx'; export const sendMail = async (email: string) => - await axiosApi.post("/verify", { - email: email + await axiosApi.post('/verify', { + email: email, }); export const checkCode = async (email: string, code: string) => - await axiosApi.post("/verify/code", { + await axiosApi.post('/verify/code', { email: email, - code: code + code: code, }); export const signup = async (email: string, password: string, code: string) => - await axiosApi.post("/verify/signup", { + await axiosApi.post('/verify/signup', { email: email, password: password, code: code, }); export const loginApi = async (email: string, password: string) => - await axiosApi.post("/member/login", { - email: email, - password: password - }, { withCredentials: true }); + await axiosApi.post( + '/member/login', + { + email: email, + password: password, + }, + { withCredentials: true }, + ); export const logoutApi = async (email: string) => - await axiosApi.post("/member/logout", { - email: email - }, { withCredentials: true }); + await axiosApi.post( + '/member/logout', + { + email: email, + }, + { withCredentials: true }, + ); -export const handleKakaoLogin = () => - location.href = `${import.meta.env.VITE_SERVER_URL}/oauth2/authorization/kakao`; +export const handleKakaoLogin = () => (location.href = `${import.meta.env.VITE_SERVER_URL}/oauth2/authorization/kakao`); -export const getProfile = async () => - await axiosApi.get("/member/profile"); +export const getProfile = async () => await axiosApi.get('/member/profile'); -export const getProfileByUsername = async (username: string) => - await axiosApi.get(`/member/profile/${username}`); +export const getProfileByUsername = async (username: string) => await axiosApi.get(`/member/profile/${username}`); export const updateUsername = async (username: string) => - await axiosApi.post("/member/username", { + await axiosApi.post('/member/username', { username: username, }); export const updateProfileImage = async (image: File) => { const formData = new FormData(); - formData.append("file", image); + formData.append('file', image); - return await axiosApi.post("/member/image", formData); -} + return await axiosApi.post('/member/image', formData); +}; export const searchProfile = async (memberProfileSearchRequest: MemberProfileSearchRequest) => - await axiosApi.get(`/member/profile/search${memberProfileSearchRequestToParameter(memberProfileSearchRequest)}`); \ No newline at end of file + await axiosApi.get(`/member/profile/search${memberProfileSearchRequestToParameter(memberProfileSearchRequest)}`); diff --git a/src/common/apis/post.tsx b/src/common/apis/post.tsx index 74e2444..d3b1dcd 100644 --- a/src/common/apis/post.tsx +++ b/src/common/apis/post.tsx @@ -1,4 +1,4 @@ -import axiosApi from "./AxiosApi.tsx"; +import axiosApi from './AxiosApi.tsx'; import { PostFolderRequest, PostListRequest, @@ -6,27 +6,24 @@ import { PostRequest, PostSearchRequest, PostUpdateRequest, -} from "../types/post.tsx"; +} from '../types/post.tsx'; import { postListRequestToParameter, postListSearchRequestToParameter, - postListTagRequestToParameter -} from "../util/url.tsx"; + postListTagRequestToParameter, +} from '../util/url.tsx'; -export const createPost = async (postRequest: PostRequest) => - await axiosApi.post("/post", postRequest); +export const createPost = async (postRequest: PostRequest) => await axiosApi.post('/post', postRequest); export const updatePost = async (postUpdateRequest: PostUpdateRequest) => - await axiosApi.patch("/post", postUpdateRequest); + await axiosApi.patch('/post', postUpdateRequest); export const updatePostFolder = async (postFolderRequest: PostFolderRequest) => - await axiosApi.patch("/post/folder", postFolderRequest); + await axiosApi.patch('/post/folder', postFolderRequest); -export const deletePost = async (id: string) => - await axiosApi.patch(`/post/delete/${id}`); +export const deletePost = async (id: string) => await axiosApi.patch(`/post/delete/${id}`); -export const getPost = async (id: string) => - await axiosApi.get(`/post/${id}`); +export const getPost = async (id: string) => await axiosApi.get(`/post/${id}`); export const getPosts = async (postListRequest: PostListRequest) => await axiosApi.get(`/post${postListRequestToParameter(postListRequest)}`); @@ -39,8 +36,7 @@ export const searchPost = async (postSearchRequest: PostSearchRequest) => export const incrementPostViewCount = async (id: string) => await axiosApi.post(`/post/view/increment`, { - postId: id + postId: id, }); -export const getPostViewCount = async (id: string) => - await axiosApi.get(`/post/view/${id}`); \ No newline at end of file +export const getPostViewCount = async (id: string) => await axiosApi.get(`/post/view/${id}`); diff --git a/src/common/router/blogRouter.tsx b/src/common/router/blogRouter.tsx index 3b8b354..ed9da0e 100644 --- a/src/common/router/blogRouter.tsx +++ b/src/common/router/blogRouter.tsx @@ -1,18 +1,25 @@ -import { Suspense } from "react"; -import { Blog, BlogTag, Loading } from "./page.tsx"; +import { Suspense } from 'react'; +import { Blog, BlogTag, Loading } from './page.tsx'; const blogRouter = () => { - return [ { path: ':username', - element: + element: ( + + + + ), }, { path: ':username/tag', - element: + element: ( + + + + ), }, ]; -} +}; -export default blogRouter; \ No newline at end of file +export default blogRouter; diff --git a/src/common/router/page.tsx b/src/common/router/page.tsx index 888942a..279671d 100644 --- a/src/common/router/page.tsx +++ b/src/common/router/page.tsx @@ -1,18 +1,25 @@ -import { lazy } from "react"; +import { lazy } from 'react'; -export const Loading = -
-
+ -
; +
+); export const Main = lazy(() => import('../../pages/MainPage.tsx')); export const Login = lazy(() => import('../../pages/member/LoginPage.tsx')); diff --git a/src/common/router/postRouter.tsx b/src/common/router/postRouter.tsx index a6df455..6e8c114 100644 --- a/src/common/router/postRouter.tsx +++ b/src/common/router/postRouter.tsx @@ -1,18 +1,25 @@ -import { Suspense } from "react"; -import { Loading, Post, Write } from "./page.tsx"; +import { Suspense } from 'react'; +import { Loading, Post, Write } from './page.tsx'; const postRouter = () => { - return [ { path: 'edit/:id', - element: + element: ( + + + + ), }, { path: ':id', - element: + element: ( + + + + ), }, ]; -} +}; -export default postRouter; \ No newline at end of file +export default postRouter; diff --git a/src/common/router/root.tsx b/src/common/router/root.tsx index c9105c7..024c11b 100644 --- a/src/common/router/root.tsx +++ b/src/common/router/root.tsx @@ -1,43 +1,63 @@ -import { createBrowserRouter } from "react-router-dom"; -import { Suspense } from "react"; -import { Loading, Login, Main, Search, Setting, Write } from "./page.tsx"; -import postRouter from "./postRouter.tsx"; -import blogRouter from "./blogRouter.tsx"; -import signupRouter from "./signupRouter.tsx"; +import { createBrowserRouter } from 'react-router-dom'; +import { Suspense } from 'react'; +import { Loading, Login, Main, Search, Setting, Write } from './page.tsx'; +import postRouter from './postRouter.tsx'; +import blogRouter from './blogRouter.tsx'; +import signupRouter from './signupRouter.tsx'; const root = createBrowserRouter([ { path: '', - element:
+ element: ( + +
+ + ), }, { path: '/login', - element: + element: ( + + + + ), }, { path: '/setting/:section', - element: + element: ( + + + + ), }, { path: '/search', - element: + element: ( + + + + ), }, { path: '/write', - element: + element: ( + + + + ), }, { path: '/signup', - children: signupRouter() + children: signupRouter(), }, { path: '/post', - children: postRouter() + children: postRouter(), }, { path: '/blog', - children: blogRouter() + children: blogRouter(), }, ]); -export default root; \ No newline at end of file +export default root; diff --git a/src/common/router/signupRouter.tsx b/src/common/router/signupRouter.tsx index 8a29da7..a9bdce4 100644 --- a/src/common/router/signupRouter.tsx +++ b/src/common/router/signupRouter.tsx @@ -1,26 +1,41 @@ -import { Code, Email, Loading, Platform, Signup } from "./page.tsx"; -import { Suspense } from "react"; +import { Code, Email, Loading, Platform, Signup } from './page.tsx'; +import { Suspense } from 'react'; const signupRouter = () => { - return [ { path: 'platform', - element: + element: ( + + + + ), }, { path: 'email', - element: + element: ( + + + + ), }, { path: 'code', - element: + element: ( + + + + ), }, { path: '', - element: + element: ( + + + + ), }, ]; -} +}; -export default signupRouter; \ No newline at end of file +export default signupRouter; diff --git a/src/common/slices/loginSlice.tsx b/src/common/slices/loginSlice.tsx index 585eab9..b2e3234 100644 --- a/src/common/slices/loginSlice.tsx +++ b/src/common/slices/loginSlice.tsx @@ -1,17 +1,17 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice } from '@reduxjs/toolkit'; const initialState = { isLogin: false, isReloaded: true, - accessToken: "", - email: "", - username: "", - profileUrl: "", + accessToken: '', + email: '', + username: '', + profileUrl: '', roles: [], -} +}; const loginSlice = createSlice({ - name: "loginSlice", + name: 'loginSlice', initialState: initialState, reducers: { login: (state, action) => { @@ -42,15 +42,15 @@ const loginSlice = createSlice({ profileUrl: action.payload.profileUrl, }; }, - setReloadedFalse: (state) => { + setReloadedFalse: state => { return { ...state, isReloaded: false, }; - } - } + }, + }, }); export const { login, logout, setUsername, setProfile, setReloadedFalse } = loginSlice.actions; -export default loginSlice.reducer; \ No newline at end of file +export default loginSlice.reducer; diff --git a/src/common/types/blog.tsx b/src/common/types/blog.tsx index 1fa32ee..1462479 100644 --- a/src/common/types/blog.tsx +++ b/src/common/types/blog.tsx @@ -1,31 +1,32 @@ export interface FolderRequest { - id: string | null, - title: string, - depth: number, - orderIndex: number, - parentOrderIndex: number, + id: string | null; + title: string; + depth: number; + orderIndex: number; + parentOrderIndex: number; } export interface FolderType { - id: string, - title: string, - postCount: number, - subFolders: FolderType[], + id: string; + title: string; + postCount: number; + subFolders: FolderType[]; } export interface FolderResponse { - folderId: string, - title: string, - depth: number, - orderIndex: number, - parentFolderId: string | null, - postCount: number, + folderId: string; + title: string; + depth: number; + orderIndex: number; + parentFolderId: string | null; + postCount: number; } export const toFolderTypeList = (folderResponseList: FolderResponse[]) => { const result: FolderType[] = []; - folderResponseList.sort((a, b) => a.orderIndex - b.orderIndex) + folderResponseList + .sort((a, b) => a.orderIndex - b.orderIndex) .forEach(folderResponse => { const folderType = toFolderType(folderResponse); @@ -40,7 +41,7 @@ export const toFolderTypeList = (folderResponseList: FolderResponse[]) => { }); return result; -} +}; const toFolderType = (folderResponse: FolderResponse) => { return { @@ -49,14 +50,14 @@ const toFolderType = (folderResponse: FolderResponse) => { postCount: folderResponse.postCount, subFolders: [], }; -} +}; export const toFolderRequestList = (folderTypeList: FolderType[]) => { const result: FolderRequest[] = []; const getFolderRequestList = (folderTypeList: FolderType[], depth: number = 0, parentIndex: number = -1) => { folderTypeList.forEach(folder => { - const id = (!folder.id.startsWith("temp") ? folder.id : null); + const id = !folder.id.startsWith('temp') ? folder.id : null; result.push({ id: id, title: folder.title, @@ -69,20 +70,20 @@ export const toFolderRequestList = (folderTypeList: FolderType[]) => { getFolderRequestList(folder.subFolders, depth + 1, result.length - 1); } }); - } + }; getFolderRequestList(folderTypeList); return result; -} +}; export interface FolderDeleteRequest { - folderId: string, + folderId: string; } export interface PostListMemberRequest { - username: string, - folderIds: string[] | null, - page: number, - size: number, + username: string; + folderIds: string[] | null; + page: number; + size: number; } diff --git a/src/common/types/comment.tsx b/src/common/types/comment.tsx index 6489f80..b1d9c23 100644 --- a/src/common/types/comment.tsx +++ b/src/common/types/comment.tsx @@ -1,52 +1,52 @@ -import { PageResponse } from "./common.tsx"; +import { PageResponse } from './common.tsx'; export interface CommentType { - id: string, - member: CommentMember, - content: string, - taggedUsername: string | null, - replyCount: number, - createdAt: Date, - deleted: boolean, - subComments: CommentType[], + id: string; + member: CommentMember; + content: string; + taggedUsername: string | null; + replyCount: number; + createdAt: Date; + deleted: boolean; + subComments: CommentType[]; } export interface CommentListRequest { - postId: string, - parentCommentId: string | null, - page: number, - size: number, + postId: string; + parentCommentId: string | null; + page: number; + size: number; } export interface CommentListResponse { - content: CommentResponse[], - page: PageResponse, + content: CommentResponse[]; + page: PageResponse; } export interface CommentResponse { - id: string, - member: CommentMember, - content: string, - taggedUsername: string | null, - replyCount: number, - createdAt: Date, - deleted: boolean, + id: string; + member: CommentMember; + content: string; + taggedUsername: string | null; + replyCount: number; + createdAt: Date; + deleted: boolean; } export interface CommentMember { - username: string, - profileUrl: string | null, + username: string; + profileUrl: string | null; } export interface CommentRequest { - content: string, - postId: string, - parentCommentId: string | null, - taggedUsername: string | null, + content: string; + postId: string; + parentCommentId: string | null; + taggedUsername: string | null; } export interface CommentUpdateRequest { - id: string, - content: string, - taggedUsername: string | null, -} \ No newline at end of file + id: string; + content: string; + taggedUsername: string | null; +} diff --git a/src/common/types/common.tsx b/src/common/types/common.tsx index 9f428c4..01cfe6e 100644 --- a/src/common/types/common.tsx +++ b/src/common/types/common.tsx @@ -3,4 +3,4 @@ export interface PageResponse { number: number; totalElements: number; totalPages: number; -} \ No newline at end of file +} diff --git a/src/common/types/member.tsx b/src/common/types/member.tsx index f39d9a2..bc2e80e 100644 --- a/src/common/types/member.tsx +++ b/src/common/types/member.tsx @@ -1,10 +1,10 @@ export interface MemberProfileSearchRequest { - username: string, - page: number, - size: number, + username: string; + page: number; + size: number; } export interface MemberProfileResponse { - username: string, - profileUrl: string | null, -} \ No newline at end of file + username: string; + profileUrl: string | null; +} diff --git a/src/common/types/post.tsx b/src/common/types/post.tsx index 36c87a2..3acc001 100644 --- a/src/common/types/post.tsx +++ b/src/common/types/post.tsx @@ -1,43 +1,43 @@ -import { PageResponse } from "./common.tsx"; +import { PageResponse } from './common.tsx'; export interface PostRequest { - title: string, - content: string, - folderId: string | null, - tagNames: string[], - urls: string[], + title: string; + content: string; + folderId: string | null; + tagNames: string[]; + urls: string[]; } export interface PostUpdateRequest { - id: string, - title: string, - content: string, - folderId: string | null, - tagNames: string[], - urls: string[], + id: string; + title: string; + content: string; + folderId: string | null; + tagNames: string[]; + urls: string[]; } export interface PostListRequest { - sorts: string[], - page: number, - size: number, - isDescending: boolean, + sorts: string[]; + page: number; + size: number; + isDescending: boolean; } export interface PostSearchRequest { - keyword: string, - option: string, - sorts: string[], - page: number, - size: number, - isDescending: boolean, + keyword: string; + option: string; + sorts: string[]; + page: number; + size: number; + isDescending: boolean; } export interface PostListTagRequest { - username: string, - tagId: string, - page: number, - size: number, + username: string; + tagId: string; + page: number; + size: number; } export interface PostListResponse { @@ -67,6 +67,6 @@ export interface TagResponse { } export interface PostFolderRequest { - postIds: string[], - folderId: string | null, + postIds: string[]; + folderId: string | null; } diff --git a/src/common/util/date.tsx b/src/common/util/date.tsx index 2ea602b..28710f7 100644 --- a/src/common/util/date.tsx +++ b/src/common/util/date.tsx @@ -1,18 +1,22 @@ export const fullDateToKorean = (date: Date) => { const outputDate = new Date(date); - return outputDate.getFullYear() + '년 ' - + (outputDate.getMonth() + 1) + '월 ' - + outputDate.getDate() + '일 ' - + outputDate.getHours().toString().padStart(2, '0') + ':' - + outputDate.getMinutes().toString().padStart(2, '0'); -} + return ( + outputDate.getFullYear() + + '년 ' + + (outputDate.getMonth() + 1) + + '월 ' + + outputDate.getDate() + + '일 ' + + outputDate.getHours().toString().padStart(2, '0') + + ':' + + outputDate.getMinutes().toString().padStart(2, '0') + ); +}; export const dateToKorean = (date: Date) => { const outputDate = new Date(date); - return outputDate.getFullYear() + '년 ' - + (outputDate.getMonth() + 1) + '월 ' - + outputDate.getDate() + '일'; -} + return outputDate.getFullYear() + '년 ' + (outputDate.getMonth() + 1) + '월 ' + outputDate.getDate() + '일'; +}; export const relativeDateToKorean = (date: Date) => { const outputDate = new Date(date); @@ -35,16 +39,15 @@ export const relativeDateToKorean = (date: Date) => { } else { return dateToKorean(date); } -} +}; export const shortDateToKorean = (date: Date) => { const outputDate = new Date(date); - return (outputDate.getMonth() + 1) + '월 ' - + outputDate.getDate() + '일 '; -} + return outputDate.getMonth() + 1 + '월 ' + outputDate.getDate() + '일 '; +}; export const formatTimer = (seconds: number) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`; -}; \ No newline at end of file +}; diff --git a/src/common/util/html.tsx b/src/common/util/html.tsx index 061891a..53cbf30 100644 --- a/src/common/util/html.tsx +++ b/src/common/util/html.tsx @@ -2,15 +2,15 @@ export const getImgSrc = (content: string) => { const doc = new DOMParser().parseFromString(content, 'text/html'); const imgTag = doc.querySelector('img'); return imgTag ? imgTag.src : null; -} +}; export const getImgUrls = (content: string) => { const doc = new DOMParser().parseFromString(content, 'text/html'); const images = doc.querySelectorAll('img'); return Array.from(images).map(img => img.src); -} +}; export const removeHtmlTags = (content: string) => { const regex = /(<([^>]+)>| )/gi; - return content.replace(regex, ""); -} \ No newline at end of file + return content.replace(regex, ''); +}; diff --git a/src/common/util/infiniteScroll.tsx b/src/common/util/infiniteScroll.tsx index 4dc4ea9..02ecb19 100644 --- a/src/common/util/infiniteScroll.tsx +++ b/src/common/util/infiniteScroll.tsx @@ -1,5 +1,5 @@ import { useEffect, useState, useMemo, useRef, MutableRefObject } from 'react'; -import { PostResponse } from "../types/post.tsx"; +import { PostResponse } from '../types/post.tsx'; export interface InfiniteScrollProps { root?: Element | null; @@ -16,9 +16,8 @@ const useInfiniteScroll = ({ threshold = 1, rootMargin = '0px', targetArray, - endPoint = 1 + endPoint = 1, }: InfiniteScrollProps) => { - const [page, setPage] = useState(0); const currentChild = useRef(null); @@ -30,7 +29,7 @@ const useInfiniteScroll = ({ return; } if (entries[0].isIntersecting) { - setPage((v) => v + 1); + setPage(v => v + 1); // setPage 가 무한으로 올라가는 것을 방지하기 위한 연결 끊음 observer.disconnect(); } @@ -64,8 +63,8 @@ const useInfiniteScroll = ({ return { page, - setPage + setPage, }; }; -export default useInfiniteScroll; \ No newline at end of file +export default useInfiniteScroll; diff --git a/src/common/util/regex.tsx b/src/common/util/regex.tsx index 1d29f55..675a119 100644 --- a/src/common/util/regex.tsx +++ b/src/common/util/regex.tsx @@ -1,16 +1,16 @@ export const checkEmail = (email: string) => { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return !!(email !== "" && email.match(regex)); -} + return !!(email !== '' && email.match(regex)); +}; export const checkPassword = (password: string) => { const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\W_]{8,16}$/; - return !!(password !== "" && password.match(regex)); -} + return !!(password !== '' && password.match(regex)); +}; export const checkUUID = (id: string) => { const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i; return uuidRegex.test(id); -} \ No newline at end of file +}; diff --git a/src/common/util/sort.tsx b/src/common/util/sort.tsx index 658de8d..5643b6a 100644 --- a/src/common/util/sort.tsx +++ b/src/common/util/sort.tsx @@ -1,4 +1,4 @@ -import { TagResponse } from "../types/post.tsx"; +import { TagResponse } from '../types/post.tsx'; export const sortByName = (names: string[]) => { names.sort((a: string, b: string) => { @@ -7,7 +7,7 @@ export const sortByName = (names: string[]) => { return 0; }); return names; -} +}; export const sortTagByName = (tags: TagResponse[]) => { tags.sort((a: TagResponse, b: TagResponse) => { @@ -16,4 +16,4 @@ export const sortTagByName = (tags: TagResponse[]) => { return 0; }); return tags; -} \ No newline at end of file +}; diff --git a/src/common/util/string.tsx b/src/common/util/string.tsx index 157db19..5f0f14c 100644 --- a/src/common/util/string.tsx +++ b/src/common/util/string.tsx @@ -1,9 +1,9 @@ export const getFolderTitle = (title: string, depth: number) => { - let prefix = ""; + let prefix = ''; if (depth === 1) { - prefix = "↳"; + prefix = '↳'; } else if (depth === 2) { - prefix = "↳"; + prefix = '↳'; } return `${prefix} ${title}`; -} \ No newline at end of file +}; diff --git a/src/common/util/url.tsx b/src/common/util/url.tsx index 778614c..9d2b3ee 100644 --- a/src/common/util/url.tsx +++ b/src/common/util/url.tsx @@ -1,13 +1,13 @@ -import { PostListRequest, PostListTagRequest, PostSearchRequest } from "../types/post.tsx"; -import { CommentListRequest } from "../types/comment.tsx"; -import { PostListMemberRequest } from "../types/blog.tsx"; -import { MemberProfileSearchRequest } from "../types/member.tsx"; +import { PostListRequest, PostListTagRequest, PostSearchRequest } from '../types/post.tsx'; +import { CommentListRequest } from '../types/comment.tsx'; +import { PostListMemberRequest } from '../types/blog.tsx'; +import { MemberProfileSearchRequest } from '../types/member.tsx'; export const postListRequestToParameter = (postListRequest: PostListRequest) => { - const sorts = postListRequest.sorts.map(sort => `sorts=${sort}`).join("&"); + const sorts = postListRequest.sorts.map(sort => `sorts=${sort}`).join('&'); return `?${sorts}&page=${postListRequest.page}&size=${postListRequest.size}&isDescending=${postListRequest.isDescending}`; -} +}; export const commentListRequestToParameter = (commentListRequest: CommentListRequest) => { let query = `?postId=${commentListRequest.postId}&page=${commentListRequest.page}&size=${commentListRequest.size}`; @@ -17,7 +17,7 @@ export const commentListRequestToParameter = (commentListRequest: CommentListReq } return query; -} +}; export const postListMemberRequestToParameter = (postListMemberRequest: PostListMemberRequest) => { let query = `?username=${postListMemberRequest.username}&page=${postListMemberRequest.page}&size=${postListMemberRequest.size}`; @@ -31,18 +31,18 @@ export const postListMemberRequestToParameter = (postListMemberRequest: PostList }); return query; -} +}; export const postListSearchRequestToParameter = (postSearchRequest: PostSearchRequest) => { - const sorts = postSearchRequest.sorts.map(sort => `sorts=${sort}`).join("&"); + const sorts = postSearchRequest.sorts.map(sort => `sorts=${sort}`).join('&'); return `?${sorts}&keyword=${postSearchRequest.keyword}&option=${postSearchRequest.option}&page=${postSearchRequest.page}&size=${postSearchRequest.size}&isDescending=${postSearchRequest.isDescending}`; -} +}; export const postListTagRequestToParameter = (postListTagRequest: PostListTagRequest) => { return `?username=${postListTagRequest.username}&tagId=${postListTagRequest.tagId}&page=${postListTagRequest.page}&size=${postListTagRequest.size}`; -} +}; export const memberProfileSearchRequestToParameter = (memberProfileSearchRequest: MemberProfileSearchRequest) => { return `?username=${memberProfileSearchRequest.username}&page=${memberProfileSearchRequest.page}&size=${memberProfileSearchRequest.size}`; -} \ No newline at end of file +}; diff --git a/src/components/blog/BlogSearchBar.tsx b/src/components/blog/BlogSearchBar.tsx index e5ff335..02d4720 100644 --- a/src/components/blog/BlogSearchBar.tsx +++ b/src/components/blog/BlogSearchBar.tsx @@ -1,17 +1,14 @@ -function BlogSearchBar({ value, setValue }: { - value: string, - setValue: (value: string) => void, -}) { +function BlogSearchBar({ value, setValue }: { value: string; setValue: (value: string) => void }) { return ( { - setValue(e.target.value) - }}> - + onChange={e => { + setValue(e.target.value); + }} + > ); } -export default BlogSearchBar; \ No newline at end of file +export default BlogSearchBar; diff --git a/src/components/blog/BlogSideBar.tsx b/src/components/blog/BlogSideBar.tsx index daf1de0..255921a 100644 --- a/src/components/blog/BlogSideBar.tsx +++ b/src/components/blog/BlogSideBar.tsx @@ -1,114 +1,125 @@ -import { FolderType } from "../../common/types/blog.tsx"; -import { useSelector } from "react-redux"; -import { RootState } from "../../store.tsx"; -import { OutlineLink } from "../common/OutlineButton.tsx"; -import BlogTagCard from "./BlogTagCard.tsx"; -import { getFolderTitle } from "../../common/util/string.tsx"; -import ProfileImageCircle from "../common/ProfileImageCircle.tsx"; -import { TagResponse } from "../../common/types/post.tsx"; +import { FolderType } from '../../common/types/blog.tsx'; +import { useSelector } from 'react-redux'; +import { RootState } from '../../store.tsx'; +import { OutlineLink } from '../common/OutlineButton.tsx'; +import BlogTagCard from './BlogTagCard.tsx'; +import { getFolderTitle } from '../../common/util/string.tsx'; +import ProfileImageCircle from '../common/ProfileImageCircle.tsx'; +import { TagResponse } from '../../common/types/post.tsx'; -function BlogSideBar({ folders, tags, username, profileUrl, selectedFolder, setSelectedFolder, bgColor, side }: { - folders: FolderType[], - tags: TagResponse[], - username: string | undefined, - profileUrl: string | null, - selectedFolder: FolderType | null, - setSelectedFolder: (folder: FolderType) => void, - bgColor?: string, - side?: boolean, +function BlogSideBar({ + folders, + tags, + username, + profileUrl, + selectedFolder, + setSelectedFolder, + bgColor, + side, +}: { + folders: FolderType[]; + tags: TagResponse[]; + username: string | undefined; + profileUrl: string | null; + selectedFolder: FolderType | null; + setSelectedFolder: (folder: FolderType) => void; + bgColor?: string; + side?: boolean; }) { - const loginState = useSelector((state: RootState) => state.loginSlice); return ( -
-
- -
- {username} -
+
+
+ +
{username}
{username === loginState.username && ( -
- - +
+ +
)}
-
-
폴더
+
+
폴더
+ setSelectedFolder={setSelectedFolder} + />
-
-
태그
-
- {tags.map((tag) => ( - +
+
태그
+
+ {tags.map(tag => ( + ))} - {tags.length === 0 && -
- 생성된 태그가 없습니다. -
} + {tags.length === 0 &&
생성된 태그가 없습니다.
}
); } -function BlogFolderList({ depth = 0, folders, selectedFolder, setSelectedFolder }: { - depth?: number, - folders: FolderType[], - selectedFolder: FolderType | null, - setSelectedFolder: (folder: FolderType) => void, +function BlogFolderList({ + depth = 0, + folders, + selectedFolder, + setSelectedFolder, +}: { + depth?: number; + folders: FolderType[]; + selectedFolder: FolderType | null; + setSelectedFolder: (folder: FolderType) => void; }) { - const getPostCount = (folder: FolderType) => { let resultCount = folder.postCount; if (folder.subFolders) { folder.subFolders.forEach(subFolder => { resultCount += getPostCount(subFolder); - }) + }); } return resultCount; - } + }; return ( -
- {folders.length > 1 && folders.map(folder => -
- {depth === 0 &&
} - - {folder.subFolders.length > 0 && depth === 0 &&
} - -
)} - {depth === 0 && folders.length <= 1 && -
- 생성된 폴더가 없습니다. -
} +
+ {folders.length > 1 && + folders.map(folder => ( +
+ {depth === 0 &&
} + + {folder.subFolders.length > 0 && depth === 0 &&
} + +
+ ))} + {depth === 0 && folders.length <= 1 && ( +
생성된 폴더가 없습니다.
+ )}
); } -export default BlogSideBar; \ No newline at end of file +export default BlogSideBar; diff --git a/src/components/blog/BlogTagCard.tsx b/src/components/blog/BlogTagCard.tsx index 5a499f5..61ec8ab 100644 --- a/src/components/blog/BlogTagCard.tsx +++ b/src/components/blog/BlogTagCard.tsx @@ -1,20 +1,17 @@ -import { TagResponse } from "../../common/types/post.tsx"; -import { TextButton } from "../common/TextButton.tsx"; -import { useNavigate } from "react-router-dom"; - -function BlogTagCard({ tag, username }: { - tag: TagResponse, - username: string, -}) { +import { TagResponse } from '../../common/types/post.tsx'; +import { TextButton } from '../common/TextButton.tsx'; +import { useNavigate } from 'react-router-dom'; +function BlogTagCard({ tag, username }: { tag: TagResponse; username: string }) { const navigate = useNavigate(); return ( navigate(`/blog/${username}/tag`, { state: { tagId: tag.id } })} - addStyle={"!px-1 !py-0 hover:text-lime-700"} /> + addStyle={'!px-1 !py-0 hover:text-lime-700'} + /> ); } -export default BlogTagCard; \ No newline at end of file +export default BlogTagCard; diff --git a/src/components/common/FillButton.tsx b/src/components/common/FillButton.tsx index 94ffd1a..2908782 100644 --- a/src/components/common/FillButton.tsx +++ b/src/components/common/FillButton.tsx @@ -1,24 +1,27 @@ -import { Link } from "react-router-dom"; +import { Link } from 'react-router-dom'; -const className = " bg-lime-500 hover:brightness-105 text-white text-sm font-semibold py-2 px-4 rounded hover:cursor-pointer"; +const className = + ' bg-lime-500 hover:brightness-105 text-white text-sm font-semibold py-2 px-4 rounded hover:cursor-pointer'; -export function FillButton({ text, onClick, addStyle, disabled }: { - text: string, - onClick: () => void, - addStyle?: string, - disabled?: boolean +export function FillButton({ + text, + onClick, + addStyle, + disabled, +}: { + text: string; + onClick: () => void; + addStyle?: string; + disabled?: boolean; }) { return ( - ); } -export function FillLink({ text, to, addStyle }: { text: string, to: string, addStyle?: string }) { +export function FillLink({ text, to, addStyle }: { text: string; to: string; addStyle?: string }) { return ( {text} @@ -26,16 +29,21 @@ export function FillLink({ text, to, addStyle }: { text: string, to: string, add ); } -export function LoadMoreButton({ onClick, addStyle, disabled }: { - onClick: () => void, - addStyle?: string, - disabled?: boolean +export function LoadMoreButton({ + onClick, + addStyle, + disabled, +}: { + onClick: () => void; + addStyle?: string; + disabled?: boolean; }) { return ( + disabled={disabled} + /> ); -} \ No newline at end of file +} diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx index b56b7bb..c3692d8 100644 --- a/src/components/common/Footer.tsx +++ b/src/components/common/Footer.tsx @@ -1,15 +1,18 @@ -import { FaGithub } from "react-icons/fa"; -import { Link } from "react-router-dom"; +import { FaGithub } from 'react-icons/fa'; +import { Link } from 'react-router-dom'; function Footer() { return ( -
- - +
+ +
); } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index 0ca984c..cc22026 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -1,16 +1,15 @@ -import { Link, useNavigate } from "react-router-dom"; -import { useDispatch, useSelector } from "react-redux"; -import { RootState } from "../../store.tsx"; -import { useEffect, useRef, useState } from "react"; -import { TextLink } from "./TextButton.tsx"; -import { MdOutlineSearch } from "react-icons/md"; -import IconButton from "./IconButton.tsx"; -import { getProfile, logoutApi } from "../../common/apis/member.tsx"; -import { logout, setProfile, setReloadedFalse } from "../../common/slices/loginSlice.tsx"; -import ProfileImageCircle from "./ProfileImageCircle.tsx"; +import { Link, useNavigate } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import { RootState } from '../../store.tsx'; +import { useEffect, useRef, useState } from 'react'; +import { TextLink } from './TextButton.tsx'; +import { MdOutlineSearch } from 'react-icons/md'; +import IconButton from './IconButton.tsx'; +import { getProfile, logoutApi } from '../../common/apis/member.tsx'; +import { logout, setProfile, setReloadedFalse } from '../../common/slices/loginSlice.tsx'; +import ProfileImageCircle from './ProfileImageCircle.tsx'; function Header() { - const dispatch = useDispatch(); const loginState = useSelector((state: RootState) => state.loginSlice); const navigate = useNavigate(); @@ -29,11 +28,13 @@ function Header() { getProfile() .then(res => { - dispatch(setProfile({ - email: res.data.email, - username: res.data.username, - profileUrl: res.data.profileUrl, - })); + dispatch( + setProfile({ + email: res.data.email, + username: res.data.username, + profileUrl: res.data.profileUrl, + }), + ); }) .catch(() => { dispatch(setReloadedFalse()); @@ -42,7 +43,7 @@ function Header() { const handleDropDown = () => { setIsOpen(cur => !cur); - } + }; const handleClickOutside = (event: MouseEvent) => { if (dashboardRef.current && !dashboardRef.current.contains(event.target as Node)) { @@ -55,13 +56,13 @@ function Header() { .then(() => { logout(); }) - .catch((error) => { + .catch(error => { alert(`알 수 없는 에러 : ${error.message}`); }) .finally(() => { navigate(0); }); - } + }; useEffect(() => { window.scrollTo(0, 0); @@ -73,61 +74,73 @@ function Header() { }, []); return ( -
- - logo -
- DIGLOG -
+
+ + logo +
DIGLOG
-
+
} - onClick={() => navigate("/search?word=&option=ALL&sort=createdAt&isDescending=true&tab=post")} /> - {loginState.isLogin - ?
-
+ icon={} + onClick={() => navigate('/search?word=&option=ALL&sort=createdAt&isDescending=true&tab=post')} + /> + {loginState.isLogin ? ( +
+
-
-
{loginState.username}
-
{loginState.email}
+ className={`${ + isOpen ? '' : 'hidden' + } absolute z-99 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`} + > +
+
{loginState.username}
+
{loginState.email}
-
- +
+ 게시글 작성 - + 내 블로그 - + 설정
-
+
- :
- -
} + ) : ( +
+ +
+ )}
); } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/common/IconButton.tsx b/src/components/common/IconButton.tsx index ac246df..f6f02ef 100644 --- a/src/components/common/IconButton.tsx +++ b/src/components/common/IconButton.tsx @@ -1,11 +1,14 @@ import { ReactNode } from 'react'; -function IconButton({ icon, onClick, addStyle }: { icon: ReactNode; onClick: () => void, addStyle?: string }) { +function IconButton({ icon, onClick, addStyle }: { icon: ReactNode; onClick: () => void; addStyle?: string }) { return ( - ); } -export default IconButton; \ No newline at end of file +export default IconButton; diff --git a/src/components/common/OutlineButton.tsx b/src/components/common/OutlineButton.tsx index e36f2ce..89b50f1 100644 --- a/src/components/common/OutlineButton.tsx +++ b/src/components/common/OutlineButton.tsx @@ -1,8 +1,9 @@ -import { Link } from "react-router-dom"; +import { Link } from 'react-router-dom'; -const className = " bg-transparent hover:bg-lime-300 text-lime-700 font-semibold hover:text-white py-2 px-4 border border-lime-500 hover:border-transparent rounded hover:cursor-pointer"; +const className = + ' bg-transparent hover:bg-lime-300 text-lime-700 font-semibold hover:text-white py-2 px-4 border border-lime-500 hover:border-transparent rounded hover:cursor-pointer'; -export function OutlineButton({ text, onClick, addStyle }: { text: string, onClick?: () => void, addStyle?: string }) { +export function OutlineButton({ text, onClick, addStyle }: { text: string; onClick?: () => void; addStyle?: string }) { return ( -
- {pageList.map(currentPage => - )} + + ))}
- ); - - } -export default PaginationButton; \ No newline at end of file +export default PaginationButton; diff --git a/src/components/common/ProfileImageCircle.tsx b/src/components/common/ProfileImageCircle.tsx index 1584820..672cab3 100644 --- a/src/components/common/ProfileImageCircle.tsx +++ b/src/components/common/ProfileImageCircle.tsx @@ -1,33 +1,48 @@ -import { MdOutlinePerson } from "react-icons/md"; +import { MdOutlinePerson } from 'react-icons/md'; -function ProfileImageCircle({ profileUrl, size, onClick, addStyle }: { - profileUrl: string | null, - size?: string, - onClick?: () => void, - addStyle?: string, +function ProfileImageCircle({ + profileUrl, + size, + onClick, + addStyle, +}: { + profileUrl: string | null; + size?: string; + onClick?: () => void; + addStyle?: string; }) { - - let imageSize = ""; - let iconSize = ""; - if (size === "lg") { - imageSize = "size-32"; - iconSize = "size-28"; - } else if (size === "md") { - imageSize = "size-28"; - iconSize = "size-24"; + let imageSize = ''; + let iconSize = ''; + if (size === 'lg') { + imageSize = 'size-32'; + iconSize = 'size-28'; + } else if (size === 'md') { + imageSize = 'size-28'; + iconSize = 'size-24'; } else { - imageSize += "size-10"; - iconSize += "size-6"; + imageSize += 'size-10'; + iconSize += 'size-6'; } if (profileUrl) { - return user_image; + return ( + user_image + ); } - return ; + return ( + + ); } -export default ProfileImageCircle; \ No newline at end of file +export default ProfileImageCircle; diff --git a/src/components/common/TextButton.tsx b/src/components/common/TextButton.tsx index 2f0fb88..566e109 100644 --- a/src/components/common/TextButton.tsx +++ b/src/components/common/TextButton.tsx @@ -1,8 +1,8 @@ -import { Link } from "react-router-dom"; +import { Link } from 'react-router-dom'; -const className = " flex justify-center items-center bg-transparent text-sm py-2 px-4 hover:cursor-pointer"; +const className = ' flex justify-center items-center bg-transparent text-sm py-2 px-4 hover:cursor-pointer'; -export function TextButton({ text, onClick, addStyle }: { text: string, onClick?: () => void, addStyle?: string }) { +export function TextButton({ text, onClick, addStyle }: { text: string; onClick?: () => void; addStyle?: string }) { return (
- {folders.map((folder) => + className={`${ + folderOpen ? '' : 'hidden' + } h-72 min-h-16 overflow-y-scroll absolute z-50 w-full top-12 left-0 bg-white divide-y divide-gray-300 rounded-lg shadow-sm`} + > + {folders.map(folder => ( - )} + setFolderOpen={setFolderOpen} + /> + ))}
); } -function FolderSelectCard({ folder, depth, selectedFolder, setTargetFolder, setFolderOpen }: { - folder: FolderType, - depth: number, - selectedFolder?: FolderType | null, - setTargetFolder: (folder: FolderType) => void, - setFolderOpen: (open: boolean) => void, +function FolderSelectCard({ + folder, + depth, + selectedFolder, + setTargetFolder, + setFolderOpen, +}: { + folder: FolderType; + depth: number; + selectedFolder?: FolderType | null; + setTargetFolder: (folder: FolderType) => void; + setFolderOpen: (open: boolean) => void; }) { - return !selectedFolder || folder.id !== selectedFolder.id ? (
{folder.subFolders && - folder.subFolders.map((subFolder => + folder.subFolders.map(subFolder => ( ))} + setFolderOpen={setFolderOpen} + /> + ))}
- ) : <>; + ) : ( + <> + ); } -export default FolderSelectBox; \ No newline at end of file +export default FolderSelectBox; diff --git a/src/components/member/LoginButton.tsx b/src/components/member/LoginButton.tsx index 80691bc..7190881 100644 --- a/src/components/member/LoginButton.tsx +++ b/src/components/member/LoginButton.tsx @@ -1,19 +1,29 @@ -import { ReactNode } from "react"; +import { ReactNode } from 'react'; -function LoginButton({ text, onClick, bgColor, disable, icon }: { - text: string, - onClick: () => void, - bgColor: string, - disable?: boolean, - icon?: ReactNode +function LoginButton({ + text, + onClick, + bgColor, + disable, + icon, +}: { + text: string; + onClick: () => void; + bgColor: string; + disable?: boolean; + icon?: ReactNode; }) { return ( - ); } -export default LoginButton; \ No newline at end of file +export default LoginButton; diff --git a/src/components/member/LoginTextField.tsx b/src/components/member/LoginTextField.tsx index 99596c8..9a3572a 100644 --- a/src/components/member/LoginTextField.tsx +++ b/src/components/member/LoginTextField.tsx @@ -1,37 +1,47 @@ -import * as React from "react"; -import { Ref } from "react"; +import * as React from 'react'; +import { Ref } from 'react'; -function LoginTextField({ label, type, placeholder, value, setValue, customRef, error, isError, onKeyDown }: { - label?: string, - type: string, - placeholder: string, - value: string, - setValue: (value: string) => void, - customRef?: Ref, - error?: string, - isError?: boolean, - onKeyDown?: (event: React.KeyboardEvent) => void, +function LoginTextField({ + label, + type, + placeholder, + value, + setValue, + customRef, + error, + isError, + onKeyDown, +}: { + label?: string; + type: string; + placeholder: string; + value: string; + setValue: (value: string) => void; + customRef?: Ref; + error?: string; + isError?: boolean; + onKeyDown?: (event: React.KeyboardEvent) => void; }) { return ( -
-