Skip to content

✨ feat: Footer 컴포넌트 구현 및 라우터 적용 #124

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
minimo-9 merged 7 commits into from
Jun 20, 2025
Merged

✨ feat: Footer 컴포넌트 구현 및 라우터 적용 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
76b525c
✨ feat: Footer 컴포넌트 생성
minimo-9 Jun 20, 2025
6f81fc5
🎨 style: envelope.svg 아이콘 추가
minimo-9 Jun 20, 2025
5fe6154
🎨 style: facebook.svg 아이콘 추가
minimo-9 Jun 20, 2025
29a5d3f
🎨 style: instagram.svg 아이콘 추가
minimo-9 Jun 20, 2025
c07437a
✨ feat: Footer 컴포넌트 구현
minimo-9 Jun 20, 2025
5ca77eb
✨ feat: Footer 컴포넌트 조건부 렌더링 추가
minimo-9 Jun 20, 2025
348bf02
🐛fix: Footer 컴포넌트 임포트 및 조건부 렌더링 제거
minimo-9 Jun 20, 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
3 changes: 3 additions & 0 deletions src/assets/icons/envelope.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icons/facebook.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icons/instagram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions src/components/layout/Footer.tsx
View file
Open in desktop
Copy link
Contributor

@Moon-ju-young Moon-ju-young Jun 20, 2025

Choose a reason for hiding this comment

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

💬 footer는 항상 맨 아래에 위치해야 하므로 sticky나 fixed로 최하단에 자체적으로 위치시키는 게 좋을 것 같습니다!

Copy link
Collaborator

@Yun-Jinwoo Yun-Jinwoo Jun 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

충분히 가능한 생각이긴 하나 대부분의 웹사이트들이 footer를 sticky나 fixed로 하단에 고정하진 않는걸로 알고 있습니다.
항상 보여야하는 부분이 있으면 모르겠지만(ex. 음악 플레이어), 지금 상태에서 해당 옵션을 적용하면 괜히 화면을 가리는 느낌이 들것 같아요

Copy link
Collaborator Author

@minimo-9 minimo-9 Jun 20, 2025

Choose a reason for hiding this comment

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

흠.. 한 번 생각을 해봐야겠군요 지금 안에 요소가 없어서 맨 아래 안 나오는 느낌이라..

Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Envelope from '@/assets/icons/envelope.svg';
import Instagram from '@/assets/icons/instagram.svg';
import Facebook from '@/assets/icons/facebook.svg';

export default function Footer() {
return (
<div className="h-126 w-full bg-gray-10 px-20 pt-32 pb-16 font-regular text-gray-50 md:h-100 md:px-32 md:py-37 lg:flex lg:justify-center lg:px-238">
<div className="grid h-78 grid-cols-[1fr_auto] grid-rows-1 gap-x-59 gap-y-40 md:flex md:h-26 md:items-center md:justify-between lg:w-964">
Comment on lines +7 to +8
Copy link
Contributor

@Moon-ju-young Moon-ju-young Jun 20, 2025

Choose a reason for hiding this comment

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

Suggested change
<div className="h-126 w-full bg-gray-10 px-20 pt-32 pb-16 font-regular text-gray-50 md:h-100 md:px-32 md:py-37 lg:flex lg:justify-center lg:px-238">
<div className="grid h-78 grid-cols-[1fr_auto] grid-rows-1 gap-x-59 gap-y-40 md:flex md:h-26 md:items-center md:justify-between lg:w-964">
<div className="h-126 w-full bg-gray-10 px-20 pt-32 pb-16 font-regular text-gray-50 md:h-100 md:px-32 md:py-37 lg:px-238">
<div className="grid h-78 grid-cols-[1fr_auto] grid-rows-1 gap-x-59 gap-y-40 md:flex md:h-26 md:items-center md:justify-between">

💬 이렇게 두어도 똑같은 스타일로 보이지 않나요?

Copy link
Collaborator Author

@minimo-9 minimo-9 Jun 20, 2025

Choose a reason for hiding this comment

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

고정을 안하면 넓은 화면에서 사이가 벌어집니다! 그래서 넓어지게 할까 아님 고정으로 할까 고민을 했는데 상단 헤드가 고정이라 동일하게 맞췄습니다!

<p className="order-3 text-caption/16 md:order-1 md:text-body1/26">
©codeit - 2025
</p>
<ul className="order-1 flex items-center gap-30 justify-self-start text-body2/22 md:order-2 md:text-body1/26">
<li className="whitespace-nowrap">Privacy Policy</li>
<li>FAQ</li>
</ul>
<div className="order-2 flex gap-10 md:order-3">
<img src={Envelope} alt="email" className="size-25" />
<img src={Instagram} alt="facebook" className="size-25" />
<img src={Facebook} alt="instagram" className="size-25" />
</div>
</div>
</div>
);
}