Skip to content

✨ Feat: Footer 컴포넌트 구현 #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sohyun0 merged 3 commits into from
Oct 2, 2025
Merged

✨ Feat: Footer 컴포넌트 구현 #24

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc70c9f
✨ Feat:
BaeZzi813 Oct 1, 2025
90a0c55
✨ Feat:
BaeZzi813 Oct 1, 2025
711ae33
♻️ Refact:
BaeZzi813 Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions src/components/layout/footer/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import envelopeIcon from '@/assets/icon/ic-envelope.svg';
import facebookIcon from '@/assets/icon/ic-facebook.svg';
import instagramIcon from '@/assets/icon/ic-instagram.svg';
Copy link
Contributor

@sohyun0 sohyun0 Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon 으로 이미 import 되어 있어서 Icon에서 대체해서 사용하면 될것 같습니다 ! (아래 설명 넣어놓겠습니다)

import { Container } from '@/components/layout';
import Image from 'next/image';
import Link from 'next/link';

const Footer = () => {
return (
<Container as={'footer'} className='max-w-full bg-gray-100'>
<div className='mx-auto flex flex-wrap justify-between gap-10 px-5 py-8 desktop:w-[964px]'>
Copy link
Contributor

@sohyun0 sohyun0 Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Container as={'footer'} 로 사용하시는것 보단 서로 위치를 변경하는것을 제안드립니다!

<footer>
<Container></Container>
</footer>

현재 컨테이너 속성이 전부 중복되어서 하단에 나타나고 있기 때문에 컨테이너의 컴포넌트 의미가 사라지고 하단에 새로 정의되고 있어서 구조는 변경하는게 좋을것 같습니다!

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그러네요 as 로 선언하면 footer 랑 Container 같이 들어갔겠네요..
구조 변경 해놓았습니다!

<div className='order-3 flex-grow text-caption font-normal text-gray-500 tablet:order-1 tablet:flex-grow-0 tablet:text-body-m'>
©codeit - 2023
</div>
<div className='order-1 flex gap-[30px] font-normal text-gray-500'>
<Link href={'/'} className='text-body-s hover:text-gray-300 tablet:text-body-m'>
Privacy Policy
</Link>
<Link href={'/'} className='text-body-s hover:text-gray-300 tablet:text-body-m'>
Copy link
Contributor

@sohyun0 sohyun0 Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hover 했을때 컬러가 과하게 밝아져서 이부분은 컬러셋을 추가해서 진한컬러로 변경하는게 좋을것 같습니다!
해상도 저하 모니터, 유저의 시력저하 같은 접근성 에는 배경컬러와 텍스트 컬러의 대비가 어느정도 높아야하는 점이 있어서 이부분은 제가 진한 컬러셋 한번 찾아보겠습니다 :)

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 기본 black 으로 하려다가 너무 어두워서 고민했는데 다른 괜찮다고 생각하시는 컬러 있으시면 바로 수정하겠습니다!

확인 후 머지 부탁드려도 될까요~?

FAQ
</Link>
</div>

<ul className='order-2 flex gap-[10px]'>
<li className='hover:-translate-y-1'>
<a href='https://mail.google.com/' target='_blank'>
<Image src={envelopeIcon} alt='메일' width={25} height={25} />
</a>
</li>
<li className='hover:-translate-y-1'>
<a href='https://www.facebook.com/' target='_blank'>
<Image src={facebookIcon} alt='메일' width={25} height={25} />
</a>
</li>
<li className='hover:-translate-y-1'>
<a href='https://www.instagram.com/' target='_blank'>
<Image src={instagramIcon} alt='인스타그램' width={25} height={25} />
</a>
Copy link
Contributor

@sohyun0 sohyun0 Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

외부연결도 Link 컴포넌트 사용해도 괜찮습니다 !

<Link href="https://www.naver.com" target="_blank">
        <Icon iconName='facebook' ariaLabel='페이스북' className='bg-gray-400' />
        <Icon iconName='instagram' ariaLabel='인스타그램' />
        <Icon iconName='envelope' ariaLabel='메일' />
</Link>

3개의 아이콘도 이미 지정되어 있어서 이런식으로 사용하시면 됩니다 !

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon 만들어주신 걸 미처 못봤습니다.ㅠㅠ 변경했습니다!

</li>
</ul>
</div>
</Container>
);
};

export default Footer;
Empty file added src/components/layout/footer/index.ts
View file
Open in desktop
Empty file.
4 changes: 2 additions & 2 deletions src/components/layout/frame/frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ const Frame = ({ title, content }: FrameProps) => {
return (
<>
<section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
<h1 className='text-xl font-bold tablet:text-[28px]'>{title}</h1>
<h1 className='text-heading-s font-bold tablet:text-heading-l'>{title}</h1>
Copy link
Contributor

@sohyun0 sohyun0 Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하나더 알려드리자면 text-heading-l 만 선언해도 반응형으로 만들어졌기 때문에 640 이하에서는 20px , 640 이상에서는 28로 보여지게 됩니다 :) global.css 참고해보시면 좋을것 같습니다~!

Copy link
Contributor Author

@BaeZzi813 BaeZzi813 Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 그러네요! 꼼꼼히 읽어보겠습니다ㅠ 이 부분도 다시 수정해 놓을게요~!

<div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
<h2 className='text-sm font-normal tablet:text-base'>{content}</h2>
<h2 className='text-body-s font-normal tablet:text-body-l'>{content}</h2>
{/* 버튼 컴포넌트 넣을 자리 */}
</div>
</section>
Expand Down
3 changes: 3 additions & 0 deletions src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Header, Wrapper } from '@/components/layout';
import Footer from '@/components/layout/footer/footer';

import ToastProvider from '@/context/toastContext/toastContext';
import '@/styles/fonts.css';
import '@/styles/globals.css';
Expand All @@ -18,6 +20,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
<Wrapper>
<Header />
<main className='grow'>{page}</main>
<Footer />
</Wrapper>
));

Expand Down
Loading