Merge pull request #96 from Stack-Knowledge/develop

frorong · web-flow · commit d3e07cea7c01 · 2023-11-28T14:09:58.000+09:00
Release 1.0.3
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "@types/react": "^18.2.0",
     "next": "13.4.2",
     "react": "^18.2.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "zustand": "^4.4.6"
   },
   "keywords": [],
   "author": "",
diff --git a/packages/common/src/assets/svg/DefaultProfile.svg b/packages/common/src/assets/svg/DefaultProfile.svg
@@ -1,7 +1,7 @@
 <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='90'
-    height='90'
+    width='5.625rem'
+    height='5.625rem'
     viewBox='0 0 90 90'
     fill='none'
   >
diff --git a/packages/common/src/assets/svg/HomeIcon.tsx b/packages/common/src/assets/svg/HomeIcon.tsx
@@ -1,7 +1,7 @@
 const HomeIcon = () => (
   <svg
-    width='26'
-    height='22'
+    width='1.625rem'
+    height='1.375rem'
     viewBox='0 0 26 22'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
diff --git a/packages/common/src/assets/svg/LogoIcon.tsx b/packages/common/src/assets/svg/LogoIcon.tsx
@@ -1,7 +1,7 @@
 const LogoIcon = () => (
   <svg
-    width='40'
-    height='40'
+    width='2.5rem'
+    height='2.5rem'
     viewBox='0 0 40 40'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
diff --git a/packages/common/src/assets/svg/QuestionIcon.tsx b/packages/common/src/assets/svg/QuestionIcon.tsx
@@ -1,7 +1,7 @@
 const QuestionIcon = () => (
   <svg
-    width='20'
-    height='22'
+    width='1.25rem'
+    height='1.375rem'
     viewBox='0 0 20 22'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
diff --git a/packages/common/src/assets/svg/RankingIcon.tsx b/packages/common/src/assets/svg/RankingIcon.tsx
@@ -1,7 +1,7 @@
 const RankingIcon = () => (
   <svg
-    width='18'
-    height='18'
+    width='1.125rem'
+    height='1.125rem'
     viewBox='0 0 18 18'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
diff --git a/packages/common/src/assets/svg/ShopIcon.tsx b/packages/common/src/assets/svg/ShopIcon.tsx
@@ -1,7 +1,7 @@
 const ShopIcon = () => (
   <svg
-    width='20'
-    height='20'
+    width='1.25rem'
+    height='1.25rem'
     viewBox='0 0 20 20'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
diff --git a/packages/common/src/assets/svg/VectorIcon.tsx b/packages/common/src/assets/svg/VectorIcon.tsx
@@ -5,8 +5,8 @@ interface VectorIconProps {
 const VectorIcon: React.FC<VectorIconProps> = ({ direction }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='80'
-    height='80'
+    width='5rem'
+    height='5rem'
     viewBox='0 0 80 80'
     fill='none'
     transform={`${direction === 'right' ? 'rotate(-180)' : ''}`}
diff --git a/packages/common/src/components/Banner/style.ts b/packages/common/src/components/Banner/style.ts
@@ -41,6 +41,14 @@ export const BannerContainer = styled.div<{
 
 export const BannerItem = styled.div`
   width: 80rem;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const DotWrapper = styled.div`
diff --git a/packages/common/src/components/Header/style.ts b/packages/common/src/components/Header/style.ts
@@ -14,6 +14,13 @@ export const HeaderContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
 
 export const LogoContainer = styled(Link)`
@@ -34,9 +41,12 @@ export const MenuNav = styled.div`
   gap: ${({ role }) => (role === 'admin' ? '1.5rem' : '2.25rem')};
 `;
 
-export const MenuStrokeItemWrapper = styled(Link)<{ $isActive?: boolean }>`
-  ${({ $isActive, theme }) => {
-    const activeColor = $isActive ? theme.color.primary : theme.color.black;
+export const MenuStrokeItemWrapper = styled(Link)<{ isActive?: boolean }>`
+  @media (max-width: 300px) {
+    width: 30px;
+  }
+  ${({ isActive, theme }) => {
+    const activeColor = isActive ? theme.color.primary : theme.color.black;
     const hoverColor = theme.color.primary;
     return `
       display: flex;
@@ -63,9 +73,12 @@ export const MenuStrokeItemWrapper = styled(Link)<{ $isActive?: boolean }>`
   }}
 `;
 
-export const MenuFillItemWrapper = styled(Link)<{ $isActive?: boolean }>`
-  ${({ $isActive, theme }) => {
-    const activeColor = $isActive ? theme.color.primary : theme.color.black;
+export const MenuFillItemWrapper = styled(Link)<{ isActive?: boolean }>`
+  @media (max-width: 300px) {
+    width: 30px;
+  }
+  ${({ isActive, theme }) => {
+    const activeColor = isActive ? theme.color.primary : theme.color.black;
     const hoverColor = theme.color.primary;
     return `
       display: flex;
@@ -78,7 +91,7 @@ export const MenuFillItemWrapper = styled(Link)<{ $isActive?: boolean }>`
         rect, path {fill:${activeColor};}
       }
 
-      &:hover{
+        &:hover{
         span,
         & svg{
           color:${hoverColor};
diff --git a/packages/common/src/components/MainContents/index.tsx b/packages/common/src/components/MainContents/index.tsx
@@ -24,7 +24,9 @@ const MainContents: React.FC<MainContentsProps> = ({ isClient }) => {
 
   return (
     <>
-      <S.MissionText>문제</S.MissionText>
+      <S.MissionTextContainer>
+        <S.MissionText>문제</S.MissionText>
+      </S.MissionTextContainer>
       <S.ContentWrapper>
         <S.Contents>
           {missionList &&
diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts
@@ -1,5 +1,16 @@
 import styled from '@emotion/styled';
 
+export const MissionTextContainer = styled.div`
+  width: 80rem;
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
+`;
+
 export const MissionText = styled.h4`
   ${({ theme }) => theme.typo.h4};
   color: ${({ theme }) => theme.color.black};
@@ -35,4 +46,11 @@ export const Contents = styled.div`
   .medalWrapper:nth-of-type(3n) .medal {
     background-color: #ce865d;
   }
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
+  }
 `;
diff --git a/packages/common/src/components/MissionDetailInput /style.ts b/packages/common/src/components/MissionDetailInput /style.ts
@@ -6,6 +6,10 @@ export const SubmitContainer = styled.div`
   height: 18.75rem;
   border-radius: 0.625rem;
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 16rem);
+  }
 `;
 export const MissionDetailInputWrapper = styled.div`
   display: flex;
@@ -22,6 +26,11 @@ export const MissionDetailInput = styled.textarea`
   resize: none;
   border: 0;
 
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 16rem);
+    text-indent: 0.5625rem;
+  }
+
   ::placeholder {
     color: ${({ theme }) => theme.color.gray['050']};
     font-weight: 500;
diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts
@@ -18,6 +18,11 @@ export const CardWrapper = styled(Link)`
 
 export const ProfileImage = styled(Image)`
   border-radius: 50%;
+
+  @media ${({ theme }) => theme.breakPoint[1024]} {
+    width: calc(100% - 50%);
+    height: calc(100% - 65%);
+  }
 `;
 
 export const UserName = styled.span`
diff --git a/packages/common/src/hooks/index.ts b/packages/common/src/hooks/index.ts
@@ -0,0 +1 @@
+export { default as useWindowResizeEffect } from './useWindowResizeEffect';
diff --git a/packages/common/src/hooks/useWindowResizeEffect.ts b/packages/common/src/hooks/useWindowResizeEffect.ts
@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useWidthState } from 'common/stores';
+
+const useWindowResizeEffect = () => {
+  const { width, setWidth } = useWidthState();
+
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return width;
+};
+
+export default useWindowResizeEffect;
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -3,3 +3,5 @@ export * from './styles';
 export * from './utils';
 export * from './assets';
 export * from './PageContainer';
+export * from './hooks';
+export * from './stores';
diff --git a/packages/common/src/stores/index.ts b/packages/common/src/stores/index.ts
@@ -0,0 +1 @@
+export { default as useWidthState } from './useWidthStore';
diff --git a/packages/common/src/stores/useWidthStore.ts b/packages/common/src/stores/useWidthStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface WidthState {
+  width: number;
+  setWidth: (value: number) => void;
+}
+
+const useWidthState = create<WidthState>((set) => ({
+  width: 1920,
+  setWidth: (value) => set({ width: value }),
+}));
+
+export default useWidthState;
diff --git a/packages/common/src/styles/GlobalStyle.tsx b/packages/common/src/styles/GlobalStyle.tsx
@@ -11,12 +11,20 @@ export function GlobalStyle() {
         ${emotionReset}
 
         html {
-          @media ${theme.breakPoint['600']} {
-            font-size: 0.75rem;
+          @media (max-width: 1600px) {
+            font-size: 15px;
           }
-
-          @media (max-width: 400px) {
-            font-size: 0.625rem;
+          @media (max-width: 1300px) {
+            font-size: 12px;
+          }
+          @media (max-width: 1000px) {
+            font-size: 10px;
+          }
+          @media (max-width: 850px) {
+            font-size: 9px;
+          }
+          @media (max-width: 750px) {
+            font-size: 8px;
           }
         }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/client/src/PageContainer/MissionListPage/index.tsx b/projects/client/src/PageContainer/MissionListPage/index.tsx
@@ -10,7 +10,9 @@ const MissionListPage = () => {
 
   return (
     <S.PageWrapper>
-      <S.ScoringText>문제</S.ScoringText>
+      <S.ScoringTextContainer>
+        <S.ScoringText>문제</S.ScoringText>
+      </S.ScoringTextContainer>
       {data?.length > 0 ? <MissionCarousel /> : <h1>문제가 없습니다...</h1>}
     </S.PageWrapper>
   );
diff --git a/projects/client/src/PageContainer/MissionListPage/style.ts b/projects/client/src/PageContainer/MissionListPage/style.ts
@@ -9,6 +9,15 @@ export const PageWrapper = styled.div`
   padding-bottom: 10.625rem;
 `;
 
+export const ScoringTextContainer = styled.div`
+  @media ${({ theme }) => theme.breakPoint[1024]} {
+    width: calc(100vw - 20rem);
+  }
+  @media (max-width: 750px) {
+    width: calc(100vw - 18.5rem);
+  }
+`;
+
 export const ScoringText = styled.h2`
   ${({ theme }) => theme.typo.h2}
   color: ${({ theme }) => theme.color.black};
diff --git a/projects/client/src/assets/svg/CheckBoxIcon.tsx b/projects/client/src/assets/svg/CheckBoxIcon.tsx
@@ -1,8 +1,8 @@
 const CheckBoxIcon = () => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='18'
-    height='18'
+    width='1.125rem'
+    height='1.125rem'
     viewBox='0 0 18 18'
     fill='none'
   >
diff --git a/projects/client/src/assets/svg/CheckedBoxIcon.tsx b/projects/client/src/assets/svg/CheckedBoxIcon.tsx
@@ -1,8 +1,8 @@
 const CheckedBoxIcon = () => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='18'
-    height='18'
+    width='1.125rem'
+    height='1.125rem'
     viewBox='0 0 18 18'
     fill='none'
   >
diff --git a/projects/client/src/assets/svg/MinusIcon.tsx b/projects/client/src/assets/svg/MinusIcon.tsx
@@ -1,7 +1,7 @@
 const MinusIcon = () => (
   <svg
-    width='14'
-    height='2'
+    width='0.875rem'
+    height='0.125rem'
     viewBox='0 0 14 2'
     xmlns='http://www.w3.org/2000/svg'
   >
diff --git a/projects/client/src/assets/svg/PlusIcon.tsx b/projects/client/src/assets/svg/PlusIcon.tsx
diff --git a/projects/client/src/assets/svg/XIcon.tsx b/projects/client/src/assets/svg/XIcon.tsx
diff --git a/projects/client/src/components/MissionCarousel/index.tsx b/projects/client/src/components/MissionCarousel/index.tsx
diff --git a/projects/client/src/components/MissionCarousel/style.ts b/projects/client/src/components/MissionCarousel/style.ts
diff --git a/projects/client/src/components/ShopModal/style.ts b/projects/client/src/components/ShopModal/style.ts
