Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL #10

dabin-Hailey · 2023-09-22T14:11:41Z

🍽️ SWAL - 맛집 소모임 WIKI APP

맛집 & 밥약 관리 웹서비스, "SWAL"

맛집을 공유하고 같이 먹을 사람을 구하는 웹서비스, SWAL입니다.

SWAL은 맛집을 등록, 공유하고 정보를 나누며 위치기반으로 밥약속을 잡을 수 있는 기능을 제공합니다.

🔗 SWAL 배포 링크

회원가입을 먼저 진행해 주세요 !

🎬 SWAL 구현 영상

✨ SWAL의 주요 기능

✅ 회원 관리 : 로그인, 로그아웃, 회원가입을 할 수 있습니다.

✅ 맛집 공유 : 맛집을 공유할 수 있습니다. 맛집 이름, 주소, 카테고리를 분류해서 저장할 수 있습니다.

✅ 밥약 관리 : 밥약을 만들거나 참여할 수 있습니다. 최대 9명으로 구성된 밥약속을 만들거나 참여해보세요. 지도에서 맛집을 찾아 합류할 수 있습니다.

💡 SWAL의 비지니스 / 프로덕트 문제

✅ SWAL의 비전 : 맛집에서 밥은 다같이 맛있게 먹어야 한다.

✅ SWAL의 비지니스 요구사항

맛집 공유의 편리함
밥약을 빠르게 잡을 수 있는 신속함

✅ SWAL의 타겟

맛집 정보를 나누고 싶은 공유 Lover
밥약을 잡아서 같이 밥을 먹고 싶은 혼밥 Hater

✅ SWAL의 프로덕트 구현

맛집 정보를 나누고 싶은 공유 Lover

카테고리에 맞는 맛집 공유
모든 정보를 기입하지 않고 지도 검색으로 간단하게 맛집을 추가할 수 있는 기능

밥약을 잡아서 같이 밥을 먹고 싶은 혼밥 Hater

30분 이내에서 유효한 밥약을 참여할 수 있는 기능
모든 정보를 기입하지 않고 지도 검색으로 간단하게 밥약을 추가할 수 있는 기능

📌 SWAL의 사용 방법

SWAL를 사용하기 위해서는 먼저 회원 가입을 해야 합니다.

회원가입 후 맛집을 공유하거나 밥약속을 만들고 참여하세요!!

1. 좌측 상단의 로그인 버튼을 누르세요.

2. 기존 회원이시면 로그인을, 첫 방문이시라면 회원가입 버튼을 누르세요. (2-1)

회원가입은 이메일과 비밀번호가 필요합니다!

3. Wiki 페이지의 공지사항과 소개 글을 읽어 주세요.

공지사항 페이지

소개 페이지

각 페이지는 로그인 후 저희 카페의 회원이 되면 수정이 가능합니다 !

4. 같이 먹을 사람 구해요 페이지에서 같이 밥 먹을 사람을 찾아요👭

밥약을 생성하거나, 참여할 수 있습니다!

제목, 내용, 위치, 구할 시간, 인원을 설정해서 밥약을 만들어 보세요!

5. Gallery 페이지에서 맛집 정보를 공유하세요 !

다른 회원들이 공유한 맛집들을 카테고리별로 정리해서 볼 수 있습니다!

나만의 맛집을 지도에서 찾아 등록할 수 있어요 !

맛있게 나온 사진을 첨부해서 맛집을 공유해봐요 😉

👤 SWAL의 유저 플로우

🛠️ SWAL의 기술 스택

Enviroment & Config

Development & FrontEnd

DB

Deploy

Communication

📂 SWAL의 디렉토리 구조

📦IKUZO-WIKI/
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┃ ┣ 📂chooseid
┃ ┃ ┃ ┣ 📜ChooseEmailButton.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┃ ┗ 📜LoginBtn.tsx
┃ ┃ ┃ ┣ 📂Layout
┃ ┃ ┃ ┃ ┣ 📜GalleryLayout.tsx
┃ ┃ ┃ ┃ ┗ 📜WikiLayout.tsx
┃ ┃ ┃ ┣ 📂SidebarGallery
┃ ┃ ┃ ┃ ┣ 📜AddModal.tsx
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📂SidebarWiki
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂gallery
┃ ┃ ┃ ┣ 📂GalleryButton
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂GalleryItem
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┃ ┣ 📜DeleteModal.tsx
┃ ┃ ┃ ┃ ┗ 📜UpdateModal.tsx
┃ ┃ ┃ ┣ 📂Pagination
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂map
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜Map.styled.tsx
┃ ┃ ┣ 📂register
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂skeleton
┃ ┃ ┃ ┣ 📜Skeleton.tsx
┃ ┃ ┃ ┣ 📜SkeletonGallery.tsx
┃ ┃ ┃ ┗ 📜SkeletonMarkdown.tsx
┃ ┃ ┗ 📂wiki
┃ ┃ ┃ ┣ 📂Intro
┃ ┃ ┃ ┃ ┗ 📜Intro.tsx
┃ ┃ ┃ ┣ 📂Layout
┃ ┃ ┃ ┃ ┗ 📜WikiLayout.styled.tsx
┃ ┃ ┃ ┣ 📂Markdown
┃ ┃ ┃ ┃ ┣ 📜MarkdownEditor.tsx
┃ ┃ ┃ ┃ ┗ 📜MarkdownViewer.tsx
┃ ┃ ┃ ┣ 📂Notice
┃ ┃ ┃ ┃ ┗ 📜Notice.tsx
┃ ┃ ┃ ┣ 📂With
┃ ┃ ┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WithButton
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WIthItem
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WithTime
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂hooks
┃ ┃ ┣ 📜getAuth.ts
┃ ┃ ┣ 📜getGalleryData.ts
┃ ┃ ┣ 📜getLoginAuth.ts
┃ ┃ ┗ 📜getStorageAuthData.ts
┃ ┣ 📂pages
┃ ┃ ┣ 📜Chinese.tsx
┃ ┃ ┣ 📜ChooseId.tsx
┃ ┃ ┣ 📜Home.tsx
┃ ┃ ┣ 📜Intro.tsx
┃ ┃ ┣ 📜Japanese.tsx
┃ ┃ ┣ 📜Korean.tsx
┃ ┃ ┣ 📜Login.tsx
┃ ┃ ┣ 📜Notice.tsx
┃ ┃ ┣ 📜Register.tsx
┃ ┃ ┣ 📜Western.tsx
┃ ┃ ┗ 📜With.tsx
┃ ┣ 📂recoil
┃ ┃ ┣ 📜authRecoil.ts
┃ ┃ ┗ 📜countRecoil.ts
┃ ┣ 📂utils
┃ ┃ ┣ 📜firebase.config.tsx
┃ ┃ ┣ 📜NonProtectedRoute.tsx
┃ ┃ ┣ 📜ProtectedRoute.tsx
┃ ┃ ┗ 📜util.tsx
┃ ┣ 📜App.tsx
┃ ┣ 📜index.css
┃ ┣ 📜index.tsx
┃ ┣ 📜logo.svg
┃ ┣ 📜react-app-env.d.ts
┃ ┣ 📜reportWebVitals.ts
┃ ┗ 📜setupTests.ts
┣ 📂public
┣ 📂node_modules
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜README.md
┗ ...

🪹 SWAL의 브랜치 전략

main: 서비스 배포용도의 브랜치
dev: 배포 전, 모든 feature 브랜치 병합 및 테스트용도의 브랜치
feature/#issueNumber: github issue 넘버로 기능 구현

👩‍💻 Contributor 👨‍💻


김민섭 (FE)	이승현 (FE)	김다빈 (FE)	한은지 (FE)	소유나 (FE)

Feat: 헤더 푸터 수정

Revert "디자인 초안이 나옴에 따른 컴포넌트 관계 설정 및 컴포넌트 레이아웃 재조정 (이슈 #1)"

jungHyeonS

프로젝트 진행하시느라 고생하셨습니다~
전체적으로 깔끔하게 코드를 작성해주신거같고 기능 구현도 적절하게 잘진행해주신거같습니다
추후 리팩토링 진행하실때 작성해주신 리뷰들 참고해주시면 좋을꺼같습니다~

jungHyeonS · 2023-09-29T03:33:40Z

src/components/chooseid/ChooseEmailButton.tsx

+const ChooseEmailButton = ({ data }: ChooseEmailButtonProps) => {
+  const { enrollEmail, value } = getParsedData(data);
+  const setEnrollEmail = useSetRecoilState(emailState);
+  const setValue = useSetRecoilState(uidState);


setValue 변수명이 적절하지 않아보입니다. 37번줄에 getParsedData 에 value 부분이랑 헷갈릴수도있을꺼같아서 setUid 로 변수명 변경하는것을 추천드립니다~

네네 변수명에 주의하도록 하겠습니다!! 다른분이 코드를 본다면 어떤 변수 인 지 잘 파악이 어려울 것 같습니다.

jungHyeonS · 2023-10-03T02:59:51Z

src/components/chooseid/index.tsx

+    const value = localStorage.getItem(key);
+    ids.push(value);


localStorage 에 값이 없을경우 null을 반환하기에 null값이 배열에 추가가 안되도록 예외 처리를 해주시면 좋을꺼같습니다

감사합니다. 확인해보니 말씀해주신 문제가 있어서 try-catch구문으로 예외처리 했습니다. 이번 프로젝트가 끝나고 회원가입 기능에 대해서 배우고있는데 로컬스토리지에 저장하는 것이 보안적으로 많이 문제가 있다는 것을 알 수 있었습니다. (이번 프로젝트에서는 로컬 스토리지에 그냥 사용자 uid를 넣어버렸습니다..)

자동 로그인이나 로그인 정보 기억하기 기능을 넣으실 때 어떻게 구현을 하시는 지 궁금합니다. 일단 공부하고 알아본 바로는 쿠키에 저장하는 것이 비교적 안전하다고 배웠습니다. samesite 속성도 사용할 수 있기 때문에 더 안전하다는 것도 배울 수 있었습니다. 이 외에 UX적으로, 보안적으로 더 이상적인 회원기능을 만들 방법이 있는 지 궁금합니다!!

jungHyeonS · 2023-10-03T03:00:28Z

src/components/chooseid/index.tsx

+  return ids;
+};
+
+const index = () => {


컴포넌트명에 index를 넣어주시는거는 적절하지 않은거같습니다 ChooseId 혹은 다른 적절한 컴포넌트명으로 변경하시는걸 추천드립니다

컴포넌트 명에 소문자를 넣으면 안되는 이유가 JSX에서 컴포넌트가 html 태그로 인식될 가능성이 있기 때문에 사용하면 안된다는 것을 배울 수 있었습니다!! 감사합니다 😀😀

jungHyeonS · 2023-10-03T03:01:28Z

src/components/chooseid/index.tsx

+              const data = id as string;
+              return (
+                <div
+                  key={data}


해당 부분에서 key 값이 항상 고유하다면 문제가 발생하지 않는다면 문제가 발생하지 않는데 만약 고유하지 않다면 해당 키값은 적절하지 않은거같습니다. 이럴때는 react-uuid 라이브러리를 한번 사용해보시는걸 추천드립니다

매번 키값으로 어떤 것을 넣어야 하는지 고민이었는데 라이브러리로 만들어서 넣는 방법이 훨씬 더 나은 것 같습니다. 말씀해주신 러이브러리를 보니 중복값을 제외해줘서 고유한 키값을 얻는데 더 도움이 될 것 같습니다 🫢🫢

혹시 NEXT의 server컴포넌트에서 map 메소드를 사용할 때와 비슷하게 고유한 키값을 생성해내야 한다면 어떻게 하시는 지 궁금합니다. 데이터 자체에 고유한 키값을 넣거나 (예를들어 id값) 혹은 unix타임 값을 이용한다던 지 어떻게 해결하시는 지 궁금합니다!!

jungHyeonS · 2023-10-03T03:02:28Z

src/components/common/SidebarGallery/AddModal.tsx

+  const [imgFile, setImgFile] = useState<File>();
+  const [isSubmitting, setIsSubMitting] = useState(false);
+  const imgRef = useRef<HTMLInputElement>(null);
+  const MAX_IMAGE_SIZE_BYTES = 1024 * 1024 * 2;


이러한 상수는 컴포넌트 밖에다가 선언하시는걸 추천드립니다~

jungHyeonS · 2023-10-03T03:12:52Z

src/components/home/index.tsx

+  }}
+`;
+
+const Home = () => {


전체적으로 home 컴포넌트에 코드양이 상당히 많습니다 이럴때는 home 컴포넌트 안에서도 적절히 컴포넌트 분리를 해주시는게 좋습니다

jungHyeonS · 2023-10-03T03:16:10Z

src/components/map/index.tsx

+  let markers: any = [];
+  let map: any;
+  let places: any;
+  let infoWindow: any;


해당 변수들이 컴포넌트내에 상태를 관리하기위하여 선언된거같은데 이럴때는 useState 혹은 useRef를 사용하시는걸 추천드리며 그리고 any타입은 사용을 자제해주시면 좋을꺼같습니다

jungHyeonS · 2023-10-03T03:17:13Z

src/components/map/index.tsx

+  interface Place {
+    address_name: string;
+    category_group_code: string;
+    category_group_name: string;
+    category_name: string;
+    distance: string;
+    id: string;
+    phone: string;
+    place_name: string;
+    place_url: string;
+    road_address_name: string;
+    x: string;
+    y: string;
+  }
+
+  interface PaginationData {
+    current: number;
+    first: number;
+    gotoFirst: () => void;
+    gotoLast: () => void;
+    gotoPage: (pageNumber: number) => void;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+    last: number;
+    nextPage: () => void;
+    perPage: number;
+    prevPage: () => void;
+    totalCount: number;
+  }


컴포넌트안에 인터페이스를 선언하는부분이 기술적으로는 문제가 되지는 않으나, 코드 가독성 측면에서는 다소 아쉽습니다. 별도의 파일로 분리해서 관리 혹은 컴포넌트 밖에다가 선언하시는걸 추천드립니다

jungHyeonS · 2023-10-03T03:21:54Z

src/components/wiki/With/WithTime/index.tsx

+type Props = {
+  time: number;
+  unLoadItem: () => void;
+};


Props를 선언을 인터페이스 혹은 type으로 할지 정해주신다음 코드 컨벤션을 맞춰주시면 좋을꺼같습니다

이번 프로젝트를 하면서 타입을 중복으로 작성했던 것들이 많았던 것 같습니다. 타입 정하는 것도 컨벤션으로 확실하게 적어놓아야 불필요한 JS코드를 사용하지 않을 수 있다는 것을 배울 수 있었습니다. 감사합니다!!

jungHyeonS · 2023-10-03T03:22:44Z

src/components/wiki/With/index.tsx

+            const { id } = item;
+            const { title, joined, contents, location, people, time } =
+              item as WithProp;


해당부분은 한줄로 개선할수있을꺼같습니다

const { id,title, joined, contents, location, people, time } = item as WithProp;

LikeFireAndSky assigned LikeFireAndSky, dabin-Hailey and seungsimdang Sep 22, 2023

im-na0 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #10 from im-na0/feature/#8

ceba7cd

Feat: 헤더 푸터 수정

LikeFireAndSky assigned seacrab808 and lilviolie Sep 22, 2023

LikeFireAndSky changed the title ~~Update README.md~~ Y_FE_Toy1_Team1 SWAL Sep 22, 2023

TaePoong719 added a commit that referenced this pull request Sep 22, 2023

Merge pull request #10 from TaePoong719/revert-4-feature/#1

0fdb3e5

Revert "디자인 초안이 나옴에 따른 컴포넌트 관계 설정 및 컴포넌트 레이아웃 재조정 (이슈 #1)"

dabin-Hailey force-pushed the Y_FE_Toy1_Team1 branch from 6f16afd to 17b8d2b Compare September 22, 2023 14:54

dabin-Hailey changed the title ~~Y_FE_Toy1_Team1 SWAL~~ Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL Sep 22, 2023

Update README.md

98b1341

dabin-Hailey force-pushed the Y_FE_Toy1_Team1 branch from 17b8d2b to 98b1341 Compare September 22, 2023 14:59

jungHyeonS reviewed Oct 3, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL #10

Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL #10

dabin-Hailey commented Sep 22, 2023 •

edited

Loading

jungHyeonS left a comment

jungHyeonS Sep 29, 2023

LikeFireAndSky Oct 14, 2023

jungHyeonS Oct 3, 2023

LikeFireAndSky Oct 14, 2023

jungHyeonS Oct 3, 2023

LikeFireAndSky Oct 14, 2023

jungHyeonS Oct 3, 2023

LikeFireAndSky Oct 14, 2023

jungHyeonS Oct 3, 2023

jungHyeonS Oct 3, 2023

jungHyeonS Oct 3, 2023

jungHyeonS Oct 3, 2023

jungHyeonS Oct 3, 2023

LikeFireAndSky Oct 14, 2023

jungHyeonS Oct 3, 2023

Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL #10

Are you sure you want to change the base?

Y_FE_Toy1_Team1 맛집 소모임 WIKI APP SWAL #10

Conversation

dabin-Hailey commented Sep 22, 2023 • edited Loading

🍽️ SWAL - 맛집 소모임 WIKI APP

🔗 SWAL 배포 링크

🎬 SWAL 구현 영상

✨ SWAL의 주요 기능

💡 SWAL의 비지니스 / 프로덕트 문제

📌 SWAL의 사용 방법

👤 SWAL의 유저 플로우

🛠️ SWAL의 기술 스택

Enviroment & Config

Development & FrontEnd

DB

Deploy

Communication

📂 SWAL의 디렉토리 구조

🪹 SWAL의 브랜치 전략

👩‍💻 Contributor 👨‍💻

jungHyeonS left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dabin-Hailey commented Sep 22, 2023 •

edited

Loading