Merge pull request #62 from KNU-HAEDAL-Website/design/#57-footer-mobile

issue#57 Footer 모바일 뷰 디자인 수정
KNU-HAEDAL-Website · Dec 24, 2024 · 0c6e54c · 0c6e54c
2 parents 4b5e2f8 + 4275e40
commit 0c6e54c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/...pp/(main)/_components/footer/LinkIcon.tsx → ...main)/_components/footer/ChannelIcons.tsx b/...pp/(main)/_components/footer/LinkIcon.tsx → ...main)/_components/footer/ChannelIcons.tsx
@@ -8,42 +8,42 @@ import {
 import { IconProps } from '@radix-ui/react-icons/dist/types'
 import Link from 'next/link'
 
-type LinkIconData = {
+type Channel = {
   id: number
+  name: string
   href: string
   icon: ComponentType<IconProps>
-  alt: string
 }
 
-export const LinkIcon = () => {
+export const ChannelIcons = () => {
   return (
-    <div className="absolute bottom-8 right-12 flex gap-4">
-      {linkIconData.map((linkIcon) => (
-        <Link href={linkIcon.href} key={linkIcon.id}>
-          <linkIcon.icon className="h-6 w-6" />
+    <div className="bottom-8 right-12 flex gap-4 sm:absolute">
+      {channels.map((channel) => (
+        <Link href={channel.href} key={channel.id}>
+          <channel.icon className="h-6 w-6" />
         </Link>
       ))}
     </div>
   )
 }
 
-const linkIconData: LinkIconData[] = [
+const channels: Channel[] = [
   {
     id: 0,
+    name: 'HAEDAL Email',
     href: 'mailto:[email protected]',
     icon: EnvelopeClosedIcon,
-    alt: 'HAEDAL Email Link',
   },
   {
     id: 1,
+    name: 'HAEDAL GitHub',
     href: 'https://github.com/KNU-HAEDAL',
     icon: GitHubLogoIcon,
-    alt: 'HAEDAL Github Link',
   },
   {
     id: 2,
+    name: 'HAEDAL Instagram',
     href: 'https://www.instagram.com/knu.haedal/',
     icon: InstagramLogoIcon,
-    alt: 'HAEDAL Instagram Link',
   },
 ]
diff --git a/src/app/(main)/_components/footer/Footer.tsx b/src/app/(main)/_components/footer/Footer.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
+import { ChannelIcons } from './ChannelIcons'
 import { FooterDetail } from './FooterDetail'
-import { LinkIcon } from './LinkIcon'
 
 export const Footer = () => {
   return (
@@ -21,8 +21,10 @@ export const Footer = () => {
         </p>
       </div>
       <FooterDetail />
-      <p className="text-xs">© 2024 해달. All rights reserved.</p>
-      <LinkIcon />
+      <p className="text-xs text-slate-500">
+        © 2024 해달. All rights reserved.
+      </p>
+      <ChannelIcons />
     </div>
   )
 }
diff --git a/src/app/(main)/_components/footer/FooterDetail.tsx b/src/app/(main)/_components/footer/FooterDetail.tsx
@@ -6,11 +6,13 @@ type FooterDetailData = {
 
 export const FooterDetail = () => {
   return (
-    <div className="flex flex-col justify-start gap-6 text-sm sm:flex-col sm:gap-2">
+    <div className="flex flex-col justify-start gap-2 text-sm">
       {footerDetailData.map((detail) => (
         <div key={detail.id} className="flex flex-row gap-4">
-          <div className="font-semibold">{detail.label}</div>
-          <div>{detail.content}</div>
+          <span className="whitespace-nowrap break-keep font-semibold">
+            {detail.label}
+          </span>
+          <span className="break-keep">{detail.content}</span>
         </div>
       ))}
     </div>