feat: 피그마 바뀐 스펙 반영 (#37)

* feat: 바뀐 스펙 반영 * feat: 홈 불티 로고 적용 * chore: 푸터 텍스트 적용
Nexters · Feb 11, 2024 · 8338240 · 8338240
1 parent c93acca
commit 8338240
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 13 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/admin/src/components/AccountInfo/AccountInfo.styles.ts b/apps/admin/src/components/AccountInfo/AccountInfo.styles.ts
@@ -6,7 +6,7 @@ const Container = styled.div`
   align-items: start;
   justify-content: center;
   border-radius: 8px;
-  background-color: ${({ theme }) => theme.palette.grey.g10};
+  background-color: ${({ theme }) => theme.palette.grey.g00};
   padding: 28px 32px;
 `;
 

diff --git a/apps/admin/src/components/Layout/Layout.styles.ts b/apps/admin/src/components/Layout/Layout.styles.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 const Layout = styled.div`
-  background-color: ${({ theme }) => theme.palette.grey.g00};
+  background-color: ${({ theme }) => theme.palette.grey.w};
 `;
 
 const HeaderContainer = styled.div`

diff --git a/apps/admin/src/components/SettlementDialogContent/index.tsx b/apps/admin/src/components/SettlementDialogContent/index.tsx
@@ -9,7 +9,7 @@ import Styled from './SettlementDialogContent.styles';
 
 const titles = [
   '은행을 선택해 주세요.',
-  '계좌번호와 계좌주를 입력해 주세요.',
+  '계좌번호와 예금주를 입력해 주세요.',
   '입력하신 계좌 정보를 다시 한 번 확인해주세요.',
 ];
 
@@ -75,9 +75,9 @@ const SettlementDialogContent = ({ onClose }: Props) => {
             />
           </Styled.InputContainer>
           <Styled.InputContainer>
-            <Styled.InputLabel>계좌주</Styled.InputLabel>
+            <Styled.InputLabel>예금주</Styled.InputLabel>
             <TextField
-              placeholder="계좌주 이름을 입력해 주세요"
+              placeholder="예금주 이름을 입력해 주세요"
               size="small"
               inputType="text"
               value={accountHolder}
@@ -105,7 +105,7 @@ const SettlementDialogContent = ({ onClose }: Props) => {
             <Styled.ConfrimTextValue>{accountNumber}</Styled.ConfrimTextValue>
           </Styled.ConfrimTextContainer>
           <Styled.ConfrimTextContainer>
-            <Styled.ConfirmTextLabel>계좌주</Styled.ConfirmTextLabel>
+            <Styled.ConfirmTextLabel>예금주</Styled.ConfirmTextLabel>
             <Styled.ConfrimTextValue>{accountHolder}</Styled.ConfrimTextValue>
           </Styled.ConfrimTextContainer>
         </Styled.ConfirmContainer>

diff --git a/apps/admin/src/components/ShowList/ShowList.styles.ts b/apps/admin/src/components/ShowList/ShowList.styles.ts
@@ -18,9 +18,25 @@ const HeaderText = styled.h2`
   color: ${({ theme }) => theme.palette.grey.g90};
 `;
 
+const TextContainer = styled.div``;
+
+const InfoButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 4px;
+  ${({ theme }) => theme.typo.b1};
+  color: ${({ theme }) => theme.palette.grey.g50};
+  & > svg {
+    margin-left: 4px;
+  }
+`;
+
 export default {
   Container,
   List,
   Header,
   HeaderText,
+  TextContainer,
+  InfoButton,
 };
diff --git a/apps/admin/src/components/ShowList/index.tsx b/apps/admin/src/components/ShowList/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from '@boolti/icon';
+import { ChevronRightIcon, PlusIcon } from '@boolti/icon';
 import { Button } from '@boolti/ui';
 import { useNavigate } from 'react-router-dom';
 
@@ -19,7 +19,13 @@ const ShowList = ({ shows }: Props) => {
   return (
     <Styled.Container>
       <Styled.Header>
-        <Styled.HeaderText>등록한 공연</Styled.HeaderText>
+        <Styled.TextContainer>
+          <Styled.HeaderText>등록한 공연</Styled.HeaderText>
+          <Styled.InfoButton>
+            관객 입장은 어떻게 확인하나요?
+            <ChevronRightIcon />
+          </Styled.InfoButton>
+        </Styled.TextContainer>
         <Button
           type="button"
           colorTheme="primary"

diff --git a/apps/admin/src/pages/HomePage/HomePage.styles.ts b/apps/admin/src/pages/HomePage/HomePage.styles.ts
@@ -3,9 +3,8 @@ import { Link } from 'react-router-dom';
 
 const Logo = styled.div`
   display: inline-flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  background-color: ${({ theme }) => theme.palette.grey.g40};
   width: 174px;
   height: 44px;
 `;

diff --git a/apps/admin/src/pages/HomePage/HomePage.tsx b/apps/admin/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,5 @@
 import { useLogout } from '@boolti/api';
+import { BooltiLogo } from '@boolti/icon';
 import { Footer, TextButton } from '@boolti/ui';
 import { useNavigate } from 'react-router-dom';
 
@@ -20,7 +21,11 @@ const HomePage = () => {
     <Layout
       header={
         <Header
-          left={<Styled.Logo>Boolti Logo</Styled.Logo>}
+          left={
+            <Styled.Logo>
+              <BooltiLogo />
+            </Styled.Logo>
+          }
           right={
             <TextButton
               onClick={async () => {

diff --git a/packages/icon/src/components/Boolti.tsx b/packages/icon/src/components/Boolti.tsx
@@ -0,0 +1,38 @@
+export const Boolti = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="74" height="28" viewBox="0 0 74 28" fill="none">
+      <path
+        d="M27.9612 12.0124L16.4346 0.599016C16.0484 0.215271 15.5232 0 14.975 0H3.15676C2.60858 0 2.0847 0.215271 1.6972 0.599016L0.604888 1.68072C0.217381 2.06313 0 2.58326 0 3.12612V14.8297C0 15.3725 0.217381 15.8913 0.604888 16.2751L11.8385 27.3996C12.6446 28.1979 13.9516 28.1979 14.7576 27.3996L19.4995 22.7038C18.9878 22.189 18.7097 21.4429 18.8582 20.6313C19.0364 19.6539 19.8668 18.8757 20.8632 18.758C21.6382 18.6658 22.3268 18.9372 22.8156 19.4212H22.821L27.9598 14.3269C28.6079 13.6865 28.6079 12.6529 27.9612 12.0124ZM15.4435 13.6129C15.2383 14.0515 14.9467 14.4098 14.6037 14.6919C14.227 14.9741 13.8152 15.1773 13.3359 15.3017C12.8566 15.4273 12.3421 15.4902 11.794 15.4902H4.82425C3.92232 15.4902 3.19186 14.7668 3.19186 13.8736V4.6504C3.19186 3.75722 3.92232 3.03386 4.82425 3.03386H11.1418C11.69 3.03386 12.2044 3.0967 12.6837 3.1903C13.1631 3.31465 13.5749 3.50318 13.9516 3.75321C14.2945 4.01929 14.5848 4.36292 14.7914 4.7694C14.9966 5.19058 15.0992 5.7067 15.0992 6.33246C15.0992 6.89404 14.9791 7.41015 14.7738 7.86343C14.5335 8.33274 14.1744 8.73922 13.6937 9.06814C13.9678 9.17778 14.2419 9.31684 14.4997 9.47462C14.7401 9.64577 14.9453 9.849 15.1505 10.0843C15.322 10.3344 15.4759 10.6152 15.5961 10.928C15.6987 11.2556 15.75 11.614 15.75 12.0218C15.7514 12.6449 15.6488 13.177 15.4435 13.6129Z"
+        fill="#FF5A14"
+      />
+      <path
+        d="M69.3984 0.849052C69.3984 0.379734 69.7819 0 70.2558 0H72.8266C73.3005 0 73.684 0.379734 73.684 0.849052V26.3126C73.684 26.7819 73.3005 27.1616 72.8266 27.1616H70.2558C69.7819 27.1616 69.3984 26.7819 69.3984 26.3126V0.849052Z"
+        fill="#282B33"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M56.5419 0C56.068 0 55.6846 0.379734 55.6846 0.849052V26.3126C55.6846 26.7819 56.068 27.1616 56.5419 27.1616H59.9701H66.8264C67.3003 27.1616 67.6838 26.7819 67.6838 26.3126V24.6145C67.6838 24.1452 67.3003 23.7654 66.8264 23.7654H59.9701V15.2776H65.9704C66.4443 15.2776 66.8277 14.8979 66.8277 14.4285V12.7304C66.8277 12.2611 66.4443 11.8814 65.9704 11.8814H59.9701V3.39487H66.8264C67.3003 3.39487 67.6838 3.01514 67.6838 2.54582V0.849052C67.6838 0.379734 67.3003 0 66.8264 0H59.9701H56.5419Z"
+        fill="#282B33"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M51.8488 17.4009C52.2187 17.4009 52.5347 17.6335 52.6549 17.9584C52.6886 18.04 52.7062 18.1336 52.7062 18.2392V18.2486V19.936V19.9454C52.7062 19.9988 52.7008 20.0497 52.6913 20.1005C52.6197 20.523 52.2862 20.9415 51.8879 21.0792L44.1081 23.7654H51.8474C52.3214 23.7654 52.7048 24.1452 52.7048 24.6145V26.3126C52.7048 26.7819 52.3214 27.1616 51.8474 27.1616H35.1347C34.7729 27.1616 34.4623 26.9397 34.3368 26.6241C34.2989 26.5386 34.2773 26.4383 34.2773 26.3246V26.3126V24.6279V24.6158C34.2773 24.5543 34.2841 24.4955 34.2962 24.438C34.3773 24.0248 34.7054 23.6197 35.0942 23.486L42.8808 20.7971H35.1347C34.6608 20.7971 34.2773 20.4174 34.2773 19.948V18.2499C34.2773 17.7806 34.6608 17.4009 35.1347 17.4009H51.8488Z"
+        fill="#282B33"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M35.1347 0C34.6608 0 34.2773 0.379734 34.2773 0.849052V10.6098C34.2773 11.0791 34.6608 11.4589 35.1347 11.4589H38.5629H48.4193H51.8474C52.3214 11.4589 52.7048 11.0791 52.7048 10.6098V0.849052C52.7048 0.379734 52.3214 0 51.8474 0H49.2767C48.8027 0 48.4193 0.379734 48.4193 0.849052V3.39487H38.5629V0.849052C38.5629 0.379734 38.1794 0 37.7055 0H35.1347ZM48.4193 6.78974H38.5629V8.06265H48.4193V6.78974Z"
+        fill="#282B33"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.7048 13.5809C52.7048 13.1115 52.3214 12.7318 51.8474 12.7318H35.1347C34.6608 12.7318 34.2773 13.1115 34.2773 13.5809V15.279C34.2773 15.7483 34.6608 16.128 35.1347 16.128H41.135V17.4009H45.8485V16.128H51.8488C52.3227 16.128 52.7062 15.7483 52.7062 15.279V13.5809H52.7048Z"
+        fill="#282B33"
+      />
+    </svg>
+  );
+};
diff --git a/packages/icon/src/components/index.ts b/packages/icon/src/components/index.ts
@@ -4,6 +4,7 @@ import { ArrowRight } from './ArrowRIght';
 import { BNK } from './BNK';
 import { BNP } from './BNP';
 import { BoA } from './BoA';
+import { Boolti } from './Boolti';
 import { Calendar } from './Calendar';
 import { CB } from './CB';
 import { ChevronLeft } from './ChevronLeft';
@@ -56,6 +57,7 @@ export {
   BNK,
   BNP,
   BoA,
+  Boolti as BooltiLogo,
   Calendar as CalendarIcon,
   CB,
   ChevronLeft as ChevronLeftIcon,

diff --git a/packages/ui/src/components/Footer/index.tsx b/packages/ui/src/components/Footer/index.tsx
@@ -11,9 +11,11 @@ const Footer = () => {
             {'불티' + '\n' + 'Copyright ⓒ Boolti. All Rights Reserved'}
           </Styled.BoldTtext>
           <Styled.Text>
-            {'사업자 등록번호 : 120-88-01280 | 대표 : 김혜선 (더미 텍스트)' +
+            {'사업자 등록번호 : 202-43-63442 | 대표 : 김혜선' +
               '\n' +
-              '호스팅 서비스 : 주식회사 비바리퍼블리카 | 통신판매업 신고번호 : 2014-서울강남-03377'}
+              '호스팅 서비스 : 스튜디오 불티 | 제2024-서울00-0000호(더미)' +
+              '\n' +
+              'TEL : 0507-0000-0000(더미) | 이메일 : [email protected]'}
           </Styled.Text>
           <Styled.LinkTextGroup>
             <Styled.Text>