From 991b3139197f1ad217e48d93758968d42370e3f0 Mon Sep 17 00:00:00 2001
From: Kangyeeun0 <kangyeeun55@gmail.com>
Date: Mon, 3 Jun 2024 15:41:23 +0900
Subject: [PATCH] Feat: Search UI(#40)

---
 src/App.jsx                                   |   6 +
 src/components/hashtag/HashTag.jsx            |   1 -
 .../hashtag/component/branchHashtag.jsx       |   2 +-
 src/components/hashtag/hashtag.css            |   1 +
 src/layout/Header.jsx                         | 109 +++++++++++-------
 src/main/_component/MainNotice.jsx            |   2 +-
 src/main/_component/MainRanking.jsx           |   2 +-
 .../central_club/branch/branchCentral.jsx     |   3 +-
 .../branch/component/centralClub.module.css   |   6 +-
 src/menu/central_club/central_club.jsx        |  40 +++----
 src/menu/login/component/kakaoRedirection.jsx |  15 ++-
 src/menu/search/component/searchClub.jsx      |  31 +++++
 .../search/component/searchClub.module.css    | 100 ++++++++++++++++
 src/menu/search/search.jsx                    | 101 ++++++++++++++++
 src/menu/search/search.module.css             |  55 +++++++++
 src/menu/small_club/branch/branch_small.jsx   |   4 +-
 .../small_club/branch/component/smallClub.jsx |   1 +
 .../branch/component/smallClub.module.css     |   5 +
 src/menu/small_club/detail_page/index.jsx     |  39 +++++--
 19 files changed, 428 insertions(+), 95 deletions(-)
 create mode 100644 src/menu/search/component/searchClub.jsx
 create mode 100644 src/menu/search/component/searchClub.module.css
 create mode 100644 src/menu/search/search.jsx
 create mode 100644 src/menu/search/search.module.css

diff --git a/src/App.jsx b/src/App.jsx
index fc74a03..949f87c 100644
--- 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
index b1e8a83..dc5deef 100644
--- 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
index 5074fb5..1e7ca4f 100644
--- 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
index 0aeba82..2f83b64 100644
--- 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
index 729a6b0..c5a2c9a 100644
--- 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,30 +28,56 @@ 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" />
@@ -55,40 +85,35 @@ export default function Header() {
                         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>
         </>
     );
-}
\ No newline at end of file
+}
diff --git a/src/main/_component/MainNotice.jsx b/src/main/_component/MainNotice.jsx
index 862e639..41ff33e 100644
--- 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
index a28032a..355441e 100644
--- 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
index 1eecc78..85f3ff4 100644
--- 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
index 9400f0e..d49f051 100644
--- 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
index 986d8f0..e9dba76 100644
--- 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
index bec71e0..57359c1 100644
--- 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...</>
-    );
-}
\ No newline at end of file
+    return <>loading...</>;
+}
diff --git a/src/menu/search/component/searchClub.jsx b/src/menu/search/component/searchClub.jsx
new file mode 100644
index 0000000..e9cab46
--- /dev/null
+++ b/src/menu/search/component/searchClub.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './searchClub.module.css';
+import { LinkItem } from '../../central_club/central_club';
+
+//clubid페이지로 이동할 수 있게 수정 완료
+function SearchClub({ clubId, clubName, introduction, imageUrl, division, department }) {
+    return (
+        <div className={styles.rectangle}>
+            <LinkItem to={`/menu/small_club/detail_page/${clubId}`}>
+                <img src={imageUrl} alt={clubName} className={styles.image} />
+                <div className={styles.wrap}>
+                    <h3 className={styles.title}>{clubName}</h3>
+                    <p className={styles.department}>{division != null ? division : department}</p>
+                </div>
+                <p className={styles.content}>{introduction}</p>
+            </LinkItem>
+        </div>
+    );
+}
+
+SearchClub.propTypes = {
+    clubId: PropTypes.number.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    clubName: PropTypes.string.isRequired,
+    introduction: PropTypes.string.isRequired,
+    division: PropTypes.string.isRequired,
+    department: PropTypes.string.isRequired,
+};
+
+export default SearchClub;
diff --git a/src/menu/search/component/searchClub.module.css b/src/menu/search/component/searchClub.module.css
new file mode 100644
index 0000000..ca807a7
--- /dev/null
+++ b/src/menu/search/component/searchClub.module.css
@@ -0,0 +1,100 @@
+@media screen and (min-width: 768px) {
+    .rectangle {
+        width: 20%;
+        height: 21.6%;
+        border-radius: 10px;
+        background: #ffffff;
+        border: 1px solid rgba(217, 217, 217, 1);
+        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+
+        margin: 10px;
+    }
+    .image {
+        width: 100%;
+        border-radius: 10px 10px 0px 0px;
+        background: #ffffff;
+        aspect-ratio: 1/1;
+        object-fit: cover;
+    }
+    .wrap {
+        display: flex;
+    }
+    .title {
+        font-family: Noto Sans KR;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 23.17px;
+        text-align: left;
+        padding: 0 0 0 3%;
+        margin: 0 0 5px 0;
+        float: left;
+    }
+    .content {
+        width: 100%;
+        font-family: Noto Sans KR;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20.27px;
+        text-align: left;
+        padding: 2%;
+        margin: 0 0 5px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-y: auto;
+    }
+    .department {
+        font-family: Noto Sans KR;
+        font-size: 10px;
+        font-weight: 300;
+        text-align: right;
+        margin-top: 6px;
+        margin-left: 4px;
+    }
+}
+
+@media screen and (max-width: 769px) {
+    .rectangle {
+        width: 20%;
+        height: 21.6%;
+        border-radius: 10px;
+        background: #ffffff;
+        border: 1px solid #d9d9d9;
+        box-shadow: 0px 0px 5px 0px #00000033;
+        margin: 10px;
+    }
+    .image {
+        width: 100%;
+        border-radius: 10px 10px 0px 0px;
+        background: #ffffff;
+        aspect-ratio: 1/1;
+        object-fit: cover;
+    }
+
+    .title {
+        font-family: Noto Sans KR;
+        font-size: 14px;
+        font-weight: 600;
+        text-align: left;
+        padding: 0 0 0 3%;
+    }
+    .content {
+        width: 100%;
+        font-family: Noto Sans KR;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 20.27px;
+        text-align: left;
+        padding: 2%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-y: auto;
+    }
+    .department {
+        font-family: Noto Sans KR;
+        font-size: 10px;
+        font-weight: 300;
+        text-align: right;
+    }
+}
diff --git a/src/menu/search/search.jsx b/src/menu/search/search.jsx
new file mode 100644
index 0000000..aa11fd1
--- /dev/null
+++ b/src/menu/search/search.jsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styles from './search.module.css';
+import axios from 'axios';
+import SearchClub from './component/searchClub';
+
+function Search() {
+    const [loading, setLoading] = useState(true);
+    const [clubs, setClubs] = useState([]);
+    const [department, setDepartment] = useState([]);
+    const [division, setDivision] = useState([]);
+    const [error, setError] = useState(null);
+    const location = useLocation();
+    const clubName = location.state.clubName;
+
+    const filterByDivision = (club) => club.division != null;
+    const filterByDepartment = (club) => club.department != null;
+
+    const getSearchClubs = async () => {
+        try {
+            const response = await axios.get(`
+				http://13.125.141.171:8080/v1/clubs?clubName=${clubName}`);
+            const data = response.data.data.clubs;
+            setClubs(data);
+            setDepartment(data.filter(filterByDepartment));
+            setDivision(data.filter(filterByDivision));
+            setError(null);
+        } catch (error) {
+            setError(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (clubName) {
+            getSearchClubs();
+        }
+    }, [clubName]);
+
+    if (loading) return <div>Loading...</div>;
+    if (error) return <div>해당하는 동아리가 없습니다</div>;
+
+    const renderData = (data) => {
+        const rows = [];
+        for (let i = 0; i < data.length; i += 4) {
+            const rowItems = data.slice(i, i + 4);
+            rows.push(
+                <div className={styles.container} key={i}>
+                    {rowItems.map((club) => (
+                        <SearchClub
+                            key={club.clubId}
+                            clubId={club.clubId}
+                            imageUrl={club.imageUrl}
+                            clubName={club.clubName}
+                            introduction={club.introduction}
+                            division={club.division}
+                            department={club.department}
+                        />
+                    ))}
+                </div>
+            );
+        }
+        return rows;
+    };
+
+    const renderDataDivision = () => {
+        const result = renderData(division);
+        console.log(`devision: ${result}`);
+        return result;
+    };
+    const renderDataDepartment = (data) => {
+        const result = renderData(department);
+        console.log(`department: ${result}`);
+        return result;
+    };
+
+    return (
+        <div>
+            {department.length > 0 && (
+                <div className={styles.wrap}>
+                    <div className={styles.header}>
+                        <h2 className={styles.header_title}>중앙동아리</h2>
+                    </div>
+                    {renderDataDepartment(clubs)}
+                </div>
+            )}
+
+            {division.length > 0 && (
+                <div className={styles.wrap}>
+                    <div className={styles.header}>
+                        <h2 className={styles.header_title}>단과대</h2>
+                    </div>
+                    {renderDataDivision(clubs)}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default Search;
diff --git a/src/menu/search/search.module.css b/src/menu/search/search.module.css
new file mode 100644
index 0000000..86612ef
--- /dev/null
+++ b/src/menu/search/search.module.css
@@ -0,0 +1,55 @@
+@media screen and (min-width: 768px) {
+    .header {
+        width: 100%;
+        height: 177px;
+        top: 275px;
+        gap: 0px;
+        opacity: 0px;
+        margin: 0px;
+        background: #7bc8e0;
+    }
+    .header_title {
+        font-family: Noto Sans KR;
+        font-size: 24px;
+        font-weight: 800;
+        line-height: 34.75px;
+        text-align: center;
+        position: relative;
+        top: 45%;
+    }
+    .container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .header {
+        width: 100%;
+        height: 120px;
+        top: 275px;
+        margin: 0px;
+        background: #7bc8e0;
+    }
+    .header_title {
+        font-family: Noto Sans KR;
+        font-size: 18px;
+        font-weight: 800;
+
+        text-align: center;
+        position: relative;
+        top: 45%;
+    }
+    .container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+}
diff --git a/src/menu/small_club/branch/branch_small.jsx b/src/menu/small_club/branch/branch_small.jsx
index e625616..e6554cf 100644
--- a/src/menu/small_club/branch/branch_small.jsx
+++ b/src/menu/small_club/branch/branch_small.jsx
@@ -14,7 +14,7 @@ function BranchSmall() {
 
     const getSmallClubs = async () => {
         try {
-            const response = await axios.get(`http://15.164.211.56:8080/v1/clubs?department=${department}`);
+            const response = await axios.get(`http://13.125.141.171:8080/v1/clubs?department=${department}`);
             setClubs(response.data.data.clubs);
         } catch (error) {
             setError(error);
@@ -39,8 +39,8 @@ function BranchSmall() {
                     {rowItems.map((club) => (
                         <SmallClub
                             key={club.clubId}
-                            imageUrl={club.imageUrl}
                             clubId={club.clubId}
+                            imageUrl={club.imageUrl}
                             clubName={club.clubName}
                             introduction={club.introduction}
                         />
diff --git a/src/menu/small_club/branch/component/smallClub.jsx b/src/menu/small_club/branch/component/smallClub.jsx
index 52afa7f..ffcae25 100644
--- a/src/menu/small_club/branch/component/smallClub.jsx
+++ b/src/menu/small_club/branch/component/smallClub.jsx
@@ -9,6 +9,7 @@ function SmallClub({ clubId, clubName, introduction, imageUrl }) {
         <div className={styles.rectangle}>
             <LinkItem to={`/menu/small_club/detail_page/${clubId}`}>
                 <img src={imageUrl} alt={clubName} className={styles.image} />
+
                 <h3 className={styles.title}>{clubName}</h3>
                 <p className={styles.content}>{introduction}</p>
             </LinkItem>
diff --git a/src/menu/small_club/branch/component/smallClub.module.css b/src/menu/small_club/branch/component/smallClub.module.css
index 3c52e56..56fbaa2 100644
--- a/src/menu/small_club/branch/component/smallClub.module.css
+++ b/src/menu/small_club/branch/component/smallClub.module.css
@@ -10,7 +10,10 @@
         margin: 10px;
     }
     .image {
+        position: absolute;
         width: 100%;
+        aspect-ratio: 1/1;
+        object-fit: contain;
         border-radius: 10px 10px 0px 0px;
         background: #ffffff;
     }
@@ -54,6 +57,8 @@
         width: 100%;
         border-radius: 10px 10px 0px 0px;
         background: #ffffff;
+        aspect-ratio: 1/1;
+        object-fit: contain;
     }
 
     .title {
diff --git a/src/menu/small_club/detail_page/index.jsx b/src/menu/small_club/detail_page/index.jsx
index 70c9c0f..b08a370 100644
--- a/src/menu/small_club/detail_page/index.jsx
+++ b/src/menu/small_club/detail_page/index.jsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
 import axios from 'axios';
-import IntroductionTab from "./_component/IntroductionTab";
-import ReviewTab from "./_component/ReviewTab";
-import "./detailPage.css";
+import IntroductionTab from './_component/IntroductionTab';
+import ReviewTab from './_component/ReviewTab';
+import './detailPage.css';
 
-export default function DetailPage({ }) {
+export default function DetailPage({}) {
     const url = window.location.href; // 현재 URL 가져오기
     const urlParts = url.split('/'); // URL을 '/' 기준으로 분할
     const clubId = urlParts[urlParts.length - 1]; // 마지막 부분이 clubId
@@ -13,13 +13,13 @@ export default function DetailPage({ }) {
     const intClubId = parseInt(clubId, 10);
 
     console.log(clubId);
-    const [whichTab, setWhichTab] = useState("Introduction");
+    const [whichTab, setWhichTab] = useState('Introduction');
     const [detailData, setDetailData] = useState([]);
 
     const getDetailData = async () => {
         try {
             console.log(intClubId);
-            const res = await axios.get(`http://15.164.211.56:8080/v1/clubs/${intClubId}`);
+            const res = await axios.get(`http://13.125.141.171/v1/clubs/${intClubId}`);
             if (res.data.success) {
                 setDetailData(res.data.data);
                 console.log(res.data.data);
@@ -46,7 +46,11 @@ export default function DetailPage({ }) {
     return (
         <div className="detail_container">
             <div className="detail_header_container">
-                <img className="detail_logo" src={detailData.imageUrl || '/detail/club_logo_summit.png'} alt={`${detailData.clubName} logo`} />
+                <img
+                    className="detail_logo"
+                    src={detailData.imageUrl || '/detail/club_logo_summit.png'}
+                    alt={`${detailData.clubName} logo`}
+                />
                 <div className="detail_header">
                     <div className="detail_header_name">
                         <h3>{detailData.clubName}</h3>
@@ -60,10 +64,23 @@ export default function DetailPage({ }) {
                 </div>
             </div>
             <div className="detail_tab">
-                <button className={whichTab === "Introduction" ? "active" : ""} onClick={onClickIntroTab}>소개</button>
-                <button className={whichTab === "Review" ? "active" : ""} onClick={onClickReviewTab}>리뷰</button>
+                <button className={whichTab === 'Introduction' ? 'active' : ''} onClick={onClickIntroTab}>
+                    소개
+                </button>
+                <button className={whichTab === 'Review' ? 'active' : ''} onClick={onClickReviewTab}>
+                    리뷰
+                </button>
             </div>
-            {whichTab === 'Introduction' && <IntroductionTab clubName={detailData.clubName} college={detailData.college} department={detailData.department} introduction={detailData.introduction} instagram={detailData.instagram} imgUrl={detailData.imageUrl} />}
+            {whichTab === 'Introduction' && (
+                <IntroductionTab
+                    clubName={detailData.clubName}
+                    college={detailData.college}
+                    department={detailData.department}
+                    introduction={detailData.introduction}
+                    instagram={detailData.instagram}
+                    imgUrl={detailData.imageUrl}
+                />
+            )}
             {whichTab === 'Review' && <ReviewTab />}
         </div>
     );