FRONTENDSCHOOL7/villains

🚃 SUBONE - 서울 지하철 1호선 커뮤니티 서비스

🚃 SUBONE

0. 목차

1. 프로젝트 소개 및 개요

• 프로젝트 기간 : 2023.10.12 ~ 2023.11.09
• 배포 URL 🔗

ID: villain@test.com
PW: 123123

[프로젝트 설명]

• SUBONE은 서울 지하철 1호선 승객들을 위한 맞춤형 커뮤니티 서비스 입니다. 이 앱을 통해 이용자들은 손쉽게 게시글을 올리고, 커뮤니티 활동을 즐길 수 있습니다. 또한 지하철을 이용한 택배 배송 서비스도 제공하고 있습니다.

• 기존의 앱들이 사용자에게 많은 입력을 요구하며, 위치와 시간 정보를 한눈에 파악하기 어려운 불편함을 가지고 있었습니다. SUBONE은 이러한 문제를 해결하기 위해, 지도 위에 각 역의 위치와 사용자의 현재 위치를 직관적으로 표시합니다. 사용자는 지하철 도착 시간과 스케줄을 실시간으로 확인할 수 있으며, 커뮤니티의 게시글도 지도에 마킹하여 사용자의 편의성과 앱의 재미를 동시에 고려했습니다.

• 서울권의 지하철 노선만 총 23개이므로 모든 노선을 구현하기엔 한계가 있다고 판단했습니다. 프로젝트의 범위를 명확하게 설정하고, 실현 가능한 목표를 세우기 위해 상징성과 대중성을 갖춘 1호선을 중심으로 서비스를 구현하기로 결정하였습니다.

[프로젝트 일정]

• 전체 일정

• 명세 기능별 일정

https://github.com/orgs/FRONTENDSCHOOL7/projects/1

2. 팀 소개

😈 Villains 팀을 소개합니다!

안녕하세요, 저희는 4명의 Front-end 개발자로 구성된 Villains팀입니다.

(멋쟁이사자처럼 프론트엔드 스쿨 7기 프로젝트 16팀입니다.)

이지현	김규리	김윤상	신명진
JiHyeon Lee	gyulls2	YOONSANG KIM	mj.shin
팀장	팀원	팀원	팀원

[방향성]

• 팀 목표

  • 핵심 기능(지도 API, 게시글 등록 등)을 구현하는 것입니다.
  • 로그인, 메인, 유저, 택배, 게시글 페이지를 구현하는 것입니다.
  • VITE, Recoil 등 새로운 기술을 공부하여 적용하는 것입니다.

• 상황

  • 위니브에서 API 가 제공되었지만 원하는 기능을 구현하는데 한계가 있다고 판단하였습니다.
  • 프로젝트 경험이 처음인 팀원과 두 번째, 세 번째인 팀원 등 실력이 천차만별이었습니다.

• 문제

  • 전체 일정 중 개발 일정이 짧다는 피드백을 받았습니다.
  • 문서화 작업 비중이 크다는 비중이 크다는 피드백을 받았습니다.
  • 스스로 오류를 해결하려다 보니 개발이 더뎌진다는 문제점이 있었습니다.
  • 새로운 것이 많아 코드에 적용하여 사용하는데 어려움이 있었습니다.

• 결과

  • 기존 개발 일정이 10일이었는데 명세 작업 시작과 동시에 주요 개발 작업을 시작하는 것으로 일정을 변경하여 총 15일간 개발할 수 있도록 기간을 늘렸습니다.
  • 회의 시작 후 10분간 각자의 목표와 달성 여부를 개인이 직접 작성하도록 하여 회의록 작성 시간을 줄이고 개발에 집중할 수 있도록 개선하였습니다.
  • 이슈가 생기면 스스로 30분 간 고민 후 문제점과 본인이 해결하려고 했던 방법을 공유하도록 규칙을 정하여 진행 속도를 높혔습니다.
  • 수요일과 토요일 저녁 7시에 모여 스터디를 진행함으로써 새로운 기술을 공부하는 시간을 가졌습니다.

😈 역할분담

3. 기술 스택 및 개발 환경

[!NOTE] 프로젝트 세팅을 담당하면서 직접 빌드 도구를 선택하고 필요한 패키지들만 채워서 가볍게 만들려고 했습니다. 그래서 리액트 프로젝트를 쉽게 시작할 수 있는 CRA를 선택하지 않았는데, 웹팩은 초기 설정이 많고 어렵기도 해서, 요즘 대세인 VITE를 선택했습니다. 빌드가 빠르기도 하고, 설정도 간단하였고, 바벨을 대체하는 SWC를 사용하여 더욱 빠르게 빌드할 수 있도록 하였습니다! [!NOTE] 서버의 데이터에서 필터링해야 할 조건들이 있었고, 비동기적으로 컴포넌트가 마운트되기 전 빠르게 데이터를 가져와야 사용자 경험을 향상시킬 수 있다고 판단하여 리액트 쿼리를 도입하였습니다. 리액트 쿼리를 처음 사용하다 보니, 클라이언트 사이드 상태 관리로는 러닝 커브가 낮은 리코일을 선택하였습니다.

4. 폴더 구조

토글 접기/펼치기

📦 villains
├─ .eslintrc.cjs
├─ .githu
│  ├─ ISSUE_TEMPLATE
│  │  └─ -😈feat-.md
│  ├─ pull_request_template.md
│  └─ workflows
│     └─ deploy.yml
├─ .gitignore
├─ .gitmessage.txt
├─ .nvmrc
├─ .prettierrc
├─ README.md
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
├─ src
│  ├─ App.jsx
│  ├─ api
│  │  ├─ delete
│  │  │  ├─ deleteComments.api.js
│  │  │  ├─ deleteFollow.api.js
│  │  │  ├─ deletePost.api.js
│  │  │  └─ deleteProduct.api.js
│  │  ├─ get
│  │  │  ├─ getCheckToken.api.js
│  │  │  ├─ getComments.api.js
│  │  │  ├─ getFollowingList.api.js
│  │  │  ├─ getMyInfo.api.js
│  │  │  ├─ getPostDetail.api.js
│  │  │  ├─ getPosts.api.js
│  │  │  ├─ getProductDetail.api.js
│  │  │  ├─ getProducts.api.js
│  │  │  ├─ getSearchUser.api.js
│  │  │  ├─ getSubOneInfo.api.js
│  │  │  ├─ getSubTime.api.js
│  │  │  ├─ getUserDetail.api.js
│  │  │  ├─ getUserFollower.api.js
│  │  │  ├─ getUserInfo.api.js
│  │  │  └─ getUserPost.api.js
│  │  ├─ loader
│  │  │  └─ searchPlace.loader.js
│  │  ├─ post
│  │  │  ├─ postComments.api.js
│  │  │  ├─ postCommentsReport.api.js
│  │  │  ├─ postFollow.api.js
│  │  │  ├─ postHeart.api.js
│  │  │  ├─ postImage.api.js
│  │  │  ├─ postImages.api.js
│  │  │  ├─ postReport.api.js
│  │  │  ├─ postUnFollow.api.js
│  │  │  └─ postUploadPost.api.js
│  │  └─ update
│  │     ├─ updatePostEdit.api.js
│  │     ├─ updateProduct.api.js
│  │     └─ updateUser.api.js
│  ├─ assets
│  │  ├─ fonts
│  │  └─ img
│  ├─ atoms
│  │  ├─ bottomSheetStateAtom.js
│  │  ├─ followPageStateAtom.js
│  │  ├─ goodsFocusEndAtom.js
│  │  ├─ goodsFocusStartAtom.js
│  │  ├─ goodsQueryEndAtom.js
│  │  ├─ goodsQueryStartAtom.js
│  │  ├─ headerBtnStateAtom.js
│  │  ├─ profileAtom.js
│  │  ├─ queryAtom.js
│  │  ├─ queryFocusAtom.js
│  │  ├─ realProductAuthorAtom.js
│  │  ├─ stationPlaceAtom.js
│  │  ├─ subOneAtom.js
│  │  ├─ userAtom.js
│  │  └─ userPostAtom.js
│  ├─ components
│  │  ├─ BottomSheet.jsx
│  │  ├─ Buttons.jsx
│  │  ├─ CheckBox.jsx
│  │  ├─ DropDown.jsx
│  │  ├─ FloatingButton.style.jsx
│  │  ├─ Follower.jsx
│  │  ├─ GlobalButton.jsx
│  │  ├─ Goods.jsx
│  │  ├─ Input.style.jsx
│  │  ├─ Modal.jsx
│  │  ├─ PageTemplate.jsx
│  │  ├─ PageTemplate.style.js
│  │  ├─ SearchSub.jsx
│  │  ├─ Tanghulu.jsx
│  │  ├─ chat
│  │  │  ├─ ChatInputField.jsx
│  │  │  ├─ ChatListItem.jsx
│  │  │  └─ Message.jsx
│  │  ├─ feed
│  │  │  ├─ Comment.jsx
│  │  │  ├─ CommentForm.jsx
│  │  │  ├─ ImagePreview.jsx
│  │  │  ├─ PostCard.jsx
│  │  │  └─ ResizingTextarea.jsx
│  │  ├─ layout
│  │  │  ├─ BackHeader.jsx
│  │  │  ├─ DefautlLayout.jsx
│  │  │  ├─ NavMenu.jsx
│  │  │  ├─ PrivateLayout.jsx
│  │  │  ├─ SearchHeader.jsx
│  │  │  └─ SearchLayout.jsx
│  │  ├─ map
│  │  │  └─ TrainMap.jsx
│  │  ├─ profile
│  │  │  └─ profile.jsx
│  │  ├─ searchbar
│  │  │  ├─ ListBox.jsx
│  │  │  ├─ SearchBar.jsx
│  │  │  ├─ UserCard.jsx
│  │  │  └─ UserListBox.jsx
│  │  └─ splash
│  │     └─ Splash.style.js
│  ├─ config
│  │  ├─ api.config.js
│  │  ├─ contact.jsx
│  │  ├─ pageUrlConfig.js
│  │  └─ route.config.jsx
│  ├─ database
│  │  └─ 2023-2024-holiday.json
│  ├─ hooks
│  │  ├─ useBlockToBack.js
│  │  ├─ useBottomSheetOptions.js
│  │  ├─ useFormatDate.js
│  │  ├─ useGeoLocation.js
│  │  ├─ useInfiniteScroll.js
│  │  ├─ useModal.js
│  │  └─ useSearchData.js
│  ├─ index.jsx
│  ├─ style
│  │  ├─ GlobalStyles.jsx
│  │  ├─ swiperStyle.js
│  │  └─ theme.js
│  └─ views
│     ├─ Error.view.jsx
│     ├─ FollowersList.view.jsx
│     ├─ FollowingsList.view.jsx
│     ├─ auth
│     │  ├─ SignIn.view.jsx
│     │  ├─ SignUp.view.jsx
│     │  ├─ Splash.view.jsx
│     │  └─ index.view.jsx
│     ├─ chat
│     │  ├─ Chat.view.jsx
│     │  ├─ ChatDetail.view.jsx
│     │  └─ index.view.jsx
│     ├─ feed
│     │  ├─ Feed.view.jsx
│     │  ├─ FeedDetail.view.jsx
│     │  ├─ FeedWrite.view.jsx
│     │  └─ index.view.jsx
│     ├─ goods
│     │  ├─ Goods.view.jsx
│     │  ├─ GoodsDetail.view.jsx
│     │  ├─ GoodsWrite.view.jsx
│     │  └─ index.view.jsx
│     ├─ home
│     │  ├─ Home.view.jsx
│     │  ├─ Result.view.jsx
│     │  ├─ Train.view.jsx
│     │  └─ index.view.jsx
│     └─ user
│        ├─ Profile.view.jsx
│        ├─ ProfileEdit.view.jsx
│        ├─ ProfileFollow.view.jsx
│        └─ index.view.jsx
└─ vite.config.js

5. 구현 기능

• 로그인/ 회원가입
• 좋아요
• 게시글 등록
• 지도에 위치 표시
• 검색
• 무한스크롤
• 택배 리스트

6. UI

[전체 페이지]

[디자인 시스템]

[페이지 기능]

1) 로그인 / 회원가입

스플래시 페이지	로그인 페이지	회원가입 페이지

2) 홈

홈 페이지

3) 피드

피드 페이지	유저 검색 기능	게시글 작성 페이지

게시글 상세 페이지	게시글 수정 기능	게시글 삭제 기능

댓글 작성	댓글 삭제 기능	댓글 신고 기능

4) 지하철 택배

택배 등록	택배 배달수락 / 채팅	채팅 확인 / 택배 상태 변경

배달 완료 채팅	배달 완료 확인 / 택배 상태 변경	택배 수정

택배 삭제

5) 프로필

프로필 페이지	프로필 수정 페이지	팔로워 / 팔로잉 페이지

7. 핵심 기능 및 코드

Open API

📂src/views/home/index.view.jsx

useMemo를 사용하여 정적 데이터를 불러오고, 그것을 바탕으로 리코일에 저장하였습니다. 그래서 불필요한 api 요청을 최대한 줄이려 했고, 이를 이용해 ListBox를 렌더링하는데, 이 또한 기존의 검색 리스트박스가 position 속성을 사용하던 것과 달리 별도의 컴포넌트로 하여 리플로우를 줄이려고 하였습니다.

const HomeIndexPage = () => {
  const navigate = useNavigate();
  const [subOneInfo, setSubOneInfo] = useRecoilState(subOneAtom);
  const [query, setQuery] = useRecoilState(queryAtom);

  useMemo(() => {
    //도시철도 1호선 지하철역 정보 불러오기
    getSubOneInfo().then((data) => {
      const dataList = data.data.SearchInfoBySubwayNameService.row;
      const rowInfo = [...dataList].filter((elem) => elem.LINE_NUM === '01호선');
      const newInfo = rowInfo.map((info, index) => {
        return (info = { Query: info.STATION_NM, Id: info.STATION_CD });
      });
      setSubOneInfo(newInfo);
    });
  }, []);

  const list = useSearchData(query, subOneInfo);

  const handleClickBack = () => {
    setQuery('');
  };
  const handleClickStation = (event) => {
    navigate(`${pageUrlConfig.homePage}/${event.target.id}`, { state: event.target.textContent });
    setQuery('');
  };
  return (
    <>
      <SearchHeader onClick={handleClickBack} placeholder={`지하철역을 검색해주세요`} />
      {query ? <ListBox list={list} onClick={handleClickStation} /> : <Outlet />}
      <NavMenu />
    </>
  );
};

export default HomeIndexPage;

라우터

📂src/config/pageUrlConfig.js

별도의 클래스로 생성하여 라우터를 최대한 한 곳에서 수정할 수 있도록 하였습니다.

const baseUrl = import.meta.env.BASE_URL;
class pageUlrConfig {
  splashPage = `${baseUrl}`;
  //생략
  goodsDetailPage = `${baseUrl}goods/:id`;
  goodsEditPage = `${baseUrl}goods/edit/:id`;
}

export default new pageUlrConfig();

📂src/config/route.config.jsx

PrivateLayout을 사용하여 로그인 후 접근이 가능하도록 하였고, loader를 사용해 미리 사용자 정보를 하위 컴포넌트에서 가져올 수 있도록 하여 매번 localStorage에 접근하는 코드를 줄였습니다.

const routeConfig = [
  {
    path: baseUrl,
    element: <DefaultLayout />,
    children: [
      {
        path: pageUrlConfig.splashPage,
        element: <AuthIndexPage/>,
        children: [
          { index: true, element: <SplashPage /> },
          { path: pageUrlConfig.signInPage, element: <SignInPage /> },
          { path: pageUrlConfig.signUpPage, element: <SignUpPage />},
        ],
      },
      {
        path: baseUrl,
        loader: async()=>sendUserInfo(),
        id: 'user',
        element: <PrivateLayout />,
        children: [
          {
            path: pageUrlConfig.homePage,
            element: <HomeIndexPage/>,
            children: [

스타일드 컴포넌트를 이용한 버튼 컴포넌트, 글로벌 스타일

📂src/components/default/GlobalButton.jsx

공통적으로 쓰이는 스타일 등은 css로 정의하고 버튼에 가져올 수 있도록 하였고, 외의 다른 스타일에도 쉽게 적용할 수 있었습니다.

import styled, { css } from 'styled-components';
import theme from '../../style/theme';

/**@param variant: "primary" | "secondary" | "basic" */
const DefaultBtn = ({ children, variant, disabled, id }) => {
  return (
    <StyledButton variant={variant ?? 'primary'} disabled={disabled ?? false} id={id ?? ''}>
      {children}
    </StyledButton>
  );
};

const PrimaryStyle = css`
  background-color: ${theme.color.primary};
  color: ${theme.color.white};
  border-color: ${theme.color.primary};
`;

const SecondaryStyle = css`
  background-color: ${theme.color.secondary};
  color: ${theme.color.black};
  border-color: ${theme.color.secondary};
`;

const BasicStyle = css`
  background-color: ${theme.color.white};
  color: ${theme.color.primary};
  border-color: ${theme.color.primary};
`;

const StyledButton = styled.button`
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-radius: 9999px;
  cursor: pointer;
  ${(props) => {
    switch (props.variant) {
      case 'primary':
        return PrimaryStyle;
      case 'secondary':
        return SecondaryStyle;
      case 'basic':
        return BasicStyle;
    }
  }}
  &:disabled {
    border-color: ${theme.color.grey};
    background-color: ${theme.color.grey};
    color: ${theme.color.white};
    cursor: default;
  }
`;
export { PrimaryStyle, SecondaryStyle, BasicStyle };
export default DefaultBtn;

📂src/style/theme.js

const theme = {
  color: {
    primary: '#3c58c1',
    secondary: '#B1BCE6',
    white: '#FFF',
    black: '#000',
    brown: '#663C06',
    grey: '#767676',
    light: '#DBDBDB',
  },
  //생략
  fontSize: {
    h1: `48px`,
    h2: `36px`,
    h3: `24px`,
    body1: `18px`,
    body2: `16px`,
    body3: `14px`,
    caption: `12px`,
  },
};
export default theme;

프로필

많은 버튼들이 필요한 곳이어서 이벤트 버블링을 통해 버튼 클릭 이벤트를 관리하였습니다. 또한, 게시글과 택배 목록을 넘나드는 탭 메뉴는 간단하게 스타일 컴포넌트를 사용하여 조절하였습니다.

const handleClickBtns = (event) => {
    switch(event.target.id){
      case 'chat':
        navigate(pageUrlConfig.chatPage);
        break;
      case 'share':
        const BASE_URL = import.meta.env.BASE_URL;
        navigator.clipboard.writeText(`${BASE_URL}${pathname}`);
        alert('링크 복사 완료!');
        break;
      case 'edit':
        navigate(`${pageUrlConfig.profilePage}/${user.accountname}/edit`)
        break;
      case 'unfollow':
        unFollowing();
        break;
      case 'follow':
        Following();
        break;
    }
//생략
<ButtonWrap onClick={handleClickBtns}>
  <button id='chat'></ button>
  {isMy ?
       <DefaultBtn id={`edit`}>프로필 수정</DefaultBtn>
				: (profileInfo.isfollow ?
		       <DefaultBtn variant={'basic'} id={`unfollow`}>언팔로우</DefaultBtn>
	        :  <DefaultBtn variant={'primary'} id={`follow`}>팔로우</DefaultBtn>
   )}
 <button id='share'></ button>
</ButtonWrap>
//생략
//탭 메뉴 클릭하면 스타일 반대로 주기
const TabGroup = styled.div`
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 64px;
  background-color: ${theme.color.white};

  & :nth-child(1){
    ${(props)=> props.color? SecondaryStyle : BasicStyle}
  }
  & :nth-child(2){
    ${(props)=> !props.color? SecondaryStyle : BasicStyle}
  }
`;

react-hook-form

프로젝트 진행 중 로그인 페이지, 회원가입 페이지, 게시글 작성 페이지, 수정 페이지 등등 form data를 관리하는 페이지가 점점 늘어나게 되었습니다.

기존 회원가입 form data를 관리 및 유효성 검사를 진행하기 위해서는 form 상태관리를 위한 state , form 입력 값이 변경되는 이벤트를 처리할 handler, form 데이터의 유효성을 검사하기 위한 validation 함수, 에러 메시지 값을 상태관리할 state 를 전부 코드로 작성해야했습니다. 하지만 저희는 여러개의 form data를 관리하고 있었고, 그에따른 state와 함수를 추가로 선언해야 했습니다.

이를 간소화 시키기 위해 react-hook-form 라이브러리를 사용했으며, react-hook-form 사용으로 위에 선언해야할 state 및 함수들을 전부 react-hook-form으로 관리가 가능했습니다.

// react-hook-form
  const {
    register,
    handleSubmit,
    watch,
    formState: { isSubmitting, isSubmitted, errors },
  } = useForm({ mode: 'onChange' });
  const userAccountId = watch('accountId');
  const userEmail = watch('email');
  const userPwd = watch('password');

...

<Input
  id="accountId"
  type="accountId"
  name="accountId"
  placeholder="영문, 숫자, 특수문자(.),(_)만 사용 가능"
  aria-invalid={isSubmitted ? (errors.accountId ? 'true' : 'false') : undefined}
   {...register('accountId', {
     required: '*계정ID를 입력해주세요.',
     pattern: {
     value: /^[A-Za-z0-9._]+$/,
     message: '*계정ID 형식에 맞지 않습니다.',
    },
  })}
 />

...

register를 사용해 입력전 required 메시지, 유효성 검증 정규식, 유효성 검증 에러 메시지를 관리 할 수 있고, watch를 통해 form 상태 관리를 위한 state, 입력 값이 변경되는 이벤트를 처리할 handler를 대신하여 react-hook-form을 사용하기 전보다 훨씬 간결한 코드를 작성할 수가 있었습니다.

바텀시트 컴포넌트 재사용

바텀시트 UI를 재사용할 수 있도록 상태를 Recoil을 통해 전역으로 관리하고, 옵션을 생성하는 커스텀 훅을 만들었습니다. 📂src/atoms/bottomSheetStateAtom.js

import { atom } from 'recoil';

export const bottomSheetStateAtom = atom({
  key: 'bottomSheetState',
  default: false,
});

export const bottomSheetOptions = atom({
  key: 'bottomSheetOptions',
  default: [],
});

📂src/hooks/uswBottomSheetOption.js

const useBottomSheetOptions = ({
  currentAccountname,
  authorAccountname,
  postEdit,
  postDelete,
  postReport,
  commentDelete,
  commentReport,
  type,
}) => {
  let options = [];

  switch (type) {
    case 'post':
      if (currentAccountname === authorAccountname) {
        options = [
          { label: '게시글 수정', callback: postEdit },
          { label: '게시글 삭제', callback: postDelete },
        ];
      } else {
        options = [{ label: '게시글 신고', callback: postReport }];
      }
      break;

    case 'comment':
      if (currentAccountname === authorAccountname) {
        options = [{ label: '댓글 삭제', callback: commentDelete }];
      } else {
        options = [{ label: '댓글 신고', callback: commentReport }];
      }
      break;

    default:
      break;
  }

  return options;
};

export default useBottomSheetOptions;

8. 트러블슈팅

• 🚀Trouble Shooting

9. Branch 전략

브랜치 모델은 깃 플로우(Git Flow) 참고하여 main- development - feature 단계로 나누어 코드를 관리하는 전략을 사용하였습니다. 브랜치는 세 가지가 있는데 항상 유지되는 (main, development(dev)) 브랜치가 있고, 일시적으로 생성되었다가 사라지는 (feature(feat)) 브랜치가 있습니다. 기능, 페이지 작업 시 feature 브랜치를 생성 후 작업하고 dev 에 push 하여 rebase 하고, 완료되면 브랜치를 삭제 후 새로 생성하는 방식으로 진행하였습니다. main 으로 push 하는 경우 2명 이상의 승인 후 가능하도록 하여 실수로 파일이 날아가는 것을 방지하였습니다.

git flow: main - dev(test) - feat/기능명

main: 최종 배포용 브랜치

development: 테스트용 브랜치

feat/: 기능별 작업용 브랜치

10. 협업

• 팀 규칙

👉회의록

👉회고록

👉컨벤션

👉Github discussions

11. 팀 문화

• 아이스브레이킹
  • 첫 모임에 낯가림이 있었지만 사는 지역, MBTI, 전공, 개인 일정 등을 주제로 이야기 나누었습니다. 아이스브레이킹으로 모든 팀원이 서울 지하철 1호선 근처에 거주 한다는 공통점을 발견하였고 이 특징을 바탕으로 개성 있는 팀 프로젝트 아이디어가 나오게 되었습니다.
  • 매일 오전 9시, 오후 5시에 회고록을 작성하면서 아이스브레이킹 타임을 가질 수 있도록 노력했습니다.
  • 프로젝트 중 힘들어서 지치면 휴식 시간을 가지며 분위기를 풀어갈 수 있도록 했습니다.

• 커뮤니케이션
  • 각자 전공과 프로젝트 경험 여부를 체크하여 난이도에 맞는 역할 분담을 하여 부담을 줄일 수 있도록 노력하였습니다.
  • 초반에 아이디어 및 설정 관련해서 의사 결정 사항이 많았습니다. 원활한 진행을 위해 각 선택 사항에 대한 장단점을 설명하고 사용 경험 여부와 어떤 부분이 부담인지 의견을 들어보고 보완할 수 있는 방법을 찾을 수 있도록 하였습니다.
  • 모르는 내용이 있으면 자유롭게 질문하는 분위기를 만들 수 있도록 노력하였습니다.
  • 각자 잘하는 부분을 칭찬하고 노력을 응원하면서 성실히 참여할 수 있는 분위기를 만들었습니다.

• 매일 오전, 오후 스프린트 2회 진행

  • 각자 진행 상황을 파악하고 오전, 오후 목표를 정하였습니다. 머지 과정을 거치면서 코드가 너무 달라져서 큰 충돌이 생기는 일을 방지하였습니다.

• 주 1회 오프라인 모임

  • 모두 서울에 거주하여 접근성이 좋았으므로 주 1회 이상 오프라인으로 만나 프로젝트를 진행 하도록 일정을 계획했습니다.

• 👉스터디

  • 오전 9시부터 오후 6시까지는 개발에 집중하고 공부가 필요한 부분은 저녁 7시 이후에 따로 스터디를 진행하였습니다.
  • 리코일을 이용해 검색어를 저장하고 리액트 쿼리를 이용해 자주사용하는 검색어 같은 데이터를 관리하는 방법에 관해 스터디를 진행하였습니다.

• 문서화

  • 노션, 깃 위키, 옵시디언 등을 활용하여 주기적으로 진행하던 회의와 회고, 스터디에 관한 자료를 정리하였습니다.
  • 노션, 마일스톤으로 프로젝트 관련 기능 명세 작성과 일정관리를 하였습니다.

12. 프로젝트 관련 문서

🔗 팀 노션

🔗 기능 명세서

🔗 와이어프레임

🔗 User Flow Chart

🔗 SITE MAP

🔗 피그마 디자인

🔗 깃허브 위키

12. 리팩토링

• svg로 사용하는 이미지는 컴포넌트로 바꾸어서 사용할 예정입니다.
• BrowerRouter를 사용하여 github page 등의 정적 페이지에서는 새로고침 시 404 페이지가 뜨는 오류를 수정할 예정입니다.
• http와 https 간의 통신이 막혀 일부 오픈 api 사용이 불가한 점을 수정할 예정입니다.
• 무한스크롤에 리액트 쿼리를 적용할 예정입니다. 현재 게시글 필터링과 같이 적용을 하려다 보니 잘 작동이 안되는 점이 있어서 스크롤 이벤트로 구현하였습니다.

13. 느낀 점

지현

빌드와 라우터와 미운 정이 들었습니다. 정적 페이지의 경우 HashRouter를 사용해야 하지만, 그렇다고 바꾸기엔 로컬에서 안되고… 결국 BrowerRouter로 개발의 편의성을 챙긴 뒤 리팩토링 기간에 열심히 수정하기로 했습니다. 리액트 쿼리, 리코일, vite 모두 이번에 처음 써본 것들이라서 버벅거렸지만 나중에는 직접 알려줄 수 있을 정도로 빠르게 익숙해졌습니다. 제 장점을 알 수 있는 시간이어서 좋았고, 무엇보다 제가 중간에 딴 길로 새거나 하나만 파고들 때 동료들이 옆에서 잘 잡아줘서 좋았습니다.✨ api 별거 아니네요~~(지도 하나로 일주일 잡은 사람)~~

규리

짧은 기간 내에 프로젝트를 완성할 수 있을지 걱정이 컸지만 멋진 팀원분들을 만나 즐겁게, 끝까지 마무리 할 수 있었던 것 같습니다. 이번 프로젝트를 하면서 우리가 하는 것에 끊임없이 이유를 찾고, 의견을 나누고, 문서화를 하며 체계적으로 협업하는 방법을 배운 것 같습니다. 끝난 뒤 돌아보니 부족한 부분도 많이 보이지만, 앞으로의 리팩토링을 통해 채워나가고 싶습니다. 최고의 빌런들 😈 앞으로도 파이팅입니다!

윤상

항상 기능 완성만 목적을 둔 코딩을 해왔었는데 처음으로 기획부터 프로젝트 구조, 컨벤션 등 첫 구조를 탄탄히 잡고 시작한 프로젝트는 처음이었습니다. 그만큼 욕심도 많았고, 욕심이 많았던 만큼 아쉬움도 많았던 프로젝트 같습니다. 하지만 팀 리더로 언제나 저희 팀원들을 이끌어주고 많이 알려주신 지현님과 끝까지 열심히 참여해주신 규리님 명진님 덕분에 그 아쉬움이 없어질 만큼 뜻 깊은 시간이었던 것 같습니다. 앞으로도 팀원분들과 꾸준히 리펙토링을 거쳐 마무리도 완벽하게 하고싶습니다~~!

명진

너무 좋은 조원들은 만난 덕분에 약 한 달간 프로젝트가 정말 즐거웠습니다. 부족한 점이 많았지만 다들 잘 챙겨주셨고 모르는 것은 언제든지 물어볼 수 있는 분위기와 자세하게 설명해주시는 조원들 덕분에 질문도 편하게 할 수 있었습니다. 할 수 있는 것이 적다고 생각한 순간도 종종 있었는데 문서작성이나 일정관리, 커뮤니케이션 등 제가 할 수 있는 부분은 적극적으로 하였고 API 명세작성, 스타일드 컴포넌트 등 모르는 것도 일단 시도해보고 보완해가는 방식으로 참여하였습니다. 열심히 하는 조원들을 보면서 저도 끝까지 힘낼 수 있었고 많이 배울 수 있었습니다. 앞으로도 계속 리팩토링으로 프로젝트를 잘 마무리하고 싶습니다. 감사합니다.