[민혁, 세은] 모달 구현 과제 제출 #6

se-eun-park · 2024-03-20T12:21:27Z

✨배포 링크

언어 및 라이브러리

🛠️ Motivation

민혁 👨‍🔧

라이브러리를 사용하지 않고 Modal 구현
props를 활용한 컴포넌트 추상화를 통해 재사용성 증진
tailwind를 사용해 Modal UI 구현

세은 👩‍🎨

Vite를 사용한 개발 환경 설정
react-router-dom v6를 사용해 페이지 라우팅
Modal에서 보낸 데이터를 활용해 Header, Card 컴포넌트 구현
tailwind를 사용해 Home, Myspace UI 구현

🔑 Key Changes

Folder	File	Description
assets	arrow	svg
	search	svg

components	Card	생성한 설문 정보를 담고있는 Card
	Header	페이지 Title & 사용자 닉네임을 보여주는 상단bar
	Modal	간단 로그인 & 설문 Modal
	SurveyTag	설문 modal에서 사용할 태그 컴포넌트

pages	HomePage	첫 화면 & 간단 로그인을 실행하는 페이지
	MyspacePage	설문을 생성하고 확인하는 페이지

router	index	라우터 정보를 담고있는 파일

민혁 👨‍🔧

간편 로그인 모달 기능 구현
- Feat: 간편 로그인 닉네임 체크 로직 구현 [Feat] 간편 로그인 기능 구현 se-eun-park/ssafe-modal#11
- Feat: 간련 로그인 데이터 전송 로직 구현 [Feat] 간편 로그인 기능 구현 se-eun-park/ssafe-modal#11

설문조사 모달 기능 구현
- Feat: Survey Modal 태그 텍스트 추가 기능 구현 [Feat] Survey Modal 기능 구현 se-eun-park/ssafe-modal#16
- Feat: Survey Modal 기능 구현 완료 [Feat] Survey Modal 기능 구현 se-eun-park/ssafe-modal#16

컴포넌트 추상화

modalType을 생성해 Modal.tsx만 import해도 여러 모달을 사용할 수 있도록 만들었습니다.

수정 기능 추가를 위해 모달 생성시 props 에 form data를 추가해 재사용성을 높혔습니다.
- Feat: Modal Type 로직 구현 [Feat] Modal Type 설정 se-eun-park/ssafe-modal#14
- Fix: form data type 수정(convert any to form) , Survey modal props 수정

세은 👩‍🎨

Vite를 사용한 개발 환경 설정 및 절대경로 설정
- Docs: 개발 환경 설정
- Docs: tsconfig 수정

react-router-dom v6를 사용해 페이지 라우팅

이후, protect router 기능 추가 시 더 편할 것 같아 v6버전을 사용해봤습니다.
- Feat: Sample page 생성
- Feat: 페이지 라우팅 구현

Modal에서 보낸 데이터를 활용해 Header 컴포넌트 생성

받아지는 데이터 외에도 Title을 props로 받고, 닉네임 길이를 기준으로 배경색을 바꾸는 로직으로 재사용성을 높혀주었습니다.
- Feat: Header nickname 배경 조건부 설정

Modal에서 보낸 데이터를 활용해 Card 컴포넌트 생성
- Feat: Card 컴포넌트 생성

🐛발견된 버그

로그인 하지 않고 /myspace 이동 시
- 로컬서버에선 닉네임에 undefine 으로 표시됨
- vercel로 배포한 환경에선 404에러
UI 버그들

🚀 Future Implementation Plans

⭐Type 전역 관리
태그 색상 설정 로직 수정
태그 생성 및 수정 시 삭제 버튼 추가
⭐ Form 수정 로직 적용시키기 (Card를 누르면 수정)
Protect router 추가 (로그인 하지 않으면 /myspace 이동 차단 및 에러 페이지로 이동)
UI 버그 수정

🙏🏼 To Reviewers

세은 : 하드코딩된 부분은 없는지, 재사용성을 고려해 코드가 작성되었는지 봐주세요.

이슈 공통 템플릿 생성

Feat/seeun

Feature/minhyuk

Feat: Modal Type 로직 구현

…o feat/seeun

Feat/seeun

Feat/minhyuk

…o feat/seeun

Feat: Survey Modal 기능 구현 완료

…o feat/seeun

nickname 유무에 따라 배경색 변경

Fix: form data type 수정(convert any to form) , Survey modal props 수정

…o feat/seeun

Feat: Card 컴포넌트 생성

Fix: svg 선언식 에러 해결

kwakseongjae

전반적으로 봤을땐 작업 수준이 상당하네요.
하지만 이번 과제의 핵심인 모달만 봤을때는 다소 아쉽습니당.
리팩토링할땐 대대적인 수술이 필요할지도 !?

kwakseongjae · 2024-03-21T05:18:03Z

src/components/Card.tsx

+      <div className="mr-[1.6rem] h-[23rem] w-[35.6rem] rounded-[0.8rem] border-[0.05rem] border-[#D4D4D4] bg-white">
+        <div className="flex h-[5rem] w-[35.6rem] items-center justify-between border-b-[0.05rem] border-[#D4D4D4] px-[2rem]">
+          <p className=" text-[1.6rem] font-bold text-[#525252]">{title}</p>
+          <span className="text-[1.2rem] font-normal text-[#A3A3A3]">작성일: {formattedDate}</span>
+        </div>
+        <div className="flex h-[16.4rem] w-[35.6rem] flex-col py-[1.6rem]">
+          <p className="px-[2.4rem] text-[1.4rem] text-[#737373]">{content}</p>


tailwind의 장점을 한번 살려보는게 어떨까요 ?
tailwind의 mobile first css 에 대해 한번 공부해보세요 !
https://tailwindcss.com/docs/responsive-design

kwakseongjae · 2024-03-21T05:20:38Z

src/components/Card.tsx

+
+const colorList = ['bg-[#F04D1D]', 'bg-[#FF7364]', 'bg-[#A75EFF]', 'bg-[#1EBDFE]', 'bg-[#0DCF85]'];
+
+const Card = ({ title, content, tagList }: { title: string; content: string; tagList: string[] }) => {


type은 따로 선언해주십시당 :)
저는 3개 이상이면 interface나 type 선언 해줍니당 !

kwakseongjae · 2024-03-21T05:22:33Z

src/components/Header.tsx

+          className={
+            'h-[4rem] w-[4rem] rounded-full py-[1rem] text-center text-[1.4rem] font-bold text-white' +
+            (nickName.length > 0 ? ' bg-[#F0AF32]' : ' bg-white')
+          }


조금 난해하네요. 조건부 스타일링 컨벤션을 찾아보세요 :)

kwakseongjae · 2024-03-21T05:28:56Z

src/components/Modal.tsx

좋은 시도입니당 👍👍
피드백을 드리자면
LoginModal과 SurveyModal을 컴포넌트로 분리한건 좋았으나 파일로 관리해서 호출하지 못한게 아쉽습니당 !
리팩토링 단계에선 별도의 파일로 분리해서 관리해주세요 ! 그 때 모달 파일과, 로그인 모달, 설문 모달의 세 파일을 어떤식의 파일 구조로 가져갈지, 계층은 어떻게 설정할지에 대해 고민하고 파일 구조에 변화를 주면 더 좋을거같습니다.
Layout나 UI라는 폴더를 가져가는 경우도 있으니 종합적으로 고려해보세요 :)

kwakseongjae · 2024-03-21T05:30:43Z

src/components/Modal.tsx

+        className="mx-auto mt-[3.2rem] h-[3.2rem] w-[41.6rem] rounded-md bg-[#F5F5F5]"
+        placeholder="닉네임을 입력하세요"
+        onChange={(e) => setNickName(e.target.value)}
+      ></input>


self closing tags 기억해둡시다 !!
https://jake-seo-dev.tistory.com/461

kwakseongjae · 2024-03-21T05:48:10Z

src/pages/HomePage.tsx

+    setFormData(data);
+    console.log('Received form data:', data);
+  };
+  //


귀여운 주석이네요

kwakseongjae · 2024-03-21T05:49:34Z

src/pages/HomePage.tsx

+          <button
+            onClick={() => showModal(modalType)}
+            className="mt-[9.7rem] h-[6.4rem] w-[32rem] rounded-[3.2rem] bg-[#6ED1F9] text-[2.4rem] font-bold text-white"
+          >
+            로그인
+          </button>
+        </div>
+        {modalOpen && (
+          <Modal
+            modalType={modalType}
+            setModalOpen={setModalOpen}
+            formData={formData}
+            receiveFormData={receiveFormData}
+          />
+        )}


리팩토링할때 이 부분을 한번 작업해봐주세요 !
계속 읽다보면 뭔가 이상해보일거예요 :)

kwakseongjae · 2024-03-21T05:50:35Z

src/pages/MyspacePage.tsx

+import ArrowSVG from '@assets/arrow.svg?react';
+
+type form = { title: string; content: string; tagList: string[] };
+const formDataList: form[] = [];


흠 context api라도 사용해주세요,,

kwakseongjae · 2024-03-21T05:51:48Z

src/pages/MyspacePage.tsx

+          {formDataList.map((data) => (
+            <Card title={data.title} content={data.content} tagList={data.tagList} />
+          ))}


id 안쓰시나용 ?

kwakseongjae · 2024-03-21T05:53:06Z

src/router/index.tsx

path 관리가 일반적이진 않아 보여요. 한번 정도 더 고민해보시겠어요 ?

hannabananah · 2024-03-21T10:57:25Z

.github/ISSUE_TEMPLATE/custom.md

나아중에 최종 배포할 때는 빼셔야 하는거 아시죵??

hannabananah · 2024-03-21T11:00:28Z

src/components/Card.tsx

@@ -0,0 +1,45 @@
+import React from 'react';


없어도 될 거예유~

hannabananah · 2024-03-21T11:00:42Z

src/components/Card.tsx

+
+const colorList = ['bg-[#F04D1D]', 'bg-[#FF7364]', 'bg-[#A75EFF]', 'bg-[#1EBDFE]', 'bg-[#0DCF85]'];
+
+const Card = ({ title, content, tagList }: { title: string; content: string; tagList: string[] }) => {


hannabananah · 2024-03-21T11:01:43Z

tsconfig.json

+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {


hannabananah · 2024-03-21T11:03:23Z

src/pages/HomePage.tsx

+import Header from '@components/Header';
+
+const HomePage = () => {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);


추론가능한 타입은 명시하지 않아도 괜찮아용

hannabananah · 2024-03-21T11:08:12Z

tailwind.config.cjs

이번 작업에선 UI를 전문디자이너가 작업해놓은게 아니라서 스타일이 통일되는게 없어서 그랬을수도 있지만,,! 다음엔 config를 한번 사용해보세요,,,!

se-eun-park and others added 30 commits March 15, 2024 12:29

Docs: 개발 환경 설정

215c186

Docs: tsconfig 수정

8295c69

Docs: Add issue templates

3c30137

이슈 공통 템플릿 생성

Docs: 폴더 구조 생성

7a82eda

Feat: Sample page 생성

e7d4e56

Feat: 페이지 라우팅 구현

237a12c

Feat: header 컴포넌트 생성

125423d

Feat: Myspace에 Header 추가

1d49214

Merge pull request #9 from se-eun-park/feat/seeun

e3172b0

Feat/seeun

UI: 간편 로그인 Modal UI 구성

c010248

Feat: 간편 로그인 닉네임 체크 로직 구현 #11

12e14f5

Feat: 간련 로그인 데이터 전송 로직 구현 #11

9cc8bb4

UI: 설문조사 모달 UI 구성 #12

fac1c03

Merge pull request #13 from se-eun-park/feature/minhyuk

1f0c92e

Feature/minhyuk

UI: Home 페이지 UI 구현

7f06c6f

Feat: Modal Type 로직 구현 #14

43c7389

Merge pull request #15 from se-eun-park/feat/minhyuk

9f8ec70

Feat: Modal Type 로직 구현

Merge branch 'main' of https://github.com/se-eun-park/ssafe-modal int…

3b1ae31

…o feat/seeun

Merge pull request #17 from se-eun-park/feat/seeun

f26681f

Feat/seeun

Feat: 기본 폰트 적용

9dbc8db

Docs: favicon 이미지 변경

ee17363

UI: Header에 닉네임 ui 추가

c198b69

UI: Survey Modal 버튼 추가

233aa78

Fix: Pull Conflict 수정

a87eba3

Feat: Survey Modal 태그 텍스트 추가 기능 구현 #16

6f21b5b

Merge pull request #19 from se-eun-park/feat/minhyuk

2030d25

Feat/minhyuk

Merge branch 'main' of https://github.com/se-eun-park/ssafe-modal int…

f6d93d0

…o feat/seeun

Feat: Survey Modal 기능 구현 완료 #16

9616557

Fix: prettier 적용 안되는 문제 해결

9d8da0b

Merge pull request #20 from se-eun-park/feature/minhyuk

bf90919

Feat: Survey Modal 기능 구현 완료

se-eun-park and others added 15 commits March 19, 2024 20:51

Merge branch 'main' of https://github.com/se-eun-park/ssafe-modal int…

daf3e51

…o feat/seeun

Feat: Header nickname 배경 조건부 설정

f32ae7d

nickname 유무에 따라 배경색 변경

Docs: tailwind plugin 적용

6bf9943

UI: Myspace 상단바 구현

16f49e8

Fix: form data type 수정(convert any to form) , Survey modal props 수정

7975a49

Merge pull request #22 from se-eun-park/feat/minhyuk

6539e46

Fix: form data type 수정(convert any to form) , Survey modal props 수정

UI: 새 설문 만들기 버튼 배경색상 변경

de541ea

Merge branch 'main' of https://github.com/se-eun-park/ssafe-modal int…

d220a57

…o feat/seeun

Feat: svg 파일 컴포넌트화

87a16d4

UI: Myspace Toolbar ui 구현

2193768

Feat: Card 컴포넌트 생성

8268ee7

UI: Myspace에서 card 요소 정렬

79dc540

Merge pull request #24 from se-eun-park/feat/seeun

ee0c8e0

Feat: Card 컴포넌트 생성

Fix: svg 선언식 에러 해결

27b1021

Merge pull request #25 from se-eun-park/feat/seeun

764d064

Fix: svg 선언식 에러 해결

kwakseongjae reviewed Mar 21, 2024

View reviewed changes

hannabananah reviewed Mar 21, 2024

View reviewed changes


		const colorList = ['bg-[#F04D1D]', 'bg-[#FF7364]', 'bg-[#A75EFF]', 'bg-[#1EBDFE]', 'bg-[#0DCF85]'];

		const Card = ({ title, content, tagList }: { title: string; content: string; tagList: string[] }) => {

[민혁, 세은] 모달 구현 과제 제출 #6

Are you sure you want to change the base?

[민혁, 세은] 모달 구현 과제 제출 #6

Uh oh!

Conversation

se-eun-park commented Mar 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Motivation

민혁 👨‍🔧

세은 👩‍🎨

🔑 Key Changes

민혁 👨‍🔧

세은 👩‍🎨

🐛발견된 버그

🚀 Future Implementation Plans

🙏🏼 To Reviewers

Uh oh!

kwakseongjae left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

se-eun-park commented Mar 20, 2024 •

edited

Loading