💻 @gather_here

📖 소개 및 개요

• 프로젝트 기간 : 2024.7.16 ~ 2024.8.20
• 배포 URL : 🔗 @gather_here)

서비스 소개

• @gather_here는 개발자, 디자이너, 기획자 등 9개의 IT 직군 종사자들과 IT 직군 취업을 목표로 하는 준비생들을 연결해주는 반응형 플랫폼입니다.
• 회원가입 시 한 번의 설문으로 나의 정보를 등록해 서비스를 편리하게 이용할 수 있습니다.
• 사용자들은 원하는 프로젝트나 스터디 멤버를 모집하기 위해 게시글을 작성할 수 있으며, 지역 또는 유형별로 게시물을 구분해 볼 수 있습니다.
• 북마크 기능을 통해 원하는 게시물을 저장하고, 북마크한 글과 내가 작성한 글을 한눈에 확인할 수 있습니다.
• 사용자들은 자신에게 맞는 프로젝트와 스터디를 오픈 채팅이나 기재된 연락처를 통해 소통하며 진행할 수 있습니다.
• IT 행사 관련 정보는 캘린더를 통해 한눈에 확인할 수 있습니다.

🏆 우수상 수상 - [내일배움캠프 React 5기] (2024)

✨ @gather_here 구경하기

1.📢 팀 소개

안녕하세요! 5명의 프론트엔드 개발자와 1명의 디자이너로 구성된 게더 히어팀입니다.
`게더 히어`는 각기 다른 역량을 가진 우리가 모여, 협업의 시너지를 극대화 시킨다 라는 의미를 가지고 있습니다.
항상 새로운 가능성을 발견하는 팀입니다! 🤲🔥

👑김영범	💻조은영	🔎이하름	💡김성준	🪄이보아	🎨전정현
오픈채팅 캘린더 (행사 일정) IT 행사 검색기능	글작성 페이지 디테일 페이지 북마크	메인 페이지 슬라이드 디자인 QA 적용	소셜 로그인 로그인 설문폼	마이페이지 반응형 해더 공통 컴포넌트 디자인관련 소통	웹 디자인 모바일 디자인 컴포넌트 로고 제작
github: kubap	github: Eunyoung	github: Hareum	github: SungJoon	github: Boa	blog: Junghyun

2. 🏗 아키텍쳐

3. 📚 ERD

4.🍀주요 기술

5.🧩 기술적 의사결정

프레임워크

상태 관리

데이터베이스

스타일링

협업 도구

개발 언어

배포 서비스

6.📦프로젝트 구조

├─ public
│  ├─ assets
│  │  ├─ gif
│  │  ├─ header
│  │  ├─ mypage
│  │  ├─ arrowsmall.svg
│  │  ├─ back.svg
│  │  ├─ blank.svg
│  │  ├─ cardarrow.svg
│  │  ├─ delete.svg
│  │  ├─ down.svg
│  │  ├─ toastcancel.svg
│  │  ├─ toastcheck.svg
│  │  └─ top.svg
│  ├─ Calender
│  ├─ Chat
│  ├─ Common
│  ├─ Detail
│  ├─ Favicon
│  ├─ logos
│  ├─ Main
│  ├─ MyPage
│  └─ Post
├─ src
│  ├─ app
│  │  ├─ (auth)
│  │  ├─ (mainpage)
│  │  ├─ api
│  │  ├─ eventsdetail
│  │  ├─ maindetail
│  │  ├─ mypage
│  │  ├─ post
│  │  ├─ favicon.ico
│  │  ├─ globals.css
│  │  ├─ layout.tsx
│  │  ├─ not-found.tsx
│  │  └─ page.tsx
│  ├─ assets
│  │  ├─ loadingBar.json
│  │  └─ loadingSpinner.json
│  ├─ components
│  │  ├─ Common
│  │  ├─ EventsDetail
│  │  ├─ Layout
│  │  ├─ Login
│  │  ├─ MainDetail
│  │  ├─ MainPage
│  │  ├─ MyPage
│  │  ├─ Post
│  │  └─ Signup
│  ├─ fonts
│  ├─ hooks
│  ├─ lib
│  ├─ provider
│  ├─ store
│  ├─ types
│  ├─ utils
│  ├─ middleware.ts
│  ├─ supabase
│  ├─ .env.local
│  ├─ .eslintrc.json
│  ├─ .gitignore
│  ├─ .nvmrc
│  ├─ .prettierrc
│  ├─ next-env.d.ts
│  ├─ next.config.mjs
│  ├─ package-lock.json
│  ├─ package.json
│  ├─ postcss.config.mjs
│  ├─ README.md
│  ├─ tailwind.config.ts
│  └─ tsconfig.json

7. 🎨 UI

시작하기, 메인페이지 게시물 리스트

IT 행사, 메인페이지 채팅, PR 섹션

마이페이지

8.🔨 트러블 슈팅

react-select로 다중 선택을 구현하며 server와 client의 id가 다른 이슈

이슈 발생

• 경고: Warning: Prop id did not match. Server: "react-select-2-live-region" Client: "react-select-3-live-region"

해결책

• const Select = dynamic(() => import("react-select"), { ssr: false });으로 클라이언트측에서 랜더링 될 수 있게 동적으로 import
• Select 컴포넌트에 instanceId={uuid}를 설정. instanceId prop을 추가하여 해결하였습니다.

로그인 후 signupForm에서 DB에 정보저장 없이 탈출하면 생기는 이슈

이슈 발생

• 기존의 플로우는 소셜로그인 이후에 signup페이지로 이동하고 signupForm안에서 받은 정보를 받아서 프로필 저장을 해야지만 Users테이블로 정보가 저장되고 메인페이지로 넘어가서부터 유저의 사이트 활동이 가능해지는 방식이었다.

  • 이 플로우의 문제점은 추가적인 정보를 유저에게 받는 과정에서 유저가 뒤로가기를 하거나 url을 변경해서 다른 페이지로 이동하려고 하거나, 탭을 종료하고 다시 사이트에 들어온 후에 소셜로그인 자체는 되어있지만 Users테이블에는 정보가 하나도 남아있지 않다는 것이었다.

해결책

• 가장 중요했던 포인트는 유저의 정보를 DB에 넣는 시점이었던 것을 깨닫고 유저가 로그인을 하고 Signup페이지로 넘어가기 직전에 Default Data를 insert하는 것이 포인트였다.
• 그리고 기존에 프로필 저장하기를 클릭했을때 insert 하던 것은 update만 가능하게 만들었다.
• 그렇게되면 유저는 로그인을하고 자연스럽게 Default Data를 가진 상태로 Signup페이지로 이동하게 될 것이고 signupForm을 어떤 방식으로 탈출하더라도 메인페이지의 모든 기능을 다 사용할 수 있는 것이었다. 필요하다면 유저는 언제든지 마이페이지에 가서 자신의 정보를 update 할 수 있는 구조가 된다.

Next.js 배포 후 발생한 hydration 오류

이슈 발생

• 페이지 배포 후 콘솔 창에서 다음과 같은 오류가 계속해서 발생함.

해결책

• 서버 컴포넌트에서 Date.now()를 사용하던 부분이 있었는데, 클라이언트가 페이지를 렌더링할 때 서버에서 전달된 HTML의 값과 브라우저에서 렌더링 시점의 값이 달라 오류가 발생했습니다.

const ItEventCardLong: NextPage<EventsCardProps> = ({ post }) => {
  const deadlineDate = new Date(post.date_done);
  const daysLeft = Math.ceil(
    (deadlineDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)
  );
  const displayDaysLeft = daysLeft === 0 ? "D-day" : `D-${daysLeft}`;

  return (
    <ul className="flex items-center">
      <li>
        <span className="label-secondary rounded-full text-baseS  px-3 py-1.5 mr-1">
          {displayDaysLeft}
        </span>
      </li>
      <li className="text-baseS  text-labelNormal ml-2">
        <time dateTime="YYYY-MM-DD">
          {dayjs(post.date_start).format("YYYY-MM-DD")}
        </time>
      </li>
    </ul>
  );
};

• 위 코드에서 서버에서 문서를 생성할 때 사용된 Date.now() 값과 브라우저에서 렌더링 시 사용하는 값이 달라지면서, 이로 인해 최종적으로 새로고침이 한 번 더 발생하는 문제가 있었습니다.

const ItEventCardShort: NextPage<EventsCardProps> = ({ post }) => {
  const { user: currentUser } = useUser();
  const [isClient, setIsClient] = useState<boolean>(false);
  const today = dayjs();
  const deadlineDate = dayjs(post.date_done);
  // const daysLeft = Math.ceil((deadlineDate.unix() - now.unix()) / (1000 * 60 * 60 * 24));
  const daysLeft = today.diff(deadlineDate, "d", true);
  const displayDaysLeft =
    daysLeft === 0 ? "D-day" : daysLeft < 0 ? `D${daysLeft.toFixed(0)}` : `D+${Math.ceil(daysLeft)}`;

  useEffect(() => {
    setIsClient(true);

    return () => {
      setIsClient(false);
    };
  }, []);

  return (
    {isClient ? (
        <ul className="flex justify-between items-center">
        <li>
            <span className="label-secondary rounded-full text-baseS px-3 py-1.5">{displayDaysLeft}</span>
        </li>
        <li>
            <time dateTime={post.date_done} className="text-baseS text-labelNormal">
            {dayjs(post.date_done).format("YYYY-MM-DD")}
            </time>
        </li>

        <LikeButton eventId={post.event_id} currentUser={currentUser} />
        </ul>
) : null})
}

• Date.now() 값을 사용하는 부분이 컴포넌트가 마운트된 후에 렌더링되도록 useEffect()를 사용하여, 컴포넌트가 정상적으로 마운트된 이후에 날짜가 렌더링되도록 구현했습니다.