Merge pull request #41 from Clubber2024/feat/#40-Search_UI

Feat: Search UI(#40)
Clubber2024 · Jun 3, 2024 · 7954e2a · 7954e2a
2 parents c084555 + 991b313
commit 7954e2a
Show file tree

Hide file tree

Showing 19 changed files with 428 additions and 95 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,6 +13,7 @@ import KakaoRedirection from './menu/login/component/kakaoRedirection';
 import BranchSmall from './menu/small_club/branch/branch_small';
 import BranchHashTag from './components/hashtag/component/branchHashtag';
 import ReviewWrite from './menu/small_club/detail_page/review_write';
+import Search from './menu/search/search';
 
 function App() {
     const isPc = useMediaQuery({
@@ -22,6 +23,9 @@ function App() {
         query: '(max-width:769px)',
     });
 
+    //로그인 처리
+    //const { isLogIn, setIsLogIn } = useState(false);
+
     return (
         <>
             {isPc && (
@@ -39,6 +43,7 @@ function App() {
                         <Route path="/v1/auths/oauth/kakao" element={<KakaoRedirection />} />
                         <Route path="/menu/small_club/branch/branch_small" element={<BranchSmall />} />
                         <Route path="/components/hashtag/component/branchHashtag" element={<BranchHashTag />} />
+                        <Route path="/menu/search" element={<Search />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -58,6 +63,7 @@ function App() {
                         <Route path="/v1/auths/oauth/kakao" element={<KakaoRedirection />} />
                         <Route path="/menu/small_club/branch/branch_small" element={<BranchSmall />} />
                         <Route path="/components/hashtag/component/branchHashtag" element={<BranchHashTag />} />
+                        <Route path="/menu/search" element={<Search />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>

diff --git a/src/components/hashtag/HashTag.jsx b/src/components/hashtag/HashTag.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import './hashtag.css';
-import { LinkItem } from '../../menu/central_club/central_club';
 
 const hashtag = [
     { band: '밴드' },

diff --git a/src/components/hashtag/component/branchHashtag.jsx b/src/components/hashtag/component/branchHashtag.jsx
@@ -15,7 +15,7 @@ function BranchHashTag() {
     const getHashTagClubs = async () => {
         try {
             setLoading(true);
-            const response = await axios.get(`http://15.164.211.56:8080/v1/clubs?hashtag=${hashtag}`);
+            const response = await axios.get(`http://13.125.141.171:8080/v1/clubs?hashtag=${hashtag}`);
             setClubs(response.data.data.clubs);
             setError(null);
         } catch (error) {

diff --git a/src/components/hashtag/hashtag.css b/src/components/hashtag/hashtag.css
@@ -4,6 +4,7 @@
     /* justify-content: center;
 	align-items: center; */
     padding: 17px;
+    cursor: pointer;
 }
 
 .tag_text {

diff --git a/src/layout/Header.jsx b/src/layout/Header.jsx
@@ -1,18 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import TagScroll from '../components/TagScroll';
 import './header.css';
-import { LinkItem } from '../menu/central_club/central_club';
 
 export default function Header() {
     // 모든 페이지에서 공통적으로 나타날 헤더
     const location = useLocation();
+    const navigate = useNavigate();
     const [menubarActive, setMenuBarActive] = useState('');
+    const [searchTerm, setSearchTerm] = useState('');
+
     //로그인 상태 관리
     const [isLogin, setIsLogin] = useState(true);
     //로그인박스 표시 상태 관리
     const [showLoginBox, setShowLoginBox] = useState(false);
 
+    const login = localStorage.getItem('accessToken');
+
     useEffect(() => {
         const path = location.pathname;
         if (path.startsWith('/menu/central_club')) {
@@ -24,71 +28,92 @@ export default function Header() {
         }
     }, [location]);
 
+    /*
+		//로그인 관련
+    useEffect(() => {
+        if (login != null) {
+            setIsLogin(true);
+            setShowLoginBox();
+        }
+    });
+		*/
+
     const handleTabClick = (menu) => {
         return setMenuBarActive(menu);
     };
+    //동아리 검색 기능 관련
+    const handleInputChange = (event) => {
+        const query = event.target.value;
+        setSearchTerm(query);
+    };
+
+    const handleSearch = () => {
+        navigate(`/menu/search?clubName=${searchTerm}`, { state: { clubName: searchTerm } });
+    };
+
+    const enterKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleSearch();
+        }
+    };
+
+    const onClickMain = () => {
+        setSearchTerm('');
+    };
+
+    /*
 
     //로그인박스 구현 부분
-    /* const handleLogin = () => {
+    const handleLogin = () => {
         setIsLogin(true);
     };
     const handleLogout = () => {
         setIsLogin(false);
         setShowLoginBox(false);
     };
-        */
-    const handleClick = () => {
-        if (isLogin) {
-            setShowLoginBox((prev) => !prev);
-        } //else{로그아웃 상태일 때}
-    };
+		*/
 
     return (
         <>
             <div className="header_top">
                 <Link to="/">
-                    <img src="/clubber_logo.png" alt="clubber logo" className="mainLogo" />
+                    <img src="/clubber_logo.png" alt="clubber logo" className="mainLogo" onClick={onClickMain} />
                 </Link>
                 <div className="search_box">
                     <img className="search_icon" src="/main/search.png" alt="search_icon" />
                     <input
                         className="input_header"
                         type="search"
                         placeholder="찾고 싶은 동아리를 검색해보세요!"
-                    // value={value}
-                    // onChange={onChange}
+                        value={searchTerm}
+                        onChange={handleInputChange}
+                        onKeyDown={enterKeyDown}
                     />
                 </div>
-                <LinkItem to="/menu/login">
-                    <div className="user_container">
-                        <img
-                            src="/buttons/user_login_icon.png"
-                            alt="user icon"
-                            width={39}
-                            height={39}
-                            onClick={handleClick}
-                        />
-                        <p className="login_text">로그인</p>
 
-                        {isLogin && showLoginBox && (
-                            <div className="rectangle">
-                                <div>
-                                    <img className="img" src="/buttons/user_login_icon.png" alt="user icon" />
+                <div
+                    className="user_container" //{login === null ? <Login /> : ''}>
+                >
+                    <img src="/buttons/user_login_icon.png" alt="user icon" width={39} height={39} />
+                    <p className="login_text">로그인</p>
+                    {isLogin && showLoginBox && (
+                        <div className="rectangle">
+                            <div>
+                                <img className="img" src="/buttons/user_login_icon.png" alt="user icon" />
 
-                                    <p className="emailText">clubber@naver.com</p>
-                                    <button className="logoutBtn">로그아웃</button>
-                                </div>
-                                <div className="line">
-                                    <img className="icon_star" src="/main/starYellow.png" alt="star" />
-                                    <p className="bookmarkBtn">나의 즐겨찾기</p>
-                                </div>
-                                <div className="verticalLine"></div>
-                                <img className="icon_message" src="/main/message-text.png" alt="message" />
-                                <p className="reviewBtn">내가 쓴 리뷰</p>
+                                <p className="emailText">clubber@naver.com</p>
+                                <button className="logoutBtn">로그아웃</button>
                             </div>
-                        )}
-                    </div>
-                </LinkItem>
+                            <div className="line">
+                                <img className="icon_star" src="/main/starYellow.png" alt="star" />
+                                <p className="bookmarkBtn">나의 즐겨찾기</p>
+                            </div>
+                            <div className="verticalLine"></div>
+                            <img className="icon_message" src="/main/message-text.png" alt="message" />
+                            <p className="reviewBtn">내가 쓴 리뷰</p>
+                        </div>
+                    )}
+                </div>
             </div>
             <TagScroll />
             <div className="menu_container">
@@ -116,9 +141,7 @@ export default function Header() {
                     <Link to="/menu/small_club/small_club" style={{ textDecoration: 'none' }}>
                         <p
                             className={
-                                menubarActive === 'tab_text_small_active'
-                                    ? 'tab_text_small_active'
-                                    : 'tab_text_small'
+                                menubarActive === 'tab_text_small_active' ? 'tab_text_small_active' : 'tab_text_small'
                             }
                             onClick={() => handleTabClick('tab_text_small_active')}
                         >
@@ -129,4 +152,4 @@ export default function Header() {
             </div>
         </>
     );
-}
+}
diff --git a/src/main/_component/MainNotice.jsx b/src/main/_component/MainNotice.jsx
@@ -7,7 +7,7 @@ export default function MainNotice() {
 
     const getNoticeData = async () => {
         try {
-            const res = await axios.get(`http://15.164.211.56/v1/notices`);
+            const res = await axios.get(`http://13.125.141.171:8080/v1/notices`);
             if (res.data.success) {
                 setNoticeData(res.data.data);
                 console.log(res.data.data);

diff --git a/src/main/_component/MainRanking.jsx b/src/main/_component/MainRanking.jsx
@@ -7,7 +7,7 @@ export default function MainRanking() {
 
     const getRankingData = async () => {
         try {
-            const res = await axios.get(`http://15.164.211.56:8080/v1/clubs/popular`);
+            const res = await axios.get(`http://13.125.141.171:8080/v1/clubs/popular`);
             if (res.data.success) {
                 setRankingData(res.data.data);
                 console.log(res.data.data);

diff --git a/src/menu/central_club/branch/branchCentral.jsx b/src/menu/central_club/branch/branchCentral.jsx
@@ -14,7 +14,7 @@ function BranchCentral() {
 
     const getCentralClubs = async () => {
         try {
-            const response = await axios.get(`http://15.164.211.56:8080/v1/clubs?division=${division}`);
+            const response = await axios.get(`http://13.125.141.171:8080/v1/clubs?division=${division}`);
             setClubs(response.data.data.clubs);
         } catch (error) {
             setError(error);
@@ -48,6 +48,7 @@ function BranchCentral() {
                 </div>
             );
         }
+        return rows;
     };
 
     return (

diff --git a/src/menu/central_club/branch/component/centralClub.module.css b/src/menu/central_club/branch/component/centralClub.module.css
@@ -13,6 +13,8 @@
         width: 100%;
         border-radius: 10px 10px 0px 0px;
         background: #ffffff;
+        aspect-ratio: 1/1;
+        object-fit: cover;
     }
 
     .title {
@@ -42,7 +44,7 @@
 
 @media screen and (max-width: 769px) {
     .rectangle {
-        width: 25%;
+        width: 20%;
         height: 21.6%;
         border-radius: 10px;
         background: #ffffff;
@@ -54,6 +56,8 @@
         width: 100%;
         border-radius: 10px 10px 0px 0px;
         background: #ffffff;
+        aspect-ratio: 1/1;
+        object-fit: cover;
     }
 
     .title {

diff --git a/src/menu/central_club/central_club.jsx b/src/menu/central_club/central_club.jsx
@@ -41,11 +41,9 @@ function CentralClub() {
                 <div className={styles.rectangle}>
                     <div className={styles.wrap}>
                         <img src="/central/megaphone.png" alt="megaphone" className={styles.rectangle_img} />
-                        <LinkItem to="/menu/central_club/branch">
-                            <h3 className={styles.title} onClick={() => onClicked('연행예술분과')}>
-                                연행예술분과
-                            </h3>
-                        </LinkItem>
+                        <h3 className={styles.title} onClick={() => onClicked('연행예술분과')}>
+                            연행예술분과
+                        </h3>
                     </div>
                 </div>
             </div>
@@ -54,41 +52,33 @@ function CentralClub() {
                 <div className={styles.rectangle}>
                     <div className={styles.wrap}>
                         <img src="/central/athletic.png" alt="athletic" className={styles.rectangle_img} />
-                        <LinkItem to="/menu/central_club/branch">
-                            <h3 className={styles.title} onClick={() => onClicked('종교분과')}>
-                                종교분과
-                            </h3>
-                        </LinkItem>
+                        <h3 className={styles.title} onClick={() => onClicked('종교분과')}>
+                            종교분과
+                        </h3>
                     </div>
                 </div>
                 <div className={styles.rectangle}>
                     <div className={styles.wrap}>
                         <img src="/central/art.png" alt="art" className={styles.rectangle_img} />
-                        <LinkItem to="/menu/central_club/branch">
-                            <h3 className={styles.title} onClick={() => onClicked('창작전시분과')}>
-                                창작전시분과
-                            </h3>
-                        </LinkItem>
+                        <h3 className={styles.title} onClick={() => onClicked('창작전시분과')}>
+                            창작전시분과
+                        </h3>
                     </div>
                 </div>
                 <div className={styles.rectangle}>
                     <div className={styles.wrap}>
                         <img src="/central/athletic.png" alt="athletic" className={styles.rectangle_img} />
-                        <LinkItem to="/menu/central_club/branch">
-                            <h3 className={styles.title} onClick={() => onClicked('체육분과')}>
-                                체육분과
-                            </h3>
-                        </LinkItem>
+                        <h3 className={styles.title} onClick={() => onClicked('체육분과')}>
+                            체육분과
+                        </h3>
                     </div>
                 </div>
                 <div className={styles.rectangle}>
                     <div className={styles.wrap}>
                         <img src="/central/academic.png" alt="academic" className={styles.rectangle_img} />
-                        <LinkItem to="/menu/central_club/branch">
-                            <h3 className={styles.title} onClick={() => onClicked('학술분과')}>
-                                학술분과
-                            </h3>
-                        </LinkItem>
+                        <h3 className={styles.title} onClick={() => onClicked('학술분과')}>
+                            학술분과
+                        </h3>
                     </div>
                 </div>
             </div>

diff --git a/src/menu/login/component/kakaoRedirection.jsx b/src/menu/login/component/kakaoRedirection.jsx
@@ -1,6 +1,6 @@
-import { useLocation, useNavigate } from "react-router-dom";
-import axios from "axios";
-import { useEffect } from "react";
+import { useLocation, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { useEffect } from 'react';
 
 export default function KakaoRedirection() {
     // const [userId, setUserId] = useState(0);
@@ -40,10 +40,11 @@ export default function KakaoRedirection() {
         if (code) {
             console.log('Authorization Code : ', code);
             axios
-                .get(`http://15.164.211.56/v1/auths/oauth/kakao?code=${code}`)
+                .get(`http://13.125.141.171/v1/auths/oauth/kakao?code=${code}`)
                 .then((res) => {
                     const accessToken = res.data.accessToken;
                     localStorage.setItem('accessToken', accessToken);
+
                     // 메인 페이지 이동
                     navigate(`/`);
                 })
@@ -53,7 +54,5 @@ export default function KakaoRedirection() {
         }
     }, [location.search, navigate]);
 
-    return (
-        <>loading...</>
-    );
-}
+    return <>loading...</>;
+}