Merge pull request #111 from themoment-team/develop

Develop
themoment-team · Mar 5, 2023 · 1defdeb · 1defdeb · vercel · Mar 5, 2023
2 parents eec8bd3 + 5dab539
commit 1defdeb
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 28 deletions.
diff --git a/src/components/CustomMapMarker/CustomMapMarker.tsx b/src/components/CustomMapMarker/CustomMapMarker.tsx
@@ -10,7 +10,7 @@ import { css } from '@emotion/react';
 interface MarkerProps {
   companyName: string;
   companyUri: string;
-  imageUri: string;
+  imageUri?: string;
   position: {
     lat: number;
     lng: number;

diff --git a/src/components/Launcher/Launcher.styles.tsx b/src/components/Launcher/Launcher.styles.tsx
@@ -32,6 +32,8 @@ export const LauncherButton = styled.button`
   font-weight: 600;
   font-size: 1.2rem;
   color: ${pallete.scheme.white};
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(0deg);
 `;
 
 export const LauncherText = styled.p`

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -5,6 +5,7 @@ import useMarker from 'hooks/use-marker';
 import { SideBar } from 'components/SideBar';
 import { MarkerList } from 'components/MarkerList';
 import { Launcher } from 'components/Launcher';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface MapProps {
   cookies: {
@@ -20,8 +21,8 @@ export const MapComponent: React.FC<MapProps> = ({ cookies }) => {
     <>
       <Map
         center={{
-          lat: 36.658563176254795,
-          lng: 127.86119616960151,
+          lat: defaultMapConfig.lat,
+          lng: defaultMapConfig.lng,
         }}
         style={{
           position: 'fixed',
@@ -32,7 +33,7 @@ export const MapComponent: React.FC<MapProps> = ({ cookies }) => {
           right: '2.2rem',
         }}
         onCreate={setMap}
-        level={12}
+        level={defaultMapConfig.level}
       >
         <MarkerList markers={markers} />
         <SideBar cookies={cookies} />

diff --git a/src/components/MarkerList/MarkerList.tsx b/src/components/MarkerList/MarkerList.tsx
@@ -3,9 +3,10 @@ import { MapMarker, MarkerClusterer, useMap } from 'react-kakao-maps-sdk';
 import { CustomMapMarker } from 'components/CustomMapMarker';
 import useMapLevel from 'hooks/use-map-level';
 import { useWindowSize } from 'hooks/use-window-size';
+import { MarkerData } from 'types/marker.type';
 
 interface MarkerListComponentProps {
-  markers: any[];
+  markers: MarkerData[];
 }
 
 export const MarkerListComponent: React.FC<MarkerListComponentProps> = ({
@@ -32,15 +33,15 @@ export const MarkerListComponent: React.FC<MarkerListComponentProps> = ({
       {markers.map(marker =>
         level <= 3 && width && width >= 500 ? (
           <CustomMapMarker
-            key={marker.id}
+            key={marker.companyId}
             position={marker.position}
             companyName={marker.name}
             companyUri={marker.homepageUri}
             imageUri={marker.companyImgUri}
           />
         ) : (
           <MapMarker
-            key={`${marker.position.lat}-${marker.position.lng}`}
+            key={marker.companyId}
             position={marker.position}
             onClick={() => panTo(marker.position.lat, marker.position.lng)}
           />

diff --git a/src/components/MobileMap/MobileMap.tsx b/src/components/MobileMap/MobileMap.tsx
@@ -4,6 +4,7 @@ import { MobileWrapper } from './Mobile.styles';
 import { Map } from 'react-kakao-maps-sdk';
 import useMarker from 'hooks/use-marker';
 import { MarkerList } from 'components/MarkerList';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface MobileMapProps {
   cookies: {
@@ -19,15 +20,15 @@ export const MobileMapComponent: React.FC<MobileMapProps> = ({ cookies }) => {
     <MobileWrapper>
       <Map
         center={{
-          lat: 36.658563176254795,
-          lng: 127.86119616960151,
+          lat: defaultMapConfig.lat,
+          lng: defaultMapConfig.lng,
         }}
         style={{
           width: '100vw',
           height: '100vh',
         }}
         onCreate={setMap}
-        level={12}
+        level={defaultMapConfig.level}
       >
         <MarkerList markers={markers} />
         <BottomSheetComponent cookies={cookies} />

diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
@@ -59,6 +59,7 @@ export const SearchInputComponent: React.FC<SearchInputProps> = ({
 }) => {
   const router = useRouter();
   const inputEl = useRef<HTMLInputElement>(null);
+  const search = router.query['search'];
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchState(e.target.value);
@@ -77,6 +78,13 @@ export const SearchInputComponent: React.FC<SearchInputProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (!search) {
+      if (inputEl.current) inputEl.current.value = '';
+      setSearchState('');
+    }
+  }, [search]);
+
   useEffect(() => {
     if (router.query.search === '') {
       router.replace(router.pathname);

diff --git a/src/components/WorkerCard/WorkerCard.styles.tsx b/src/components/WorkerCard/WorkerCard.styles.tsx
@@ -57,9 +57,11 @@ export const Email = styled.a`
   }
 `;
 
-export const Company = styled.p`
+export const CompanyLink = styled.a`
   font-weight: 400;
   font-size: 1rem;
+  color: #000000;
+  text-decoration: none;
 
   @media (max-width: 500px) {
     font-size: 0.875rem;

diff --git a/src/components/WorkerCard/WorkerCard.tsx b/src/components/WorkerCard/WorkerCard.tsx
@@ -18,6 +18,7 @@ interface WorkerCardProps {
   devYear: number;
   position: string;
   userType: 'WORKER' | 'MENTOR';
+  companyLink: string;
   companyName: string;
   location: string;
 }
@@ -30,6 +31,7 @@ export const WorkerCardComponent: React.FC<WorkerCardProps> = ({
   profileImgUri,
   devYear,
   position,
+  companyLink,
   companyName,
   location,
   userType,
@@ -75,7 +77,13 @@ export const WorkerCardComponent: React.FC<WorkerCardProps> = ({
             )}
           </S.NameBadgeWrapper>
           <S.Email href={`mailto:${email}`}>{subString(email, 25)}</S.Email>
-          <S.Company>{subString(companyName, 18)}</S.Company>
+          <S.CompanyLink
+            href={companyLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {subString(companyName, 18)}
+          </S.CompanyLink>
         </S.ProfileParagraph>
       </S.ProfileWrapper>
       {!!introduction && (

diff --git a/src/components/WorkerList/WorkerList.tsx b/src/components/WorkerList/WorkerList.tsx
@@ -63,6 +63,7 @@ export const WorkerListComponent: React.FC<WorkerListProps> = ({
             position={info.position}
             userType={info.userType}
             companyName={info.company.name}
+            companyLink={info.company.homepageUri}
             location={info.company.location}
           />
         ))

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
@@ -11,6 +11,9 @@ import { UserRule } from 'types/site.type';
 import * as S from './Header.styles';
 import { handleAuth, handleLogout } from './container';
 import { AxiosError } from 'axios';
+import Link from 'next/link';
+import { useMap } from 'react-kakao-maps-sdk';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface HeaderProps {
   userRules: UserRule;
@@ -23,6 +26,8 @@ export const HeaderComponent: React.FC<HeaderProps> = ({
   menuVisible,
   setMenuVisible,
 }) => {
+  const map = useMap();
+
   const handleMenuClick = () => {
     axiosClient
       .get(workerUrl.getMeWorker())
@@ -41,9 +46,23 @@ export const HeaderComponent: React.FC<HeaderProps> = ({
       });
   };
 
+  const clickLogo = () => {
+    const moveCoord = new kakao.maps.LatLng(
+      defaultMapConfig.lat,
+      defaultMapConfig.lng,
+    );
+
+    map.setLevel(defaultMapConfig.level);
+    map.panTo(moveCoord);
+  };
+
   return (
     <S.Header>
-      <Logo logoColor="blue" />
+      <Link href="/" passHref>
+        <a onClick={clickLogo}>
+          <Logo logoColor="blue" />
+        </a>
+      </Link>
       {userRules === 'NO_AUTH_USER' ? (
         <S.HeaderAnchor onClick={() => handleAuth()}>
           회원가입/로그인

diff --git a/src/hooks/use-marker.ts b/src/hooks/use-marker.ts
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
+import { MarkerData } from 'types/marker.type';
 import useCompanyList from './api/company/use-company-list';
 
 const useMarker = (map: kakao.maps.Map | undefined) => {
-  const [markers, setMarkers] = useState<any[]>([]);
+  const [markers, setMarkers] = useState<MarkerData[]>([]);
   const { data } = useCompanyList();
 
   useEffect(() => {
@@ -14,11 +15,11 @@ const useMarker = (map: kakao.maps.Map | undefined) => {
     data.forEach(info => {
       gc.addressSearch(info.location, (result, status) => {
         if (status === kakao.maps.services.Status.OK) {
-          const coords = {
+          const coords: MarkerData = {
             ...info,
             position: {
-              lat: result[0].y,
-              lng: result[0].x,
+              lat: parseFloat(result[0].y),
+              lng: parseFloat(result[0].x),
             },
           };
 

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import type { AppProps } from 'next/app';
-import Script from 'next/script';
 
 import { GlobalStyle } from 'shared/GlobalStyle';
 import { useWindowSize } from 'hooks/use-window-size';
@@ -27,10 +26,6 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <Script
-        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.mapApiKey}&libraries=services,clusterer&autoload=false`}
-        strategy="beforeInteractive"
-      />
       <GlobalStyle />
       <Component {...pageProps} />
     </>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -5,6 +5,7 @@ import Document, {
   NextScript,
   DocumentContext,
 } from 'next/document';
+import Script from 'next/script';
 
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -44,13 +45,18 @@ class MyDocument extends Document {
 
           <link
             rel="stylesheet"
-            type="text/css"
-            href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+            as="style"
+            crossOrigin="anonymous"
+            href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css"
           />
         </Head>
         <body>
           <Main />
           <NextScript />
+          <Script
+            src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.mapApiKey}&libraries=services,clusterer&autoload=false`}
+            strategy="beforeInteractive"
+          />
         </body>
       </Html>
     );

diff --git a/src/shared/DefaultMapConfig.ts b/src/shared/DefaultMapConfig.ts
@@ -0,0 +1,7 @@
+const defaultMapConfig = {
+  lat: 36.658563176254795,
+  lng: 127.86119616960151,
+  level: 12,
+};
+
+export default defaultMapConfig;
diff --git a/src/shared/GlobalStyle.tsx b/src/shared/GlobalStyle.tsx
@@ -17,10 +17,10 @@ export function GlobalStyle() {
         }
 
         body {
-          font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
-            Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
-            'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
-            'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+          font-family: 'Pretendard Variable', Pretendard, -apple-system,
+            BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
+            'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
+            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
         }
       `}
     />

diff --git a/src/types/marker.type.ts b/src/types/marker.type.ts
@@ -0,0 +1,8 @@
+import { CompanyData } from './company.type';
+
+export interface MarkerData extends CompanyData {
+  position: {
+    lat: number;
+    lng: number;
+  };
+}