Merge pull request #296 from sharemindteam/feat/edit_background_290

[Feature] 셰어마인드 어플리케이션 배경 이미지 추가

src/App.Layout.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import backgroundImage from 'assets/background/background.png';
+import backgroundLogoImage from 'assets/background/background_logo.png';
+import backgroundTextImage from 'assets/background/background_text.png';
+import backgroundIconsImage from 'assets/background/background_sub_icons.png';
+import backgroundButtonImage from 'assets/background/background_button.png';
+
+import styled from 'styled-components';
+import { Green } from 'styles/color';
+import { Flex } from 'components/Common/Flex';
+import { useNavigate } from 'react-router-dom';
+//
+//
+//
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+//
+//
+//
+
+const BACKGROUND_LEFT_RIGHT_RATIO = 3;
+
+const GROUND_HEIGHT = '24rem';
+
+const LAYOUT_STYLES = {
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  backgroundImage: `url(${backgroundImage})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+};
+
+const LeftSection = styled.div`
+  position: relative;
+  flex: ${BACKGROUND_LEFT_RIGHT_RATIO};
+  display: flex;
+  justify-content: center;
+`;
+
+const RightSection = styled.div`
+  position: relative;
+  flex: 1;
+  flex-direction: column;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 40rem;
+  padding: 0;
+
+  @media (min-width: 768px) {
+    padding: 0 2rem;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  max-width: 40rem;
+  padding: 0;
+
+  @media (min-width: 768px) {
+    padding: 0 2rem;
+  }
+`;
+
+const StyledImg = styled.img`
+  max-width: 100%;
+  height: auto;
+`;
+
+const BottomGreenBox = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: ${GROUND_HEIGHT};
+  bottom: 0;
+  background-color: ${Green};
+`;
+
+//
+//
+//
+
+const AppLayout = ({ children }: AppLayoutProps) => {
+  const navigate = useNavigate();
+
+  //
+  //
+  //
+
+  return (
+    <div style={LAYOUT_STYLES}>
+      <LeftSection>
+        <IconWrapper>
+          <Flex direction="column" gap="1rem" style={{ flex: 1 }}>
+            <StyledImg src={backgroundTextImage} alt="bg-text" />
+            <StyledImg src={backgroundLogoImage} alt="bg-logo" />
+          </Flex>
+          <StyledImg
+            src={backgroundIconsImage}
+            alt="bg-icons"
+            style={{ marginBottom: GROUND_HEIGHT }}
+          />
+        </IconWrapper>
+        <BottomGreenBox>
+          <ButtonWrapper>
+            <StyledImg
+              src={backgroundButtonImage}
+              alt="bg-button"
+              onClick={() => {
+                navigate('/service');
+              }}
+            />
+          </ButtonWrapper>
+        </BottomGreenBox>
+      </LeftSection>
+      <div style={{ flex: 1 }}>{children}</div>
+      <RightSection>
+        <BottomGreenBox />
+      </RightSection>
+    </div>
+  );
+};
+
+export default AppLayout;

src/components/Common/AppContainer.tsx

@@ -66,4 +66,5 @@ const StyledApp = styled.div<{ $isGray: boolean; $scrollLock: boolean }>`
   }
   background-color: ${(props) => (props.$isGray ? Grey6 : White)};
   overflow-y: ${(props) => (props.$scrollLock ? 'hidden' : 'scroll')};
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
 `;

src/components/Common/Flex.tsx

@@ -0,0 +1,71 @@
+import styled, { CSSProperties } from 'styled-components';
+
+//
+//
+//
+
+interface FlexProps extends FlexBaseProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface FlexBaseProps {
+  height?: string;
+  width?: string;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  justify?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  align?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+  gap?: number | string;
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+}
+
+//
+//
+//
+
+export const Flex = ({
+  children,
+  width = 'auto',
+  height = 'auto',
+  direction = 'row',
+  justify = 'center',
+  align = 'center',
+  gap = 0,
+  wrap = 'nowrap',
+  className,
+  style,
+}: FlexProps) => {
+  return (
+    <FlexBase
+      height={height}
+      direction={direction}
+      justify={justify}
+      align={align}
+      gap={gap}
+      width={width}
+      wrap={wrap}
+      className={className}
+      style={style}
+    >
+      {children}
+    </FlexBase>
+  );
+};
+
+const FlexBase = styled.div<FlexBaseProps>`
+  display: flex;
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
+  flex-direction: ${({ direction }) => direction};
+  justify-content: ${({ justify }) => justify};
+  align-items: ${({ align }) => align};
+  gap: ${({ gap }) => `${gap}`};
+  flex-wrap: ${({ wrap }) => wrap};
+`;

src/index.tsx

@@ -7,6 +7,7 @@ import { RecoilRoot } from 'recoil';
 import 'styles/font.css';
 import axios from 'axios';
 import { StompProvider } from 'contexts/StompContext';
+import AppLayout from 'App.Layout';
 axios.defaults.withCredentials = true;
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
@@ -16,9 +17,11 @@ root.render(
     <RecoilRoot>
       <GlobalStyle />
       <StompProvider>
-        <AppContainer>
-          <App />
-        </AppContainer>
+        <AppLayout>
+          <AppContainer>
+            <App />
+          </AppContainer>
+        </AppLayout>
       </StompProvider>
     </RecoilRoot>
   </BrowserRouter>,

src/styles/GlobalStyle.ts

@@ -1,5 +1,4 @@
 import { createGlobalStyle } from 'styled-components';
-import { isMobile } from 'react-device-detect';
 import { reset } from 'styled-reset';
 
 //
@@ -13,15 +12,14 @@ export const GlobalStyle = createGlobalStyle`
     box-sizing: border-box;
   }
   body {
-    display: flex;
+    
     -webkit-box-align: center;
     font-family: 'Pretendard';
     align-items: center;
-    -webkit-box-pack: center;
-    justify-content: center;
+    
     margin: 0;
     padding: 0;
-    background-color: ${isMobile ? '#ffffff' : '#24a78b'};
+    background-color: #ffffff;
     -ms-overflow-style: none;
     -webkit-tap-highlight-color : rgba(0,0,0,0);
   }