로고 컨테스트 별 날짜 별로 로고 게시 (#169)

* feat: code refactoring * Refac: MainNavigation refac * design: 로고 컨테스트 이미지 추가 * feat: navigation Logo 설정 * Design: Admin 로고 수정
GDG-on-Campus-KNU · Nov 22, 2024 · eb408e3 · eb408e3
1 parent d64dc39
commit eb408e3
Show file tree

Hide file tree

Showing 19 changed files with 404 additions and 347 deletions.
diff --git a/src/assets/NavigationLogo.svg b/src/assets/NavigationLogo.svg
diff --git a/src/assets/NavigationLogo768.svg b/src/assets/NavigationLogo768.svg
diff --git a/src/assets/defaultLogo/GDGoC.png b/src/assets/defaultLogo/GDGoC.png
diff --git a/src/assets/logo_contest/gdgoc_knu_doyeonkim.png b/src/assets/logo_contest/gdgoc_knu_doyeonkim.png
diff --git a/src/assets/logo_contest/gdgoc_knu_hayeon.png b/src/assets/logo_contest/gdgoc_knu_hayeon.png
diff --git a/src/assets/logo_contest/gdgoc_knu_seojisu.png b/src/assets/logo_contest/gdgoc_knu_seojisu.png
diff --git a/src/assets/logo_contest/gdgocknu_hyunminkim.png b/src/assets/logo_contest/gdgocknu_hyunminkim.png
diff --git a/src/assets/logo_contest/gdgocknu_kimjoohoon.png b/src/assets/logo_contest/gdgocknu_kimjoohoon.png
diff --git a/src/assets/logo_contest/gdgocknu_sonheeju.png b/src/assets/logo_contest/gdgocknu_sonheeju.png
diff --git a/src/assets/logo_contest/gdgocknu_yoonkyuwon.png b/src/assets/logo_contest/gdgocknu_yoonkyuwon.png
diff --git a/src/components/feature/footer/FooterLink.ts b/src/components/feature/footer/FooterLink.ts
@@ -0,0 +1,37 @@
+import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
+import GithubLogo from '@gdg/assets/GithubLogo.svg';
+import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
+import Phone from '@gdg/assets/Phone.svg';
+
+type FooterLink = {
+  icon: string;
+  title: string;
+  content: string;
+  href?: string;
+};
+
+export const footerLinks: FooterLink[] = [
+  {
+    icon: Phone,
+    title: '대표 연락처',
+    content: '010-4922-7687',
+  },
+  {
+    icon: GithubLogo,
+    title: 'GDG KNU 팀 깃허브',
+    content: 'Github 바로가기',
+    href: 'https://github.com/GDG-on-Campus-KNU',
+  },
+  {
+    icon: InstagramLogo,
+    title: '인스타그램',
+    content: '@gdgoc.knu 바로가기',
+    href: 'https://www.instagram.com/gdgoc.knu/',
+  },
+  {
+    icon: CompanyLogo,
+    title: '협력사',
+    content: '데이터융복합연구원 바로가기',
+    href: 'https://datainstitute.knu.ac.kr/contents/main.do',
+  },
+];
diff --git a/src/components/feature/footer/MainFooter.tsx b/src/components/feature/footer/MainFooter.tsx
@@ -1,7 +1,3 @@
-import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
-import GithubLogo from '@gdg/assets/GithubLogo.svg';
-import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
-import Phone from '@gdg/assets/Phone.svg';
 import Text from '@gdg/components/common/typography/Text';
 import {
   Footer,
@@ -12,6 +8,22 @@ import {
   TableData,
 } from '@gdg/styles/FooterLayoutStyle';
 
+import { footerLinks } from './FooterLink';
+
+const FooterRow = ({
+  items,
+  renderItem,
+}: {
+  items: typeof footerLinks;
+  renderItem: (item: (typeof footerLinks)[0]) => React.ReactNode;
+}) => (
+  <tr>
+    {items.map((item, i) => (
+      <TableData key={i}>{renderItem(item)}</TableData>
+    ))}
+  </tr>
+);
+
 const MainFooter = () => {
   return (
     <Footer>
@@ -24,82 +36,34 @@ const MainFooter = () => {
           </TextBorder>
           <Table>
             <tbody>
-              <tr>
-                <TableData>
-                  <img src={Phone} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={GithubLogo} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={InstagramLogo} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={CompanyLogo} alt='Logo' />
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <Text color='white' size='md'>
-                    대표 연락처
-                  </Text>
-                </TableData>
-                <TableData>
-                  <Text color='white' size='md'>
-                    GDG KNU 팀 깃허브
-                  </Text>
-                </TableData>
-                <TableData>
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ icon }) => <img src={icon} alt='Logo' />}
+              />
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ title }) => (
                   <Text color='white' size='md'>
-                    인스타그램
+                    {title}
                   </Text>
-                </TableData>
-                <TableData>
-                  <Text color='white' size='md'>
-                    협력사
-                  </Text>
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <Text color='white' size='xs'>
-                    010-4922-7687
-                  </Text>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://github.com/GDG-on-Campus-KNU'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    <Text color='white' size='xs' whiteSpace='normal'>
-                      Github 바로가기
-                    </Text>
-                  </a>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://www.instagram.com/gdg.knu/'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    <Text color='white' size='xs' whiteSpace='normal'>
-                      @gdg.knu 바로가기
-                    </Text>
-                  </a>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://datainstitute.knu.ac.kr/contents/main.do'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
+                )}
+              />
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ content, href }) =>
+                  href ? (
+                    <a href={href} target='_blank' rel='noopener noreferrer'>
+                      <Text color='white' size='xs' whiteSpace='normal'>
+                        {content}
+                      </Text>
+                    </a>
+                  ) : (
                     <Text color='white' size='xs'>
-                      데이터융복합연구원 바로가기
+                      {content}
                     </Text>
-                  </a>
-                </TableData>
-              </tr>
+                  )
+                }
+              />
             </tbody>
           </Table>
         </Display>

diff --git a/src/components/feature/footer/MainFooterMobile.tsx b/src/components/feature/footer/MainFooterMobile.tsx
@@ -1,10 +1,6 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
-import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
-import GithubLogo from '@gdg/assets/GithubLogo.svg';
-import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
-import Phone from '@gdg/assets/Phone.svg';
 import Text from '@gdg/components/common/typography/Text';
 import {
   Footer,
@@ -15,11 +11,40 @@ import {
   TableData,
 } from '@gdg/styles/FooterLayoutStyle';
 
+import { footerLinks } from './FooterLink';
+
 const MobileImg = styled.img`
   margin-right: 10px;
 `;
 
-const MobileFooterMobile = () => {
+const FooterCell = ({
+  icon,
+  content,
+  href,
+}: {
+  icon: string;
+  content: string;
+  href?: string;
+}) => (
+  <TableData>
+    <MobileImg src={icon} alt='Logo' />
+    {href ? (
+      <Link to={href}>
+        <Text color='white' size='xs'>
+          {content}
+        </Text>
+      </Link>
+    ) : (
+      <Text color='white' size='xs'>
+        {content}
+      </Text>
+    )}
+  </TableData>
+);
+
+const MainFooterMobile = () => {
+  const rows = [footerLinks.slice(0, 2), footerLinks.slice(2, 4)];
+
   return (
     <Footer>
       <DisplayFooter>
@@ -31,40 +56,18 @@ const MobileFooterMobile = () => {
           </TextBorder>
           <Table>
             <tbody>
-              <tr>
-                <TableData>
-                  <MobileImg src={Phone} alt='Logo' />
-                  <Text color='white' size='xs'>
-                    010-4922-7687
-                  </Text>
-                </TableData>
-                <TableData>
-                  <MobileImg src={GithubLogo} alt='Logo' />
-                  <Link to='https://github.com/GDSC-KNU'>
-                    <Text color='white' size='xs'>
-                      Github 바로가기
-                    </Text>
-                  </Link>
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <MobileImg src={InstagramLogo} alt='Logo' />
-                  <Link to='https://www.instagram.com/gdsc.knu/'>
-                    <Text color='white' size='xs'>
-                      Instagram 바로가기
-                    </Text>
-                  </Link>
-                </TableData>
-                <TableData>
-                  <MobileImg src={CompanyLogo} alt='Logo' />
-                  <Link to='https://datainstitute.knu.ac.kr/contents/main.do'>
-                    <Text color='white' size='xs'>
-                      데이터융복합연구원
-                    </Text>
-                  </Link>
-                </TableData>
-              </tr>
+              {rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((item, cellIndex) => (
+                    <FooterCell
+                      key={cellIndex}
+                      icon={item.icon}
+                      content={item.content}
+                      href={item.href}
+                    />
+                  ))}
+                </tr>
+              ))}
             </tbody>
           </Table>
         </Display>
@@ -73,4 +76,4 @@ const MobileFooterMobile = () => {
   );
 };
 
-export default MobileFooterMobile;
+export default MainFooterMobile;
diff --git a/src/components/feature/header/MainNavigation.style.ts b/src/components/feature/header/MainNavigation.style.ts
@@ -0,0 +1,97 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+
+import { displayCenter } from '@gdg/styles/LayoutStyle';
+
+export type DropdownMenuProps = {
+  isOpen: boolean;
+};
+
+export const LinkText = styled(Link)`
+  margin-top: 3px;
+`;
+
+export const Header = styled.div`
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: var(--color-navy);
+  height: 45px;
+  ${displayCenter}
+`;
+
+export const DisplayHeader = styled.nav`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1024px;
+  height: 45px;
+  background-color: var(--color-navy);
+`;
+
+export const Menu = styled.ul`
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 9px 0px;
+  height: calc(100% - 18px);
+  background-color: var(--color-navy);
+`;
+export const MenuList = styled.li`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  margin-right: 20px;
+  position: relative;
+  cursor: pointer;
+`;
+
+export const ImgList = styled.img`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 10px;
+`;
+
+export const DropDownImg = styled.img`
+  margin-left: 10px;
+  cursor: pointer;
+`;
+
+export const DropdownMenu = styled(motion.ul)<DropdownMenuProps>`
+  position: absolute;
+  top: 160%;
+  right: 0;
+
+  background-color: var(--color-white);
+  list-style: none;
+  border-radius: 10px;
+  width: 104px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  display: ${(props) => (props.isOpen ? 'block' : 'none')};
+`;
+
+export const DropdownItem = styled.li`
+  padding: 15px 10px 15px 10px;
+  height: 12px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-alto);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;