naive solution

function same(arr1, arr2) {
  if(arr1.length !== arr2.length) {
    return false;
  }
  for(let i=0; i<arr1.length; i++) {
    let correctIndex = arr2.indexOf(arr1[i]**2);
    if(correctIndex === -1) {
      return false;
    }
    arr2.splice(correctIndex, 1)
  }
  return true;
}

same([1, 2, 3], [4, 1, 9]);

refactored solution

function same(arr1, arr2) {
  if(arr1.length !== arr2.length) {
    return false;
  }
  let frequencyCounter1 = {}
  let frequencyCounter2 = {}
  for(let val of arr1) {
    frequencyCounter1[val] = (frequencyCounter1[val] || 0) + 1
  }
  for(let val of arr2) {
    frequencyCounter2[val] = (frequencyCounter2[val] || 0) + 1
  }
  for(let key in frequencyCounter1) {
    if(!(key**2 in frequencyCounter2)) {
      return false
    }
    if(frequencyCounter2[key**2] !== frequencyCounter1[key]) {
      return false
    }
  }
  return true
}

same([1, 2, 3, 2], [9, 1, 4, 4]);

anagram

function validAnagram(str1, str2) {
  if(str1.length !== str2.length) {
    return false
  }
  const frequencyCounter1 = {}
  const frequencyCounter2 = {}
  for(let val of str1) {
    frequencyCounter1[val] = ++frequencyCounter1[val] || 1
  }
  for(let val of str2) {
    frequencyCounter2[val] = ++frequencyCounter2[val] || 1
  }
  for(let key in frequencyCounter1) {
    if(!(key in frequencyCounter2)) {
      return false
    }
    if(frequencyCounter2[key] !== frequencyCounter1[key]) {
      return false
    }
  }
  return true
}

validAnagram('anagram', 'nagaram')

function validAnagram(first, second) {
  if(first.length !== second.length) {
    return false
  }
  let lookup = {};
  for(let i=0; i<first.length; i++) {
    let letter = first[i];
    lookup[letter] ? lookup[letter] += 1 : lookup[letter] = 1;
  }
  for(let i=0; i<second.length; i++) {
    let letter = second[i];
    if(!lookup[letter]) {
      return false;
      } else {
        lookup[letter] -= 1;
      }
  }
  return true
}

validAnagram('anagram', 'nagaram')

MULTIPLE POINTERS

NAIVE SOLUTION

function sumZero(arr) {
  for(let i=0; i<arr.length; i++) {
    for(let j=i+1; j<arr.length; j++) {
      if(arr[i]+arr[j] === 0) {
        return [arr[i], arr[j]];
      }
    }
  }
}

sumZero([-3,-2,-1,0,1,2,3]) // [-3,3]

REFACTOR

function sumZero(arr) {
  let left = 0;
  let right = arr.length - 1;
  while(left < right) {
    let sum = arr[left] + arr[right];
    if(sum === 0) {
      return [arr[left], arr[right]];
    } else if(sum > 0) {
      right--;
    } else {
      left++;
    }
  }
}

sumZero([-4,-3,-1,0,1,2,5])

고유값 세기 솔루션

function countUnuqieValues(arr) {
    if(arr.length === 0) return 0;
    let i = 0;
    for(let j=1; j<arr.length; j++) {
        if(arr[i] !== arr[j]) {
            i++;
            arr[i] = arr[j];
        }
    }
    return i+1;
}

regular expression (1)

function charCount(str) {
  const obj = {};
  for(let char of str) {
    char = char.toLowerCase();
    if(/[a-z0-9]/.test(char)) {
      if(obj[char] > 0) {
        obj[char]++;
      } else {
        obj[char] = 1;
      }
    }
  }
  return obj;
}

regular expression (2) - simpler version

function charCount(str) {
  const obj = {};
  for(let char of str) {
    char = char.toLowerCase();
    if(/[a-z0-9]/.test(char)) {
      obj[char] = ++obj[char] || 1;
    }
  }
  return obj;
}

charAtCode() - instead of regular expression

function charCount(str) {
  const obj = {};
  for(let char of str) {
    if(isAlphaNumeirc(char)) {
      char = char.toLowerCase();
      obj[char] = ++obj[char] || 1;
    }
  }
  return obj;
}

function isAlphaNumeirc(char) {
  let code = char.charCodeAt(0);
  if(!(code>47 && code<58) && !(code>64 && code<91) && !(code>94 && code<123)) {
    return false;
  }
  return true;
}

• pages/BungaeDetail.js : 번개 카드를 클릭했을 때 해당하는 글 상세 내용이 보이는 페이지

• components/BungaeDetail/

  • BungaeDetail.js : <BungaeDetailPage> 컴포넌트의 자식 컴포넌트로, 대부분의 마크업 코드를 포함한다.

코드

모임 장소, 모임 시간, 작성 시간은 서버에서 받은 데이터를 그대로 사용하는 것이 아니라 원하는 형식으로 변경해야 하므로 함수를 사용하는데, 해당 로직을 담은 함수들은 @utils 폴더로 분리해서 가독성을 높였다.

그리고 수정 페이지로 이동할 때는 useNavigate로 처리하는데 이를 이용해 우선 기존 글 내용을 받을 때, state를 전달하는 방법을 택했다. 이렇게 되면 수정 버튼을 눌렀을 때만 state가 전달되므로 상세 페이지에서 수정 버튼을 눌렀을 때만 정상적으로 기존 글 내용을 받아오게 된다. url을 통해 직접 접근할 때는 useLocation으로 받아온 state가 null 값으로 뜬다. 아마 추후 서버에서 받아오는 방법으로 변경해야 할 것 같다.

pages/BungaeDetail.js

import { useEffect, useState } from "react";

import { dummyBungaeDetail } from "../@constants/dummy";
import BungaeDetail from "../components/BungaeDetail/BungaeDetail";
import RootPageContent from "../components/PageContent/RootPageContent";

function BungaeDetailPage() {
  const [bungaeDetail, setBungaeDetail] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setBungaeDetail(dummyBungaeDetail);
    setIsLoading(false);
  }, []);

  if (isLoading) return;

  return (
    <RootPageContent maxWidth="md">
      <BungaeDetail isLoading={isLoading} bungaeDetail={bungaeDetail} />
    </RootPageContent>
  );
}

export default BungaeDetailPage;

components/BungaeDetail/BungaeDetail.js

import { useNavigate } from "react-router-dom";

import styled from "styled-components";

import * as bungaeInfoUtil from "../../@utils/bungaeInfo";
import Button from "../UI/Button";

const StyledBungaeHeader = styled.section`
  width: 100%;
  margin-bottom: 30px;

  > .bungae-title {
    font-size: ${({ theme }) => theme.fontSize["2xl"]};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
    margin-bottom: 24px;
    line-height: 1.3;
  }
`;

const StyledUnderscoreContainer = styled.div`
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 2px solid ${({ theme }) => theme.palette.gray2};

  > .bungae-owner-and-ago {
    display: flex;
    align-items: center;
    gap: 16px;
    color: ${({ theme }) => theme.palette.gray5};

    > .bungae-owner {
      padding-right: 16px;
      border-right: 2px solid ${({ theme }) => theme.palette.gray2};
      color: ${({ theme }) => theme.palette.black};
    }
  }

  > .bungae-edit-and-delete {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
    color: ${({ theme }) => theme.palette.mainNavy};
  }
`;

const StyledBungaeInfoContainer = styled.ul`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: ${({ theme }) => theme.fontSize.md};
`;

const StyledBungaeInfoContentWrapper = styled.li`
  display: flex;
  gap: 20px;
  font-weight: ${({ theme }) => theme.fontWeight.semiBold};

  > .bungae-content-title {
    color: ${({ theme }) => theme.palette.gray5};
  }

  > a {
    color: ${({ theme }) => theme.palette.mainNavy};
    text-decoration: underline;
  }
`;

const StyledButtonWrapper = styled.div`
  align-self: flex-start;
  margin-top: 20px;
`;

const StyledIntroductionContent = styled.section`
  width: 100%;
  margin-top: 40px;

  > .bungae-introduction-title {
    font-size: ${({ theme }) => theme.fontSize.lg};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
    padding-bottom: 24px;
    border-bottom: 2px solid ${({ theme }) => theme.palette.gray2};
    margin-bottom: 30px;
  }
  > .bungae-introduction-description {
    line-height: 1.3;
  }
`;

function BungaeDetail({ bungaeDetail }) {
  const navigate = useNavigate();

  const {
    id,
    title,
    owner,
    location,
    createdAt,
    meetingAt,
    openChat,
    numberOfParticipants,
    numberOfRecruits,
    description
  } = bungaeDetail;

  const meetingLoacation = bungaeInfoUtil.getMeetingLocation(location);
  const meetingTime = bungaeInfoUtil.getMeetingTime(meetingAt);
  const createdDate = bungaeInfoUtil.getCreatedDate(createdAt);

  const handleClickEdit = () => {
    navigate(`/bungae/${id}/edit`, { state: { ...bungaeDetail } });
  };

  return (
    <>
      <StyledBungaeHeader>
        <div className="bungae-title">{title}</div>
        <StyledUnderscoreContainer>
          <div className="bungae-owner-and-ago">
            <div className="bungae-owner">
              {owner.emoji} {owner.nickname}
            </div>
            <div>{createdDate}</div>
          </div>
          <div className="bungae-edit-and-delete">
            <Button color="mainNavy" basic onClick={handleClickEdit}>
              수정
            </Button>
            <Button color="mainNavy" basic>
              삭제
            </Button>
          </div>
        </StyledUnderscoreContainer>
      </StyledBungaeHeader>
      <StyledBungaeInfoContainer>
        <StyledBungaeInfoContentWrapper>
          <div className="bungae-content-title">모임 장소</div>
          <div>{meetingLoacation}</div>
        </StyledBungaeInfoContentWrapper>
        <StyledBungaeInfoContentWrapper>
          <div className="bungae-content-title">모임 시간</div>
          <div>{meetingTime}</div>
        </StyledBungaeInfoContentWrapper>
        <StyledBungaeInfoContentWrapper>
          <div className="bungae-content-title">연락 방법</div>
          <a href={openChat} target="_blank" rel="noopener noreferrer">
            카카오톡 오픈채팅
          </a>
        </StyledBungaeInfoContentWrapper>
        <StyledBungaeInfoContentWrapper>
          <div className="bungae-content-title">모집 현황</div>
          <div>{`${numberOfParticipants} / ${numberOfRecruits}`}</div>
        </StyledBungaeInfoContentWrapper>
      </StyledBungaeInfoContainer>
      <StyledButtonWrapper>
        <Button background="mainViolet" color="white" size="md">
          번개 참가하기
        </Button>
      </StyledButtonWrapper>
      <StyledIntroductionContent>
        <div className="bungae-introduction-title">[ 번개 소개 ]</div>
        <div className="bungae-introduction-description">{description}</div>
      </StyledIntroductionContent>
    </>
  );
}

export default BungaeDetail;

@utils/bungaeInfo.js

// ...

const padStartWithZero = (number) => {
  return String(number).padStart(2, "0");
};

export const getMeetingLocation = (location) => {
  return `${location.city} ${location.state} ${location.street} ${location.zipCode} ${location.detail}`;
};

export const getMeetingTime = (meetingAt) => {
  const meetingDate = new Date(meetingAt);
  const hours = padStartWithZero(meetingDate.getHours());
  const minutes = padStartWithZero(meetingDate.getMinutes());
  return `${hours}:${minutes}`;
};

export const getCreatedDate = (createdAt) => {
  const createdDate = new Date(createdAt);
  const year = createdDate.getFullYear();
  const month = padStartWithZero(createdDate.getMonth() + 1);
  const date = padStartWithZero(createdDate.getDate());
  return `${year}.${month}.${date}`;
};

// ...

• pages/CreateBungae.js : 번개 작성 페이지
• pages/EditBungae.js : 번개 수정 페이지, 상세 페이지의 내용을 초기 값으로 가짐

• components/CreateBungae/
  • CreateBungaeForm.js : <CreateBungaePage> 및 <EditBungaePage>가 공통으로 갖는 자식 컴포넌트로 공통된 데이터 및 마크업을 포함
  • MeetingLocation.js : <CreateBungaeForm> 내의 모임 장소 박스, css 코드량이 많아서 따로 분리

코드

폼과 다루는 데이터가 동일한 작성 페이지와 수정 페이지를 하나의 공통 컴포넌트를 사용함으로써 코드가 중복되지 않도록 코드를 만들었다. 또한 분리할 수 있는 상태 및 함수는 분리해서 @hooks 폴더 내에 커스텀 훅 또는 @util 폴더에서 함수로 만든 다음 컴포넌트에서 import 해서 사용함으로서 코드의 가독성 및 재사용성을 높인다.

<CreateBungaeForm> 폼 컴포넌트를 자식 컴포넌트로 사용할 때, 번개 상세 페이지의 객체 데이터를 받는 props(bungaeDetail)의 유무에 따라 작성/수정 페이지의 state 초기값이 다르게 들어오도록 구별한다.

pages/CreateBungae.js

import CreateBungaeForm from "../components/CreateBungae/CreateBungaeForm";
import HeadingPageContent from "../components/PageContent/HeadingPageContent";
import RootPageContent from "../components/PageContent/RootPageContent";

function CreateBungaePage() {
  return (
    <RootPageContent maxWidth="md">
      <HeadingPageContent heading="번개 모임 만들기">
        <CreateBungaeForm />
      </HeadingPageContent>
    </RootPageContent>
  );
}

export default CreateBungaePage;

pages/EditBungae.js

import { dummyBungaeDetail } from "../@constants/dummy";
import CreateBungaeForm from "../components/CreateBungae/CreateBungaeForm";
import HeadingPageContent from "../components/PageContent/HeadingPageContent";
import RootPageContent from "../components/PageContent/RootPageContent";

function EditBungaePage() {
  return (
    <RootPageContent maxWidth="md">
      <HeadingPageContent heading="번개 모임 만들기">
        <CreateBungaeForm bungaeDetail={dummyBungaeDetail} />
      </HeadingPageContent>
    </RootPageContent>
  );
}

export default EditBungaePage;

components/CreateBungae/CreateBungaeForm.js

import { useState } from "react";

import styled from "styled-components";

import MeetingLocation from "./MeetingLocation";
import { numberOptionList, timeOptionList } from "../../@constants/dropdown";
import useDropdown from "../../@hooks/useDropdown";
import useInput from "../../@hooks/useInput";
import { getInitialBungaeState } from "../../@utils/bungaeInfo";
import Button from "../UI/Button";
import Dropdown from "../UI/Dropdown";
import InputWithLabel from "../UI/InputWithLabel";
import Textarea from "../UI/Textarea";

const StyledMarginWrapper = styled.div`
  width: 100%;
  margin-bottom: 20px;
`;
const StyledDropdownContainer = styled(StyledMarginWrapper)`
  display: flex;
  gap: 20px;
`;
const StyledNarrowMarginWrapper = styled(StyledMarginWrapper)`
  margin-bottom: 14px;
`;

const StyledButtonContainer = styled.div`
  align-self: flex-end;
  display: flex;
  gap: 10px;
`;

function CreateBungaeForm({ bungaeDetail, onSubmit }) {
  // bungaeDetail에 따라 state 초기값으로 세팅될 값을 반환하는 함수 (getInitialBungaeState)
  const {
    initialNumberOfRecruits,
    initialMeetingTime,
    initialMeetingLocation,
    initialOpenChat,
    initialIntroduction
  } = getInitialBungaeState(bungaeDetail);

  // 드롭다운 상태 및 로직을 관리하는 커스텀 훅 (useDropdown)
  const {
    ref: numberDropdownRef,
    isOpen: numberDropdownIsOpen,
    selected: selectedNumberOption,
    onToggle: onToggleNumberDropdown,
    onSelect: onSelectNumberOption
  } = useDropdown(initialNumberOfRecruits);
  const {
    ref: timeDropdownRef,
    isOpen: timeDropdownIsOpen,
    selected: selectedTimeOption,
    onToggle: onToggleTimeDropdown,
    onSelect: onSelectTimeOption
  } = useDropdown(initialMeetingTime);

  const [meetingLocation] = useState(initialMeetingLocation);

  // input value 및 change 이벤트를 관리하는 커스텀 훅 (useInput)
  const { value: openChat, onChange: onChangeOpenChat } =
    useInput(initialOpenChat);
  const { value: introduction, onChange: onChangeIntroduction } =
    useInput(initialIntroduction);

  const bungaeSubmitHandler = () => {
    // 서버로 post(작성) 혹은 patch(수정) 요청 
    // onSubmit();
    // 후에 detailPage로 이동
  };

  return (
    <>
      <StyledDropdownContainer>
        <Dropdown
          label="모집 인원"
          ref={numberDropdownRef}
          isOpen={numberDropdownIsOpen}
          selected={selectedNumberOption}
          onToggle={onToggleNumberDropdown}
          onSelect={onSelectNumberOption}
          options={numberOptionList}
        />
        <Dropdown
          label="모임 시간"
          ref={timeDropdownRef}
          isOpen={timeDropdownIsOpen}
          selected={selectedTimeOption}
          onToggle={onToggleTimeDropdown}
          onSelect={onSelectTimeOption}
          options={timeOptionList}
        />
      </StyledDropdownContainer>
      <StyledMarginWrapper>
        <MeetingLocation meetingLocation={meetingLocation} />
      </StyledMarginWrapper>
      <StyledMarginWrapper>
        <InputWithLabel
          label="카카오톡 오픈채팅"
          id="kakao-link"
          placeholder="오픈 카톡방 링크"
          fontSize="base"
          height="46px"
          value={openChat}
          onChange={onChangeOpenChat}
        />
      </StyledMarginWrapper>
      <StyledNarrowMarginWrapper>
        <InputWithLabel
          label="제목"
          id="create-bungae-title"
          name="title"
          placeholder="제목을 입력해주세요"
          fontSize="base"
          height="46px"
          value={introduction.title}
          onChange={onChangeIntroduction}
        />
      </StyledNarrowMarginWrapper>
      <StyledNarrowMarginWrapper>
        <Textarea
          name="description"
          placeholder="번개 모임에 대해 소개해주세요"
          height="340px"
          value={introduction.description}
          onChange={onChangeIntroduction}
        />
      </StyledNarrowMarginWrapper>
      <StyledButtonContainer>
        <Button background="white" outline>
          취소
        </Button>
        <Button
          background="mainViolet"
          color="white"
          onClick={bungaeSubmitHandler}
        >
          번개 등록
        </Button>
      </StyledButtonContainer>
    </>
  );
}

export default CreateBungaeForm;

bungaeDetail 더미 데이터 구조

export const dummyBungaeDetail = {
  id: 1,
  owner: {
    id: 1,
    email: "test@test.com",
    emoji: "😶‍🌫️", // 필요
    nickname: "닉네임입니다"
  },
  title: "오늘 7시 성수역 클라이밍 하실 분 계신가요!!...",
  description: "설명",
  location: {
    country: "한국",
    city: "서울",
    state: "성동구",
    street: "성수일로",
    zipCode: "1234",
    detail: "303호"
  },
  openChat: "http://localhost:3000/", // 필요
  createdAt: "2023-05-17T00:00:00",
  meetingAt: "2023-05-17T18:00:00",
  numberOfParticipants: 2,
  numberOfRecruits: 4
};

@utils/bungaeInfo, getInitialBungaeState 함수

• 함수에 전달되는 인수에 따라 다른 초깃값을 리턴한다.

export const getMeetingTime = (meetingAt) => {
  const meetingDate = new Date(meetingAt);
  const hours = String(meetingDate.getHours()).padStart(2, "0");
  const minutes = String(meetingDate.getMinutes()).padStart(2, "0");
  return `${hours}:${minutes}`;
};

export const getInitialBungaeState = (bungaeDetail) => {
  let initialNumberOfRecruits = { name: "1명 ~ 10명", value: null };
  let initialMeetingTime = { name: "00:30 ~ 23:30", value: null };
  let initialMeetingLocation = null;
  let initialOpenChat = "";
  let initialIntroduction = { title: "", description: "" };

  if (bungaeDetail) {
    initialNumberOfRecruits = numberOptionList.find(
      ({ value }) => value === bungaeDetail.numberOfRecruits
    );
    initialMeetingTime = timeOptionList.find(
      ({ value }) => value === getMeetingTime(bungaeDetail.meetingAt)
    );
    initialMeetingLocation = `${bungaeDetail.location.city} ${bungaeDetail.location.state} ${bungaeDetail.location.street} ${bungaeDetail.location.zipCode} ${bungaeDetail.location.detail}`;
    initialOpenChat = bungaeDetail.openChat;
    initialIntroduction = {
      title: bungaeDetail.title,
      description: bungaeDetail.description
    };
  }

  return {
    initialNumberOfRecruits,
    initialMeetingTime,
    initialMeetingLocation,
    initialOpenChat,
    initialIntroduction
  };
};

/@constants/dropdown, numberOptionList, timeOptionList

export const numberOptionList = [
  { name: "1명", value: 1 },
  { name: "2명", value: 2 },
  { name: "3명", value: 3 },
  { name: "4명", value: 4 },
  { name: "5명", value: 5 },
  { name: "6명", value: 6 },
  { name: "7명", value: 7 },
  { name: "8명", value: 8 },
  { name: "9명", value: 9 },
  { name: "10명", value: 10 }
];

export const timeOptionList = [
  { name: "00:30", value: "00:30" },
  { name: "01:00", value: "01:00" },
  { name: "01:30", value: "01:30" },
  { name: "02:00", value: "02:00" },
  { name: "02:30", value: "02:30" },
  { name: "03:00", value: "03:00" },
  { name: "03:30", value: "03:30" },
  { name: "04:00", value: "04:00" },
  { name: "04:30", value: "04:30" },
  { name: "05:00", value: "05:00" },
  { name: "05:30", value: "05:30" },
  { name: "06:00", value: "06:00" },
  { name: "06:30", value: "06:30" },
  { name: "07:00", value: "07:00" },
  { name: "07:30", value: "07:30" },
  { name: "08:00", value: "08:00" },
  { name: "08:30", value: "08:30" },
  { name: "09:00", value: "09:00" },
  { name: "09:30", value: "09:30" },
  { name: "10:00", value: "10:00" },
  { name: "10:30", value: "10:30" },
  { name: "11:00", value: "11:00" },
  { name: "11:30", value: "11:30" },
  { name: "12:00", value: "12:00" },
  { name: "12:30", value: "12:30" },
  { name: "13:00", value: "13:00" },
  { name: "13:30", value: "13:30" },
  { name: "14:00", value: "14:00" },
  { name: "14:30", value: "14:30" },
  { name: "15:00", value: "15:00" },
  { name: "15:30", value: "15:30" },
  { name: "16:00", value: "16:00" },
  { name: "16:30", value: "16:30" },
  { name: "17:00", value: "17:00" },
  { name: "17:30", value: "17:30" },
  { name: "18:00", value: "18:00" },
  { name: "18:30", value: "18:30" },
  { name: "19:00", value: "19:00" },
  { name: "19:30", value: "19:30" },
  { name: "20:00", value: "20:00" },
  { name: "20:30", value: "20:30" },
  { name: "21:00", value: "21:00" },
  { name: "21:30", value: "21:30" },
  { name: "22:00", value: "22:00" },
  { name: "22:30", value: "22:30" },
  { name: "23:00", value: "23:00" },
  { name: "23:30", value: "23:30" }
];

<sortTab> 컴포넌트는 위 이미지와 같이 정렬의 기준을 설정하는 탭 메뉴 성격의 컴포넌트이다. 원하는 정렬 기준을 클릭하면 path (혹은 query string)이 변경된다. 그리고 해당 정렬 기준에 맞는 정보를 보여주고 활성화된 탭에는 css 강조 효과를 보여 주는 역할을 한다.

클릭으로 path를 전환하고 그에 맞는 css 효과를 적용하는 것은 어렵지 않았지만, 맨 처음 해당 페이지로 이동하고 정렬 기준을 설정하지 않았을 때에도 둘 중 하나의 기준을 디폴트로 정해 정렬하고, 해당 기준의 탭에도 css 강조 효과를 주는 부분에서 좀 헤맸었다.

먼저는 useState를 사용해서 초기값을 디폴트 정렬로 지정하고 싶은 path로 지정하고 정렬 기준을 클릭할 때마다 state를 업데이트하여 전환하고 Link로 해당 경로로 이동하는 방법을 사용했었다. 이 방법은 얼핏 잘 작동하는 것처럼 보였으나 문제가 있었다. 뒤로 가기를 할 때는 path를 추적을 하지 못하는 것이었다.. 실제 url 경로를 따르지 않고 클릭할 때만 변환되는 state를 추적하니 생기는 문제였다.

그래서 state 대신 실제 url 경로를 따르는 방법으로 변경해야 했다. 또한 하나의 <SortTab>을 재활용 해서 path parameter 뿐만 아니라 query string을 기준으로도 동일한 기능이 작동하게 만들고 싶었다.

결론적으로, 아래와 같이 작동하도록 코드를 변경했다.

1. 뒤로 가기를 할 때도 url이 정상적으로 변경되고 그에 따라 css 효과가 동적으로 변경될 것
2. 탭 메뉴를 선택하기 전, 기준이 되는 path가 없을 때는 디폴트가 되는 정렬 기준을 정해 활성화 할 것
3. <SortTab>를 동일하게 사용해 path parameter 뿐만 아니라 query string을 기준으로도 같은 기능을 할 수 있도록 할 것

ProfilePage 컴포넌트

• tabMenu 객체 수정
  • 객체의 key 변경 (SortTab에서 path parameter 뿐만 아니라 query string도 props로 받을 것이기 때문에 보다 일반적인 명칭으로 변경)
  • 경로 추적을 위한 sortBy 속성과 경로 이동을 위한 linkTo 분리
• useState 대신 url useLocation를 사용해 경로 추적
  • useState 대신 pathname 추적
  • 페이지 전환을 위해 useNavigate 사용 (SortTab에서 Link를 사용하지 않을 것이기 때문에)

- 변경 전

// ...

function ProfilePage() {
  // ...

  const [sortPathname, setSortPathname] = useState("/profile/created");

    const tabMenu = [
    {
      name: "내가 만든 번개",
      pathname: "/profile/created"
    },
    {
      name: "내가 참여한 번개",
      pathname: "/profile/participated"
    }
  ];

  // tabMenu의 name을 클릭할 때마다 state 변경
   const switchTab = (selected) => {
    setSortPathname(selected);
  };

  // ...
  return (
    <RootPageContent>
      <UserInfo emoji="😶‍🌫️" nickname={nickname} email="test@test.com" />
      <UserBungaeList
        sortPathname={sortPathname}
        switchTab={switchTab}
        tabMenu={tabMenu}
        bungaeList={bungaeList}
      />
    </RootPageContent>
  );
}

// ...

- 변경 후

// ...

function ProfilePage() {
  // ...

  const navigate = useNavigate();
  const { pathname } = useLocation();

  const tabMenu = [
    {
      name: "내가 만든 번개",
      sortBy: ["/profile", "/profile/created"], // css 활성화 경로
      linkTo: "/profile/created" // 클릭 시, 이동 경로
    },
    {
      name: "내가 참여한 번개",
      sortBy: ["/profile/participated"], // css 활성화 경로
      linkTo: "/profile/participated" // 클릭 시, 이동 경로로
    }
  ];

  // tabMenu의 name을 클릭할 때마다 linkTo 경로로 이동
  const switchTabHandler = (selected) => {
    navigate(selected);
  };

  // ...
  return (
    <RootPageContent>
      <UserInfo emoji="😶‍🌫️" nickname={nickname} email="test@test.com" />
      <UserBungaeList
        sortBy={pathname}
        onSwitchTab={switchTabHandler}
        tabMenu={tabMenu}
        bungaeList={bungaeList}
      />
    </RootPageContent>
}

// ...

SortTab 컴포넌트

• props명 변경 (path parameter 뿐만 아니라 query string도 props로 받을 것이기 때문에 보다 일반적인 명칭으로 변경)
• 경로 추적으로 css 효과를 주기 위해 tabMenu의 sortBy 배열을 확인(includes 메서드 사용)
• Link 컴포넌트(a 태그) 대신 li 태그 사용
  • path parameter 뿐만 아니라 query string을 기준으로 정렬할 때를 고려

- 변경 전

// ...

function SortTab({ sortPathname, switchTab, tabMenu }) {
  return (
    <StyledSortTab>
      {tabMenu.map((menu) => (
        <Link
          to={menu.pathname}
          key={menu.name}
          onClick={() => switchTab(menu.pathname)}
        >
          <div className="user-tab">
            <div>{menu.name}</div>
          </div>
          {menu.pathname === sortPathname && <div className="underscore"></div>}
        </Link>
      ))}
    </StyledSortTab>
  );
}

// ...

- 변경 후

function SortTab({ sortBy, onSwitch, tabMenu }) {
  return (
    <StyledSortTab>
      {tabMenu.map((menu) => (
        <li
          role="menuitem"
          key={menu.name}
          onClick={() => onSwitch(menu.linkTo)}
        >
          <div className="tab-menu">
            <div>{menu.name}</div>
          </div>
          {menu.sortBy.includes(sortBy) && <div className="underscore"></div>}
        </li>
      ))}
    </StyledSortTab>
  );
}

BungaeSearchPage

• query string를 기준으로 탭 전환
• react-router의 useSearchParams 이용

pages/BungaeSearch.js

// ...

function BungaeSearchPage() {
  // ...

  const [searchParams, setSearchParams] = useSearchParams();
  const sort = searchParams.get("sort");

  export const tabMenu = [
  {
    name: "최신순",
    sortBy: [null, "newest"],
    linkTo: "newest"
  },
  {
    name: "마감임박순",
    sortBy: ["last-minute"],
    linkTo: "last-minute"
  }
];

  // ...

  const switchTabHandler = (selected) => {
    setSearchParams({ sort: selected });
  };

  // ...

  return (
    <RootPageContent>
    // ...

      <StyledSection>
        <SearchedBungaeList
          count={bungaeList.length}
          sortBy={sort}
          onSwitchTab={switchTabHandler}
          tabMenu={tabMenu}
          bungaeList={bungaeList}
        />
      </StyledSection>
    </RootPageContent>
  );
}

// ...

components/BungaeSearch/SearchedBungaeList.js

function SearchedBungaeList({
  count,
  sortBy,
  onSwitchTab,
  tabMenu,
  bungaeList
}) {
  return (
    <section>
      <StyledHeadingWrapper>
        <h1>{`번개 검색 결과 (${count})`}</h1>
        <SortTab sortBy={sortBy} onSwitch={onSwitchTab} tabMenu={tabMenu} />
      </StyledHeadingWrapper>
      <BungaeListContent bungaeList={bungaeList} />
    </section>
  );
}

• pages/BungaeSearch.js : 아래의 컴포넌트로 각 섹션 별로 분리하여 마크업하고 import 한다.

• components/BungaeSearch/

  • LocalOptions.js : 시/도, 시/구/군 지역을 선택할 수 있는 옵션을 가진 컴포넌트 (모달)
  • SearchForm.js : 키워드 및 지역을 검색할 수 있는 검색창 컴포넌트
  • SearchedBungaeList.js : 검색 결과를 보여주는 컴포넌트

코드

• 지역 선택은 한번에 하나의 시/도, 시/구/군까지만 선택할 수 있도록 할 것 (다중 선택 불가)
• 모달창에서 시/도 및 시/군/구를 선택했을 때마다 페이지 내 검색창에 선택된 항목이 동적으로 보이도록 state로 관리할 것
• 최신순, 마감임박순 정렬 전환은 url의 query string으로 구별해줄 것
• 정렬에 해당하는 query string이 없으면 최신순으로 정렬할 것
• 정렬 전환은 <ProfilePage>를 만들 때 사용했던 <SortTab> 컴포넌트를 재사용할 것
• 검색 결과로 보여지는 번개 카드들은 <BungaeMainPage> 및 <ProfilePage>를 만들 때 사용했던 <BungaeListContent> 컴포넌트를 재사용 할 것

pages/BungaeSearch.js

import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

import styled from "styled-components";

import { searchPageTabMenu as tabMenu } from "../@constants/constants";
import { dummyBungaeList } from "../@constants/dummy";
import LocalOptions from "../components/BungaeSearch/LocalOptions";
import SearchedBungaeList from "../components/BungaeSearch/SearchedBungaeList";
import SearchForm from "../components/BungaeSearch/SearchForm";
import RootPageContent from "../components/PageContent/RootPageContent";

const StyledSection = styled.section`
  width: 100%;
  & + & {
    margin-top: 40px;
  }
`;

function BungaeSearchPage() {
  const [selectedLocal, setSelectedLocal] = useState({
    sido: "",
    sigugun: ""
  });
  const [localOptionsIsOpen, setLocalOptionsIsOpen] = useState(false);
  const [currentSido, setCurrentSido] = useState(0);
  const [currentSigugun, setCurrentSigugun] = useState(null);

  const [bungaeList, setBungaeList] = useState([]);
  const [searchParams, setSearchParams] = useSearchParams();
  const sort = searchParams.get("sort");

  useEffect(() => {
    setBungaeList(dummyBungaeList);
  }, []);

  // 최신순, 마감임박순 클릭 시, 그에 맞는 query string으로 변경
  const switchTabHandler = (selected) => {
    setSearchParams({ sort: selected });
  };

  // 지역 선택 모달창 open <-> close 전환
  const toggleLocalOptionsHandler = () => {
    setLocalOptionsIsOpen((prev) => !prev);
  };

  // 시/도 클릭 이벤트 핸들러
  const selectSidoHandler = (idx, text) => {
    setCurrentSido(idx);
    setSelectedLocal({ sido: text, sigugun: "" });
    setCurrentSigugun((prev) => ({ ...prev, sigugun: null }));
  };
  // 시/구/군 클릭 이벤트 핸들러
  const selectSigugunHandler = (idx, text) => {
    setCurrentSigugun(idx);
    setSelectedLocal((prev) => ({ ...prev, sigugun: text }));
  };

  // 지역 선택 초기화 클릭 이벤트 핸들러
  const resetSelectionHandler = () => {
    setCurrentSido(0);
    setCurrentSigugun(null);
    setSelectedLocal({
      sido: "",
      sigugun: ""
    });
  };

  return (
    <RootPageContent>
      <StyledSection>
        <SearchForm
          onOpen={toggleLocalOptionsHandler}
          selectedLocal={selectedLocal}
        />
        <LocalOptions
          isOpen={localOptionsIsOpen}
          onClose={toggleLocalOptionsHandler}
          currentSido={currentSido}
          onSelectSido={selectSidoHandler}
          currentSigugun={currentSigugun}
          onSelectSigugun={selectSigugunHandler}
          onReset={resetSelectionHandler}
        />
      </StyledSection>
      <StyledSection>
        <SearchedBungaeList
          count={bungaeList.length}
          sortBy={sort}
          onSwitchTab={switchTabHandler}
          tabMenu={tabMenu}
          bungaeList={bungaeList}
        />
      </StyledSection>
    </RootPageContent>
  );
}

export default BungaeSearchPage;

componenets/BungaeSearch/SearchForm.js

import styled from "styled-components";

const StyledSearchForm = styled.form`
  width: 100%;
  display: flex;
  border-radius: 5px;
  height: 62px;
`;

const KeywordSearchWrapper = styled.div`
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid black;
  border-radius: 5px 0px 0px 5px;

  .image-wrapper {
    width: 14px;
    height: 14px;
    margin-right: 8px;
  }
`;

const LocalSearchWrapper = styled(KeywordSearchWrapper).attrs(
  ({ onClick }) => ({ onClick })
)`
  border-radius: 0px;
  border-left: 0px;

  > p {
    font-size: ${({ theme }) => theme.fontSize.sm};
    color: ${({ theme }) => theme.palette.gray5};
    min-width: 120px;
  }
  > p.selected {
    color: ${({ theme }) => theme.palette.black};
  }
`;

const StyledKeywordInput = styled.input.attrs(() => ({
  placeholder: "키워드를 입력해주세요"
}))`
  width: 100%;
  outline: none;
  border: none;
  font-size: 14px;
  padding: 0px;
`;

const StyledSearchButton = styled.button`
  outline: none;
  border: 1px solid black;
  border-left: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 62px;
  background: ${({ theme }) => theme.palette.mainMauve};
  font-weight: ${({ theme }) => theme.fontWeight.semiBold};
`;

function SearchForm({ onOpen, selectedLocal }) {
  const { sido, sigugun } = selectedLocal;
  const localIsSelected = sido !== "" && sigugun !== "";

  return (
    <StyledSearchForm>
      <KeywordSearchWrapper>
        <div className="image-wrapper">
          <img src="/images/search.svg" alt="keyword search" />
        </div>
        <StyledKeywordInput />
      </KeywordSearchWrapper>
      <LocalSearchWrapper onClick={onOpen}>
        <div className="image-wrapper">
          <img src="/images/map.svg" alt="map marker" />
        </div>
        {localIsSelected ? (
          <p className="selected">{`${sido} ${sigugun}`}</p>
        ) : (
          <p>지역을 선택해주세요</p>
        )}
      </LocalSearchWrapper>
      <StyledSearchButton>검색</StyledSearchButton>
    </StyledSearchForm>
  );
}

export default SearchForm;

componenets/BungaeSearch/LocalOptions.js

import styled from "styled-components";

import { localList } from "../../@constants/constants";
import Button from "../UI/Button";
import Modal from "../UI/Modal";

const StyledHeader = styled.h1`
  font-size: ${({ theme }) => theme.fontSize.lg};
  font-weight: ${({ theme }) => theme.fontWeight.bold};
  margin-bottom: 24px;
`;

const SyledLocalListWrapper = styled.div`
  display: flex;

  .list-title {
    text-align: left;
    margin-bottom: 6px;
    font-size: ${({ theme }) => theme.fontSize.xs};
  }
`;

const StyledSidoList = styled.ul`
  width: 160px;
  height: 140px;
  overflow-y: scroll;
  border: 1px solid black;
  font-size: ${({ theme }) => theme.fontSize.sm};
  cursor: pointer;

  > li {
    padding: 8px 20px;
  }
  > li.active {
    background: ${({ theme }) => theme.palette.mainMauve};
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
  }
`;

const SyledSigugunList = styled(StyledSidoList)`
  border-left: 0px;
`;

const StyledButtonContainer = styled.div`
  display: flex;
  gap: 10px;
  margin-top: 24px;
`;

function LocalOptions({
  isOpen,
  onClose,
  currentSido,
  onSelectSido,
  currentSigugun,
  onSelectSigugun,
  onReset
}) {
  if (!isOpen) return null;

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <>
        <StyledHeader>지역 선택</StyledHeader>
        <SyledLocalListWrapper>
          <div>
            <div className="list-title">시·도</div>
            <StyledSidoList>
              {localList.map(({ sido }, idx) => (
                <li
                  key={idx}
                  role="menuitem"
                  className={idx === currentSido ? "active" : ""}
                  onClick={() => onSelectSido(idx, sido)}
                >
                  {sido}
                </li>
              ))}
            </StyledSidoList>
          </div>
          <div>
            <div className="list-title">시·구·군</div>
            <SyledSigugunList>
              {localList[currentSido].sigugun.map((el, idx) => (
                <li
                  key={idx}
                  role="menuitem"
                  className={idx === currentSigugun ? "active" : ""}
                  onClick={() => onSelectSigugun(idx, el)}
                >
                  {el}
                </li>
              ))}
            </SyledSigugunList>
          </div>
        </SyledLocalListWrapper>
        <StyledButtonContainer>
          <Button background="gray3" color="white" fullWidth onClick={onReset}>
            초기화
          </Button>
          <Button
            background="mainViolet"
            color="white"
            fullWidth
            onClick={onClose}
          >
            확인
          </Button>
        </StyledButtonContainer>
      </>
    </Modal>
  );
}

export default LocalOptions;

components/BungaeSearch/SearchedBungaeList.js

import styled from "styled-components";

import BungaeListContent from "../PageContent/BungaeListContent";
import SortTab from "../UI/SortTab";

const StyledHeadingWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  > h1 {
    font-size: ${({ theme }) => theme.fontSize["2xl"]};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  }
`;

function SearchedBungaeList({
  count,
  sortBy,
  onSwitchTab,
  tabMenu,
  bungaeList
}) {
  return (
    <section>
      <StyledHeadingWrapper>
        <h1>{`번개 검색 결과 (${count})`}</h1>
        <SortTab sortBy={sortBy} onSwitch={onSwitchTab} tabMenu={tabMenu} />
      </StyledHeadingWrapper>
      <BungaeListContent bungaeList={bungaeList} />
    </section>
  );
}

export default SearchedBungaeList;

li 태그 onClick 이벤트 eslint 에러 발생 해결 (jsx-a11y)

<LocalOptions> 컴포넌트에서 li 태그에 onClick 이벤트 핸들러를 할당했을 때, eslint의 리액트 접근성과 관련된 검사를 하는 jsx-a11y에서 다음과 같은 에러가 발생했다. Non-interactive elements should not be assigned mouse or keyboard event listeners jsx-a11y/no-noninteractive-element-interactions 이는 li 태그가 button이나 a 태그와 같이 상호작용하는 요소가 아님에도 onClick 이벤트를 할당했기 때문에 발생한 에러였다.

찾아본 해결 방법은 여러가지가 있었다.

1. eslint-disable-line 추가 - eslint 무시하기

   <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
   key={idx}
   role="menuitem"
   className={idx === currentSido ? "active" : ""}
   onClick={() => onSelectSido(idx, sido)}
   >
   {sido}
   </li>

2. li 태그 대신 li 태그 내부에 button과 같은 interactive elements를 추가해 해당 요소에 onClick 이벤트 등록하기

   <li
   key={idx}
   role="menuitem"
   className={idx === currentSido ? "active" : ""}
   >
   <button onClick={() => onSelectSido(idx, sido)}>
   {sido}
   </button>
   </li>

3. role 속성 값 추가하기

   <li
   key={idx}
   role="menuitem"
   className={idx === currentSido ? "active" : ""}
   onClick={() => onSelectSido(idx, sido)}
   >
   {sido}
   </li>

이외에도 방법이 더 있었지만, 그 중에서도 role을 추가하는 방식이 가장 마음에 들었다. 그 중에서도 role="menuitem"을 속성값으로 사용했다. 여러 지역 리스트 중 하나를 선택해야 하는 일종의 메뉴의 역할을 하고 있기 때문에 해당 해결 방식이 적절하다고 생각해 차용했다.

참고

• https://stackoverflow.com/questions/43337275/how-to-work-around-jsx-a11y-no-static-element-interactions-restriction
• https://nuli.navercorp.com/community/article/1132961

src/components/BunageMain/MainBungaeList.js

import styled from "styled-components";

import * as bungaeCardUtil from "../../@utils/bungaeCard";
import BungaeCard from "../BungaeCard";
import BungaeListContent from "../PageContent/BungaeListContent";
import SimplePagination from "../UI/SimplePagination";

const StyledUpperContent = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  .en-heading {
    font-size: ${({ theme }) => theme.fontSize.md};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
    color: ${({ theme }) => theme.palette.mainNavy};
    margin-bottom: 12px;
  }
  .ko-heading {
    font-size: ${({ theme }) => theme.fontSize["2xl"]};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  }
`;

function NewBungaeList({ enHeading, koHeading, bungaeList }) {
  return (
    <>
      <StyledUpperContent>
        <div>
          <div className="en-heading">{enHeading}</div>
          <div className="ko-heading">{koHeading}</div>
        </div>
        <SimplePagination />
      </StyledUpperContent>
      <BungaeListContent>
        {bungaeList.map(
          ({
            id,
            owner,
            title,
            location,
            createdAt,
            meetingAt,
            numberOfParticipants,
            numberOfRecruits
          }) => {
            const status = bungaeCardUtil.getBungaeStatus(createdAt, meetingAt);
            const place = location.city + " " + location.state;
            const time = bungaeCardUtil.getMeetingTime(meetingAt);
            const duration = bungaeCardUtil.getBungaeDuration(meetingAt);
            return (
              <BungaeCard
                key={id}
                id={id}
                status={status}
                place={place}
                time={time}
                title={title}
                emoji={owner.emoji}
                nickname={owner.nickname}
                numberOfParticipants={numberOfParticipants}
                numberOfRecruits={numberOfRecruits}
                duration={duration}
              />
            );
          }
        )}
      </BungaeListContent>
    </>
  );
}

export default NewBungaeList;

src/pages/profile.js

import styled from "styled-components";

import { bungaeStatus } from "../@constants/constants";
import BungaeCard from "../components/BungaeCard";
import Button from "../components/UI/Button";

const UserInfoSection = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;

  > .imoji {
    height: 120px;
    width: 120px;
    border: 1px solid black;
    border-radius: 50%;
    font-size: 40px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > .nickname {
    font-size: ${({ theme }) => theme.fontSize["3xl"]};
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
    margin-bottom: 16px;
  }
  > .email {
    font-size: ${({ theme }) => theme.fontSize.base};
    color: ${({ theme }) => theme.palette.gray4};
    margin-bottom: 24px;
  }
`;

const TabSection = styled.section`
  display: flex;
  margin-bottom: 24px;

  .profile-tab {
    padding: 0.5rem;
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
  }
  .active {
    height: 3px;
    border: 1.5px solid black;
    margin: 0rem 0.5rem;
  }
`;

const UserBungaeSection = styled.section`
  width: 100%;
  > ul {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    @media only screen and (max-width: 1254px) {
      max-width: 895px;
    }
    @media only screen and (max-width: 949px) {
      max-width: 590px;
    }
    @media only screen and (max-width: 644px) {
      max-width: 285px;
    }
  }
`;

function ProfilePage() {
  return (
    <>
      <UserInfoSection>
        <div className="imoji">😶‍🌫️</div>
        <p className="nickname">닉네임입니다</p>
        <p className="email">test@test.com</p>
        <Button background="mainMauve">프로필 수정</Button>
      </UserInfoSection>
      <TabSection>
        <div>
          <div className="profile-tab">
            <div>내가 만든 번개</div>
          </div>
          <div className="active"></div>
        </div>
        <div>
          <div className="profile-tab">
            <div>내가 참여한 번개</div>
          </div>
          <div></div>
        </div>
      </TabSection>
      <UserBungaeSection>
        <ul>
          <BungaeCard
            status={bungaeStatus.recruiting}
            place="성수동 OO 클라이밍 센터"
            time="19:00"
            title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
            imoji="😶‍🌫️"
            nickname="닉네임입니다"
            numberOfParticipants={2}
            numberOfRecruits={4}
            duration="00:30:23"
          ></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
        </ul>
      </UserBungaeSection>
    </>
  );
}

export default ProfilePage;

버튼 컴포넌트 리팩토링

<Button> 컴포넌트에는 2개의 props가 더 추가됐다.

• iconWidth : img 태그를 감싸는 div 요소에 적용될 width
• iconWithText : 이미지 + 텍스트 조합의 버튼, 하위 태그 클래스(.icon-with-text)로 적용하던 속성을 props로 변경함

src/components/ui/Button.js

import styled, { css } from "styled-components";

const colorStyles = css`
  ${({ theme, background, color }) => {
    const selectedBg = theme.palette[background];
    const selectedColor = theme.palette[color];
    return css`
      background: ${selectedBg};
      color: ${selectedColor};
    `;
  }}
`;

const sizes = {
  large: {
    height: "3rem",
    fontSize: "1.25rem"
  },
  medium: {
    height: "2.875rem",
    fontSize: "1rem"
  },
  small: {
    height: "1.75rem",
    fontSize: "0.875rem"
  }
};

const sizeStyles = css`
  ${({ size }) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize};
  `}
`;

const fullWidthStyle = css`
  ${({ fullWidth }) =>
    fullWidth &&
    css`
      width: 100%;
      justify-content: center;
    `}
`;

const StyledButton = styled.button`
  display: inline-flex;
  align-items: center;
  font-weight: ${({ theme }) => theme.fontWeight.semiBold};
  outline: none;
  border: none;
  border-radius: 5px;
  ${({ radius }) =>
    radius === "bottom" &&
    css`
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    `}

  padding-right: 0.875rem;
  padding-left: 0.875rem;
  ${({ marginTop }) =>
    marginTop &&
    css`
      margin-top: ${marginTop};
    `}

  ${colorStyles}

  ${sizeStyles}

  ${({ outline }) =>
    outline &&
    css`
      border: 1px solid black;
    `}

  ${({ noPadding }) =>
    noPadding &&
    css`
      padding: 0rem;
    `}

  ${fullWidthStyle}

  > div:first-child {
    display: flex;
    ${({ iconWidth }) =>
      iconWidth &&
      css`
        width: ${iconWidth};
      `}

    ${({ iconWithText }) =>
      iconWithText &&
      css`
        margin-right: 6px;
      `}
  }
`;

function Button({
  children,
  background,
  color,
  size = "medium",
  outline,
  noPadding,
  fullWidth,
  marginTop,
  radius,
  iconWidth,
  iconWithText
}) {
  return (
    <StyledButton
      background={background}
      color={color}
      size={size}
      outline={outline}
      noPadding={noPadding}
      fullWidth={fullWidth}
      marginTop={marginTop}
      radius={radius}
      iconWidth={iconWidth}
      iconWithText={iconWithText}
    >
      {children}
    </StyledButton>
  );
}

export default Button;

메인 네비게이션 컴포넌트 리팩토링

어플리케이션 로고 등을 가져오기 위해 사용되는 <img> 태그를 <div> 태그로 감싸고 width를 지정해줬다.

수정 후

import styled, { css } from "styled-components";

import Button from "./UI/Button";

const Header = styled.header`
  position: sticky;
  top: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  border-bottom: 1px solid black;
  background: white;

  > .ddip-logo {
    width: 94px;
    display: flex;
  }

  > .search-box {
    height: 46px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 0.875rem;

    > .search-icon {
      width: 14px;
      margin-right: 6px;
    }
  }

  > .right-buttons {
    display: flex;
    > .auth-buttons {
      display: flex;
      align-items: center;
      margin-left: 16px;

      > .user-icon {
        width: 46px;
        display: flex;
      }

      > hr {
        width: 1px;
        height: 12px;
        margin: 8px;
      }
    }
  }

  ${({ logoOnly }) =>
    logoOnly &&
    css`
      justify-content: center;
      background: inherit;
    `}

  ${({ noSearchBox }) =>
    noSearchBox &&
    css`
      justify-content: space-between;
    `}
`;

function MainNavigation({ logoOnly, noSearchBox, loggedIn }) {
  if (logoOnly) {
    return (
      <Header logoOnly={logoOnly}>
        <div className="ddip-logo">
          <img className="logo" src="/images/logo.svg" alt="ddip-logo" />
        </div>
      </Header>
    );
  }

  return (
    <Header noSearchBox={noSearchBox}>
      <div className="ddip-logo">
        <img src="/images/logo.svg" alt="ddip-logo" />
      </div>
      {!noSearchBox && (
        <div className="search-box">
          <div className="search-icon">
            <img src="/images/search.svg" alt="search" />
          </div>
          <span>어떤 번개를 찾으시나요?</span>
        </div>
      )}
      <div className="right-buttons">
        <Button
          background="mainViolet"
          color="white"
          iconWidth="16px"
          iconWithText
        >
          <div>
            <img src="/images/thunder.svg" alt="thunder" />
          </div>
          <span>번개 만들기</span>
        </Button>
        <div className="auth-buttons">
          {loggedIn ? (
            <div className="user-icon">
              <img src="/images/user.svg" alt="user" />
            </div>
          ) : (
            <>
              <Button noPadding>회원가입</Button>
              <hr />
              <Button noPadding>로그인</Button>
            </>
          )}
        </div>
      </div>
    </Header>
  );
}

export default MainNavigation;

번개 카드는 모집 현황에 따라 4개의 다른 UI를 갖는다.

const bungaeStatus = {
  // 번개 시간까지 1시간 이내
  imminent: {
    color: "statusRed",
    text: "마감임박"
  },
  // 번개 게시 1시간 이내
  new: {
    color: "statusYellow",
    text: "NEW"
  },
  // imminent나 new 상태는 아니지만 모집중
  recruiting: {
    color: "statusGreen",
    text: "모집중"
  },
  // 번개 시간이 지나 모집마감
  closed: {
    color: "statusGray",
    text: "모집마감"
  }
}

피그마로 만든 번개 카드 컴포넌트

<BungaeCard> 컴포넌트는 재사용성을 위해 아래와 아래와 같은 props를 가진다.

• status : 모집 상태 객체
• place : 번개 장소
• time : 번개 시간
• title : 글 제목
• imoji : 유저 이모지
• nickname : 유저 닉네임
• numberOfParticipants : 참여자 수
• numberOfRecruits : 모집자 수
• duration : 번개 마감까지 기한

src/components/BungaeCard.js

import { Link } from "react-router-dom";
import styled, { css } from "styled-components";

const StyledBungaeCard = styled.li`
  width: 285px;
  height: 292px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background: {(props) => props.theme.palette.white};
  border: 1px solid black;
  border-radius: 5px;
  padding: 26px 20px;

  ${(props) =>
    props.statusText === "모집마감" &&
    css`
      background: ${(props) => props.theme.palette.gray2};
    `}

  p {
    display: inline-box;
  }

  > .status {
    color: ${({ theme, statusColor }) => theme.palette[statusColor]};
    font-size: 0.875rem;
    font-weight: ${(props) => props.theme.fontWeight.bold};
    margin-bottom: 14px;
  }

  > .place, .time {
    color:  ${(props) => props.theme.palette.gray4};
    font-size: 1rem;
    font-weight: ${(props) => props.theme.fontWeight.semiBold};
    p:first-child {
      margin-right: 8px;
    }
  }
  > .place {
    margin-bottom: 8px;
  }
  > .time {
    margin-bottom: 14px;
  }

  > h1 {
    font-size: 1.125rem;
    font-weight: ${(props) => props.theme.fontWeight.bold};
    margin-bottom: 12px;
    line-height: 1.375rem;
    height: 44px;
    ${(props) =>
      props.statusText === "모집마감" &&
      css`
        color: ${({ theme, statusColor }) => theme.palette[statusColor]};
      `}
  }

  > .bungaeInfo-nickname-numbers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 0.875rem;

    > .nickname, .numbers {
      span:last-child {
        margin-left: 4px;
      }
    }
    > .numbers {
     display: inline-flex;
     align-items: center; 
    }
    > .nickname {
    color:  ${(props) => props.theme.palette.gray4};
  }
}

  > .duration {
    font-weight: ${(props) => props.theme.fontWeight.semiBold};
    text-align: center;
    > div {
      color: ${(props) => props.theme.palette.mainViolet};
      font-size: ${(props) => props.theme.fontSize["4xl"]};
      font-weight: ${(props) => props.theme.fontWeight.bold};
      margin-top: 10px;
      ${(props) =>
        props.statusText === "모집마감" &&
        css`
          color: ${({ theme, statusColor }) => theme.palette[statusColor]};
        `}
    }
  }
`;

function BungaeCard({
  status,
  place,
  time,
  title,
  imoji,
  nickname,
  numberOfParticipants,
  numberOfRecruits,
  duration
}) {
  return (
    <Link>
      <StyledBungaeCard statusColor={status.color} statusText={status.text}>
        <div className="status">{status.text}</div>
        <div className="place">
          <p>장소 |</p>
          <p>{place}</p>
        </div>
        <div className="time">
          <p>시간 |</p>
          <p>{time}</p>
        </div>
        <h1>{title}</h1>
        <div className="bungaeInfo-nickname-numbers">
          <div className="nickname">
            <span>{imoji}</span>
            <span>{nickname}</span>
          </div>
          <div className="numbers">
            <img src="/images/recruit.svg" alt="recruit" />
            <span>{`${numberOfParticipants}/${numberOfRecruits}`}</span>
          </div>
        </div>
        <div className="duration">
          <p>번개 마감까지</p>
          <div>{duration}</div>
        </div>
      </StyledBungaeCard>
    </Link>
  );
}

export default BungaeCard;

번개 카드 컴포넌트를 사용해 메인 페이지에서 아래와 같이 출력 테스트를 해보았다. 추후 데이터들은 서버에서 받아와 렌더링하고, 작성 시간과 현재 시간을 계산해서 status와 duration의 상태는 프론트엔드 단에서 관리할 예정이다.

src/pages/BungaeMainPage.js

import BungaeCard from "../components/BungaeCard";

const bungaeStatus = {
  imminent: {
    color: "statusRed",
    text: "마감임박"
  },
  new: {
    color: "statusYellow",
    text: "NEW"
  },
  recruiting: {
    color: "statusGreen",
    text: "모집중"
  },
  closed: {
    color: "statusGray",
    text: "모집마감"
  }
};

function BungaeMainPage() {
  return (
    <div style={{ padding: "40px" }}>
      <ul style={{ display: "flex", gridGap: "20px" }}>
        <BungaeCard
          status={bungaeStatus.imminent}
          place="성수동 OO 클라이밍 센터"
          time="19:00"
          title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
          imoji="😶‍🌫️"
          nickname="닉네임입니다"
          numberOfParticipants={2}
          numberOfRecruits={4}
          duration="00:30:23"
        />
        <BungaeCard
          status={bungaeStatus.new}
          place="성수동 OO 클라이밍 센터"
          time="19:00"
          title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
          imoji="😶‍🌫️"
          nickname="닉네임입니다"
          numberOfParticipants={2}
          numberOfRecruits={4}
          duration="00:30:23"
        />
        <BungaeCard
          status={bungaeStatus.recruiting}
          place="성수동 OO 클라이밍 센터"
          time="19:00"
          title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
          imoji="😶‍🌫️"
          nickname="닉네임입니다"
          numberOfParticipants={2}
          numberOfRecruits={4}
          duration="00:30:23"
        />
        <BungaeCard
          status={bungaeStatus.closed}
          place="성수동 OO 클라이밍 센터"
          time="19:00"
          title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
          imoji="😶‍🌫️"
          nickname="닉네임입니다"
          numberOfParticipants={2}
          numberOfRecruits={4}
          duration="00:30:23"
        />
      </ul>
    </div>
  );
}

export default BungaeMainPage;

인풋 컴포넌트 마크업

로그인, 회원가입, 이메일 인증 및 회원 정보 수정, 회원 탈퇴 페이지에서 일관된 스타일을 지닌 input 요소를 인풋 컴포넌트를 만들었다. 대체로 일관성 있는 디자인이지만 label 요소가 있을 때도, 없을 때도 있고 input 요소 2, 3개 붙어있거나 버튼과 함꼐 결합되는 디자인도 있어서 이를 props 및 조건부를 통해 필요에 따라 적절하게 활용할 수 있도록 작업했다.

피그마로 만든 인풋 디자인

<Input> 컴포넌트는 재사용성을 위해 아래와 아래와 같은 props를 가진다.

• id : input id
• label : input label
• name : input name
• type : input type (default="text")
• placeholder : input placeholder
• value : input value
• onChange : change 이벤트 핸들러
• onBlur : blur 이벤트 핸들러
• disabled : input disabled
• radius : input border-radius (default="default", "top", "bottom", "none")

src/components/UI/input.js

import styled, { css } from "styled-components";

const StyledInput = styled.div`
  width: 100%;

  > .label-wrapper {
    font-size: ${(props) => props.theme.fontSize.xs};
    margin-bottom: 6px;
  }

  > input {
    width: 100%;
    min-height: 42px;
    padding: 0px 18px;
    font-size: ${(props) => props.theme.fontSize.sm};
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;

    ${({ radius }) => {
      if (radius === "none") {
        return css`
          border-radius: 0px;
          border-bottom: 0px;
        `;
      }
      if (radius === "top") {
        return css`
          border-bottom-right-radius: 0px;
          border-bottom-left-radius: 0px;
          border-bottom: 0px;
        `;
      }
      if (radius === "bottom") {
        return css`
          border-top-left-radius: 0px;
          border-top-right-radius: 0px;
        `;
      }
    }}
  }
`;

function Input({
  id,
  label,
  name,
  type = "text",
  placeholder,
  value,
  onChange,
  onBlur,
  disabled,
  radius = "default"
}) {
  return (
    <StyledInput radius={radius}>
      {label && (
        <div className="label-wrapper">
          <label htmlFor={id}>{label}</label>
        </div>
      )}
      <input
        id={id}
        name={name}
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        disabled={disabled}
      />
    </StyledInput>
  );
}

export default Input;

인풋 컴포넌트를 사용해 메인 페이지에서 아래와 같이 출력 테스트를 해보았다.

src/pages/BungaeMain.js

import styled from "styled-components";

import Button from "../components/UI/Button";
import Input from "../components/UI/Input";

const Wrapper = styled.div`
  padding-top: 40px;
  max-width: 386px;
  margin: 0 auto;
`;

function BungaeMainPage() {
  return (
    <Wrapper>
      <div style={{ marginBottom: "30px" }}>
        <Input id="이메일" label="이메일" placeholder="이메일" />
      </div>
      <div style={{ marginBottom: "30px" }}>
        <Input value="test@test.com" radius="top" disabled />
        <Input radius="bottom" />
      </div>
      <div style={{ marginBottom: "30px" }}>
        <Input id="닉네임" label="닉네임" value="닉네임입니다" radius="top" />
        <Button outline fullWidth radius="bottom">
          닉네임 중복 검사
        </Button>
      </div>
      <div>
        <Input
          id="비밀번호"
          label="비밀번호"
          placeholder="현재 비밀번호"
          radius="top"
        />
        <Input placeholder="새 비밀번호" radius="none" />
        <Input placeholder="새 비밀번호 확인" radius="bottom" />
      </div>
    </Wrapper>
  );
}

export default BungaeMainPage;

styled-component의 createGlobalStyle을 이용한 전역 스타일 설정에서 버튼 요소는 아래와 같은 스타일을 기본으로 한다.

src/styles/GlobalStyles.js

button {
    background: transparent;
    cursor: pointer;
    }

추가로 styled-components의 ThemeProvider를 활용해 공통 스타일을 적용하여 코드의 통일성을 높이고 유지 보수를 효율적으로 할 수 있도록 관리하고자 한다. 우선 당장 필요한 기본적인 값들을 설정하고 필요할 때마다 점차 추가/수정해 나갈 것이다.

src/styles/theme.js

const fontSize = {
  xs: "0.75rem", // 12px
  sm: "0.875rem", // 14px
  base: "1rem", // 16px
  md: "1.125", // 18px
  lg: "1.25rem" // 20px
};

const fontWeight = {
  semiBold: 600,
  bold: "bold"
};

const palette = {
  mainViolet: "#5F32E4",
  mainMauve: "#E5E2F6",
  black: "black",
  white: "white"
};

const theme = { fontSize, fontWeight, palette };

export default theme;

<Button> 컴포넌트는 재사용성을 위해 아래와 아래와 같은 props를 가진다.

• children
• background : 배경색 (theme.js 파일 참조)
• color : 폰트색 (theme.js 파일 참조)
• size : large, medium (default), small
• outline : border (1px solid black)
• noPadding : padding 0
• fullWidth : width 100%
• marginTop : marginTop 조정 @ 23/05/09 추가
• radius : radius 조정 @ 23/05/09 추가
• iconWidth : img 태그를 감싸는 div 요소에 적용될 width @ 23/05/10 추가
• iconWithText : 이미지 + 텍스트 조합의 버튼 (margin-right) @ 23/05/10 추가

src/components/ui/Button.js

import styled, { css } from "styled-components";

// 버튼 background, color
const colorStyles = css`
  ${({ theme, background, color }) => {
    const selectedBg = theme.palette[background];
    const selectedColor = theme.palette[color];
    return css`
      background: ${selectedBg};
      color: ${selectedColor};
    `;
  }}
`;

const sizes = {
  large: {
    height: "3rem",
    fontSize: "1.25rem"
  },
  medium: {
    height: "2.875rem",
    fontSize: "1rem"
  },
  small: {
    height: "1.75rem",
    fontSize: "0.875rem"
  }
};


// 버튼 height, font-size에 따라 large, medium, small 3개로 분류
const sizeStyles = css`
  ${({ size }) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize};
  `}
`;

// 버튼 width 100%
const fullWidthStyle = css`
  ${(props) =>
    props.fullWidth &&
    css`
      width: 100%;
      justify-content: center;
    `}
`;

const StyledButton = styled.button`
  /* 버튼 공통 스타일 */
  display: inline-flex;
  align-items: center;
  font-weight: ${(props) => props.theme.fontWeight.semiBold};
  outline: none;
  border: none;
  border-radius: 5px;
  ${({ radius }) =>
    radius === "bottom" &&
    css`
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    `}

  padding-right: 0.875rem;
  padding-left: 0.875rem;
  ${({ marginTop }) =>
    marginTop &&
    css`
      margin-top: ${marginTop};
    `}


/* props에 따라 다른 스타일 적용 */

  ${colorStyles}

  ${sizeStyles}

  ${(props) =>
    props.outline &&
    css`
      border: 1px solid black;
    `}

  ${(props) =>
    props.noPadding &&
    css`
      padding: 0rem;
    `}

  ${fullWidthStyle}

  > .icon-with-text {
    margin-right: 6px;
  }
`;

function Button({
  children,
  background,
  color,
  size = "medium",
  outline,
  noPadding,
  fullWidth,
  marginTop,
  radius
}) {
  return (
    <StyledButton
      background={background}
      color={color}
      size={size}
      outline={outline}
      noPadding={noPadding}
      fullWidth={fullWidth}
      marginTop={marginTop}
      radius={radius}
    >
      {children}
    </StyledButton>
  );
}

export default Button;

메인 네비게이션 컴포넌트 마크업

메인 네비게이션은 다음 3가지와 관련된 props를 받아서 페이지와 상태에 따라 동적으로 UI가 변경돼야 한다.

• 로그인 상태인지 아닌지
• 검색바가 필요한지 필요 없는지
• 로고만 보여줄 것인지 아닌지

피그마로 만든 메인 네비게이션 컴포넌트

<MainNavigation> 컴포넌트는 재사용성을 위해 아래와 아래와 같은 props를 가진다.

• logoOnly : 메인 네비게이션 중앙에 로고만 있는 레이아웃 (로그인, 회원 가입, 이메일 인증 페이지)
• noSearchBox : 메인 네비게이션에 검색바가 없는 레이아웃 (검색 페이지)
• loggedIn : 로그인 했을 때 레이아웃

src/componenets/MainNavigation.js

import styled, { css } from "styled-components";

import Button from "./UI/Button";

const Header = styled.header`
  position: sticky;
  top: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  border-bottom: 1px solid black;
  background: white;

  > .search-box {
    height: 46px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 0.875rem;

    > img {
      margin-right: 8px;
      margin-bottom: 2px;
    }
  }

  > .right-buttons {
    display: flex;
    > .auth-buttons {
      display: flex;
      align-items: center;
      padding: 2px;
      margin-left: 0.7rem;

      > hr {
        width: 1px;
        height: 12px;
        margin: 8px;
      }
    }
  }

  ${(props) =>
    props.logoOnly &&
    css`
      justify-content: center;
      background: ${props.theme.palette.mainMauve};
    `}

  ${(props) =>
    props.noSearchBox &&
    css`
      justify-content: space-between;
    `}
`;

function MainNavigation({ logoOnly, noSearchBox, loggedIn }) {
  if (logoOnly) {
    return (
      <Header logoOnly={logoOnly}>
        <img src="/images/logo.svg" alt="logo" />
      </Header>
    );
  }

  return (
    <Header noSearchBox={noSearchBox}>
      <img src="/images/logo.svg" alt="logo" />
      {!noSearchBox && (
        <div className="search-box">
          <img src="/images/search.svg" alt="search" />
          <span>어떤 번개를 찾으시나요?</span>
        </div>
      )}
      <div className="right-buttons">
        <Button background="mainViolet" color="white">
          <img
            className="icon-with-text"
            src="/images/thunder.svg"
            alt="thunder"
          />
          <span>번개 만들기</span>
        </Button>
        <div className="auth-buttons">
          {loggedIn ? (
            <img src="/images/user.svg" alt="user" />
          ) : (
            <>
              <Button noPadding>회원가입</Button>
              <hr />
              <Button noPadding>로그인</Button>
            </>
          )}
        </div>
      </div>
    </Header>
  );
}

export default MainNavigation;

proxy 설치 및 설정

1. http-proxy-middleware 설치

npm i -D http-proxy-middleware

2. setupProxy.js 작성

src/setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = (app) => {
  app.use(
    ["/auth", "/users", "/meeting"],
    createProxyMiddleware({
      target: "서버 주소",
      changeOrigin: true
    })
  );
};

3. .gitignore 파일에 setupProxy.js 추가

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# proxy
setupProxy.js