[Feat] 피드페이지 기능 구현 완료_디자인 작업 중 (#10)

kdt-8-4 · Dec 5, 2023 · 1d2e448 · 1d2e448
1 parent 76e8725
commit 1d2e448
Show file tree

Hide file tree

Showing 12 changed files with 198 additions and 14 deletions.
diff --git 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(){
             <hr />
             <WeatherBar />
             <FeedCategory />
+            <FeedSort />
             <FeedContenets />
             <Menubar />
 

diff --git 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() {
         </div>
       ) : (
         <>
-          <div>로그인을 해주세요.</div>
-          <Link href={"/login"}>로그인 페이지로 이동</Link>
-          <Link href={"/"}>홈 페이지로 이동</Link>
+                    <br />
+          <br />
+          <br />
+          <div id="login_msg"> "로그인을 해주세요." </div>
+          <br />
+          <br />
+          <Link className="goto" href={"/login"}>로그인 페이지로 이동</Link>
+          <br />
+          <Link className="goto" href={"/"}>홈 페이지로 이동</Link>
         </>
       )}
 

diff --git 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 {
         </div>
       ) : (
         <>
-          <div>로그인 후에 업로드할 수 있습니다.</div>
-          <Link href={"/login"}>로그인 페이지로 이동</Link>
-          <Link href={"/"}>홈 페이지로 이동</Link>
+          <br />
+          <br />
+          <br />
+          <div id="login_msg"> "로그인 후에 업로드할 수 있습니다." </div>
+          <br />
+          <br />
+          <Link className="goto" href={"/login"}>로그인 페이지로 이동</Link>
+          <br />
+          <Link className="goto" href={"/"}>홈 페이지로 이동</Link>
         </>
       )}
     </>

diff --git a/src/component/FeedCateDetail.tsx b/src/component/FeedCateDetail.tsx
@@ -183,7 +183,8 @@ export default function FeedcateDetail( { categorytitle, setControl } : PROPS) {
 
     return(<>
         <div id="tab_detail" style={{"display":"flex"}}>
-            <div>{/* 카테고리 목록 */}
+            {/* 카테고리 목록 */}
+            <div>
                 {view_arr && view_arr.map((myarr, index)=>{
                         return(<>
                             <button key={index} className="cate_btn_dj" onClick={()=>cate_btn(myarr)}>{myarr}</button>
@@ -202,8 +203,8 @@ export default function FeedcateDetail( { categorytitle, setControl } : PROPS) {
                 */}
                 {chooseCa && chooseCa.map((myarr, index)=>{
                     return(<>
-                        <div style={{"display":"flex"}}>
-                            <p key={index} className="chooseCa">{myarr} </p>
+                        <div key={index} style={{"display":"flex"}}>
+                            <p className="chooseCa">{myarr} </p>
                             <button onClick={() => del_choose(myarr)}> x</button> 
                         </div>
                     </>)

diff --git a/src/component/FeedCategory.tsx b/src/component/FeedCategory.tsx
@@ -84,11 +84,13 @@ export default function FeedCategory(){
             <ul id="category_dj">
                 {
                     usetab.map((val) => {
-                        return<li key={val.id} className="tab_menu_dj" onClick={() => tab_title(val.val)}> | {val.title} |</li>
+                        return<li key={val.id} className="tab_menu_dj" onClick={() => tab_title(val.val)}>
+                              {val.title} <span>▼</span>
+                            </li>
                     })
                 }
             </ul>
-            <button onClick={tem_btn}>온도 조절</button>
+            <button onClick={tem_btn} id="temcontrol_btn">온도 조절</button>
         </div>
         {tab_control && <FeedcateDetail categorytitle = {send_val} tab_control = {tab_control} setControl = {setControl}/>}
         {temtab_control && <FeedTemControl  setTemtab = {setTemtab}/>}       

diff --git 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
@@ -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(<>
         <div className="search_dj">
@@ -85,7 +90,7 @@ export default function FeedSearch(){
                     />
                 </button>
             </div>
-            <button id="cancle_btn_dj">취소</button>
+            <button id="cancle_btn_dj" onClick={search_cancle}>취소</button>
         </div>
     </>)
 }
diff --git a/src/component/FeedSort.tsx 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<string>('');
+
+    const allcontents = () => {
+        setFeedd(fullfeeddata);
+    }
+
+    const handleSort = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        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(
+    <>
+    <div className="sort_box">
+        <div>
+            <button id="allview_btn" onClick={allcontents}>전체 보기</button>
+            <select id="sortSelect_bar" onChange={handleSort}>
+                <option>최신순</option>
+                <option>좋아요순</option>
+                <option>오래된순</option>
+            </select>
+        </div>
+    </div>
+    </>
+    )
+}
diff --git a/src/recoilAtom/FeedFulldata.ts 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<FEEDATA[]>({
+  key: "fullcontents_key_dj", //전역적으로 유일한 값
+  default: [],
+});
diff --git a/src/style/FeedSort.scss 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;
+}
diff --git a/src/style/GotoLogin.scss 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;
+}
diff --git 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;
 }