Merge pull request #146 from Team-INSERT/refactor/home

refactor : 홈 페이지 시멘틱 태그 적용, Map 적용
Team-INSERT · Apr 16, 2024 · 85b15e6 · 85b15e6
2 parents d9212ce + c48721b
commit 85b15e6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 50 deletions.
diff --git a/app/page.css.ts b/app/page.css.ts
@@ -47,7 +47,7 @@ export const introduce = {
 export const utility = {
   body: style({
     width: "100%",
-    gap: "12px",
+    gap: "32px",
     ...flex.CENTER,
   }),
   href: style({

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,35 +6,19 @@ import Accordion from "@/components/Accordion";
 import config from "@/config";
 import * as styles from "./page.css";
 
-const tableInformation = [
-  { name: "교훈", content: "創意(창의), 誠實(성실)" },
-  { name: "개교", content: "1970년 3월 26일 (가락종합고등학교)" },
-  { name: "유형", content: "마이스터고등학교" },
-  { name: "성별", content: "남녀공학" },
-  { name: "형태", content: "공립학교" },
-  { name: "교목", content: "소나무 (꿋꿋한 절개와 의지를 보이다)" },
-  { name: "교화", content: "목련 (우애있고 사랑스러우며 고귀하다)" },
-  {
-    name: "교조",
-    content: "솔개 (유연하고 민첩하며 늠름한 기상으로 높이 날아 세계를 보다)",
-  },
-  { name: "관할 교육청", content: "부산광역시교육청" },
-  { name: "주소", content: "부산광역시 강서구 가락대로 1393 (가락동)" },
-];
-
 const Home = () => {
   return (
     <Container title="대문" docsType="대문">
-      <div className={styles.introduce.body}>
-        <div className={styles.introduce.box}>
+      <main className={styles.introduce.body}>
+        <section className={styles.introduce.box}>
           <h1 className={styles.introduce.title}>
             여러분이 가꾸어 나가는 <b className={styles.introduce.highlight}>역사의 고서</b>
           </h1>
           <h2 className={styles.introduce.subtitle}>
             <b className={styles.introduce.highlight}>부마위키</b>에 오신 것을 환영합니다!
           </h2>
-        </div>
-        <div className={styles.introduce.box}>
+        </section>
+        <section className={styles.introduce.box}>
           <p className={styles.introduce.description}>
             부마위키는 부산소마고 학생이라면 누구나 기여할 수 있는 위키입니다.
             <br />
@@ -45,27 +29,21 @@ const Home = () => {
               있습니다. 주의해주세요! ※
             </span>
           </p>
-        </div>
-      </div>
-      <div className={styles.utility.body}>
-        <Link className={styles.utility.href} href="/docs/부마위키%20업데이트%20내역">
-          업데이트 내역
-        </Link>{" "}
-        |
-        <Link className={styles.utility.href} href="/docs/부마위키%20방명록">
-          방명록
-        </Link>{" "}
-        |
-        <Link className={styles.utility.href} href="https://forms.gle/rYmV7zpdgcMahzF36">
-          문의하기
-        </Link>
-      </div>
-      <div className={styles.table.container}>
-        <div className={styles.table.body}>
-          <div className={styles.table.thead}>
+        </section>
+      </main>
+      <main className={styles.utility.body}>
+        {utilityInformation.map((utility) => (
+          <Link key={utility.name} className={styles.utility.href} href={utility.href}>
+            {utility.name}
+          </Link>
+        ))}
+      </main>
+      <main className={styles.table.container}>
+        <section className={styles.table.body}>
+          <hgroup className={styles.table.thead}>
             <h1 className={styles.table.title}>부산소프트웨어마이스터고등학교</h1>
-            <h2 className={styles.table.subtitle}>Busan Software Meister High School</h2>
-          </div>
+            <p className={styles.table.subtitle}>Busan Software Meister High School</p>
+          </hgroup>
           <Image
             width={999}
             height={999}
@@ -79,27 +57,49 @@ const Home = () => {
               <div className={styles.table.tContent}>{info.content}</div>
             </div>
           ))}
-        </div>
-      </div>
+        </section>
+      </main>
       <Accordion title="개요">
-        <div className={styles.outline.description}>{config.description}</div>
-        <div className={styles.outline.warning}>{config.warningDescription}</div>
+        <p className={styles.outline.description}>{config.description}</p>
+        <p className={styles.outline.warning}>{config.warningDescription}</p>
       </Accordion>
       <Accordion title="학과">
-        <div className={styles.outline.description}>{config.departmentDescription}</div>
+        <p className={styles.outline.description}>{config.departmentDescription}</p>
         <h2 className={styles.outline.departmentTitle}>소프트웨어개발과</h2>
-        <div className={styles.outline.description}>{config.softwareDepartment}</div>
+        <p className={styles.outline.description}>{config.softwareDepartment}</p>
         <h2 className={styles.outline.departmentTitle}>임베디드소프트웨어과</h2>
-        <div className={styles.outline.description}>{config.embeddedDepartment}</div>
+        <p className={styles.outline.description}>{config.embeddedDepartment}</p>
       </Accordion>
       <Accordion title="교가">
-        <div className={styles.outline.description}>{config.schoolSong}</div>
+        <p className={styles.outline.description}>{config.schoolSong}</p>
       </Accordion>
       <Accordion title="개인정보처리방침">
-        <div className={styles.outline.description}>{config.privacyPolicy}</div>
+        <p className={styles.outline.description}>{config.privacyPolicy}</p>
       </Accordion>
     </Container>
   );
 };
 
+const utilityInformation = [
+  { name: "업데이트 내역", href: "/docs/부마위키%20업데이트%20내역" },
+  { name: "방명록", href: "/docs/부마위키%20방명록" },
+  { name: "문의하기", href: "https://forms.gle/rYmV7zpdgcMahzF36" },
+];
+
+const tableInformation = [
+  { name: "교훈", content: "創意(창의), 誠實(성실)" },
+  { name: "개교", content: "1970년 3월 26일 (가락종합고등학교)" },
+  { name: "유형", content: "마이스터고등학교" },
+  { name: "성별", content: "남녀공학" },
+  { name: "형태", content: "공립학교" },
+  { name: "교목", content: "소나무 (꿋꿋한 절개와 의지를 보이다)" },
+  { name: "교화", content: "목련 (우애있고 사랑스러우며 고귀하다)" },
+  {
+    name: "교조",
+    content: "솔개 (유연하고 민첩하며 늠름한 기상으로 높이 날아 세계를 보다)",
+  },
+  { name: "관할 교육청", content: "부산광역시교육청" },
+  { name: "주소", content: "부산광역시 강서구 가락대로 1393 (가락동)" },
+];
+
 export default Home;