feat: profile qa 2차

apps/profile/package.json

@@ -19,6 +19,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "date-fns": "^3.6.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.5",

apps/profile/src/App.tsx

@@ -8,7 +8,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 
 import ProfilePage from './pages/ProfilePage';
-import NotFound from './components/NotFound';
+import NotFound from './components/Notfound';
 import { ProfilePastShowsPage } from './pages/ProfilePastShowsPage';
 import { ProfileVideosPage } from './pages/ProfileVideosPage';
 import { ProfileLinkPage } from './pages/ProfileLinkPage';

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

@@ -10,7 +10,7 @@ const Container = styled.div`
 
 const ContentWrapper = styled.div`
   width: 100%;
-  max-width: 480px;
+  max-width: 680px;
   min-height: 100vh;
   background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
   position: relative;

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

@@ -0,0 +1,136 @@
+import { mq_lg } from '@boolti/ui';
+import styled from '@emotion/styled';
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  color: ${({ theme }) => theme.palette.grey.g10};
+
+  ${mq_lg} {
+    height: 60px;
+    padding: 0;
+    position: relative;
+    background-color: transparent;
+  }
+`;
+
+const CoverSection = styled.div<{ isCover: boolean }>`
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 100%;
+  overflow: hidden;
+  border-radius: ${({ isCover }) => (isCover ? '20px 20px 0 0' : '0')};
+  :after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(18, 19, 24, 0.2) 0%, rgba(18, 19, 24, 1) 100%);
+  }
+`;
+
+const CoverImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const CoverOverlay = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ProfileInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Nickname = styled.h1`
+  ${({ theme }) => theme.typo.point.p3};
+  font-weight: bold;
+  color: ${({ theme }) => theme.palette.grey.g10};
+`;
+
+const UserName = styled.h1`
+  ${({ theme }) => theme.typo.b1};
+  color: ${({ theme }) => theme.palette.grey.g50};
+  margin: 0;
+`;
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+`;
+
+const ModalContent = styled.div`
+  background-color: white;
+  border-radius: 20px;
+  padding: 40px 24px 24px;
+  max-width: 450px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 168px;
+`;
+
+const ModalText = styled.p`
+  ${({ theme }) => theme.typo.b3};
+  color: '#282B33';
+  text-align: left;
+  margin: 0;
+`;
+
+const ModalButton = styled.a`
+  width: auto;
+  height: 48px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ff5623;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  ${({ theme }) => theme.typo.sh1};
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  align-self: flex-end;
+`;
+
+export default {
+  Header,
+  CoverSection,
+  CoverImage,
+  CoverOverlay,
+  ProfileInfo,
+  Nickname,
+  UserName,
+  ModalOverlay,
+  ModalContent,
+  ModalText,
+  ModalButton,
+};

apps/profile/src/components/Notfound/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Layout from '~/components/Layout';
+import { EXTERNAL_DOMAIN } from '~/constants/external';
+
+import Styled from './Notfound.styles';
+
+const NotFound = () => {
+  const [showModal, setShowModal] = useState(true);
+
+  return (
+    <>
+      <Layout>
+        <Styled.Header />
+        <Styled.CoverSection isCover={false}>
+          <Styled.CoverImage
+            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="
+            alt="기본 프로필"
+          />
+          <Styled.CoverOverlay>
+            <Styled.ProfileInfo>
+              <Styled.Nickname>-</Styled.Nickname>
+            </Styled.ProfileInfo>
+          </Styled.CoverOverlay>
+        </Styled.CoverSection>
+
+        {showModal && (
+          <Styled.ModalOverlay onClick={() => setShowModal(false)}>
+            <Styled.ModalContent onClick={(e) => e.stopPropagation()}>
+              <Styled.ModalText>존재하지 않는 프로필입니다.</Styled.ModalText>
+              <Styled.ModalButton href={EXTERNAL_DOMAIN.SHOW_MANAGER}>
+                불티 홈 바로 가기
+              </Styled.ModalButton>
+            </Styled.ModalContent>
+          </Styled.ModalOverlay>
+        )}
+      </Layout>
+    </>
+  );
+};
+
+export default NotFound;