Merge pull request #205 from themoment-team/feature/map

[Client] 찾아오는길 반응형
themoment-team · Aug 21, 2023 · 9ec84ec · 9ec84ec · vercel · Aug 21, 2023
2 parents 00adc76 + 7092598
commit 9ec84ec
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 67 deletions.
diff --git a/apps/client/src/components/About/Location/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx
@@ -58,8 +58,14 @@ function Map({ latitude, longitude }: MapProps) {
 }
 
 const MapContainer = styled.div`
-  margin: 2rem 0rem;
-  aspect-ratio: 320 / 220;
+  width: 77.5rem;
+  height: 25rem;
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
 `;
 
 export default Map;
diff --git a/apps/client/src/components/About/Location/index.tsx b/apps/client/src/components/About/Location/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as I from 'client/assets';
+import { useGetWindowWidth } from 'client/hooks';
 
 import Map from './Map';
 import * as S from './style';
@@ -10,55 +11,77 @@ const schoolCoordinate = {
   longitude: 126.80073120716628,
 } as const;
 
-const Location = () => (
-  <S.Location>
-    <S.ContentBox>
-      <S.Title>🔍 찾아오시는 길</S.Title>
-      <S.Line />
-      <Map {...schoolCoordinate} />
-      <S.MapContentBox>
-        <S.AddressAndContactBox>
-          <S.Address>
-            <S.IconBox>
-              <I.MarkIcon />
-              <S.Subtitle>주소</S.Subtitle>
-            </S.IconBox>
-            <S.Desc>
-              광주광역시 광산구 상무대로 312 광주소프트웨어마이스터고등학교
-            </S.Desc>
-          </S.Address>
-          <S.Contact>
-            <S.IconBox>
-              <I.ContactIcon />
-              <S.Subtitle>연락처</S.Subtitle>
-            </S.IconBox>
-            <S.Desc>교무실 062)949-6800(08:30~16:30)</S.Desc>
-          </S.Contact>
-        </S.AddressAndContactBox>
-        <S.Divide />
-        <S.OntheWayBox>
-          <S.Walk>
-            <S.Circle>
-              <I.MapIcon />
-            </S.Circle>
-            <S.DescBox>
-              <S.Subtitle>도보 이용 시</S.Subtitle>
-              <S.Desc>도미노 피자 건물 건너편</S.Desc>
-            </S.DescBox>
-          </S.Walk>
-          <S.Subway>
-            <S.Circle>
-              <I.SubwayIcon />
-            </S.Circle>
-            <S.DescBox>
-              <S.Subtitle>지하철 이용 시</S.Subtitle>
-              <S.Desc>송정공원역 1번출구 220m 앞</S.Desc>
-            </S.DescBox>
-          </S.Subway>
-        </S.OntheWayBox>
-      </S.MapContentBox>
-    </S.ContentBox>
-  </S.Location>
-);
+const Location = () => {
+  const width = useGetWindowWidth();
+
+  return (
+    <S.Location>
+      <S.ContentBox>
+        <S.Title>🔍 찾아오시는 길</S.Title>
+        <S.Line />
+        <S.Map>
+          <Map {...schoolCoordinate} />
+        </S.Map>
+        <S.MapContentBox>
+          <S.AddressAndContactBox>
+            <S.Address>
+              <S.IconBox>
+                {width < 600 ? (
+                  <S.Circle>
+                    <I.MarkIcon />
+                  </S.Circle>
+                ) : (
+                  <I.MarkIcon />
+                )}
+                <S.Subtitle>주소</S.Subtitle>
+              </S.IconBox>
+              <S.Desc>
+                광주광역시 광산구 상무대로 312 광주소프트웨어마이스터고등학교
+              </S.Desc>
+            </S.Address>
+            <S.Contact>
+              <S.IconBox>
+                {width < 600 ? (
+                  <S.Circle>
+                    <I.ContactIcon />
+                  </S.Circle>
+                ) : (
+                  <I.ContactIcon />
+                )}
+                <S.Subtitle>연락처</S.Subtitle>
+              </S.IconBox>
+              <S.Desc>
+                교무실 062)949-6800
+                <br />
+                (08:30~16:30)
+              </S.Desc>
+            </S.Contact>
+          </S.AddressAndContactBox>
+          {width > 600 && <S.Divide />}
+          <S.OnTheWayBox>
+            <S.Walk>
+              <S.Circle>
+                <I.MapIcon />
+              </S.Circle>
+              <S.DescBox>
+                <S.Subtitle>도보 이용 시</S.Subtitle>
+                <S.Desc>도미노 피자 건물 건너편</S.Desc>
+              </S.DescBox>
+            </S.Walk>
+            <S.Subway>
+              <S.Circle>
+                <I.SubwayIcon />
+              </S.Circle>
+              <S.DescBox>
+                <S.Subtitle>지하철 이용 시</S.Subtitle>
+                <S.Desc>송정공원역 1번출구 220m 앞</S.Desc>
+              </S.DescBox>
+            </S.Subway>
+          </S.OnTheWayBox>
+        </S.MapContentBox>
+      </S.ContentBox>
+    </S.Location>
+  );
+};
 
 export default Location;
diff --git a/apps/client/src/components/About/Location/style.ts b/apps/client/src/components/About/Location/style.ts
@@ -2,18 +2,29 @@ import styled from '@emotion/styled';
 
 export const Location = styled.div`
   width: 100vw;
-  height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 5rem 0 7.5rem;
 `;
 
 export const ContentBox = styled.div`
   width: 77.5rem;
-  height: 44.75rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    justify-content: space-evenly;
+  }
 `;
 
 export const Title = styled.div`
@@ -25,40 +36,72 @@ export const Title = styled.div`
 `;
 
 export const Line = styled.div`
-  width: 77.5rem;
   height: 0.0625rem;
   margin-top: 1.75rem;
+  margin-bottom: 2.25rem;
   background: ${({ theme }) => theme.color.gray['050']};
 `;
 
 export const Map = styled.div`
   width: 77.5rem;
   height: 25rem;
-  background: ${({ theme }) => theme.color.gray['050']};
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
 `;
 
 export const MapContentBox = styled.div`
-  width: 75.1875rem;
-  height: 10.125rem;
+  width: 77.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-top: 2.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['1440']} {
+    width: calc(100vw - 12.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    width: calc(100vw - 7.5rem);
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    margin-top: 3.75rem;
+    flex-direction: column;
+    gap: 3.75rem;
+  }
 `;
 
 export const AddressAndContactBox = styled.div`
-  width: 26rem;
-  height: 10.125rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 2.75rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 `;
 
-export const OntheWayBox = styled.div`
-  width: 35.0625rem;
-  height: 4rem;
+export const OnTheWayBox = styled.div`
   display: flex;
-  justify-content: space-between;
-  margin-right: 2.3125rem;
+  gap: 3.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    flex-direction: column;
+  }
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 `;
 
 export const Address = styled.div`
@@ -79,7 +122,12 @@ export const Desc = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: 1.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    text-align: center;
+  }
 `;
+
 export const Contact = styled.div`
   display: flex;
   flex-direction: column;
@@ -90,6 +138,10 @@ export const IconBox = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+  }
 `;
 
 export const DescBox = styled.div`
@@ -102,11 +154,25 @@ export const DescBox = styled.div`
 export const Walk = styled.div`
   display: flex;
   gap: 1.25rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 8.8125rem;
+  }
 `;
 
 export const Subway = styled.div`
   display: flex;
   gap: 1.25rem;
+
+  @media ${({ theme }) => theme.breakPoint['600']} {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    height: 8.8125rem;
+  }
 `;
 
 export const Circle = styled.div`
@@ -117,10 +183,17 @@ export const Circle = styled.div`
   height: 4rem;
   background: ${({ theme }) => theme.color.primary.navy};
   border-radius: 100%;
+  path {
+    stroke: ${({ theme }) => theme.color.white};
+  }
 `;
 
 export const Divide = styled.div`
   width: 0.25rem;
   height: 10rem;
   background: ${({ theme }) => theme.color.gray['030']};
+
+  @media ${({ theme }) => theme.breakPoint['1024']} {
+    display: none;
+  }
 `;