1차 프로젝트 회고록

2주간의 프로젝트를 마치며 어떤 것을 하려고했고, 어떤 일들이 있었으며 결과는 어땠고, 내 생각은 어땠는지 적어보려고합니다.

🐱‍👤 어떤 프로젝트를 하려고 했나요?

저희팀은 https://drop.com/all-communities/drops
Drop이라는 사이트를 선택받아서 진행하려고했고 , 어떤 사이트냐면
헤드셋,키보드를 파는 사이트인데 특이하게 커스텀한 키보드를 살 수 있고 그에 따른 리뷰들을 볼 수 있으며 게시판에서 투표를 해서 원하는 제품이 입고 될 수 있도록 하는 기능이 있습니다.

🙌 어떻게 진행하려고 했나요?

2주간의 짧은 시간이니만큼 모든 기능을 구현할 수는 없다고 생각했습니다.
프론트쪽에서는 레이아웃을 금방 만든다고해도 백엔드에서 데이터가 완성되지 않으면 안되니까 일단 최대한 빨리 만들어서 다른 팀원들을 도와주거나 추가 기능사항을 완성시켜보고 싶었습니다.

🎶 어떤 것을 만들었나요?

사용된 기술 스택

• React.js
• scss
• python

제가 맡은 부분은 웹페이지의 Footer, 상세 페이지를 만들었습니다.

• [Footer] 그냥 div와 ul등으로만 만들 수 있었지만 멘토님께서 map함수를 연습해 보라고 하셔서 상수데이터를 만들어 반복하는 형식으로 li요소를 반복해서 만들어 보았습니다.
• ❌[문제사항] 레이아웃을 다 짜놓고 리뷰요청을 했는데 갑자기.. map함수를 쓰라니요.. 크흑 아쉽지만 그 덕분에 구조도 조금씩 바꾸고 Footer에 꽤나 고생했습니다.
• 

• [Product Detail] 제가 상세페이지에서 가장 신경쓴 부분은 아무래도 캐러셀입니다. 리액트 라이브러리로도 만들 수 있지만 1차 프로젝트는 연습의 의미가 크기 때문에 쓰지말라고 하셨습니다.

• //캐러셀 코드입니다.
  const [mainCarousel, setMainCarousel] = useState(0);
    const [subCarousel, setSubCarousel] = useState(0);
    const leftCarouselButton = () => { //main과 sub 캐러셀에 각각 다른 state를 주어서 움직이게 했습니다.
      if (mainCarousel === 0 && subCarousel === 0) {
        setMainCarousel(0);
        setSubCarousel(0);
      } else {
        setMainCarousel(mainCarousel + 1050);
        setSubCarousel(subCarousel + 160);
      }
    };
  
    const rightCarouselButton = () => {
      if (mainCarousel === 13650 && subCarousel === 1920) {
        setMainCarousel(13650);
        setSubCarousel(1920);
      } else {
        setMainCarousel(mainCarousel - 1050);
        setSubCarousel(subCarousel - 160);
      }
    };

// 매인 캐러셀을 움직이는 코드입니다. 
//누를 때마다 state가 전달되어 리스트가 X축으로 움직입니다.
const ProductMainCarousel = ({ headphoneId, imgPath, mainCarousel }) => {
  return (
    <li
      className="main_image_container"
      style={{ transform: `translateX(${mainCarousel}px)` }}
    >
      <img src={imgPath} alt={headphoneId} />
    </li>
  );
};
export default ProductMainCarousel;

//scss 코드입니다.
  .product_image_main { 
        height: 700px;  //보여지는 캐러셀의 크기를 정해놓았습니다.
        margin-left: 70px;
        overflow: hidden;
        .main_carousel_box {
          width: 10000px; 이미지들이 움직이는 컨테이너의 크기를 임의로 정해놓았습니다.
          display: flex;
          overflow: hidden;
          .main_image_container {
            transition: all 0.5s;
            img {
              width: 1050px;
              height: 700px;
            }
          }
        }
      }
      
      
      

• 데이터를 받아서 제품의 이름, 가격, 세일 유무를 보여주려고 했습니다.
  또한 옵션을 선택해서 그 정보가 구매를 눌렀을 때 전달 될 수 있도록 했습니다.
  그러나 그 부분을 완성시키지는 못했습니다.. (그 이유는 뒤쪽에 있습니다..)
• 

🐱‍🏍 느낀점 (아쉬웠던 점들)

아무래도 백엔드와는 처음해보는 프로젝트여서 기대를 많이했지만 사실 좋은 결과는 아니었습니다. 왜냐하면 api를 받아서 이것들을 만든 것이 아니라 mock data를 가지고 만들었기 때문에 협업의 의미가 조금 아쉽지 않았나 싶습니다.. 비록 팀원들 모두 고생하셨지만 제대로 끝마무리짓지 못한 것같아 너무 아쉽습니다..

뭐가 문제였을까?

• 소통이 많이 부족했던 것 같습니다. 프론트끼리도 말이죠, 컨벤션을 처음에 명확하게 정해놓고 하지않아서 merge했을 때 classname이 겹친다든지 크고 작은 conflict들이 있었습니다. 또한 백엔드님한테 정확한 요구사항을 전달하지 못했습니다. 저는 그냥 백엔드분이 만들어준 데이터를 가공하기만 하면 된다고 생각했습니다만.. 막상 그 데이터를 받았을 때는.. 정말 어지러웠죠.. 이래서 소통이 중요하다..고 생각했습니다!

• 좀 더 열심히 하지 않았던 것 같습니다. 연결이 안되면 아무것도 못한다고 생각해서 본인이 할 일에 집중을 잘 하지 못했습니다. 연결이 안되더라도 목데이터를 좀 손본다든가 그것으로 다른 일들도 할 수 있었는데 너무 아쉽습니다.

앞으로는 어떻게 할껀가요? ✨

• 요구사항이 중요하다!!! 라고 생각했습니다. 그래서 다음 프로젝트에는 무엇이 필요한지 정확하게 말하고 명세를 할 것입니다. 저희팀은 노션의 기능을 사용해서 정리했었습니다.근데 스프린트 할 떄는 분명 확인했으나 정리했던 내용으로 하지 않았던 경우도 있었어서 우리가 직접 명세 했던 것들을 확인하고 일을 시작하기 전에는 무조건 다시 확인하는 일을 할겁니다..
• 팀 분위기는 너무나 좋았으나 결과는.. 매우 아쉬웠습니다. 그래서 2차프로젝트가 끝나면 이 drop녀석을 완성시켜서 다시 포스팅 할껍니다.. 꼭!!! 꼮!!!!!