[FE] feat: 메타 데이터 설정 및 OptionSwitch 디자인 수정 (#915)

* design: 모바일 환경에서 스위치 버튼 width 100% 설정 및 Dropdown 오른쪽 정렬 * feat: 메타 데이터 이미지 추가 * feat: 메타 데이터 설정
woowacourse-teams · Oct 23, 2024 · a92b852 · a92b852
1 parent b49f57a
commit a92b852
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 30 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,22 +1,39 @@
 <!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!--font-->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
-
-  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-  as="style" />
-  <link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css" onload="this.onload=null;this.rel='stylesheet'" />
-  <title>REVIEW ME</title>
-</head>
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="REVIEW ME" />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/woowacourse-teams/2024-review-me/c658ad30d8a78f696420778d453a58c1999ee544/frontend/src/assets/metaImage.svg"
+    />
+    <meta property="og:description" content="함께한 동료의 리뷰를 통해 나를 찾아보세요!" />
+    <meta property="og:url" content="https://review-me.page/" />
 
-<body>
-  <div id="root"></div>
-</body>
+    <!--font-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous" />
 
-</html>
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      as="style"
+    />
+    <link
+      rel="preload"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <title>REVIEW ME</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/frontend/src/assets/metaImage.svg b/frontend/src/assets/metaImage.svg
diff --git a/frontend/src/components/common/OptionSwitch/styles.ts b/frontend/src/components/common/OptionSwitch/styles.ts
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-import media from '@/utils/media';
-
 import { OptionSwitchStyleProps } from './index';
 
 export const OptionSwitchContainer = styled.ul`
@@ -10,16 +8,17 @@ export const OptionSwitchContainer = styled.ul`
   display: flex;
   justify-content: space-between;
 
-  width: 15rem;
-  height: 4.5rem;
+  width: 20rem;
+  height: 4.4rem;
   padding: 0.7rem;
 
   background-color: ${({ theme }) => theme.colors.lightGray};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
-  ${media.small} {
-    height: 3.5rem;
-    font-size: 1.2rem;
+  margin-top: 0.9rem;
+
+  @media screen and (max-width: 530px) {
+    width: 100%;
   }
 `;
 
@@ -43,6 +42,6 @@ export const CheckboxWrapper = styled.li<OptionSwitchStyleProps>`
 
 export const CheckboxButton = styled.button<OptionSwitchStyleProps>`
   user-select: none;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   color: ${({ $isChecked, theme }) => ($isChecked ? theme.colors.primary : theme.colors.black)};
 `;
diff --git a/frontend/src/components/layouts/ReviewDisplayLayout/styles.ts b/frontend/src/components/layouts/ReviewDisplayLayout/styles.ts
@@ -12,7 +12,7 @@ export const Container = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 530px) {
     flex-direction: column;
     align-items: flex-start;
     margin-bottom: 2.5rem;

diff --git a/frontend/src/pages/ReviewCollectionPage/components/ReviewCollectionPageContents/styles.ts b/frontend/src/pages/ReviewCollectionPage/components/ReviewCollectionPageContents/styles.ts
@@ -15,10 +15,6 @@ export const ReviewCollectionContainer = styled.div`
 export const ReviewSectionDropdown = styled.div`
   display: flex;
   justify-content: flex-end;
-
-  @media screen and (max-width: 500px) {
-    justify-content: flex-start;
-  }
 `;
 
 export const ReviewCollection = styled.div`