Feat/juchan: 타입스크립트 도입

front-empathy/package.json

@@ -56,7 +56,8 @@
     "framer": "^1"
   },
   "devDependencies": {
-    "framer": "^1.1.7"
+    "framer": "^1.1.7",
+    "typescript": "^3.9.6"
   },
   "framer": {
     "displayName": ""

front-empathy/src/api/artist/index.ts

@@ -1,9 +1,9 @@
 import { requestGET } from "../index";
 
 export const loadArtist = (artistId = 1) => {
-  return requestGET(`/artist/${ artistId }`);
+  return requestGET(`/artist/${artistId}`);
 };
 
 export const loadArtists = (page = 1, pageUnit = 5) => {
-  return requestGET(`/artist?page=${ page }&page_unit=${ pageUnit }`);
+  return requestGET(`/artist?page=${page}&page_unit=${pageUnit}`);
 };

front-empathy/src/api/index.ts

@@ -1,6 +1,6 @@
 const SERVER_URL = process.env.REACT_APP_SERVER_API;
 
-export const requestGET = (url: any) => {
+export const requestGET = (url: string) => {
   return fetch(SERVER_URL + url)
     .then(res => res.json())
     .catch(err => console.error(err));

front-empathy/src/components/CircleItemSlider.jsx

@@ -33,7 +33,7 @@ const SliderWrapper = styled(Slider)`
 `;
 
 const ArrowWrapper = styled.div`
-  visibility: ${props => props.show ? 'visible' : 'hidden'};
+  visibility: ${ props => props.show ? 'visible' : 'hidden' };
   width: 40px;
   height: 100%;
   display: flex;
@@ -58,7 +58,7 @@ const CircleItemSliderWrapper = styled.div`
 
   .slide {
     position: relative;
-    ${ArrowWrapper} {
+    ${ ArrowWrapper } {
       &.left {
         position: absolute;
         top: 0;
@@ -150,19 +150,19 @@ const CircleItemSlider = ({ slickItems }) => {
     <CircleItemSliderWrapper>
       <h4 className="title">Upcoming event's location</h4>
       <div className="slide">
-        <SliderWrapper ref={sliderEl}  {...settings}>
-          {slickItems.map(({ id, title, img, date }) => (
-            <div className="item" key={id}>
-              <div className="circle" style={{ backgroundImage: `url(${img})` }}/>
-              <p className="title">{title}</p>
+        <SliderWrapper ref={ sliderEl }  { ...settings }>
+          { slickItems.map(({ id, title, img, date }) => (
+            <div className="item" key={ id }>
+              <div className="circle" style={ { backgroundImage: `url(${ img })` } }/>
+              <p className="title">{ title }</p>
             </div>
-          ))}
+          )) }
         </SliderWrapper>
-        <ArrowWrapper className="left" onClick={onLeftArrowClick} show={showArrow.left}>
-          <ArrowRight width={20} height={20} color={"white"} style={{ transform: 'rotate(180deg)' }}/>
+        <ArrowWrapper className="left" onClick={ onLeftArrowClick } show={ showArrow.left }>
+          <ArrowRight width={ 20 } height={ 20 } color={ "white" } style={ { transform: 'rotate(180deg)' } }/>
         </ArrowWrapper>
-        <ArrowWrapper className="right" onClick={onRightArrowClick} show={showArrow.right}>
-          <ArrowRight width={20} height={20} color={"white"}/>
+        <ArrowWrapper className="right" onClick={ onRightArrowClick } show={ showArrow.right }>
+          <ArrowRight width={ 20 } height={ 20 } color={ "white" }/>
         </ArrowWrapper>
       </div>
     </CircleItemSliderWrapper>

front-empathy/src/pages/LocationDetail/LocationDetail.jsx

@@ -17,7 +17,7 @@ const fetchData = (url) => {
 };
 
 export const getLocationId = (locationId) => {
-  return fetchData(`http://localhost:5000/locationDetail/${locationId}`);
+  return fetchData(`http://localhost:5000/locationDetail/${ locationId }`);
 };
 
 const HeroSection = styled.div`
@@ -181,8 +181,8 @@ const LocationDetail = ({
               <p>{location.name}</p>
             </Header>
             <Info>
-              <p>{location.name}</p>
-              <p>{location.name}</p>
+              <p>{ location.name }</p>
+              <p>{ location.name }</p>
             </Info>
           </HeroSection>
 
@@ -193,27 +193,28 @@ const LocationDetail = ({
           <InfoSection>
             <div>
               <span>Address</span>
-              <span>{location.address}</span>
+              <span>{ location.address }</span>
             </div>
             <div>
               <span>ProgrammeType</span>
-              <span>{location.programmeType}</span>
+              <span>{ location.programmeType }</span>
             </div>
             <div>
               <span>Location Fee</span>
-              <span>{location.fee}</span>
+              <span>{ location.fee }</span>
             </div>
             <div>
               <span>Opening Hour</span>
-              <span>{location.openHour}</span>
+              <span>{ location.openHour }</span>
             </div>
             <div>
               <span>Istagram</span>
-              <span>{location.instaId}</span>
+              <span>{ location.instaId }</span>
             </div>
           </InfoSection>
 
           <CtaButtonContainer>
+            <CtaButton label={ `locationDetail` } onClick={ () => shareLink(`locationDetail`, `locationDetail`) }/>
             <CtaButton label={`locationDetail`} onClick={() => shareLink(`locationDetail`, `locationDetail`)} />
           </CtaButtonContainer>
 
@@ -240,7 +241,7 @@ const LocationDetail = ({
             </EventGroup>
           </div>
         </>
-      )}
+      ) }
     </>
   );
 };

front-empathy/tsconfig.json

@@ -1,6 +1,13 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "typeRoots": [
+      "../../node_modules/@types",
+      "../../typings"
+    ],
+    "types": [
+      "node"
+    ],
     "lib": [
       "dom",
       "dom.iterable",
@@ -20,6 +27,7 @@
     "jsx": "react"
   },
   "include": [
-    "src"
+    "src",
+    "**/*.d.ts"
   ]
 }

front-empathy/tslint.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-reference": false
+  }
+}

front-empathy/typings/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference path='./Location.d.ts' />
+
+export declare global {
+  interface Window {
+  }
+
+  interface StringKeyDict<T> {
+    [key: string]: T;
+  }
+
+  interface NumberKeyDict<T> {
+    [key: number]: T;
+  }
+
+}

front-empathy/typings/location.d.ts

@@ -0,0 +1,18 @@
+export declare global {
+  interface LocationDetail {
+    id: string,
+    name: string;
+    image: string;
+    description: string;
+    address: string;
+    programmeType: string;
+    fee: string
+    openHour: string;
+    instaId: string;
+    eventGroup: EventGroup[]
+  }
+
+  interface EventGroup {
+    date: string;
+  }
+}