$$config title: 당근마켓 클론코딩 기술 설명서 keywords: - 기술설명서 - IT $$ # 개요 - 당근마켓 클론코딩 # 원격 저장소 - [깃허브 리포지터리 바로가기](https://github.com/orgs/SBS-Carrot/repositories) # 사용된 기술 ## 버전관리 - Github ## 배포 - Github - Docker(추후 해볼 예정) ## 개발환경 - Windows 10 - SQLYog - MariaDB - React (frontend) - InteliiJ (Backend) ## 서비스환경 - 미배포 ## 기술스택 - HTML, CSS, JS - Tailwind - NodeJS - Java - QueryDSL, JPA - SpringBoot - MariaDB - Amazon S3 Bucket ## 기능현황 | 기능명 | 구현 | | -- | -- | | 로그인 | O | | 회원가입 | O | | 중고거래 게시판 | O | | 당근알바 게시판 | O | | 부동산 게시판 | O | | 게시글 추천기능 | O | | 게시글 조회수 기능 | O | | 알바 지원 기능 | O | | 실시간 채팅기능 | O | | 사진 여러장 업로드 | O | | 게시글 사진 슬라이드기능 | O | | 유저 프로필사진 및 닉네임 변경 | O | | 각 게시판별 게시글 작성 | O | | 게시글 수정,삭제 | 삭제 O, 수정 O (이미지 수정만 남음) | | 동네게시판 | O | | 동네게시판 좋아요 기능| O | | 동네게시판 댓글 기능| O | | 동네게시판 수정,삭제 기능| O | | 검색기능 | O | | 동네게시판 무한스크롤 사용해서 게시글 7개씩 불러오기 기능| O | | 비밀번호 변경 | O | | 아이디 찾기 | X | | 카카오 로그인 | X | | 카카오Map API | O | | 게시판 페이징 | O | | 인기 검색어 | O | | 알림기능 | O | (최초 로그인시 알림은 가능하나, 실시간은 아직 안됨) | 각 거래 후기 작성하기 | O | | 거래 후 후기에따른 온도조정기능 | O | | 채팅방 삭제기능 | O | ## 회원가입 - 회원가입이 기능하다. - 회원가입시 아이디 중복확인, 비밀번호 형식(대소문자 + 숫자 + 특수문자), 비밀번호 재확인기능이 가능하다. ## 글쓰기 - 로그인을 해야 게시글 작성이 가능하다. - 각 게시글의 본인 / 관리자만 수정 삭제가 가능하도록 기능 추가예정 ## 검색 - 검색기능 추가예정 ## 추천 - 각 게시글당 1개의 추천기능이 가능하다 - 추후 추천이나 조회수가 높은 순서대로 인기 거래 게시글 추가예정 ## 댓글 - 댓글 추가 예정 ## 회원 - 닉네임과 프로필이미지의 변경이 가능하다. - 추후 본인이 쓴 게시글 관리탭 추가예정 - 추후 카카오톡 로그인, ID찾기, 비밀번호 변경 등 보안기능 추가예정 ## 썸네일 - 각 게시판의 리스트에서 글의 미리보기 이미지 노출. 이미지가 없는 게시글이라면 당근이미지 노출. # 폴더 ## frontend - node_modules : node 패키지 - package.json : node 의존성 - tailwind.config.js : 테일윈드 설정 - components : 각 게시판별로 게시글 작성하기, 단일 게시글 상세보기 기능 - layouts : Header와 Footer - recoil : Login의 상태를 전역에서 관리하기 위한 기능 - routes : 각 라우터를 담당하는 파일들을 모아놓은 폴더 - styles : css파일을 모아놓은 폴더 ## backend - chatting : 실시간 채팅을 위한 파일들의 집합폴더. 아직 미구현. - DSL.config : QueryDSL 실행을 위한 설정파일 - (product,job,realty) + Image : 각 게시판의 모든 사진을 담당하는 폴더. dao, dto, entity, service로 이루어져있다. - (product,job,realty) + Like : 각 게시글의 좋아요 기능, n:n관계를 위한 폴더. dao, entity, service로 이루어져 있다. - (product,job,realty) : 각 게시글의 기본적인 기능구현을 위한 폴더. controller,dao, dto, entity, service로 이루어져 있다. - user : 회원가입, 로그인, 유저 프로필사진 및 닉네임변경 등 기본적인 유저와 관련된 기능을 담당하는 폴더. - controller,dao, dto, entity, service 및 UserLoginForm, UserRole (관리자) 등으로 이루어져 있다. - util : 아마존 설정, 커스텀Exception, SpringSecurity 설정, CORS 설정 등 설정과 관련된 폴더이다. # ERD 다이어그램 ![ERD](https://i.postimg.cc/Bvw3Fntk/erd.png) # 로그인 소스코드 ![이미지](https://i.postimg.cc/J4wpnC7q/111.png) ```js Front > const onLogin = async (idValue, pwValue) => { try { const data = await axios({ url: `http://localhost:8083/loginUser`, method: "POST", data: { userid: idValue, password: pwValue, }, }); if (data.data == false) { alert("로그인 정보가 일치하지 않습니다."); } else { const logined = data.data.substring(0, 4); const userid = data.data.substring(4); sessionStorage.setItem("isLogined", logined); sessionStorage.setItem("userid", userid); setLogined(sessionStorage.getItem("isLogined")); } } catch (e) { console.log(e); } }; import { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCarrot, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; import axios from "axios"; import { AiOutlineLogin } from "react-icons/ai"; import { useNavigate } from "react-router-dom"; import { useEffect } from "react"; const Login = ({ onLogin, logined }) => { useEffect(() => { if (logined) { alert("이미 로그인한 상태입니다."); onHomepage(); } }, []); const [idValue, setIdValue] = useState(""); const [pwValue, setPwValue] = useState(""); const navigate = useNavigate(); const onHomepage = () => { navigate("/"); }; const onIdChange = (e) => { if (e.target.value.length >= 20) { return; } setIdValue(e.target.value); }; const onPwChange = (e) => { if (e.target.value.length >= 20) { return; } setPwValue(e.target.value); }; return (

당근마켓

당근 로그인

{" "}

계정이 없으신가요?

회원 가입하기

이용약관 개인정보 취급방침 위치기반 서비스 이용약관

); }; export default Login; Back > public String login(UserLoginForm userLoginForm) throws UsernameNotFoundException{ User user = getUser(userLoginForm.getUserid()); if(user==null){ return "false"; } if(passwordEncoder.matches(userLoginForm.getPassword(),user.getPassword())) { return ("true"+user.getUserid()); }else { return "false"; } } ``` # 회원가입 소스코드 ![이미지](https://i.postimg.cc/Hnm8qzHQ/1123123.png) ```js >Front import { useState } from "react"; import axios from "axios"; import Header from "../layouts/Header"; import { AiOutlineCheckCircle } from "react-icons/ai"; import { useNavigate } from "react-router-dom"; const Join = () => { const [idValue, setIdValue] = useState(""); const [passwordValue, setPasswordValue] = useState(""); const [password1Value, setPassword1Value] = useState(""); const [nameValue, setNameValue] = useState(""); const [birthValue, setBirthValue] = useState({ yy: "", mm: "", dd: "", }); const [addressValue, setAddressValue] = useState(""); const [emailValue, setEmailValue] = useState(""); const [nicknameValue, setNicknameValue] = useState(""); const [phoneValue, setPhoneValue] = useState(""); const [idCheck, setIdCheck] = useState(false); const [pwCheck, setPwCheck] = useState(false); const [pw2Check, setPw2Check] = useState(false); const [pwStatus, setPwStatus] = useState(false); const [pw2Status, setPw2Status] = useState(false); const [useid, setUseid] = useState(false); const [joinCheck, setJoinCheck] = useState(false); const navigate = useNavigate(); const moveLogin = () => { navigate("/login"); }; const IdCheck = async (idValue) => { try { const data = await axios.get(`http://localhost:8083/checkId/${idValue}`); setIdCheck(data.data); } catch (e) { console.log(e); } }; const dataRuleCheckForID = (ch) => { let ascii = ch.charCodeAt(0); if (48 /* 0 */ <= ascii && ascii <= 57 /* 9 */) return true; // if (65 /* A */ <= ascii && ascii <= 90 /* Z */) return true; if (97 /* a */ <= ascii && ascii <= 122 /* z */) return true; // if (ch === ".") return true; return false; }; const dataRuleCheckForPw = (ch) => { let ascii = ch.charCodeAt(0); if (33 <= ascii && ascii <= 126) return true; return false; }; const onUseidChange = () => { setUseid(!useid); }; const onIdChange = (e) => { setIdCheck(false); let value = e.target.value; if (e.target.value.length >= 20) { return; } if (value === "") { setIdValue(value); return; } let length = value.length; if (dataRuleCheckForID(value[length - 1]) === false) { return; } setIdValue(value); return; }; const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,20}$/g; const onPasswordChange = (e) => { let value = e.target.value; if (value.length >= 20) { return; } if (value.length <= 7) { setPwCheck(false); } if (value === "") { setPasswordValue(value); return; } let length = value.length; if (dataRuleCheckForPw(value[length - 1]) === false) { return; } setPasswordValue(value); if (length >= 8) { if (value.match(passwordReg) === null) { setPwStatus(false); } else { setPwStatus(true); } setPwCheck((prev) => true); } else { setPwCheck((prev) => false); } }; const onPassword1Change = (e) => { let value = e.target.value; if (e.target.value.length >= 20) { return; } if (e.target.value.length <= 7) { setPw2Check(false); } if (value === "") { setPassword1Value(value); return; } let length = value.length; if (dataRuleCheckForPw(value[length - 1]) === false) { return; } setPassword1Value(value); if (length >= 8) { setPw2Check(true); if (value === passwordValue) { setPw2Status(true); } else { setPw2Status(false); } } else { setPw2Check(false); } }; const onNameChange = (e) => { if (e.target.value.length >= 20) { return; } setNameValue(e.target.value); }; const onYearChange = (e) => { setBirthValue((prev) => { return { ...prev, yy: e.target.value }; }); }; const onMonthChange = (e) => { setBirthValue((prev) => { return { ...prev, mm: e.target.value }; }); }; const onDayChange = (e) => { setBirthValue((prev) => { return { ...prev, dd: e.target.value }; }); }; const onAddressChange = (e) => { setAddressValue(e.target.value); }; const onEmailChange = (e) => { setEmailValue(e.target.value); }; const onNicknameChange = (e) => { setNicknameValue(e.target.value); }; const onPhoneChange = (e) => { setPhoneValue(e.target.value); }; const onJoin = async ( idValue, passwordValue, nameValue, birthValue, addressValue, emailValue, nicknameValue, phoneValue ) => { try { let birth = JSON.stringify(birthValue); const data = await axios({ url: `http://localhost:8083/createUser`, method: "POST", data: { userid: idValue, password: passwordValue, username: nameValue, birth: birth, email: emailValue, nickname: nicknameValue, address: addressValue, phone: phoneValue, }, }); setJoinCheck(true); } catch (e) { console.log(e); } }; return (

{idCheck == true ? useid && (

"{idValue}"은(는)
사용 가능한 아이디입니다.

사용하시겠습니까?

) : useid && (

"{idValue}"은(는)
사용 불가능하거나 이미 존재하는 아이디입니다. 다른 아이디를 사용해주세요

)}

아이디

onIdChange(e)} style={{ outline: "1px #d5d5d5 solid", width: "400px", height: "50px", }} />

비밀번호

{pwCheck == true && (pwStatus == true ? (

비밀번호 양식에 적합합니다

) : (

비밀번호 양식을 다시 확인해주세요

))} onPasswordChange(e)} style={{ outline: "1px #d5d5d5 solid", width: "400px", height: "50px", }} />

비밀번호 재확인

{pw2Check == true && (pw2Status == true ? (

비밀번호 일치 확인

) : (

비밀번호가 일치하지 않습니다.

))} {" "}

이름

생년월일

주소

본인 확인 이메일(선택)

닉네임 (선택)

휴대전화

{joinCheck && (

회원가입에 성공했습니다.
로그인 홈페이지로 이동하여
당근마켓을 바로 이용해보세요!

)}

); }; export default Join; >Backend public User create(UserDto userDto) { BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder(); String username = userDto.getUsername(); String userid = userDto.getUserid(); String password = userDto.getPassword(); String birth = userDto.getBirth().replaceAll("[^0123456789]",""); String year = birth.substring(0,4); String month = birth.substring(4,6); String day = birth.substring(6); birth = (year + "-" + month + "-" + day); String address = userDto.getAddress(); String email; if(userDto.getEmail()!="") { email = userDto.getEmail(); }else { email = "이메일 없음"; } String nickname; if(userDto.getNickname()!=""){ nickname = userDto.getNickname(); }else { nickname = "닉네임 없음"; } String phone = userDto.getPhone(); User user = User.builder() .username(username) .userid(userid) .password(passwordEncoder.encode(password)) .birth(birth) .address(address) .email(email) .nickname(nickname) .phone(phone) .role("ROLE_USER") .temp(36.5) .build( userRepository.save(user return user; } ``` # 이미지 여러개 AWS Bucket DB저장 및 삭제 소스코드 ![이미지](https://i.postimg.cc/9fnM2h5P/123.png) ![이미지](https://i.postimg.cc/jS8q6b5V/321.png) ```java public void changeUserProfileImage(UserDto userdto, List multipartFile, String users) throws IOException { List uploadFile = new ArrayList(); for(int i=0;i< multipartFile.size();i++) { MultipartFile files = multipartFile.get(i); File upload = convert(files) .orElseThrow(() -> new IllegalArgumentException("MultipartFile -> File로 전환이 실패했습니다.")); uploadFile.add(upload); } upload(userdto, uploadFile, users); } private void upload (UserDto userdto, List uploadFile, String dirName){ String userid = userdto.getUserid(); String fileName = dirName + "/" + UUID.randomUUID() + uploadFile.get(0).getName(); User user = userRepository.findByUserid(userid).orElseThrow(()-> new DataNotFoundException("user not found")); String file = user.getProfileImage(); if(file!=null) { String[] filename = file.split(dirName + "/"); deleteS3File(filename[1], dirName); } String path = putS3(uploadFile.get(0), fileName); removeNewFile(uploadFile.get(0)); user.setProfileImage(path); user.setNickname(userdto.getNickname()); userRepository.save(user); } private String putS3 (File uploadFile, String fileName){ amazonS3Client.putObject(new PutObjectRequest(bucket, fileName, uploadFile).withCannedAcl( CannedAccessControlList.PublicRead)); return amazonS3Client.getUrl(bucket, fileName).toString(); } private void removeNewFile (File targetFile){ if (targetFile.delete()) { log.info("파일이 삭제되었습니다."); } else { log.info("파일이 삭제되지 못했습니다."); } } private Optional convert (MultipartFile file) throws IOException { File convertFile = new File(file.getOriginalFilename()); if (convertFile.createNewFile()) { try (FileOutputStream fos = new FileOutputStream(convertFile)) { fos.write(file.getBytes()); } return Optional.of(convertFile); } return Optional.empty(); } public void resetUserProfile(UserDto userdto, String bucketFolder) { User user = userRepository.findByUserid(userdto.getUserid()).orElseThrow(()-> new DataNotFoundException("user not found")); user.setNickname("닉네임 없음"); String file = user.getProfileImage(); String[] filename = file.split(bucketFolder+"/"); deleteS3File(filename[1], bucketFolder); user.setProfileImage(null); userRepository.save(user); } public void resetUserImage(UserDto userdto,String bucketFolder){ User user = userRepository.findByUserid(userdto.getUserid()).orElseThrow(()-> new DataNotFoundException("user not found")); String file = user.getProfileImage(); String[] filename = file.split(bucketFolder+"/"); deleteS3File(filename[1],bucketFolder); user.setProfileImage(null); userRepository.save(user); } public void deleteS3File(String fileName, String bucketFolder){ String file = bucketFolder+"/"+fileName; amazonS3Client.deleteObject(bucket,file); } ```