Merge branch 'production' into BE/test

woowacourse-teams · Sep 26, 2024 · f9f6109 · f9f6109
2 parents cccda73 + 3cc6eee
commit f9f6109
Show file tree

Hide file tree

Showing 48 changed files with 533 additions and 355 deletions.
diff --git a/.github/workflows/fe_cd-production.yml b/.github/workflows/fe_cd-production.yml
diff --git a/.github/workflows/fe_cd-test.yml b/.github/workflows/fe_cd-test.yml
diff --git a/README.md b/README.md
@@ -9,3 +9,5 @@
 코딩해듀오는 페어 프로그래밍을 효과적으로 진행하기 위한 다양한 가이드를 제공합니다. 또한, 타이머 알람과 브라우저 팝업으로 교대 타이밍을 자동으로 알려주어 별도의 타이머를 사용할 필요가 없습니다. 다시 보고 싶은 레퍼런스는 코딩해듀오가 한 곳에 모아 깔끔하게 관리해 줍니다.
 
 코딩해듀오는 당신의 성장을 도와줄 최고의 도구입니다. 함께 성장하며 더 나은 개발자가 되기 위한 여정을 코딩해듀오가 응원합니다.
+
+[코딩해듀오 사이트 바로가기 🚀](https://coduo.site)
diff --git a/frontend/public/coduo_metadata.jpg b/frontend/public/coduo_metadata.jpg
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,18 +3,34 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
-    <link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
+    <meta name="description" content="함께 하면 좋은 코딩, 코딩해듀오 💞" />
+    <meta property="og:title" content="코딩해듀오" />
+    <meta property="og:description" content="함께 하면 좋은 코딩, 코딩해듀오 💞" />
+    <meta property="og:image" content="/coduo_metadata.jpg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="628" />
+    <meta property="og:url" content="https://coduo.site" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:site_name" content="코딩해듀오" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous" />
+    <link
+      rel="preload"
+      as="style"
+      crossorigin="anonymous"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+      crossorigin="anonymous"
+    />
     <link rel="preconnect" href="https://sentry.io" crossorigin="anonymous" />
-</head>
+    <link rel="icon" href="/favicon.ico" />
     <noscript>
       <p>스크립트가 차단되어 페이지를 표시할 수 없습니다. <br />스크립트를 허용해주세요.</p>
     </noscript>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>코딩해듀오</title>
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,9 +7,8 @@ import { ThemeProvider } from 'styled-components';
 const PairRoom = lazy(() => import('@/pages/PairRoom/PairRoom'));
 
 import Callback from '@/pages/Callback/Callback';
-import Docs from '@/pages/CoduoDocs/CoduoDocs';
+import CoduoDocs from '@/pages/CoduoDocs/CoduoDocs';
 import PageNotFound from '@/pages/Error/PageNotFound';
-import HowToPair from '@/pages/HowToPair/HowToPair';
 import Landing from '@/pages/Landing/Landing';
 import Layout from '@/pages/Layout';
 import Loading from '@/pages/Loading/Loading';
@@ -18,6 +17,8 @@ import MyPage from '@/pages/MyPage/MyPage';
 import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding';
 import SignUp from '@/pages/SignUp/SignUp';
 
+import HowToPair from '@/components/Landing/HowToPair/HowToPair';
+
 import useUserStore from '@/stores/userStore';
 
 import { getMember } from '@/apis/member';
@@ -32,10 +33,15 @@ const App = () => {
   const { setUser } = useUserStore();
 
   const updateUser = async () => {
-    const userStatus = await getIsUserLoggedIn();
-    const username = await getMember();
+    const { signedIn } = await getIsUserLoggedIn();
+
+    if (!signedIn) {
+      return setUser('', 'SIGNED_OUT');
+    }
+
+    const { username } = await getMember();
 
-    setUser(username, userStatus.signedIn ? 'SIGNED_IN' : 'SIGNED_OUT');
+    setUser(username, 'SIGNED_IN');
   };
 
   useEffect(() => {
@@ -82,7 +88,7 @@ const App = () => {
         },
         {
           path: 'coduo-docs',
-          element: <Docs />,
+          element: <CoduoDocs />,
         },
         {
           path: 'callback',

diff --git a/frontend/src/apis/member.ts b/frontend/src/apis/member.ts
@@ -12,7 +12,7 @@ export const getSignOut = async (): Promise<void> => {
   });
 };
 
-export const getMember = async () => {
+export const getMember = async (): Promise<{ username: string }> => {
   const response = await fetcher.get({
     url: `${API_URL}/member`,
     errorMessage: ERROR_MESSAGES.GET_MEMBER,

diff --git a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts
@@ -58,7 +58,7 @@ export const ContentItem = styled(Link)<{ $isActive: boolean }>`
   font-size: ${({ theme }) => theme.fontSize.lg};
   text-decoration: none;
 
-  transition: all 0.2s;
+  transition: all 0.1s;
 
   &::before {
     position: absolute;

diff --git a/...d/src/pages/HowToPair/HowToPair.styles.ts → ...nts/Landing/HowToPair/HowToPair.styles.ts b/...d/src/pages/HowToPair/HowToPair.styles.ts → ...nts/Landing/HowToPair/HowToPair.styles.ts
@@ -1,37 +1,25 @@
 import styled from 'styled-components';
 
-import { Wave } from '@/assets';
-
 export const Layout = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 20rem;
+  gap: 15rem;
   overflow-x: hidden;
 
   position: relative;
 
-  padding: 16rem 4rem;
+  padding: 10rem 4rem;
 
+  background: linear-gradient(
+    75deg,
+    ${({ theme }) => theme.color.secondary[100]},
+    ${({ theme }) => theme.color.primary[200]}
+  );
+  background-color: ${({ theme }) => theme.color.black[10]};
   color: ${({ theme }) => theme.color.black[80]};
   line-height: 1.2;
-
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-
-    width: 100%;
-    height: 100%;
-
-    background: url(${Wave}) repeat-y;
-    opacity: 0.5;
-    content: '';
-    background-size: cover;
-  }
 `;
 
 export const Section = styled.section<{ $textAlign?: 'left' | 'center' | 'right' }>`
@@ -41,6 +29,15 @@ export const Section = styled.section<{ $textAlign?: 'left' | 'center' | 'right'
   width: 100%;
   border-radius: 1rem;
 
+  @media (max-width: ${({ theme }) => theme.deviceWidth.mobile}) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    text-align: center;
+    word-break: keep-all;
+  }
+
   text-align: ${({ $textAlign = 'left' }) => $textAlign};
 `;
 
@@ -54,13 +51,18 @@ export const TextBoxContainer = styled.div`
 
     flex-grow: 1;
   }
+
+  @media (max-width: ${({ theme }) => theme.deviceWidth.mobile}) {
+    flex-direction: column;
+  }
 `;
 
 export const TextBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
 
+  width: 36rem;
   padding: 2rem 4rem;
   border-radius: 3rem;
 
@@ -70,16 +72,16 @@ export const TextBox = styled.div`
 export const SectionText = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
 
   width: 100%;
 `;
 
 export const SectionTitle = styled.h2`
-  margin: 5rem 0;
+  margin: 2rem 0;
 
   color: ${({ theme }) => theme.color.primary[800]};
-  font-size: ${({ theme }) => theme.fontSize.h1};
+  font-size: ${({ theme }) => theme.fontSize.h3};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
@@ -94,18 +96,16 @@ export const Paragraph = styled.p`
 
 export const Strong = styled.strong`
   color: ${({ theme }) => theme.color.primary[700]};
-  font-size: ${({ theme }) => theme.fontSize.h4};
-  font-weight: ${({ theme }) => theme.fontWeight.extraBold};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const Highlighted = styled.span`
-  color: ${({ theme }) => theme.color.primary[800]};
-  font-size: ${({ theme }) => theme.fontSize.h5};
-  font-weight: ${({ theme }) => theme.fontWeight.extraBold};
+  color: ${({ theme }) => theme.color.primary[700]};
+  font-size: ${({ theme }) => theme.fontSize.h6};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
 
 export const Conclusion = styled.p`
-  margin-top: 2rem;
   padding-left: 1rem;
 
   color: ${({ theme }) => theme.color.primary[800]};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@
		코딩해듀오는 페어 프로그래밍을 효과적으로 진행하기 위한 다양한 가이드를 제공합니다. 또한, 타이머 알람과 브라우저 팝업으로 교대 타이밍을 자동으로 알려주어 별도의 타이머를 사용할 필요가 없습니다. 다시 보고 싶은 레퍼런스는 코딩해듀오가 한 곳에 모아 깔끔하게 관리해 줍니다.

		코딩해듀오는 당신의 성장을 도와줄 최고의 도구입니다. 함께 성장하며 더 나은 개발자가 되기 위한 여정을 코딩해듀오가 응원합니다.

		[코딩해듀오 사이트 바로가기 🚀](https://coduo.site)