본격적으로 주니어 첫 과제입니다 !
온보딩 과제에선 주니어분들이 구체적인 요구사항을 만족하는 경험을 할 수 있었다면, 이번 과제를 통해선 실제 주어진 문제를 스스로 분석하고 개발해나가는 경험을 할 수 있도록 과제를 구성해보았습니다 !
과제 제출 방식은
- 과제 레포지토리를 Fork
- 커밋을 남기며 작업
- Pull Request
하는 방식으로 진행할 예정이며 하단의 링크를 통해 자세히 알아보실 수 있습니다.
https://github.com/areumsheep/javascript-baseball
Fork할 레포지토리의 장소(오가니제이션) 및 과제 제출 방식 가이드라인, 리뷰 방식 등은 리드 분들과 상의 후 최대한 빠른 시일 내에 제공해드리겠습니다 !
다음의 2개의 이미지를 참고하여 과제 요구사항을 구체화하겠습니다.
figure 2. 화면을 축소했을 때 인스타그램의 모습
본 위의 이미지 및 본인의 PC 인스타그램 화면을 참고하여 인스타그램을 따라 만들어 보는 과제입니다.
자유롭게 본인이 구현하고 싶은 인스타 그램을 구현하되 다음의 기능은 필수로 구현해주세요.
- "전체 화면"의 웹사이트 모습에서 화면을 축소 할 경우 웹사이트의 모습이 변화할 수 있도록 반응형 웹을 구현해주세요.
- 본 과제에선 PC 인스타그램의 Home 페이지만 구현합니다. Home 페이지의 구성은 크게 3가지 파트로 구분할 수 있습니다. 각 파트의 이름은 제가 작명한 이름을 따르지 않아도 괜찮습니다. 하지만 각 파트에서 다음의 기능을 구현해주세요. (figure 1 기준 우측의 회원님을 추천 파트는 구현하지 않아도 됩니다.)
- Navbar: 인스타그램이 제공하는 다양한 기능을 버튼을 통해 사용할 수 있습니다.
- Navbar를 아이콘과 함께 구현해주세요. 단 본 과제에선 Home 페이지만 구현하기 때문에 별도의 링크 연결은 하지 않으셔도 좋습니다.
- 아이콘은 다음의 링크를 통해 쉽게 구할 수 있습니다. https://fonts.google.com/icons
- StoryFeed: 본인이 팔로잉 중인 인물의 스토리를 확인할 수 있습니다.
- 현재 3명의 가상의 인물 혹은 캐릭터를 팔로잉중입니다.
- 기본값은 해당 인물의 스토리를 확인하지 않은 상태(테두리에 빛이 들어온 상태)입니다.
- 해당 인물의 사진을 클릭할 경우 별도의 모달창을 표시하지 않고 해당 인물을 확인한 상태(테두리에 빛이 꺼진 상태)로 변경해주세요.
- PostCard: 인스타그램 게시물입니다.
- 현재 StoryFeed에서 팔로잉 중인 3명의 인물이 각각 1개의 게시물을 업로드한 상태입니다.
- 각각의 포스트는 3개의 사진을 가지고 있습니다. 화살표 버튼을 클릭 시 다음 사진을 확인 할 수 있습니다.
- (옵션) 사진 하단의 작은 점 버튼을 통해 현재 사진의 순서를 확인할 수 있습니다.
- 하트 버튼을 누르면 빨간색 하트로 토글됩니다.
- 본 과제는 HTML, CSS, JS만을 사용해서 구현해주세요.
- 본 과제는 페어프로그래밍으로 작업을 진행해주세요. 아직은 페어프로그래밍에 적응하는 단계로 다소 혼선이 빚어질 수 있다는 점은 인지하고 있습니다. 향후에는 커밋 컨벤션, 네이밍 컨벤션, 이슈 발행 및 이슈 단위 작업 등을 구체적으로 요구할 예정이지만, 본 과제에선 ‘각 인원이 어느 파트를 집중적으로 다뤘다.’에 대한 체크만 진행할 예정입니다.
- 하나의 작업이 끝나면 하나의 커밋을 진행해주세요. 하나의 작업이 어떤 기준인지 모르실 경우엔 최대한 작은 단위로 커밋을 진행해주셔도 좋습니다. 스스로 커밋 메세지를 작성하면서 감을 잡도록 연습해주세요.
- 리드에게 도움을 요청할 땐 ‘모르겠어요’, ‘해주세요’와 같은 요청 대신 ‘OO에서 문제가 생겨서 XX와 같은 방식도 시도해보았습니다. KK부분에서 문제가 발생한 거 같은데 어떤 방식으로 접근해야 할 지 모르겠습니다.’와 같이 구체적으로 문제 상황을 알려주세요 !
1차: 2024년 2월 1일 목요일 오후 6시 2차: 2024년 2월 8일 목요일 오후 6시