From 1d2e448801c312706cf88fef431afb0ef6d6f4b8 Mon Sep 17 00:00:00 2001 From: nebulaBdj Date: Tue, 5 Dec 2023 11:25:34 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=ED=94=BC=EB=93=9C=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=5F=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A4=91=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/feed/page.tsx | 2 ++ src/app/mypage/page.tsx | 13 +++++-- src/app/upload/page.tsx | 13 +++++-- src/component/FeedCateDetail.tsx | 7 ++-- src/component/FeedCategory.tsx | 6 ++-- src/component/FeedContents.tsx | 6 +++- src/component/FeedSearch.tsx | 9 +++-- src/component/FeedSort.tsx | 61 ++++++++++++++++++++++++++++++++ src/recoilAtom/FeedFulldata.ts | 28 +++++++++++++++ src/style/FeedSort.scss | 20 +++++++++++ src/style/GotoLogin.scss | 17 +++++++++ src/style/feedCategory.scss | 30 ++++++++++++++++ 12 files changed, 198 insertions(+), 14 deletions(-) create mode 100644 src/component/FeedSort.tsx create mode 100644 src/recoilAtom/FeedFulldata.ts create mode 100644 src/style/FeedSort.scss create mode 100644 src/style/GotoLogin.scss diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx index abdfe71..9ee6f01 100644 --- a/src/app/feed/page.tsx +++ b/src/app/feed/page.tsx @@ -3,6 +3,7 @@ import FeedSearch from "@/component/FeedSearch"; import WeatherBar from "@/component/WeatherBar"; import FeedCategory from "@/component/FeedCategory"; +import FeedSort from "@/component/FeedSort"; import FeedContenets from "@/component/FeedContents"; import Menubar from "@/component/MenuBar"; import jwt from "jsonwebtoken"; @@ -45,6 +46,7 @@ export default function Feed(){
+ diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index c00c577..b07bdea 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -2,6 +2,7 @@ import React, { SetStateAction, useEffect, useState } from "react"; import "../../style/mypage.scss"; +import "@/style/GotoLogin.scss" import SettingsIcon from "@mui/icons-material/Settings"; import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined"; import Menubar from "@/component/MenuBar"; @@ -274,9 +275,15 @@ export default function Mypage() { ) : ( <> -
로그인을 해주세요.
- 로그인 페이지로 이동 - 홈 페이지로 이동 +
+
+
+
"로그인을 해주세요."
+
+
+ 로그인 페이지로 이동 +
+ 홈 페이지로 이동 )} diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx index 97644c7..9c3f5fd 100644 --- a/src/app/upload/page.tsx +++ b/src/app/upload/page.tsx @@ -3,6 +3,7 @@ import Menubar from "@/component/MenuBar"; import WeatherBar from "@/component/WeatherBar"; import CloseIcon from "@mui/icons-material/Close"; import "../../style/upload.scss"; +import "@/style/GotoLogin.scss" import ImageUpload from "@/component/ImageUpload"; import TextArea from "@/component/TextArea"; import SelectCategory from "@/component/SelectCategory"; @@ -204,9 +205,15 @@ export default function Upload(): JSX.Element { ) : ( <> -
로그인 후에 업로드할 수 있습니다.
- 로그인 페이지로 이동 - 홈 페이지로 이동 +
+
+
+
"로그인 후에 업로드할 수 있습니다."
+
+
+ 로그인 페이지로 이동 +
+ 홈 페이지로 이동 )} diff --git a/src/component/FeedCateDetail.tsx b/src/component/FeedCateDetail.tsx index f331b0a..a625117 100644 --- a/src/component/FeedCateDetail.tsx +++ b/src/component/FeedCateDetail.tsx @@ -183,7 +183,8 @@ export default function FeedcateDetail( { categorytitle, setControl } : PROPS) { return(<>
-
{/* 카테고리 목록 */} + {/* 카테고리 목록 */} +
{view_arr && view_arr.map((myarr, index)=>{ return(<> @@ -202,8 +203,8 @@ export default function FeedcateDetail( { categorytitle, setControl } : PROPS) { */} {chooseCa && chooseCa.map((myarr, index)=>{ return(<> -
-

{myarr}

+
+

{myarr}

) diff --git a/src/component/FeedCategory.tsx b/src/component/FeedCategory.tsx index a88792d..3e8abcf 100644 --- a/src/component/FeedCategory.tsx +++ b/src/component/FeedCategory.tsx @@ -84,11 +84,13 @@ export default function FeedCategory(){
    { usetab.map((val) => { - return
  • tab_title(val.val)}> | {val.title} |
    • + return
  • tab_title(val.val)}> + {val.title} ▼ +
    • }) }
- +
{tab_control && } {temtab_control && } diff --git a/src/component/FeedContents.tsx b/src/component/FeedContents.tsx index da77233..9551435 100644 --- a/src/component/FeedContents.tsx +++ b/src/component/FeedContents.tsx @@ -7,6 +7,7 @@ import { TemMaxControl } from "@/recoilAtom/TemMax"; import { TemMinControl } from "@/recoilAtom/TemMin"; import { FeedDecodeNickname } from "@/recoilAtom/FeedNickname"; import { FeedLoginToken } from "@/recoilAtom/FeedLoginToken"; +import { FeedFullcontents } from "@/recoilAtom/FeedFulldata"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/navigation"; @@ -40,6 +41,7 @@ export default function FeedContents() { const [feedata, setFeedd] = useRecoilState(FeedContent); const [decodeNick, setNick] = useRecoilState(FeedDecodeNickname); const [loginToken_feed, setFeedToken] = useRecoilState(FeedLoginToken); + const [fullfeeddata, setFulldata] = useRecoilState(FeedFullcontents); const router = useRouter(); @@ -52,10 +54,12 @@ export default function FeedContents() { }); console.log("받아온 데이터", req.data); + setFulldata(req.data); //현재 로그인한 닉네임과 각 게시물의 likelist에 같은 닉네임이 있다면 + const sortedData: FEEDATA[] = [...req.data].sort((a :FEEDATA, b: FEEDATA) => b.boardId - a.boardId); - const copy: FEEDATA[] = req.data; + const copy: FEEDATA[] = sortedData; console.log("카피", copy); diff --git a/src/component/FeedSearch.tsx b/src/component/FeedSearch.tsx index 7f42767..9031635 100644 --- a/src/component/FeedSearch.tsx +++ b/src/component/FeedSearch.tsx @@ -1,7 +1,7 @@ import { ChangeEventHandler, useState } from "react"; import axios from "axios"; import Image from "next/image"; -import "../style/feedSearch.scss"; +import "@/style/feedSearch.scss"; import { useRecoilState } from "recoil"; import { FeedSearchdata } from "@/recoilAtom/FseahData"; @@ -63,6 +63,11 @@ export default function FeedSearch(){ setFeedd(req.data); } + const search_cancle = () => { + setHval(""); + setCateSearch([]); + } + return(<>
@@ -85,7 +90,7 @@ export default function FeedSearch(){ />
- +
) } \ No newline at end of file diff --git a/src/component/FeedSort.tsx b/src/component/FeedSort.tsx new file mode 100644 index 0000000..5f5aa67 --- /dev/null +++ b/src/component/FeedSort.tsx @@ -0,0 +1,61 @@ +import { useRecoilState, useRecoilValue } from "recoil"; +import { FeedContent } from "@/recoilAtom/FeedContents"; +import { FeedFullcontents } from "@/recoilAtom/FeedFulldata"; +import { useEffect, useState } from "react"; +import "@/style/FeedSort.scss"; + +export default function FeedSort(){ + + const [feedata, setFeedd] = useRecoilState(FeedContent); + const fullfeeddata = useRecoilValue(FeedFullcontents); + console.log("정렬 컴포넌트로 넘어간 피드 데이터", feedata); + const [sortType, setSortType] = useState(''); + + const allcontents = () => { + setFeedd(fullfeeddata); + } + + const handleSort = (event: React.ChangeEvent) => { + setSortType(event.target.value); + } + + const sortByLikes = () => { + const sorted = [...feedata].sort((a, b) => b.likeCount - a.likeCount); + setFeedd(sorted); + }; + + const sortByNewest = () => { + const sorted = [...feedata].sort((a, b) => b.boardId - a.boardId); + setFeedd(sorted); + }; + + const sortByOldest = () => { + const sorted = [...feedata].sort((a, b) => a.boardId - b.boardId); + setFeedd(sorted); + }; + + useEffect(() => { + if (sortType === '좋아요순') { + sortByLikes(); + } else if (sortType === '최신순') { + sortByNewest(); + } else if (sortType === '오래된순') { + sortByOldest(); + } + }, [sortType]); + + return( + <> +
+
+ + +
+
+ + ) +} diff --git a/src/recoilAtom/FeedFulldata.ts b/src/recoilAtom/FeedFulldata.ts new file mode 100644 index 0000000..1826c49 --- /dev/null +++ b/src/recoilAtom/FeedFulldata.ts @@ -0,0 +1,28 @@ +import { atom } from "recoil"; + +interface IMAGE { + boardId: number; + imageId: number; + imageUrl: string; +} + +interface LIKE { + likeId : number; + nickName: string; +} + +interface FEEDATA { + boardId: number; + images: IMAGE; + likeCount: number; + likelist: LIKE[]; + nickName: string; + temperature: number; + weather: string; + weatherIcon?: string; +} + +export const FeedFullcontents = atom({ + key: "fullcontents_key_dj", //전역적으로 유일한 값 + default: [], +}); diff --git a/src/style/FeedSort.scss b/src/style/FeedSort.scss new file mode 100644 index 0000000..797e92e --- /dev/null +++ b/src/style/FeedSort.scss @@ -0,0 +1,20 @@ +.sort_box{ + display: flex; + flex-direction: row-reverse; + margin-top: 10px; +} + +#allview_btn{ + border-right: 2px dotted #A0A0A0; + border-left: 2px dotted #A0A0A0; + // border-radius: 15px; + + height: 25px; + width: 83px; + + margin: 0 5px; +} + +#sortSelect_bar{ + background-color:transparent; +} \ No newline at end of file diff --git a/src/style/GotoLogin.scss b/src/style/GotoLogin.scss new file mode 100644 index 0000000..d370e1f --- /dev/null +++ b/src/style/GotoLogin.scss @@ -0,0 +1,17 @@ +.goto{ + background-color: #a8bbff; + color: white; + + border-radius: 4px; + + height: 30px; + width: 20%; + + text-align: center; + + font-weight: bold; +} + +#login_msg{ + font-weight: bold; +} \ No newline at end of file diff --git a/src/style/feedCategory.scss b/src/style/feedCategory.scss index 8d25ed3..00ad58e 100644 --- a/src/style/feedCategory.scss +++ b/src/style/feedCategory.scss @@ -1,8 +1,38 @@ #category_dj{ display: flex; + margin-top: 5px; } #category_dj_box{ display: flex; justify-content: space-between; + margin: 5px 0; +} + +.tab_menu_dj{ + border: 2px solid #A0A0A0; + border-radius: 15px; + + height: 30px; + width: 83px; + + margin: 0 5px; + text-align: center; +} + +.tab_menu_dj span{ + color: #D1CDCD; +} + +#temcontrol_btn{ + // background-color: #E5EBFF; + color: #224863; + + border: 1px solid #5a88a9; + border-radius: 10px; + + height: 30px; + width: 80px; + + margin-top: 5px; }