WILs

10주차 WIL (아웃소싱 프로젝트)

API284 2023. 7. 23. 19:57

타 팀들은 대부분 설문 조사 사이트나 youtube api를 활용한 기능구현을 진행했는데

우리 팀만 유일하게 map api를 활용한거로 보인다. 아닐수도?

올해 초에 따로 개인 프로젝트를 진행하면서 지도 api를 삽입하려는데 워낙 이해가 안되는 부분이라 좌절했었는데

현재는 팀 프로젝트이다 보니 너무 도전해 보고 싶었다.

앞선 TIL에서 언급했듯이 계획을 세우고 와이어프레임을 짜다 보니까 올해 초에 진행한 개인 프로젝트 보다 훨씬

복잡해지고 고도화되었다.

그래서 각 팀원 역할 분배할 때 지도를 하고싶다고 나서지 못 하였다.

그렇기 때문에 타 api를 요청해 오는 파트를 맡게 되었는데, 지도 api를 맡으신 분이 선발대에 속하신 잘 하시는 분인데 코드 공유가 아직 안된 상태라 로직이 이해가 안되어있다.

그래도 다른 분 코드는 눈으로 보고 오류를 해결하면서 많이 반복해서 어느정도 이해가 가는데 지도 api부분은 여간 복잡하다. 전체 코드 리뷰 시간에 꼼꼼히 보고 여쭤봐야겠다.

 

Home 에서 지도와 유튜브 api는 제자리에 고정이며,

우측에 Facilities에 게시글을 클릭하면 해당 id의 정보를 보여주는 Detail 페이지와 연동하는 부분을 설명하려고 한다.

이해하기에 가장 복잡했으며 해결하는데에도 꽤나 긴 시간을 할애하였으며, 튜터님의 튜터링으로 해결되었다.

redux로 관리했으면 더 수월했겠지만 이미 로직이 60~70%정도 구현된 상태에서 뒤엎기에는 무리한 감이 있어서

하드 코딩으로 진행하게 되었다. 리팩토링이 필요해 보이는 부분이다.

 

Home.jsx의 로직이다. 

삼항연산자로 Facilities가 아니라면 Detail을 띄워준다.

 

  return (
    <Mother>
      <Header setFilteredGlobalDataByArea={setFilteredGlobalDataByArea} setGlobalSearch={setGlobalSearch} />
      <ContainerWrapper>
        <StyledDivForLeft>
          <MapComponent />
          <StyledRecommendation>
            <div id="recommendation-title">
              <h2>💥GoGo PlayList</h2>
            </div>
            <YouTubeApi />
          </StyledRecommendation>
        </StyledDivForLeft>
        <StyledDivForRight>
          {facility ? (
            <Detail setFacility={setFacility} facility={facility} />
          ) : (
            <Facilities
              filteredGlobalDataByArea={filteredGlobalDataByArea}
              globalSearch={globalSearch}
              setFacility={setFacility}
            />
          )}
        </StyledDivForRight>
      </ContainerWrapper>
    </Mother>
  );

 

 

Detail .jsx의 로직. 

상위에서 props로 setFacility, facility 받아와서 postData로 그대로 전달해준다.

 

const Detail = ({ setFacility, facility }) => {
  return (
    <PostWrapper>
      <PostData setFacility={setFacility} facility={facility} />
    </PostWrapper>
  );
};

export default Detail;

 

PostData .jsx의 로직. 

다시 전달 받아 내려준다.

해당props의 값들을 전달해주고자 하는 위치에 값을 불러와서 할당해 주면 된다.

 

const PostData = ({ setFacility, facility }) => {
  const openLink = () => {
    window.open(facility.SVCURL, '');
  };

  const getShortenedDate = (dateStr) => {
    // dateStr은 날짜 형식의 문자열로 가정합니다. 예: '2023-07-24'
    const shortenedDate = dateStr.substring(0, 10);
    return shortenedDate;
  };

  if (!facility) {
    return <div>Loading...</div>;
  }
  return (
    <PostBOX>
      <button
        id="detail-go-back"
        onClick={() => {
          setFacility(null);
        }}
      >
        뒤로가기
      </button>
      <div id="detail-image-container">
        <img src={facility.IMGURL} alt="facility img" />
        <div id="facility-title">{facility.MAXCLASSNM}</div>
      </div>
      <div id="detail-title-container">
        <h1>{facility.PLACENM}</h1>
        <div id="detail-status-info">
          <p>{facility.PAYATNM}</p>
          <p>{facility.SVCSTATNM}</p>
        </div>
      </div>
      <div id="detail-divider"></div>
      <div id="detail-title">
        <div>[ {facility.SVCNM} ]</div>
        <span>
          접수기간:&nbsp;&nbsp;{getShortenedDate(facility.RCPTBGNDT)} ~ {getShortenedDate(facility.RCPTENDDT)}
        </span>
        <button id="detail-book" onClick={openLink}>
          예약하기
        </button>
      </div>
      <div id="detail-divider-2"></div>
      <div>
        <div>{facility.TELNO ? `연락처: ${facility.TELNO}` : `연락처: 상세페이지를 참고하세요.`}</div>
      </div>
      <div>
        이용시간:&nbsp;&nbsp;{facility.V_MIN} ~ {facility.V_MAX}
      </div>
      <Comments facility={facility} />
    </PostBOX>
  );
};

 

삼항연산자로 간단하게 띄워줄 수 있었는데 너무 돌아갔던 경험이였다. 쉽지 않았지만

튜터링을 받으면서 굉장히 멋있다고 느꼈으며 뭔가 모를 더 큰 매력을 느끼는 포인트가 있었다.

주말은 read me 작성과 api 명세서 작성하면서 css 마무리하며 보낼 거 같다.