Merge pull request #255 from boostcampwm2023/chore/help-bar

[Chore] 환경설정 대신 도움말로 변경, 홈페이지 배경화면 변경 등
boostcampwm2023 · Dec 11, 2023 · fa91567 · fa91567
2 parents ddcdf8b + 49b289b
commit fa91567
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 24 deletions.
diff --git a/FE/public/homepage.mp4 b/FE/public/homepage.mp4
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -241,7 +241,6 @@ function DiaryModalShapeSelectBox(props) {
     <ShapeSelectBoxWrapper>
       <ShapeSelectTextWrapper>
         <DiaryModalTitle>모양</DiaryModalTitle>
-        <ShapeSelectText>직접 그리기</ShapeSelectText>
       </ShapeSelectTextWrapper>
       <ShapeSelectItemWrapper>
         {shapeList?.map((shape) => (
@@ -251,7 +250,10 @@ function DiaryModalShapeSelectBox(props) {
               setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }));
             }}
           >
-            <div dangerouslySetInnerHTML={{ __html: shape.data }} />
+            <div
+              dangerouslySetInnerHTML={{ __html: shape.data }}
+              style={{ width: "3rem", height: "3rem" }}
+            />
           </ShapeSelectBoxItem>
         ))}
       </ShapeSelectItemWrapper>
@@ -291,12 +293,16 @@ const ShapeSelectItemWrapper = styled.div`
   box-sizing: border-box;
   color: #ffffff;
   outline: none;
+
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 1rem;
+  align-items: center;
+
   overflow: auto;
+  overflow-y: hidden;
   margin-bottom: 1rem;
+
+  gap: 1rem;
 `;
 
 const ShapeSelectBoxItem = styled.div`

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -302,7 +302,6 @@ function DiaryModalShapeSelectBox(props) {
     <ShapeSelectBoxWrapper>
       <ShapeSelectTextWrapper>
         <DiaryModalTitle>모양</DiaryModalTitle>
-        <ShapeSelectText>직접 그리기</ShapeSelectText>
       </ShapeSelectTextWrapper>
       <ShapeSelectItemWrapper>
         {shapeList?.map((shape) => (
@@ -312,7 +311,10 @@ function DiaryModalShapeSelectBox(props) {
               setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }));
             }}
           >
-            <div dangerouslySetInnerHTML={{ __html: shape.data }} />
+            <div
+              dangerouslySetInnerHTML={{ __html: shape.data }}
+              style={{ width: "3rem", height: "3rem" }}
+            />
           </ShapeSelectBoxItem>
         ))}
       </ShapeSelectItemWrapper>
@@ -353,11 +355,12 @@ const ShapeSelectItemWrapper = styled.div`
   color: #ffffff;
   outline: none;
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
-  gap: 1rem;
+  align-items: center;
   overflow: auto;
+  overflow-y: hidden;
   margin-bottom: 1rem;
+  gap: 1rem;
 `;
 
 const ShapeSelectBoxItem = styled.div`

diff --git a/FE/src/components/Header/Header.js b/FE/src/components/Header/Header.js
@@ -81,7 +81,9 @@ const HeaderWrapper = styled.header`
 
 const HeaderLogo = styled.img`
   width: 10rem;
+
   margin-left: 3rem;
+  margin-top: 1rem;
 
   cursor: pointer;
 `;

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -1,3 +1,5 @@
+/* eslint-disable max-len */
+
 import React from "react";
 import styled from "styled-components";
 import { useSetRecoilState } from "recoil";
@@ -103,7 +105,16 @@ function SideBar() {
           >
             별숲 상점
           </SideBarContent>
-          <SideBarContent>환경 설정</SideBarContent>
+          <SideBarContent
+            onClick={() =>
+              window.open(
+                "https://byeolsoop.notion.site/551e1070f73a405badb8aeb178dac192?pvs=4",
+                "_blank",
+              )
+            }
+          >
+            도움말
+          </SideBarContent>
         </SideBarContentWrapper>
         <LogOutButton
           onClick={() => {

diff --git a/FE/src/pages/HomePage.js b/FE/src/pages/HomePage.js
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import { useRecoilValue } from "recoil";
 import headerAtom from "../atoms/headerAtom";
-import homeBackground from "../assets/homeBackground.png";
 import LoginModal from "../components/LoginModal/LoginModal";
 import SignUpModal from "../components/SignUpModal/SignUpModal";
 
@@ -11,25 +10,22 @@ function HomePage() {
 
   return (
     <>
-      <HomePageWrapper />
+      <HomepageBackground autoPlay loop muted>
+        <source src='/homepage.mp4' type='video/mp4' />
+      </HomepageBackground>
 
       {headerState.isLogin ? <LoginModal /> : null}
       {headerState.isSignUp ? <SignUpModal /> : null}
     </>
   );
 }
 
-// TODO: 배경 이미지 제거하고 영상으로 대체할 것
-const HomePageWrapper = styled.div`
-  height: 100vh;
-  background-image: url(${homeBackground});
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
+const HomepageBackground = styled.video`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
 `;
 
 export default HomePage;
diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js
@@ -695,7 +695,7 @@ function Star(props) {
           }
         }}
       >
-        <planeGeometry args={[1.5, 1.5]} />
+        <planeGeometry args={[1.2, 1.2]} />
         <meshBasicMaterial map={texture} transparent />
       </mesh>
       <mesh
@@ -708,7 +708,7 @@ function Star(props) {
         )}
         position={position.map((p) => p * 1.01)}
       >
-        <circleGeometry args={[0.6, 32]} />
+        <circleGeometry args={[0.5, 32]} />
         <primitive object={material} attach='material' />
       </mesh>
     </>