Skip to content

Commit 53d55ae

Browse files
yejinleeeyejinleee
committed
feat: 이미지개선, 후원사로고변경, 29기링크변경
1 parent bb555b5 commit 53d55ae

15 files changed

Lines changed: 137 additions & 80 deletions

File tree

‎components/common/Footer/index.tsx‎

Lines changed: 130 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,198 @@
1-
import Breakpoints from 'constants/breakpoints';
21
import Yapp from 'constants/yapp';
32
import { YappLogo } from 'public/assets/icons';
43
import React, { ReactElement } from 'react';
54
import styled from 'styled-components';
65
import media from 'styles/media';
76

8-
const link = [
7+
const links = [
98
{ name: '카카오톡 공식채널', href: Yapp.YAPP_KAKAO },
109
{ name: '인스타그램', href: Yapp.YAPP_INSTAGRAM },
1110
{ name: '깃허브', href: Yapp.YAPP_GITHUB },
12-
];
13-
14-
const link2 = [
1511
{ name: '미디엄', href: Yapp.YAPP_MEDIUM },
1612
{ name: '링크드인', href: Yapp.YAPP_LINKEDIN },
13+
{ name: '스레드', href: Yapp.YAPP_THREADS },
1714
];
1815

1916
function Footer(): ReactElement {
2017
return (
2118
<FooterBlock>
2219
<FooterInner>
23-
<Logo />
24-
<YappInfo>
25-
<ul>
26-
{link.map(({ name, href }, idx) => (
27-
<li key={name}>
28-
<YappInfoItem
29-
href={href}
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
{name}
34-
</YappInfoItem>
35-
{idx !== link.length - 1 && <Divider />}
36-
</li>
37-
))}
38-
</ul>
39-
<Divider className="not-in-mobile" />
40-
<ul>
41-
{link2.map(({ name, href }, idx) => (
42-
<li key={name}>
43-
<YappInfoItem
44-
href={href}
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
{name}
49-
</YappInfoItem>
50-
{idx !== link2.length - 1 && <Divider />}
51-
</li>
52-
))}
53-
</ul>
54-
</YappInfo>
55-
<Copyright>ⓒ 2025 YAPP. All Rights Reserved</Copyright>
20+
<LeftColumn>
21+
<TopRow>
22+
<Logo />
23+
<Links>
24+
{links.map(({ name, href }, idx) => (
25+
<React.Fragment key={name}>
26+
<LinkItem>
27+
<LinkAnchor
28+
href={href}
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
{name}
33+
</LinkAnchor>
34+
{idx !== links.length - 1 && (
35+
<Divider $hideOnMobile={idx === 2} />
36+
)}
37+
</LinkItem>
38+
{idx === 2 && <MobileBreak />}
39+
</React.Fragment>
40+
))}
41+
</Links>
42+
</TopRow>
43+
<BusinessInfo>
44+
<p>고유번호: 133-82-75281</p>
45+
<p>주소: 서울특별시 마포구 와우산로 105, 5층-220A호</p>
46+
<p>이메일: support@yapp.co.kr</p>
47+
</BusinessInfo>
48+
</LeftColumn>
49+
<Copyright>ⓒ 2026 YAPP. All Rights Reserved</Copyright>
5650
</FooterInner>
5751
</FooterBlock>
5852
);
5953
}
6054

61-
const FooterBlock = styled.div`
62-
width: 100%;
63-
height: 162px;
64-
55+
const FooterBlock = styled.footer`
56+
width: auto;
6557
background-color: ${({ theme }) => theme.palette.black_5};
66-
color: ${({ theme }) => theme.palette.white};
58+
padding: 24px 100px;
6759
6860
${media.mobile} {
69-
height: 195px;
70-
min-width: 100vw;
71-
}
72-
`;
73-
74-
const Logo = styled(YappLogo)`
75-
path {
76-
fill: ${({ theme }) => theme.palette.black};
61+
padding: 24px;
7762
}
7863
`;
7964

8065
const FooterInner = styled.div`
8166
width: 100%;
8267
display: flex;
83-
flex-direction: column;
84-
align-items: center;
68+
justify-content: space-between;
69+
align-items: flex-end;
8570
gap: 20px;
86-
padding: 24px 0;
8771
8872
${media.mobile} {
89-
padding: 24px;
73+
flex-direction: column;
9074
align-items: flex-start;
75+
gap: 10px;
9176
}
9277
`;
9378

94-
const YappInfo = styled.div`
79+
const LeftColumn = styled.div`
9580
display: flex;
96-
align-items: center;
97-
flex-direction: row;
81+
flex-direction: column;
82+
gap: 24px;
9883
99-
& ul {
100-
display: flex;
101-
margin: 0;
84+
${media.mobile} {
85+
width: 100%;
86+
gap: 20px;
10287
}
88+
`;
10389

104-
& li {
105-
display: flex;
106-
list-style: none;
107-
align-items: center;
108-
}
90+
const TopRow = styled.div`
91+
display: flex;
92+
align-items: center;
93+
gap: 32px;
10994
11095
${media.mobile} {
111-
gap: 15px;
11296
flex-direction: column;
11397
align-items: flex-start;
98+
gap: 20px;
11499
}
115100
`;
116101

117-
const YappInfoItem = styled.a`
102+
const Logo = styled(YappLogo)`
103+
width: 20px;
104+
height: 27px;
105+
flex-shrink: 0;
106+
107+
path {
108+
fill: ${({ theme }) => theme.palette.black_100};
109+
}
110+
`;
111+
112+
const Links = styled.ul`
113+
display: flex;
114+
flex-wrap: wrap;
115+
align-items: center;
116+
margin: 0;
117+
padding: 0;
118+
list-style: none;
119+
`;
120+
121+
const LinkItem = styled.li`
122+
display: flex;
123+
align-items: center;
124+
`;
125+
126+
const LinkAnchor = styled.a`
118127
white-space: nowrap;
119128
color: ${({ theme }) => theme.palette.black_100};
120129
cursor: pointer;
121-
${({ theme }) => theme.textStyleV2.fix.font_15}
130+
font-size: 15px;
131+
font-weight: 500;
132+
letter-spacing: -0.3px;
133+
line-height: 24px;
134+
135+
${media.mobile} {
136+
font-size: 14px;
137+
letter-spacing: -0.28px;
138+
line-height: 22.4px;
139+
}
122140
`;
123141

124-
const Divider = styled.div`
142+
const Divider = styled.div<{ $hideOnMobile?: boolean }>`
125143
width: 1px;
126144
height: 14px;
127145
background: ${({ theme }) => theme.palette.black_20};
128146
margin: 0 13px;
129147
130148
${media.mobile} {
131-
&.not-in-mobile {
132-
display: none;
133-
}
149+
margin: 0 12px;
150+
display: ${({ $hideOnMobile }) => ($hideOnMobile ? 'none' : 'block')};
151+
}
152+
`;
153+
154+
const MobileBreak = styled.div`
155+
display: none;
156+
157+
${media.mobile} {
158+
display: block;
159+
flex-basis: 100%;
160+
width: 100%;
161+
height: 0;
162+
}
163+
`;
164+
165+
const BusinessInfo = styled.div`
166+
display: flex;
167+
flex-direction: column;
168+
color: ${({ theme }) => theme.palette.black_60};
169+
font-size: 16px;
170+
font-weight: 500;
171+
letter-spacing: -0.28px;
172+
line-height: 24px;
173+
174+
& p {
175+
margin: 0;
176+
}
177+
178+
${media.mobile} {
179+
font-size: 14px;
180+
line-height: 20px;
134181
}
135182
`;
136183

137184
const Copyright = styled.div`
138185
color: ${({ theme }) => theme.palette.black_40};
139-
${({ theme }) => theme.textStyleV2.fix.font_12}
186+
font-size: 14px;
187+
font-weight: 500;
188+
letter-spacing: -0.28px;
189+
line-height: 22.4px;
190+
191+
${media.mobile} {
192+
font-size: 12px;
193+
letter-spacing: -0.24px;
194+
line-height: 19.2px;
195+
}
140196
`;
141197

142198
export default Footer;

‎components/home/IntroSection/Banner28th.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ const BannerBackgroundInner = styled.div`
6868
background-size: cover;
6969
background-repeat: no-repeat;
7070
background-position: center center;
71-
background-image: url('/assets/images/28th/banner_home_pc.png');
71+
background-image: url('/assets/images/28th/banner_home_pc.webp');
7272
7373
${media.tablet} {
74-
background-image: url('/assets/images/28th/banner_home_tablet.png');
74+
background-image: url('/assets/images/28th/banner_home_tablet.webp');
7575
}
7676
7777
${media.mobile} {

‎constants/yapp.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Yapp = {
1111
YAPP_GITHUB: 'https://github.com/YAPP-Github',
1212
YAPP_MEDIUM: 'https://medium.com/@about.yapp',
1313
YAPP_LINKEDIN: 'https://www.linkedin.com/company/yappu/',
14+
YAPP_THREADS: 'https://www.threads.com/@about.yapp',
1415

1516
// 공고 링크
1617
YAPP_RECRUIT_ALL: 'https://yapp-recruit.career.greetinghr.com/ko/apply',
@@ -31,6 +32,6 @@ const Yapp = {
3132
PREVIOUS_GENERATION_RECRUIT_LINK:
3233
'https://docs.google.com/forms/d/e/1FAIpQLSeAtEn6VTKxoWlzkYv_Sp_JHrzILJCl6l2tT4ccWfhq-UuEbg/viewform',
3334
NEXT_GENERATION_RECRUIT_LINK:
34-
'https://docs.google.com/forms/d/e/1FAIpQLSeAtEn6VTKxoWlzkYv_Sp_JHrzILJCl6l2tT4ccWfhq-UuEbg/viewform',
35+
'https://docs.google.com/forms/d/e/1FAIpQLSdR_3RMidWSG47YeM5kVMYGGdAIBYfNLHB8HpEkaBPvS4o-6A/viewform?usp=dialog',
3536
};
3637
export default Yapp;

‎pages/_document.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,17 @@ export default class MyDocument extends Document {
5252
<link
5353
rel="preload"
5454
as="image"
55-
href="/assets/images/28th/banner_home_pc.png"
55+
href="/assets/images/28th/banner_home_pc.webp"
5656
/>
5757
<link
5858
rel="preload"
5959
as="image"
60-
href="/assets/images/28th/banner_home_tablet.png"
60+
href="/assets/images/28th/banner_home_tablet.webp"
6161
/>
6262
<link
6363
rel="preload"
6464
as="image"
65-
href="/assets/images/28th/banner_home_mobile.png"
65+
href="/assets/images/28th/banner_home_mobile.webp"
6666
/>
6767
</Head>
6868
<body>

‎public/assets/images/28th/banner_home_pc.png‎

-349 KB
Binary file not shown.

‎public/assets/images/28th/banner_home_pc.webp‎

946 KB
Loading

‎public/assets/images/28th/banner_home_tablet.png‎

-450 KB
Binary file not shown.

‎public/assets/images/28th/banner_home_tablet.webp‎

1.26 MB
Loading

‎public/assets/images/28th/news_card.png‎

-66.2 KB
Binary file not shown.

‎public/assets/images/28th/sponsor_1.png‎

-14.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)