ver1. 22년 12월 22일 ~ 2월 24일
ver2. 23년 11월 16일 ~ 코드 수정
[ 프로젝트 소개 ]
- 아우어마켓은 구매회원, 판매회원으로 나뉘어 물건을 사고, 팔 수 있는 오픈마켓 서비스입니다.
- 회원가입
- 원하는 사용자 성격에 따라 가입할 수 있습니다. (구매회원, 판매회원)
- 아이디 중복 검사가 필요합니다.
- 판매회원의 경우 사업자 등록번호 확인이 필요합니다.
- 유효한 정보를 모두 입력 후 정보제공 동의를 마쳐야 가입할 수 있습니다.
- 로그인
- 사용자 성격에 맞는 로그인 화면에서 로그인을 진행합니다.
- 판매회원이 구매회원 로그인을 진행할 경우 로그인 유형 확인 경고가 나타납니다.
- 상품 검색의 경우 로그인하지 않더라도 이용할 수 있습니다.
- 구매회원
- 원하는 상품을, 원하는 수량으로 장바구니에 담을 수 있습니다.
- 장바구니 내에서 상품 수량을 변경 및 삭제할 수 있습니다.
- 상품 상세 페이지 내에서 바로 구매 하거나 장바구니 내에서 상품을 구매할 수 있습니다.
- 결제 페이지에서 모든 정보를 입력후 정보 제공 동의를 마쳐야 결제할 수 있습니다.
- 판매회원
- 판매회원은 상세페이지에 들어가더라도 상품을 주문할 수 없습니다.
- 판매자 센터 페이지에서 판매중인 상품을 확인할 수 있습니다.
- 판매중인 상품을 수정하거나 삭제할 수 있습니다.
- 상품 업로드 및 수정 페이지 내의 모든 정보를 유효하게 입력해야 상품 정보를 저장할 수 있습니다.
[ 실행 화면 ]
1. 메인화면 ( + 로그인 전 상품 상세 페이지)
2. 회원가입
3. 로그인
4. 장바구니
5. 상품 주문하기
6. 상품 결제하기
상세 페이지 내 바로 주문, 장바구니내 개별 주문, 전체 주문
react-daum-postcode 사용
7. 판매회원 홈 화면 + 상품 상세 페이지 + 판매자 센터
8. 판매 상품 업로드
9. 판매 상품 정보 수정
10. 판매 상품 삭제
11. 검색
12. 로그아웃
13. 반응형
[ 주요 코드 ]
1. 디자인 시스템 (네이밍 규칙) 적용
일반적인 리액트 컴포넌트와 스타일드 컴포넌트가 혼합되어 있기 때문에
코드의 가독성을 향상시키기 위해 스타일드 컴포넌트 임포트시 컴포넌트 앞에 S. 붙여 구분이 용이하도록 했습니다.
// SearchResult 페이지 컴포넌트에서 값을 보여줌// 가져온 값을 getSearchData api 호출을 통해 검색을 실시하고 결과값을 렌더링함.useEffect(()=>{setLoading(true);if(searchValue){try{constencodedSearchValue=encodeURIComponent(searchValue);getSearchData(activePage,encodedSearchValue).then((res)=>{setSearchData(res.data);setSearchResults(res.data.results);setLoading(false);});}catch(error){console.error(error);}}else{setSearchData({});setSearchResults([]);setLoading(false);}},[searchValue,activePage]);
// useTheme을 통해 현재 ThemeContext 값을 가져옴exportconstuseTheme=()=>{consttheme=useContext(ThemeContext);if(!theme){thrownewError('error');}returntheme;};exportconstThemeProvider=({ children })=>{conststoredValue=localStorage.getItem('isDarkMode');// 초기 다크모드 상태 설정, storedValue가 없다면 false값 설정.const[isDarkMode,setIsDarkMode]=useState(()=>{returnstoredValue ? JSON.parse(storedValue) : false;});// toggle 함수, 다크 모드 상태를 토글하고 변경된 상태를 로컬 스토리지에 저장consttoggleTheme=()=>{setIsDarkMode((prevMode)=>{constnewMode=!prevMode;localStorage.setItem('isDarkMode',JSON.stringify(newMode));returnnewMode;});};// 컴포넌트가 마운트 될때, storedValue 바뀔 때 실행.useEffect(()=>{if(storedValue!==null){setIsDarkMode(JSON.parse(storedValue));}},[storedValue]);// 테마 정보를 담은 객체 생성consttheme={
isDarkMode,
toggleTheme,};// useContext를 사용하여 ThemeContext 값을 제공.// isDarkMode, toggleTheme함수가 제공되고 이를 StyledProvider의 theme props로 전달return(<ThemeContext.Providervalue={theme}><StyledProvidertheme={theme}>{children}</StyledProvider></ThemeContext.Provider>);};