Stack-Knowledge · frorong · Oct 30, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/package.json b/package.json
@@ -28,5 +28,8 @@
   "license": "ISC",
   "resolutions": {
     "@types/react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.17"
   }
 }
diff --git a/packages/common/src/PageContainer/LoginPage/index.tsx b/packages/common/src/PageContainer/LoginPage/index.tsx
@@ -16,7 +16,7 @@ const LoginPage = () => {
   const { mutate, isSuccess } = usePostLoginCode();
 
   const handleLogin = () => {
-    window.location.href = `https://gauth.co.kr/login?client_id=e6e8ac7857c94ca7a24db504d33369078ab562d7a29a4c9db353204ae8080be9&redirect_uri=${window.location.href}`;
+    window.location.href = `${process.env.NEXT_PUBLIC_GAUTH_URL}${window.location.href}`;
   };
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const LoginPage = () => {
       </S.BottomIconWrapper>
       <LoginLogoIcon />
       <S.StackKnowledge>Stack Knowledge</S.StackKnowledge>
-      <LoginButton onClick={handleLogin} />
+      <LoginButton disabled={get('code')} onClick={handleLogin} />
     </S.MainWrapper>
   );
 };

diff --git a/packages/common/src/PageContainer/MainPage/style.ts b/packages/common/src/PageContainer/MainPage/style.ts
@@ -13,4 +13,12 @@ export const MissionAlertText = styled.p`
   font-weight: 400;
   margin-top: 1rem;
   width: 80rem;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
diff --git a/packages/common/src/assets/Login/BottomIcon.tsx b/packages/common/src/assets/Login/BottomIcon.tsx
@@ -1,8 +1,8 @@
 const BottomIcon = () => (
   <svg
+    width='26.625rem'
+    height='27.9375rem'
     xmlns='http://www.w3.org/2000/svg'
-    width='426'
-    height='447'
     viewBox='0 0 426 447'
     fill='none'
   >

diff --git a/packages/common/src/assets/Login/TopIcon.tsx b/packages/common/src/assets/Login/TopIcon.tsx
@@ -1,8 +1,8 @@
 const TopIcon = () => (
   <svg
+    width='32.875rem'
+    height='22.5625rem'
     xmlns='http://www.w3.org/2000/svg'
-    width='526'
-    height='361'
     viewBox='0 0 526 361'
     fill='none'
   >

diff --git a/packages/common/src/components/Banner/Banner1/style.ts b/packages/common/src/components/Banner/Banner1/style.ts
@@ -6,18 +6,35 @@ export const BannerWrapper = styled.div`
   height: 18.75rem;
   border-radius: 1.25rem;
   display: flex;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const BannerTitleContainer = styled.div`
   width: 40rem;
   height: 18.75rem;
   padding: 4.375rem 0 0 3.75rem;
+
+  @media (max-width: 1240px) {
+    width: 80vw;
+  }
 `;
 
 export const BannerTitle = styled.span`
   color: ${({ theme }) => theme.color.white};
   ${({ theme }) => theme.typo.h1};
   font-weight: 700;
+  word-break: keep-all;
+
+  @media (max-width: 1240px) {
+    ${({ theme }) => theme.typo.h2};
+  }
 `;
 
 export const SunIconWrapper = styled.div`
@@ -26,16 +43,43 @@ export const SunIconWrapper = styled.div`
   right: 1.25rem;
   width: 18.1875rem;
   height: 12rem;
+
+  @media (max-width: 1240px) {
+    width: 20vw;
+    height: 13vw;
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: 30vw;
+    height: 18vw;
+  }
 `;
 
 export const LetgoIconContainer = styled.div`
-  width: 40rem;
   height: 18.75rem;
-  padding: 1.5rem 3.75rem 1rem 11.25rem;
+  padding: 2.5rem 3.75rem 1rem 11.25rem;
+
+  @media (max-width: 1240px) {
+    padding: 3.8rem 0 1rem 0;
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    padding-top: 5rem;
+  }
 `;
 
 export const LetgoIconWrapper = styled.div`
   position: relative;
   width: 25rem;
   height: 16.25rem;
+
+  @media (max-width: 1240px) {
+    width: 22vw;
+    height: 16vw;
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: 27vw;
+    height: 18vw;
+  }
 `;
diff --git a/packages/common/src/components/Banner/Banner2/style.ts b/packages/common/src/components/Banner/Banner2/style.ts
@@ -12,6 +12,14 @@ export const BannerWrapper = styled.div`
   height: 18.75rem;
   border-radius: 1.25rem;
   display: flex;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const BannerTitleContainer = styled.div`
@@ -21,18 +29,32 @@ export const BannerTitleContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
+
+  @media (max-width: 1240px) {
+    width: 80vw;
+  }
 `;
 
 export const BannerTitle = styled.span`
   color: ${({ theme }) => theme.color.white};
   ${({ theme }) => theme.typo.h1};
   font-weight: 700;
+  word-break: keep-all;
+
+  @media (max-width: 1240px) {
+    ${({ theme }) => theme.typo.h2};
+  }
 `;
 
 export const DocumentIconWrapper = styled.div`
   width: 18.75rem;
   height: 15.625rem;
   position: relative;
+
+  @media (max-width: 1240px) {
+    width: 25vw;
+    height: 18vw;
+  }
 `;
 
 export const DocumentContainer = styled.div`
@@ -41,4 +63,8 @@ export const DocumentContainer = styled.div`
   justify-content: flex-end;
   width: 100%;
   padding-right: 6.25rem;
+
+  @media (max-width: 1240px) {
+    padding-right: 2vw;
+  }
 `;
diff --git a/packages/common/src/components/Banner/Banner3/style.ts b/packages/common/src/components/Banner/Banner3/style.ts
@@ -6,6 +6,14 @@ export const BannerWrapper = styled.div`
   height: 18.75rem;
   border-radius: 1.25rem;
   display: flex;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const BannerTitleContainer = styled.div`
@@ -15,18 +23,32 @@ export const BannerTitleContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
+
+  @media (max-width: 1240px) {
+    width: 50vw;
+  }
 `;
 
 export const BannerTitle = styled.span`
   color: ${({ theme }) => theme.color.white};
   ${({ theme }) => theme.typo.h1};
   font-weight: 700;
+  word-break: keep-all;
+
+  @media (max-width: 1240px) {
+    ${({ theme }) => theme.typo.h2};
+  }
 `;
 
 export const GiftIconWrapper = styled.div`
   width: 18.75rem;
   height: 18.75rem;
   position: relative;
+
+  @media (max-width: 1240px) {
+    width: 25vw;
+    height: 25vw;
+  }
 `;
 
 export const GiftContainer = styled.div`
@@ -35,4 +57,8 @@ export const GiftContainer = styled.div`
   justify-content: flex-end;
   width: 100%;
   padding-right: 6.25rem;
+
+  @media (max-width: 1240px) {
+    padding-right: 2vw;
+  }
 `;
diff --git a/packages/common/src/components/Banner/style.ts b/packages/common/src/components/Banner/style.ts
@@ -7,26 +7,45 @@ export const BannerWrapper = styled.div`
   display: flex;
   position: relative;
   overflow: hidden;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const BannerContainer = styled.div<{
   currentBanner: number;
   bannerCount: number;
 }>`
+  width: 80rem;
   display: flex;
   transition: transform 0.5s ease-in-out;
-  transform: translateX(
-    ${({ currentBanner, bannerCount }) =>
-      -currentBanner * ((bannerCount * 80) / bannerCount)}rem
-  );
+  transform: translateX(${({ currentBanner }) => -currentBanner * 80}rem);
+
+  @media (max-width: 1240px) {
+    transform: translateX(
+      calc(${({ currentBanner }) => -currentBanner} * (100vw - 12.5rem))
+    );
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    transform: translateX(
+      calc(${({ currentBanner }) => -currentBanner} * (100vw - 3rem))
+    );
+  }
 `;
 
 export const BannerItem = styled.div`
   width: 80rem;
 `;
 
 export const DotWrapper = styled.div`
-  width: 80rem;
+  max-width: 80rem;
+  width: 100%;
   height: 18.75rem;
   position: absolute;
   display: flex;

diff --git a/packages/common/src/components/Header/index.tsx b/packages/common/src/components/Header/index.tsx
@@ -37,7 +37,13 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
           <S.Title>Stack Knowledge</S.Title>
         </S.LogoContainer>
         <S.MenuNav role={role}>
-          <S.MenuStrokeItemWrapper href='/' isActive={getIsActive('/')}>
+
+          <S.MenuStrokeItemWrapper
+            href='/'
+            isActive={getIsActive('/')}
+            onClick={handleLinkClick}
+          >
+
             <HomeIcon />
             <S.ItemTitle>홈</S.ItemTitle>
           </S.MenuStrokeItemWrapper>
@@ -72,7 +78,12 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
             </>
           )}
 
-          <S.MenuFillItemWrapper href='/shop' isActive={getIsActive('/shop')}>
+
+          <S.MenuFillItemWrapper
+            href='/shop'
+            isActive={getIsActive('/shop')}
+            onClick={handleLinkClick}
+          >
             <ShopIcon />
             <S.ItemTitle>상점</S.ItemTitle>
           </S.MenuFillItemWrapper>

diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts
@@ -24,6 +24,7 @@ export const Contents = styled.div`
   padding: 2.375rem 2.5rem;
   gap: 3rem;
   overflow-x: scroll;
+  overflow-y: hidden;
 
   .medalWrapper:nth-of-type(1n) .medal {
     background-color: #ffd79b;

diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
@@ -5,7 +5,6 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/admin/next.config.js b/projects/admin/next.config.js
@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
   swcMinify: true,
   transpilePackages: ['common', 'api'],