Skip to content

Commit f1bbd64

Browse files
lazy-dinosaurlazy-dinosaur
committed
Feat: 사이드바에 푸터 정보 표시 추가
1 parent f07690c commit f1bbd64

File tree

3 files changed

+427
-255
lines changed

3 files changed

+427
-255
lines changed

‎components/footer.tsx

Lines changed: 163 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,174 @@ import Link from "next/link";
33
import { FaGithub, FaEnvelope } from "react-icons/fa";
44
import { RiKakaoTalkFill } from "react-icons/ri";
55
import { motion } from "framer-motion";
6+
import { useState } from "react";
67

78
export default function Footer() {
8-
const currentYear = new Date().getFullYear();
9+
const currentYear = new Date().getFullYear();
10+
const [footerVisible, setFooterVisible] = useState(false);
911

10-
return (
11-
<footer className="w-full border-border/40 bg-background/50 backdrop-blur-sm py-6 md:py-8 mt-10">
12-
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
13-
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
14-
{/* Left side - Nav links */}
15-
<div className="flex flex-wrap justify-center md:justify-start gap-6">
16-
<Link
17-
href="/"
18-
className="text-sm text-muted-foreground hover:text-primary transition-colors"
19-
>
20-
Home
21-
</Link>
22-
<Link
23-
href="/projects"
24-
className="text-sm text-muted-foreground hover:text-primary transition-colors"
25-
>
26-
Portfolio
27-
</Link>
28-
<Link
29-
href="https://github.com/lazy-dinosaur"
30-
target="_blank"
31-
className="text-sm text-muted-foreground hover:text-primary transition-colors"
32-
>
33-
GitHub
34-
</Link>
35-
</div>
12+
return (
13+
<>
14+
{footerVisible ? (
15+
<></>
16+
) : (
17+
<motion.div
18+
initial={{ opacity: 0, y: 20 }}
19+
animate={{ opacity: 1, y: 0 }}
20+
exit={{ opacity: 0, y: 20 }}
21+
className="fixed bottom-0 right-8 py-6 border-border/60 hidden xl:block"
22+
>
23+
{/* 소셜 링크 */}
24+
<div className="flex items-center justify-center gap-4 mb-4">
25+
<Link
26+
href="https://github.com/lazy-dinosaur"
27+
target="_blank"
28+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
29+
>
30+
<svg
31+
xmlns="http://www.w3.org/2000/svg"
32+
viewBox="0 0 24 24"
33+
fill="none"
34+
stroke="currentColor"
35+
strokeWidth="2"
36+
strokeLinecap="round"
37+
strokeLinejoin="round"
38+
className="w-4 h-4"
39+
>
40+
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
41+
</svg>
42+
</Link>
43+
<Link
44+
href="mailto:[email protected]"
45+
target="_blank"
46+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
47+
>
48+
<svg
49+
xmlns="http://www.w3.org/2000/svg"
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
stroke="currentColor"
53+
strokeWidth="2"
54+
strokeLinecap="round"
55+
strokeLinejoin="round"
56+
className="w-4 h-4"
57+
>
58+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
59+
<polyline points="22,6 12,13 2,6"></polyline>
60+
</svg>
61+
</Link>
62+
<Link
63+
href="https://open.kakao.com/o/sdG4BPjh"
64+
target="_blank"
65+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
66+
>
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
viewBox="0 0 24 24"
70+
fill="currentColor"
71+
className="w-4 h-4"
72+
>
73+
<path
74+
fillRule="evenodd"
75+
d="M12 2C6.486 2 2 5.677 2 10.2c0 2.933 1.904 5.41 4.666 6.82-.193.86-.707 3.088-.73 3.266-.036.268.127.517.364.593.085.028.174.041.262.041.147 0 .291-.054.404-.155.16-.143 2.398-1.647 3.484-2.384.503.07 1.026.118 1.55.118 5.514 0 10-3.675 10-8.2C22 5.677 17.514 2 12 2z"
76+
clipRule="evenodd"
77+
/>
78+
</svg>
79+
</Link>
80+
</div>
3681

37-
{/* Right side - Social links */}
38-
<div className="flex items-center gap-4">
39-
<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
40-
<Link
41-
href="https://github.com/lazy-dinosaur"
42-
target="_blank"
43-
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
44-
>
45-
<FaGithub size={16} />
46-
</Link>
47-
</motion.div>
82+
{/* 저작권 정보 */}
83+
{/* <div className="text-xs text-muted-foreground text-center"> */}
84+
{/* Copyright © {new Date().getFullYear()} by Hyeongseok Woo */}
85+
{/* </div> */}
86+
{/* <div className="text-xs text-muted-foreground text-center mt-1"> */}
87+
{/* Built with Next.js, TypeScript, and Tailwind CSS */}
88+
{/* </div> */}
89+
</motion.div>
90+
)}
91+
<motion.footer
92+
onViewportEnter={() => setFooterVisible(true)}
93+
onViewportLeave={() => setFooterVisible(false)}
94+
className="w-full border-border/40 bg-background/50 backdrop-blur-sm py-6 md:py-8 mt-10"
95+
>
96+
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
97+
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
98+
{/* Left side - Nav links */}
99+
<div className="flex flex-wrap justify-center md:justify-start gap-6">
100+
<Link
101+
href="/"
102+
className="text-sm text-muted-foreground hover:text-primary transition-colors"
103+
>
104+
Home
105+
</Link>
106+
<Link
107+
href="/projects"
108+
className="text-sm text-muted-foreground hover:text-primary transition-colors"
109+
>
110+
Portfolio
111+
</Link>
112+
<Link
113+
href="https://github.com/lazy-dinosaur"
114+
target="_blank"
115+
className="text-sm text-muted-foreground hover:text-primary transition-colors"
116+
>
117+
GitHub
118+
</Link>
119+
</div>
48120

49-
<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
50-
<Link
51-
href="mailto:[email protected]"
52-
target="_blank"
53-
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
54-
>
55-
<FaEnvelope size={16} />
56-
</Link>
57-
</motion.div>
121+
{/* Right side - Social links */}
122+
<div className="flex items-center gap-4">
123+
<motion.div
124+
whileHover={{ scale: 1.1 }}
125+
whileTap={{ scale: 0.95 }}
126+
>
127+
<Link
128+
href="https://github.com/lazy-dinosaur"
129+
target="_blank"
130+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
131+
>
132+
<FaGithub size={16} />
133+
</Link>
134+
</motion.div>
58135

59-
<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
60-
<Link
61-
href="https://open.kakao.com/o/sdG4BPjh"
62-
target="_blank"
63-
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
64-
>
65-
<RiKakaoTalkFill size={18} />
66-
</Link>
67-
</motion.div>
68-
</div>
69-
</div>
136+
<motion.div
137+
whileHover={{ scale: 1.1 }}
138+
whileTap={{ scale: 0.95 }}
139+
>
140+
<Link
141+
href="mailto:[email protected]"
142+
target="_blank"
143+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
144+
>
145+
<FaEnvelope size={16} />
146+
</Link>
147+
</motion.div>
70148

71-
<div className="mt-6 pt-4 border-t border-border/20 flex flex-col md:flex-row justify-between items-center">
72-
<div className="text-xs text-muted-foreground">
73-
Copyright © {currentYear} by Hyeongseok Woo. All rights reserved.
74-
</div>
75-
<div className="text-xs text-muted-foreground mt-2 md:mt-0">
76-
Built with Next.js, TypeScript, and Tailwind CSS
77-
</div>
78-
</div>
79-
</div>
80-
</footer>
81-
);
149+
<motion.div
150+
whileHover={{ scale: 1.1 }}
151+
whileTap={{ scale: 0.95 }}
152+
>
153+
<Link
154+
href="https://open.kakao.com/o/sdG4BPjh"
155+
target="_blank"
156+
className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
157+
>
158+
<RiKakaoTalkFill size={18} />
159+
</Link>
160+
</motion.div>
161+
</div>
162+
</div>
163+
164+
<div className="mt-6 pt-4 border-t border-border/20 flex flex-col md:flex-row justify-between items-center">
165+
<div className="text-xs text-muted-foreground">
166+
Copyright © {currentYear} by Hyeongseok Woo. All rights reserved.
167+
</div>
168+
<div className="text-xs text-muted-foreground mt-2 md:mt-0">
169+
Built with Next.js, TypeScript, and Tailwind CSS
170+
</div>
171+
</div>
172+
</div>
173+
</motion.footer>
174+
</>
175+
);
82176
}

0 commit comments

Comments
 (0)