✍️ 8주차 복습

김수진·2025년 8월 12일

GDG FE Project

피드백 & TODO

Emotion CSS 적용

상태관리: 기존 Context → Jotai로 전환

배포 방식:
오거나이즈로 배포 시 비용 발생 → 개인 레포지토리로 Fork 후, Vercel에 GitHub 계정으로 로그인 → .env 추가 후 Deploy

브랜치 전략: 기능별 브랜치 사용 추천

개발 편의성 도구

Husky: Commit 시 오류 발생 여부 체크

GitHub 코드리뷰 자동화: PR reviewers 설정에서 Copilot 적용

GitHub Issues 작성 경험 쌓기

~~로그인창 디자인 & 회원가입 input 길이 맞추기~~

~~alert 창 제거 후 예외 메시지 표시 방식 개선~~

~~작성하기 페이지 API 연결~~

~~로그인 창 수정 (팝업 방식 적용)~~

회원가입 input 길이 맞추기

.input-with-button에 width: 100%를 주고, 내부를 flex로 만들어 버튼과 input이 한 줄로 정렬되도록 해준다.
.register-input에서 flex: 1로 설정하게 되면 나머지 부분은 input이 차지하게 돼서, 버튼이 있어도 길이가 자동으로 맞춰지게 된다.

.input-with-button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.register-input {
  flex: 1;
  font-size: 16px;
  padding: 8px 12px;
  border: 1px solid #9a7937;
  border-radius: 6px;
  box-sizing: border-box;
}

alert() -> setErrorMessage()

기존에는 alert()로 오류를 표시했지만, 이를 상태 기반 메시지로 변경했다.
변경 방법은 다음과 같이 해주었다.

에러 메시지 상태 추가
const [errorMessage, setErrorMessage] = useState("");
모든 alert() → setErrorMessage()로 변경

setErrorMessage("이메일 형식이 올바르지 않습니다.");

JSX에 메시지 표시 추가

{errorMessage && <p className="error-message">{errorMessage}</p>}

입력값 수정 시 메시지 초기화

onChange={(e) => {
  setEmail(e.target.value);
  setEmailChecked(false);
  setErrorMessage(""); // 메시지 초기화
}}

각 input 요소 onChange에서 setErrorMessage()로 초기화하도록 추가했다.

'작성(PostCreatePage.jsx) 목록 추가' 부분 배열로 관리

기존 방식의 한계

장소 입력값을 image, content로 각각 상태(state)로 따로 관리했다.

이런식으로 구현하게 되면, 하나의 장소만 입력 가능하고, 새로운 장소를 추가하려면 매번 상태를 초기화하고 버튼으로 등록해야 했었다.
그러다보니
UX가 불편하고 확장성이 떨어졌다.

const [content, setContent] = useState("");
const [image, setImage] = useState(null);
const [places, setPlaces] = useState([]);

const handlePlaceRegister = () => {
  if (content || image) {
    setPlaces([...places, { description: content, image }]);
    setContent("");
    setImage(null);
  }
};

배열로 관리한 이유 (개선 방식)

places라는 배열 상태를 만들어, 장소 하나를 { image, description } 객체로 관리했다.
입력 필드를 .map()으로 반복 렌더링해서 여러 장소를 동시에 등록하고 편집할 수 있게 했다.
또한, 장소 추가 버튼을 누르면 새로운 입력 세트를 추가할 수 있다!

const [places, setPlaces] = useState([
  { image: null, description: "" }
]);

const handleImageChange = (index, e) => {
  const file = e.target.files[0];
  if (file) {
    const updated = [...places];
    updated[index].image = URL.createObjectURL(file);
    setPlaces(updated);
  }
};

const handleDescriptionChange = (index, value) => {
  const updated = [...places];
  updated[index].description = value;
  setPlaces(updated);
};

const handleAddPlace = () => {
  setPlaces([...places, { image: null, description: "" }]);
};

PostList & PostListPage 역할 수정

기존 역할:
PostList
├── 지역(region), 카테고리(category), 정렬(sortOrder) 받음
├── useEffect로 직접 API 호출함
└── 받은 데이터를 내부 상태에 저장해서 렌더링함

PostList 컴포넌트에서 API 호출 + 상태 관리 + UI 렌더링를 모두 담당했어서 재사용이 불가했다.

바뀐 역할:
PostListPage
├── 상태 관리 (region, category, sortOrder)
├── API 호출
└── posts 배열을 PostList에 전달

PostList
└── 전달받은 posts 배열만 map으로 렌더링

PostListPage → 상태 관리 & API 호출

이렇게 되면
PostList는 여러 개의 게시글 데이터를 받아서
각각의 카드를 화면에 렌더링하는 리스트 렌더링 전용 컴포넌트를 만들 수 있다.

로그인의 역할

피드백을 받았던 부분 중에 가장 인상적이였던 부분은 바로 로그인의 역할이였다. 로그인에 집중하기보다 메인화면에 더 집중해서 코딩하고 로그인을 부가기능으로 넣어야겠다는 생각이 들었다. 그래서 우리는 user flow를 바꿨다. 로그인-> 메인화면 로직 보다는 메인화면->로그인으로 변경하기로 했다. 따라서 로그인을 팝업창으로 띄우는 방식으로 진행하기로 했다.

처음에는