Merge pull request #38 from Clubber2024/feat/#37-hashTag_API

Feat: HashTag API(#37)
Clubber2024 · May 27, 2024 · e243fe5 · e243fe5
2 parents 6ab6d40 + fd99916
commit e243fe5
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 40 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,6 +10,7 @@ import DetailPage from './menu/small_club/detail_page/index';
 import BranchCentral from './menu/central_club/branch/branchCentral';
 import LoginPage from './menu/login';
 import BranchSmall from './menu/small_club/branch/branch_small';
+import BranchHashTag from './components/hashtag/component/branchHashtag';
 
 function App() {
     const isPc = useMediaQuery({
@@ -32,6 +33,7 @@ function App() {
                         <Route path="/menu/central_club/branch/branchCentral" element={<BranchCentral />} />
                         <Route path="/menu/login" element={<LoginPage />} />
                         <Route path="/menu/small_club/branch/branch_small" element={<BranchSmall />} />
+                        <Route path="/components/hashtag/component/branchHashtag" element={<BranchHashTag />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -48,6 +50,7 @@ function App() {
                         <Route path="/menu/central_club/branch/branchCentral" element={<BranchCentral />} />
                         <Route path="/menu/login" element={<LoginPage />} />
                         <Route path="/menu/small_club/branch/branch_small" element={<BranchSmall />} />
+                        <Route path="/components/hashtag/component/branchHashtag" element={<BranchHashTag />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>

diff --git a/src/components/hashtag/HashTag.jsx b/src/components/hashtag/HashTag.jsx
@@ -1,5 +1,7 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import './hashtag.css';
-import { Link } from 'react-router-dom';
+import { LinkItem } from '../../menu/central_club/central_club';
 
 const hashtag = [
     { band: '밴드' },
@@ -16,23 +18,22 @@ const hashtag = [
 ];
 
 export default function HashTag() {
+    const navigate = useNavigate();
+    const onClicked = (hashTagValue) => {
+        navigate(`/components/hashtag/component/branchHashtag`, { state: { hashtag: hashTagValue } });
+    };
     return (
         <>
             {hashtag.map((item, index) => {
                 const tagName = Object.keys(item)[0];
                 const tagVal = item[tagName];
                 return (
-                    <Link to="/" style={{ textDecoration: 'none', color: 'black' }}>
-                        <div className="tag_container">
-                            <img
-                                src={`/main/hashtag/${tagName}_icon.png`}
-                                alt={`${tagName} icon`}
-                                width={48}
-                                height={45}
-                            />
-                            <p className="tag_text"># {tagVal}</p>
-                        </div>
-                    </Link>
+                    <div className="tag_container" key={index}>
+                        <img src={`/main/hashtag/${tagName}_icon.png`} alt={`${tagName} icon`} width={48} height={45} />
+                        <p className="tag_text" onClick={() => onClicked(tagVal)}>
+                            # {tagVal}
+                        </p>
+                    </div>
                 );
             })}
         </>

diff --git a/src/components/hashtag/component/branchHashtag.jsx b/src/components/hashtag/component/branchHashtag.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useLocation } from 'react-router-dom';
+import HashTagClub from './hashTagClub';
+import styles from '../../../menu/central_club/branch/branchCentral.module.css';
+
+function BranchHashTag() {
+    const [loading, setLoading] = useState(true);
+    const [clubs, setClubs] = useState([]);
+    const [error, setError] = useState(null);
+    const location = useLocation();
+    const hashtag = location.state?.hashtag;
+
+    const getHashTagClubs = async () => {
+        try {
+            setLoading(true);
+            const response = await axios.get(`http://15.164.211.56:8080/v1/clubs?hashtag=${hashtag}`);
+            setClubs(response.data.data.clubs);
+            setError(null);
+        } catch (error) {
+            setError(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (hashtag) {
+            getHashTagClubs();
+        }
+    }, [hashtag]); // hashtag 값이 변경될 때마다 호출
+
+    if (loading) return <div>Loading...</div>;
+    //if (error) return <div>Error: {error.message}</div>;
+
+    const renderDataInRows = (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) => (
+                        <HashTagClub
+                            key={club.clubId}
+                            clubId={club.clubId}
+                            imageUrl={club.imageUrl}
+                            clubName={club.clubName}
+                            introduction={club.introduction}
+                        />
+                    ))}
+                </div>
+            );
+        }
+        return rows;
+    };
+
+    return (
+        <div>
+            <div className={styles.wrap}>
+                <div className={styles.header}>
+                    <h2 className={styles.header_title}># {hashtag}</h2>
+                </div>
+                {renderDataInRows(clubs)}
+            </div>
+        </div>
+    );
+}
+
+export default BranchHashTag;
diff --git a/src/components/hashtag/component/hashTagClub.jsx b/src/components/hashtag/component/hashTagClub.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../../menu/central_club/branch/component/centralClub.module.css';
+import { LinkItem } from '../../../menu/central_club/central_club';
+
+function HashTagClub({ clubId, imageUrl, clubName, introduction }) {
+    return (
+        <div className={styles.rectangle}>
+            <LinkItem to={`/menu/small_club/detail_page/${clubId}`}>
+                <img className={styles.image} alt={clubName} src={imageUrl} />
+                <h3 className={styles.title}>{clubName}</h3>
+                <p className={styles.content}>{introduction}</p>
+            </LinkItem>
+        </div>
+    );
+}
+
+HashTagClub.propTypes = {
+    clubId: PropTypes.number.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    clubName: PropTypes.string.isRequired,
+    introduction: PropTypes.string.isRequired,
+};
+
+export default HashTagClub;
diff --git a/src/layout/header.css b/src/layout/header.css
@@ -67,13 +67,14 @@
         font-size: 18px;
         font-weight: 500;
         padding-right: 31px;
+        margin-bottom: 2px;
     }
 
     .tab_text_highlight_active {
         font-size: 18px;
         font-weight: 700;
         padding-right: 31px;
-        border: 0;
+        margin-bottom: 2px;
         background-color: transparent;
         cursor: pointer;
     }
@@ -293,17 +294,17 @@
         font-size: 13px;
         font-weight: 600;
         padding-right: 0;
-        border: 0;
         background-color: transparent;
         cursor: pointer;
         text-align: left;
+        margin-bottom: 2px;
     }
 
     .tab_text_highlight_active {
         font-size: 14px;
         font-weight: 700;
         padding-right: 0;
-        border: 0;
+        margin-bottom: 2px;
         background-color: transparent;
         cursor: pointer;
     }

diff --git a/src/menu/central_club/branch/branchCentral.jsx b/src/menu/central_club/branch/branchCentral.jsx
@@ -30,23 +30,33 @@ function BranchCentral() {
     if (loading) return <div>Loading...</div>;
     //if (error) return <div>Error: {error.message}</div>;
 
+    const renderDataInRows = (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) => (
+                        <CentralClub
+                            key={club.clubId}
+                            clubId={club.clubId}
+                            imageUrl={club.imageUrl}
+                            clubName={club.clubName}
+                            introduction={club.introduction}
+                        />
+                    ))}
+                </div>
+            );
+        }
+    };
+
     return (
         <div>
             <div className={styles.wrap}>
                 <div className={styles.header}>
                     <h2 className={styles.header_title}>{division}</h2>
                 </div>
-            </div>
-            <div className={styles.container}>
-                {clubs.map((club) => (
-                    <CentralClub
-                        key={club.clubId}
-                        clubId={club.clubId}
-                        imageUrl={club.imageUrl}
-                        clubName={club.clubName}
-                        introduction={club.introduction}
-                    />
-                ))}
+                {renderDataInRows(clubs)}
             </div>
         </div>
     );

diff --git a/src/menu/central_club/branch/component/centralClub.jsx b/src/menu/central_club/branch/component/centralClub.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './centralClub.module.css';
-import { useNavigate } from 'react-router-dom';
 import { LinkItem } from '../../central_club';
 
 function CentralClub({ clubId, imageUrl, clubName, introduction }) {

diff --git a/src/menu/login/component/LoginLogo.css b/src/menu/login/component/LoginLogo.css
@@ -30,7 +30,7 @@
     .mini_logo {
         width: 20%;
         font-family: Inter;
-        font-size: 15px;
+        font-size: 13px;
         font-weight: 700;
         line-height: 24.2px;
         color: rgba(96, 193, 195, 1);

diff --git a/src/menu/small_club/branch/branch_small.jsx b/src/menu/small_club/branch/branch_small.jsx
@@ -30,23 +30,34 @@ function BranchSmall() {
     if (loading) return <div>Loading...</div>;
     //if (error) return <div>Error: {error.message}</div>;
 
+    const renderDataInRows = (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) => (
+                        <SmallClub
+                            key={club.clubId}
+                            imageUrl={club.imageUrl}
+                            clubId={club.clubId}
+                            clubName={club.clubName}
+                            introduction={club.introduction}
+                        />
+                    ))}
+                </div>
+            );
+        }
+        return rows;
+    };
+
     return (
         <div>
             <div className={styles.wrap}>
                 <div className={styles.header}>
                     <h2 className={styles.header_title}>{department}</h2>
                 </div>
-            </div>
-            <div className={styles.container}>
-                {clubs.map((club) => (
-                    <SmallClub
-                        key={club.clubId}
-                        imageUrl={club.imageUrl}
-                        clubId={club.clubId}
-                        clubName={club.clubName}
-                        introduction={club.introduction}
-                    />
-                ))}
+                {renderDataInRows(clubs)}
             </div>
         </div>
     );

diff --git a/src/menu/small_club/branch/component/smallClub.module.css b/src/menu/small_club/branch/component/smallClub.module.css
@@ -42,7 +42,7 @@
 
 @media screen and (max-width: 769px) {
     .rectangle {
-        width: 25%;
+        width: 20%;
         height: 21.6%;
         border-radius: 10px;
         background: #ffffff;