Skip to content

Commit 4ff40fa

Browse files
authored
Merge pull request #352 from Nexters/fix/qa-2025-12-09
Fix/qa 2025 12 09
2 parents 471f272 + 4dcb1e7 commit 4ff40fa

File tree

24 files changed

+551
-383
lines changed

24 files changed

+551
-383
lines changed

.pnp.cjs

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

apps/profile/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@emotion/react": "^11.11.3",
2020
"@emotion/styled": "^11.11.0",
2121
"date-fns": "^3.6.0",
22+
"qrcode.react": "^3.1.0",
2223
"react": "^18.2.0",
2324
"react-dom": "^18.2.0",
2425
"react-helmet-async": "^2.0.5",

apps/profile/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
88
import { HelmetProvider } from 'react-helmet-async';
99

1010
import ProfilePage from './pages/ProfilePage';
11-
import NotFound from './components/NotFound';
11+
import NotFound from './components/Notfound';
1212
import { ProfilePastShowsPage } from './pages/ProfilePastShowsPage';
1313
import { ProfileVideosPage } from './pages/ProfileVideosPage';
1414
import { ProfileLinkPage } from './pages/ProfileLinkPage';

apps/profile/src/components/Layout/Layout.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Container = styled.div`
1010

1111
const ContentWrapper = styled.div`
1212
width: 100%;
13-
max-width: 480px;
13+
max-width: 680px;
1414
min-height: 100vh;
1515
background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
1616
position: relative;

apps/profile/src/components/NotFound.tsx

Lines changed: 0 additions & 165 deletions
This file was deleted.
Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { mq_lg } from '@boolti/ui';
2+
import styled from '@emotion/styled';
3+
4+
const Header = styled.div`
5+
display: flex;
6+
align-items: center;
7+
padding: 0 20px;
8+
color: ${({ theme }) => theme.palette.grey.g10};
9+
10+
${mq_lg} {
11+
height: 60px;
12+
padding: 0;
13+
position: relative;
14+
background-color: transparent;
15+
}
16+
`;
17+
18+
const CoverSection = styled.div<{ isCover: boolean }>`
19+
position: relative;
20+
width: 100%;
21+
height: 0;
22+
padding-top: 100%;
23+
overflow: hidden;
24+
border-radius: ${({ isCover }) => (isCover ? '20px 20px 0 0' : '0')};
25+
:after {
26+
content: '';
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
width: 100%;
31+
height: 100%;
32+
background: linear-gradient(to bottom, rgba(18, 19, 24, 0.2) 0%, rgba(18, 19, 24, 1) 100%);
33+
}
34+
`;
35+
36+
const CoverImage = styled.img`
37+
width: 100%;
38+
height: 100%;
39+
object-fit: cover;
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
`;
44+
45+
const CoverOverlay = styled.div`
46+
position: absolute;
47+
bottom: 0;
48+
left: 0;
49+
right: 0;
50+
z-index: 1;
51+
padding: 0 20px;
52+
display: flex;
53+
flex-direction: column;
54+
`;
55+
56+
const ProfileInfo = styled.div`
57+
display: flex;
58+
flex-direction: column;
59+
`;
60+
61+
const Nickname = styled.h1`
62+
${({ theme }) => theme.typo.point.p3};
63+
font-weight: bold;
64+
color: ${({ theme }) => theme.palette.grey.g10};
65+
`;
66+
67+
const UserName = styled.h1`
68+
${({ theme }) => theme.typo.b1};
69+
color: ${({ theme }) => theme.palette.grey.g50};
70+
margin: 0;
71+
`;
72+
73+
const ModalOverlay = styled.div`
74+
position: fixed;
75+
top: 0;
76+
left: 0;
77+
right: 0;
78+
bottom: 0;
79+
background-color: rgba(0, 0, 0, 0.7);
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
z-index: 1000;
84+
padding: 20px;
85+
`;
86+
87+
const ModalContent = styled.div`
88+
background-color: white;
89+
border-radius: 20px;
90+
padding: 40px 24px 24px;
91+
max-width: 450px;
92+
width: 100%;
93+
display: flex;
94+
flex-direction: column;
95+
justify-content: space-between;
96+
min-height: 168px;
97+
`;
98+
99+
const ModalText = styled.p`
100+
${({ theme }) => theme.typo.b3};
101+
color: '#282B33';
102+
text-align: left;
103+
margin: 0;
104+
`;
105+
106+
const ModalButton = styled.a`
107+
width: auto;
108+
height: 48px;
109+
padding: 0 24px;
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
background-color: #ff5623;
114+
color: white;
115+
text-decoration: none;
116+
border-radius: 8px;
117+
${({ theme }) => theme.typo.sh1};
118+
font-weight: 600;
119+
cursor: pointer;
120+
transition: background-color 0.2s;
121+
align-self: flex-end;
122+
`;
123+
124+
export default {
125+
Header,
126+
CoverSection,
127+
CoverImage,
128+
CoverOverlay,
129+
ProfileInfo,
130+
Nickname,
131+
UserName,
132+
ModalOverlay,
133+
ModalContent,
134+
ModalText,
135+
ModalButton,
136+
};
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useState } from 'react';
2+
import Layout from '~/components/Layout';
3+
import { EXTERNAL_DOMAIN } from '~/constants/external';
4+
5+
import Styled from './Notfound.styles';
6+
7+
const NotFound = () => {
8+
const [showModal, setShowModal] = useState(true);
9+
10+
return (
11+
<>
12+
<Layout>
13+
<Styled.Header />
14+
<Styled.CoverSection isCover={false}>
15+
<Styled.CoverImage
16+
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgQChENDRAPDQ8QDQ0NEBANDQ8NDQ8PFBEWFhUdExMZHCggGBolGxUTITEhJSkrLi42Fx85ODMsNygtLisBCgoKDg0OFxAQFS4dICU3NSsrLS0rMC0rLSstKzctLSs1Ky03KystNS0rKy0tLS0rKysrKzc3LS03KysrKysrN//AABEIAOAA4QMBIgACEQEDEQH/xAAaAAEBAQADAQAAAAAAAAAAAAAAAQUCBAYD/8QAMRABAAIAAwYCCQUBAQAAAAAAAAECAwQRBRIhMUFRMnEiYXKRkqGxweEzQlKB0SMU/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAEDAgQF/8QAHhEBAQEBAAIDAQEAAAAAAAAAAAECEQMxIUFREhP/2gAMAwEAAhEDEQA/APVgr6L5qCoKKIIoAAAAAAAAAAAAAIKAgoCCgIKAgoCKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAKogCiKAAIAAAAAAAAAAAACAqiAKIAogAqAgAKAAKigACAAAAA5Uw72nSsTPlGr71yGYnpEecwlsiyWusO1Oz8x2ifK0PhiYOLXxVmP64e87DlcAFQABABQAAAAAAAQAFAAFRQABAACIno0crs+OeJ8P8Arns7KxEb9uc8vVDustb+o1zj7qVrERpEREdo4KDNqAA6eZyFLcaejPb9s/4y71tE6TGkw9A62dy0XrrHijl6/U0zv9Z6x+McBqxQAUAAAAAAAEABQABUUAAQfbJ4W/ixHTnPlD4tDZFeNreUOdXkdZna0QGD0AAAAAAMjaWFu4uscrcf76uq1Nq1/wCcT2t9YZbfN7GG5yoA6cgAAAAAAAAAAACooAAg09k+C3tR9GY72yr6XmveNfc536d49tMBg3AAAAAAdXaf6M+1VkNLa1/RrX17zNbY9MN+0AduQAAAAAAAQAFAAFRQABBywsSa3i0c4nVxBW/h3rasWjlMauTHyWamk6TxrPylr1tExrE6xPWGGs8b511QHLoAAJmIjWeEDLz+c3vQp4es9/wsnXOtcdfNY2/iTbpyjyfIG7BAFAAAAAAAAQAFAAFRQABAAB9cDMYlJ9GeHWJ5S+Qi9auFtHCnxa1n3w7FcfBnlavvhhI5uI7nkrfnGwo52r8UPhi5/AjlO9Pq/wBY6p/nC+SuxmM5iX4eGvaPu64O5OOLegCogAoAAAAAAAIACgACooAAgPtl8tiXnhwjrM8mngZPCpx03p7z9nN1I7zm1mYWUxrcq6R3nhDt4ezP5W+GPu0Bnd1pMR1a7Py8dJnzmXOMnl/4R833HPa6/mfj4/8Ajy/8I+bhbIZeekx5TLsh2n8z8Z99mR+23xQ6uLk8evONY714todTdc3EeeG1j5TCvzjSe8cJ/LMzOVxKc+Ne8fdpNSs9YsdcB05AAAAAAABAAUAAVFAdvJZOb+lbhX52/Djkctv21nwxz9c9mxEQz3rnxHeM9+aViIjSOER0gBk2AAAAAAAACYjTSeIAy89kt306eHrHb8Oi9GyNoZXdner4Z+Utca+qy1n7jpgNGYAAAAAIACgADlSk2tFY5zOji0NlYWtpvPThHmlvIsna7+Dh1rSKx0+cuYPO9AAAAAAAAAAAACuOJStqzWeUxo5Ajz+PhTS81np84cGntbC9GLx04T5dGY3zexhqcoA6QAAAEABQABt5Gm7g19cb3vYkRxehrGkRHaIhn5Gnj9qAyagAAAAAAAAAAAKAI4Y9N7DtXvE+9596N5/MV0xLR2tP1aeNn5HABqzAAABAAUABywvHX2o+r0Dz+F46+1X6vQMvI18f2AM2gAAAAAAAAAAACgCDCzv69/a+zdYee/Xv5/Z34/bjfp8AGzIAAAB//9k="
17+
alt="기본 프로필"
18+
/>
19+
<Styled.CoverOverlay>
20+
<Styled.ProfileInfo>
21+
<Styled.Nickname>-</Styled.Nickname>
22+
</Styled.ProfileInfo>
23+
</Styled.CoverOverlay>
24+
</Styled.CoverSection>
25+
26+
{showModal && (
27+
<Styled.ModalOverlay onClick={() => setShowModal(false)}>
28+
<Styled.ModalContent onClick={(e) => e.stopPropagation()}>
29+
<Styled.ModalText>존재하지 않는 프로필입니다.</Styled.ModalText>
30+
<Styled.ModalButton href={EXTERNAL_DOMAIN.SHOW_MANAGER}>
31+
불티 홈 바로 가기
32+
</Styled.ModalButton>
33+
</Styled.ModalContent>
34+
</Styled.ModalOverlay>
35+
)}
36+
</Layout>
37+
</>
38+
);
39+
};
40+
41+
export default NotFound;

0 commit comments

Comments
 (0)