자료 다운로드 페이지 추가

public/static/images/sub/file_down_btn.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="35" height="35" rx="17.5" fill="white"/>
+<rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="#45576F"/>
+<path d="M9 20L9.23384 20.6626C10.144 23.2413 10.5991 24.5307 11.6374 25.2654C12.6758 26 14.0431 26 16.7778 26H19.2222C21.9569 26 23.3242 26 24.3626 25.2654C25.4009 24.5307 25.856 23.2413 26.7662 20.6626L27 20" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M18 20L18 10M18 20C17.2998 20 15.9915 18.0057 15.5 17.5M18 20C18.7002 20 20.0085 18.0057 20.5 17.5" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/community/filedown/page.jsx

@@ -0,0 +1,44 @@
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+import Image from "next/image";
+import Link from "next/link";
+import '@/styles/contents.scss';
+import FileDownForm from "@/components/sub/community/filedown/FileDownForm";
+
+export default function FileDownPage(){
+    return(
+        <div className="wrap">
+            <Header/>
+            <div className="content">
+                <div className="sub-header">
+                    <div className="sub-header-inner">
+                        <ul className="sub-header-title-wrap">
+                            <li className='title-item'>
+                                <Link className='sub-header-title' href={'#'}>資料のダウンロード </Link>
+                            </li>
+                        </ul>
+                        <ul className="sub-header-location">
+                            <li className="location-item">
+                                <span className="home">
+                                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                                </span>
+                            </li>
+                            <li className="location-item">
+                                <span>物品及び図面管理</span>
+                            </li>
+                            <li className="location-item">
+                                <span>新規物件登録</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="sub-content">
+                    <div className="sub-content-inner">
+                        <FileDownForm/>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+}

src/components/publishpage/PublishPage.jsx

@@ -147,7 +147,7 @@ export default function PublishPage() {
                 <td className="t-center">2024-10-11</td>
               </tr>
               <tr>
-                <td className="t-center" rowSpan={2}><strong>커뮤니티</strong></td>			
+                <td className="t-center" rowSpan={3}><strong>커뮤니티</strong></td>			
                 <td><strong className="title">공지사항</strong></td>
                 <td><Link href="/community/notice" target="_blank">NoticePage</Link></td>
                 <td className="coding_stat_web"></td>
@@ -159,6 +159,12 @@ export default function PublishPage() {
                 <td className="coding_stat_web"></td>
                 <td className="t-center">2024-10-14</td>
               </tr>
+              <tr>
+                <td><strong className="title">자료 다운로드</strong></td>
+                <td><Link href="/community/filedown" target="_blank">FileDownPage</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-10-14</td>
+              </tr>
             </tbody>
           </table>
         </div>

src/components/sub/community/filedown/FileDownForm.jsx

@@ -0,0 +1,50 @@
+const fileName = [
+    {id:1, name:'北面設置配置設計およ び発注案内操作マニュアル'},
+    {id:2, name:'北面屋根設置に関する確認書'},
+    {id:3, name:'サービス要求フォーム'},
+    {id:4, name:'図面屋根の説明書'},
+    {id:5, name:'保証書再発行依頼書 (申請内容訂正理由)'},
+    {id:6, name:'図面操作マニュアル'},
+    {id:7, name:'北面設置配置設計およ び発注案内操作マニュアル'},
+    {id:8, name:'北面屋根設置に関する確認書'},
+    {id:9, name:'サービス要求フォーム'},
+    {id:10, name:'図面屋根の説明書'},
+    {id:11, name:'図面屋根の説明書'},
+    {id:12, name:'資料ダウンロードタイトル'},
+]
+
+export default function FileDownForm(){
+    return(
+        <div className="sub-table-box">
+            <div className="community-search-warp">
+                <div className="community-search-box">
+                    <input type="text" className="community-input" />
+                    <button className="community-search-ico"></button>
+                </div>
+                <div className="community-search-keyword"><span>qpeak</span> について銃 <span>5</span> 提案 投稿が検索されました.</div>
+            </div>
+            <div className="table-box-title-wrap">
+                <div className="title-wrap">
+                    <h3>文書リスト </h3>
+                    <ul className="info-wrap">
+                        <li>全体 <span className="red">6</span></li>
+                    </ul>
+                </div>
+            </div>
+            <div className="file-down-list">
+                {fileName.map((item) => (
+                    <div key={item.id} className="file-down-item">
+                        <div className="file-item-info">
+                            <div className="item-num">98</div>
+                            <div className="item-name">{item.name}</div>
+                            <div className="item-date">アップデート : 2024.07.18 10:00:11</div>
+                        </div>
+                        <div className="file-down-box">
+                            <button className="file-down-btn"></button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

src/styles/_contents.scss

@@ -1145,3 +1145,59 @@
         }
     }
 }
+
+// 자료 다운로드
+.file-down-list{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    .file-down-item{
+        display: flex;
+        align-items: center;
+        padding: 24px;
+        border-radius: 4px;
+        border: 1px solid #E5E5E5;
+        background: #FFF; 
+        transition: all .15s ease-in-out;
+        cursor: pointer;
+        .file-item-info{
+            .item-num{
+                display: inline-block;
+                padding: 6px 17.5px;
+                border-radius: 60px;
+                background-color: #F4F4F7;
+                font-size: 13px;
+                font-weight: 600;
+                color: #101010;
+                margin-bottom: 15px;
+            }
+            .item-name{
+                font-size: 16px;
+                color: #101010;
+                font-weight: 500;
+                margin-bottom: 13px;
+            }
+            .item-date{
+                font-size: 13px;
+                font-weight: 400;
+                color: #344356;
+            }
+        }
+        .file-down-box{
+            display: flex;
+            align-items: center;
+            flex: none;
+            margin-left: auto;
+            height: 100%;
+            .file-down-btn{
+                width: 36px;
+                height: 36px;
+                background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+        &:hover{
+            background-color: #F4F4F7;
+        }
+    }
+}