Skip to content

Commit

Permalink
Merge pull request #59 from SproutMJ/develop
Browse files Browse the repository at this point in the history 
수정사항 적용
  • Loading branch information
@SproutMJ
SproutMJ authored Jun 2, 2024
2 parents 61bf490 + 69515b2 commit f6b66b4
Show file tree
Hide file tree
Showing 7 changed files with 241 additions and 183 deletions.
5 changes: 4 additions & 1 deletion backend/src/main/java/hello/aimju/user/service/UserService.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ public UserInfoResponseDto getUserInfo(Long userId) {

public UserDetailResponseDto getUserDetail(HttpSession session) {
User user = getUserFromSession(session);
return new UserDetailResponseDto(user);
User curruentUser = userRepository.findById(user.getId())
.orElseThrow(() -> new IllegalArgumentException("해당 유저를 찾을 수 없습니다: " + user.getId()));

return new UserDetailResponseDto(curruentUser);
}

@Transactional
Expand Down
36 changes: 35 additions & 1 deletion frontend/src/app/boards/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import axios from "axios";
import useUserStore from "@/store/useUserStore";
import {DeleteIcon, ScissorsIcon} from "lucide-react";
import Image from "next/image";
// @ts-ignore
import Modal from "react-modal";

type Comment = {
id: number;
Expand All @@ -46,6 +48,7 @@ export default function BoardDetail({params}: {params: {boardId: string}}) {
const {getState} = useUserStore;
const [modifyComment, setModifyComment] = useState('');
const [currentModifyCommentId, setCurrentModifyCommentId] = useState<number | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const router = useRouter();

const fetchComment = useCallback(async () => {
Expand Down Expand Up @@ -103,9 +106,18 @@ export default function BoardDetail({params}: {params: {boardId: string}}) {

const handleDeleteBoard = async () => {
const response = await axios.delete(`/api/boards/${boardId}`);
closeModal();
await router.push('/boards');
}

const openModal = () => {
setIsModalOpen(true);
};

const closeModal = () => {
setIsModalOpen(false);
};

return (
<>
<Header></Header>
Expand Down Expand Up @@ -143,7 +155,7 @@ export default function BoardDetail({params}: {params: {boardId: string}}) {
</Link>
)}
{getState().user?.userName === author && (
<Button onClick={handleDeleteBoard} className="text-red-500 border-red-500" variant="outline">
<Button onClick={openModal} className="text-red-500 border-red-500" variant="outline">
<DeleteIcon className="h-5 w-5"/>
</Button>
)}
Expand Down Expand Up @@ -243,6 +255,28 @@ export default function BoardDetail({params}: {params: {boardId: string}}) {
</div>
</div>
<div className="fixed bottom-6 right-6"/>
{/* 삭제 확인 모달 */}
<Modal
isOpen={isModalOpen}
onRequestClose={closeModal}
contentLabel="레시피 삭제 확인"
className="fixed inset-0 flex items-center justify-center z-50 outline-none"
overlayClassName="fixed inset-0 bg-black bg-opacity-70 z-40"
>
{/* 모달 내부 스타일을 JSX 내에서 설정 */}
<div style={{
backgroundColor: "#333", /* 검은색 배경색 */
color: "#fff", /* 텍스트 색상 */
padding: "20px", /* 내부 간격 설정 */
borderRadius: "8px" /* 모서리 둥글게 설정 */
}}>
<h2 className="text-lg font-semibold mb-4">정말 삭제하시겠습니까?</h2>
<div className="flex justify-end mt-4">
<Button variant="outline" onClick={closeModal}>취소</Button>
<Button variant="outline" className="ml-2 text-red-500 border-red-500" onClick={handleDeleteBoard}>네</Button>
</div>
</div>
</Modal>
</main>
</>
)
Expand Down
227 changes: 106 additions & 121 deletions frontend/src/app/boards/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,10 @@
/**
* This code was generated by v0 by Vercel.
* @see https://v0.dev/t/xxZQctyMK7c
* Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
*/

/** Add fonts into your Next.js project:
import { Libre_Franklin } from 'next/font/google'
libre_franklin({
subsets: ['latin'],
display: 'swap',
})
To read more about using these font, please visit the Next.js documentation:
- App Directory: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
- Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
**/
'use client'
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CardTitle, CardDescription, CardHeader, CardFooter, Card } from "@/components/ui/card"
import {Header} from "@/components/ui/header";
import React, {useEffect, useState} from "react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { CardTitle, CardDescription, CardHeader, CardFooter, Card } from "@/components/ui/card";
import { Header } from "@/components/ui/header";
import { useEffect, useState } from "react";
import axios from "axios";
import useUserStore from "@/store/useUserStore";
import useBoardStore from '@/store/useBoardStore';
Expand All @@ -36,59 +18,59 @@ type Board = {
};

export default function Board() {
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const [currentPage, setCurrentPage] = useState(1); // 페이지를 1부터 시작
const [totalPages, setTotalPages] = useState(1);
const [boards, setBoards] = useState<Board[]>([]);
const {getState} = useUserStore;
const { getState } = useUserStore;
const ownBoard = useBoardStore((state) => state.ownBoard);
const [searchKeyword, setSearchKeyword] = useState<string>('');

const getBoards = async (page = 0)=>{
const getBoards = async (page = 1) => { // 기본값을 1로 설정
try {
let response;
if(searchKeyword === ''){
response = await axios.get('/api/boards', {
if (searchKeyword === '') {
response = await axios.get('/api/boards', {
params: {
page: page,
page: page - 1, // 요청 시 페이지를 0부터 시작하도록 변환
}
});
}else{
response = await axios.get('/api/boards', {
} else {
response = await axios.get('/api/boards', {
params: {
page: page,
page: page - 1,
searchKeyword: searchKeyword
}
});
}

const boards: Board[] = await response.data.boardLists.map((b: any)=>({
const boards: Board[] = await response.data.boardLists.map((b: any) => ({
id: b.id,
title: b.title,
commentNum: b.commentNum,
createdTime: b.createdTime,
username: b.username,
}));
setTotalPages((response?.data.totalPages ===0 ?0 : response?.data.totalPages-1));
setTotalPages((response?.data.totalPages === 0 ? 1 : response?.data.totalPages)); // 페이지를 1부터 시작하도록 설정
setBoards(boards);
setSearchKeyword(searchKeyword);
} catch (error){
console.log(error)
} catch (error) {
console.log(error);
}
};

const getOwnBoards = async (page = 0) => {
const getOwnBoards = async (page = 1) => { // 기본값을 1로 설정
try {
let response;
if (searchKeyword === '') {
response = await axios.get('/api/boards/current-user', {
params: {
page: page,
page: page - 1, // 요청 시 페이지를 0부터 시작하도록 변환
}
});
} else {
response = await axios.get('/api/boards/current-user', {
params: {
page: page,
page: page - 1,
searchKeyword: searchKeyword
}
});
Expand All @@ -101,11 +83,11 @@ export default function Board() {
createdTime: b.createdTime,
username: b.username,
}));
setTotalPages((response?.data.totalPages === 0 ? 0 : response?.data.totalPages - 1));
setTotalPages((response?.data.totalPages === 0 ? 1 : response?.data.totalPages)); // 페이지를 1부터 시작하도록 설정
setBoards(boards);
setSearchKeyword(searchKeyword);
} catch (error) {
console.log(error)
console.log(error);
}
};

Expand All @@ -124,7 +106,7 @@ export default function Board() {
getBoards(currentPage - 1);
}
setCurrentPage(currentPage - 1);
}
};

const handleNextPage = () => {
if (ownBoard === 1) {
Expand All @@ -133,94 +115,97 @@ export default function Board() {
getBoards(currentPage + 1);
}
setCurrentPage(currentPage + 1);
}
};

const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchKeyword(e.target.value);
};

return (
<>
<Header></Header>
<main className="py-8">
<form onSubmit={(event)=>{
event.preventDefault()
if (ownBoard === 1) {
getOwnBoards();
} else {
getBoards();
}
}} className="mb-6 flex items-center justify-center">
<input
type="text"
value={searchKeyword}
onChange={handleSearchChange}
placeholder="검색어를 입력하세요"
className="border border-gray-300 rounded px-4 py-2 mr-2 flex-grow"
style={{ maxWidth: '300px', color: 'black' }}
/>
<Button type="submit" className="flex-shrink-0">
검색
</Button>
</form>
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 gap-6">
{boards.map((board, index)=>(
<Card className="w-full" key={index}>
<CardHeader>
<CardTitle>{board.title + ' (' + board.commentNum + ')'}</CardTitle>
<CardDescription>작성일: {board.createdTime}</CardDescription>
<CardDescription>작성자: {board.username}</CardDescription>
</CardHeader>
<CardFooter>
<Link href={`boards/${board.id}`}><Button variant="outline">자세히 보기</Button></Link>
</CardFooter>
</Card>
))}
</div>
<>
<Header />
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<h1 className="text-6xl font-bold text-red-400 opacity-20">게시판</h1>
</div>

<div className="flex justify-center mt-8">
<Button onClick={handlePrevPage} disabled={currentPage === 0}>
이전
</Button>
<div className="mx-4">
{currentPage} / {totalPages}
<main className="py-8">
<form onSubmit={(event) => {
event.preventDefault();
if (ownBoard === 1) {
getOwnBoards();
} else {
getBoards();
}
}} className="mb-6 flex items-center justify-center">
<input
type="text"
value={searchKeyword}
onChange={handleSearchChange}
placeholder="검색어를 입력하세요"
className="border border-gray-300 rounded px-4 py-2 mr-2 flex-grow"
style={{ maxWidth: '300px', color: 'black' }}
/>
<Button type="submit" className="flex-shrink-0">
검색
</Button>
</form>
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 gap-6">
{boards.map((board, index) => (
<Card className="w-full" key={index}>
<CardHeader>
<CardTitle>{board.title + ' (' + board.commentNum + ')'}</CardTitle>
<CardDescription>작성일: {board.createdTime}</CardDescription>
<CardDescription>작성자: {board.username}</CardDescription>
</CardHeader>
<CardFooter>
<Link href={`boards/${board.id}`}><Button variant="outline">자세히 보기</Button></Link>
</CardFooter>
</Card>
))}
</div>
</div>
<Button onClick={handleNextPage} disabled={currentPage === totalPages}>
다음
</Button>
</div>

<div className="fixed bottom-6 right-6">
<Link href={'/boards/writing/0'}>
<Button size="lg">
<PlusIcon className="h-6 w-6" />
<span className="sr-only">Add new</span>
<div className="flex justify-center mt-8">
<Button onClick={handlePrevPage} disabled={currentPage === 1}> {/* 페이지가 1부터 시작 */}
이전
</Button>
</Link>
</div>
</main>
</>
)
<div className="mx-4">
{currentPage} / {totalPages}
</div>
<Button onClick={handleNextPage} disabled={currentPage === totalPages}>
다음
</Button>
</div>

<div className="fixed bottom-6 right-6">
<Link href={'/boards/writing/0'}>
<Button size="lg">
<PlusIcon className="h-6 w-6" />
<span className="sr-only">Add new</span>
</Button>
</Link>
</div>
</main>
</>
);
}

function PlusIcon(props: any) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
)
}
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
);
}
Loading

0 comments on commit f6b66b4

Please sign in to comment.