feat: 마이페이지 ui(#52)

src/components/MyPage/BrandView.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 
 import { ReactComponent as AddIcon } from '@/assets/icons/add.svg';
 import { ReactComponent as ArrowRight } from '@/assets/icons/arrowRight.svg';
+import { ReactComponent as CalendarIcon } from '@/assets/icons/calendar.svg';
+import { ReactComponent as InfoIcon } from '@/assets/icons/info.svg';
 import { ReactComponent as BrandLogoImage } from '@/assets/logos/brandLogo.svg';
 import Card from '@/components/MyPage/Card';
 import DateCard from '@/components/MyPage/DateCard';
@@ -61,10 +63,18 @@ export const BrandView = () => {
       </BrandHeader>
       <ContentContainer>
         <TopContent>
-          <BrandTextContainer>
-            <BrandText>브랜드 관리</BrandText>
-          </BrandTextContainer>
-          <BrandMenuContainer></BrandMenuContainer>
+          <BrandContainer>
+            <BrandTextContainer>
+              <BrandText>브랜드 관리</BrandText>
+              <RightIcon>
+                <InfoIcon />
+              </RightIcon>
+            </BrandTextContainer>
+          </BrandContainer>
+
+          <BrandMenuContainer>
+            <CalendarIcon />
+          </BrandMenuContainer>
         </TopContent>
         <CenterContent>
           <RecommendContainer>
@@ -248,16 +258,21 @@ const BrandTextContainer = styled.div`
   gap: 12px;
   display: flex;
 `;
+const BrandContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  display: flex;
+`;
 const BrandText = styled.div`
   text-align: center;
   color: ${({ theme }) => `${theme.color.gray800}`};
   ${({ theme }) => theme.font.desktop.title2};
   word-wrap: break-word;
 `;
 const BrandMenuContainer = styled.div`
-  border-radius: 8px;
-  overflow: hidden;
-  border: 2px #efefef solid;
   justify-content: flex-start;
   align-items: center;
   display: flex;

src/components/MyPage/SettingView.tsx

@@ -1,12 +1,25 @@
 import { styled } from 'styled-components';
 
+import backgroundImg from '@/assets/backgrounds/setting.png';
 export const SettingView = () => {
-  return <StyledContainer>설정어쩌구</StyledContainer>;
+  return (
+    <StyledContainer>
+      <ImageContainer />
+    </StyledContainer>
+  );
 };
 
 const StyledContainer = styled.div`
   width: 100%;
   height: 100%;
   padding: 100px 24px 52px 24px;
-  background-color: aliceblue;
+`;
+
+const ImageContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-image: url(${backgroundImg});
+  background-size: contain;
+  background-position: top;
+  background-repeat: no-repeat;
 `;