박세은 리팩토링 과제 제출 #2

se-eun-park · 2024-02-14T08:58:26Z

변경 사항

보드(Board)

UI
- Board 위치 상단 고정
- Board 범위를 초과한 Card요소는 스크롤

moong23

과제하느라 고생 많으셨습니다~!!!

moong23 · 2024-02-15T01:12:14Z

src/App.js

+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={<MainPage />}></Route>
+        </Routes>
+    </BrowserRouter>


라우팅 👍 👍

단일 path인 경우에도 라우팅을 사용해서 얻을 수 있는 이점이 있나요?(질문임!!!)

moong23 · 2024-02-15T01:14:37Z

src/pages/MainPage.jsx

+// import AddForm from "../components/AddForm";
+
+const MainPage = () => {
+  const { forms } = useFormStore();


커스텀훅이 상당히 깔끔하게 잘 짜여진것 같아요 👍

moong23 · 2024-02-15T01:16:39Z

src/pages/MainPage.jsx

+  width: 3.2rem;
+  height: 3.2rem;


비율이 정해져있는 이미지의 경우 이미지 크기를 바꾸고자 할 때 유지보수를 위해

Suggested change

width: 3.2rem;

height: 3.2rem;

width: 3.2rem;

aspect-ratio: 1/1;

처럼 사용해도 좋을것같습니다~!

moong23 · 2024-02-15T01:19:17Z

src/components/Board/Board.jsx

+      <FormBox>
+        {forms.map((form, index) => (
+          <Form
+            key={index}


#1 (comment)
요기에도 적어놓은것처럼
key값에는 index처럼 변할 수 있는 값이 아닌, 변하지 않는 값을 넣어주시면 좋습니다

moong23 · 2024-02-15T01:21:25Z

src/components/AddForm/AddForm.jsx

+        </AddFormButton>
+
+        <ColorChart>
+          <Color1 type="button" onClick={handleColorClick("#c674ca")} />


color를 props로 받아서 styled-component에서 재사용성을 높일 수 있을 것 같습니다!

moong23 · 2024-02-15T01:24:04Z

src/components/AddForm/AddForm.jsx

+const Color1 = styled.button`
+  display: block;
+  width: 2.8rem;
+  height: 2.8rem;
+  margin-right: 1rem;
+  border-radius: 50%;
+  background-color: #c674ca;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    border: 0.2rem dashed #ffffff;
+  }
+`;


Suggested change

const Color1 = styled.button`

display: block;

width: 2.8rem;

height: 2.8rem;

margin-right: 1rem;

border-radius: 50%;

background-color: #c674ca;

&:hover {

cursor: pointer;

}

&:focus {

border: 0.2rem dashed #ffffff;

}

`;

const Color1 = styled.button`

display: block;

width: 2.8rem;

height: 2.8rem;

margin-right: 1rem;

border-radius: 50%;

background-color: ${(props) => props.color};

&:hover {

cursor: pointer;

}

&:focus {

border: 0.2rem dashed #ffffff;

}

`;

* form 추가 후에도 AddForm이없어지지 않는 문제 해결 * 아무 값도 없는데 create 눌리는 문제 해결

s0ojin

전반적으로 잘 해주셨습니다! 다음 제출 시엔 리드미에 기능 구현진행상태와 버그, 질문 사항들을 함께 정리해주시면 좋을 것 같습니다! 고생하셨어요

s0ojin · 2024-02-15T03:24:17Z

src/App.js

+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={<MainPage />}></Route>
+        </Routes>
+    </BrowserRouter>


단일 path인 경우에도 라우팅을 사용해서 얻을 수 있는 이점이 있나요?(질문임!!!)

s0ojin · 2024-02-15T03:31:59Z

src/components/Board/Board.jsx

+      </BoardTitle>
+      <FormBox>
+        {forms.map((form, index) => (
+          <Form


Form은 일정 카드라는 것을 유추하기 어려운 네이밍같습니다.

s0ojin · 2024-02-15T03:32:49Z

src/components/Board/Board.jsx

+      <MoreViewsButton
+        src={MoreViews}
+        onClick={handleMoreViewsButton}
+      ></MoreViewsButton>


전체적으로 빈 태그의 경우 셀프 클로징 태그 활용하면 보다 코드가 깔끔해질 것 같습니다.

여기서 이미 혼냈구만 !

s0ojin · 2024-02-15T03:39:35Z

src/components/Form/Form.jsx

+  return (
+    <StyleForm color={color}>
+      <FormButton>
+        <ReWriteButton type="button" src={ReWrite} />


svg 아이콘을 모두 img src로 사용하시고 계신데 혹시 svg를 컴포넌트로 사용하는 방식에 대해서 알고 계신가요? 아이콘이나 로고 같은 svg 파일의 경우에는 컴포넌트로 관리하는 것이 더 좋을 수 있을 것 같습니다.

지현 과제마감(CSS)

kwakseongjae · 2024-02-27T00:39:37Z

src/components/Board/Board.jsx

+      <BoardTitle>
+        {category === "ToDo" ? "To Do 🎠" : null}
+        {category === "InProgress" ? "In Progress 🎡" : null}
+        {category === "Done" ? "Done 🎆" : null}
+      </BoardTitle>


컴포넌트화 시켜서 category를 전달하면 좋을거같아 !

kwakseongjae · 2024-02-27T00:40:41Z

src/components/Board/Board.jsx

+              setReTitle={setReTitle}
+              setReText={setReText}
+              category={category}
+            ></Form>


셀프 클로징 태그,,
약속 지키셔야죠,,

kwakseongjae · 2024-02-27T00:41:01Z

src/components/Board/Board.jsx

+      <MoreViewsButton
+        src={MoreViews}
+        onClick={handleMoreViewsButton}
+      ></MoreViewsButton>


여기서 이미 혼냈구만 !

kwakseongjae · 2024-02-27T00:45:17Z

src/components/Form/AddForm.jsx

+          <CreateButton type="submit" disabled={!title || !text}>
+            Create
+          </CreateButton>
+          <ExitButton type="button" onClick={handleExitButton} src={Exit} />


onClick에 익명함수로 전달하는게 지금 상황에서는 더 깔끔해보일거같다는
개인적 생각이 있습니당 ~!

kwakseongjae · 2024-02-27T00:46:36Z

src/components/Form/Form.jsx

+  // const handleCategoryButton = (button) => {
+  //   if (button === "ToDo") {
+  //   } else if (button === "InProgress") {
+  //   } else {
+  //   }
+  // };


주석 지워 주세오...

kwakseongjae · 2024-02-27T00:49:19Z

src/components/Form/Form.jsx

+        <ExitButton type="button" onClick={handleExitButton} src={Exit} />
+      </FormButton>
+      <FormTitle>{formTitle}</FormTitle>
+      <FormText formText={formText}>{formText}</FormText>


얘는 먼데 formText를 props로 전달해 ??

kwakseongjae · 2024-02-27T00:50:43Z

src/components/Form/ReWriteForm.jsx

+import useFormStore from "../../store/store";
+import Exit from "../../assets/button/Exit.svg";
+
+const ReWrite = ({ category, rewrite, retitle, retext, setRewrite }) => {


ReWriteFrom.jsx 면 함수명도 ReWriteForm이 더 자연스러워보여

se-eun-park added 14 commits February 13, 2024 08:45

Docs: 쓸모없는 파일 제거

1433d04

Feat: UI 작업

15c2b0d

Feat: 하드코딩

307301a

Fix: 불필요한 margin 삭제

cfc0580

Feat: 수정, 삭제 버튼 추가

3532b75

Fix: 색상 변경

8f4e11e

Docs: .js -> .jsx 로 확장자 변경

57f979e

Feat: AddForm 블록 생성

384c3d6

Fix: AddForm h3 타입 textarea로 변경

0875817

Design: 요소 간격 조정

6607e04

Fix: store로 값 받아오기

ca5e587

Design: default color 변경

a1979c2

Design: 한글 폰트 추가

7563aef

Feat: form 삭제 기능 추가

e9bbf07

moong23 reviewed Feb 15, 2024

View reviewed changes

se-eun-park added 4 commits February 15, 2024 10:53

Design: colorchart 테두리 변경

e5b2c90

Fix: AddForm 버그 수정

7b265f1

* form 추가 후에도 AddForm이없어지지 않는 문제 해결 * 아무 값도 없는데 create 눌리는 문제 해결

Docs: Form 폴더 파일 경로 수정, 추가

a602a20

Docs: svg 폴데 제거

884ee24

s0ojin reviewed Feb 15, 2024

View reviewed changes

se-eun-park and others added 10 commits February 15, 2024 15:28

Feat: Form 수정기능 추가

0daa4c4

Design: form dash 투명도 변경

38db104

Docs: favicon 추가

edad854

Update README.md

446bdab

Update README.md

15ec4ab

Update README.md

08907e1

Update README.md

7590eb2

Update README.md

d9fff4d

Merge branch 'main' of https://github.com/se-eun-park/SSAFY_Todo

fa3cb54

Update README.md

6606539

se-eun-park and others added 3 commits February 22, 2024 14:38

Update README.md

e4e4099

Temp: 중간 저장

63cd9ac

Merge branch 'main' of https://github.com/se-eun-park/ssafe_todo

a605c78

doreming16 added a commit to doreming16/ssafe_todo that referenced this pull request Feb 23, 2024

Merge pull request SSA-FE#2 from doreming16/test

1ffdc45

지현 과제마감(CSS)

충돌

9cee7b6

se-eun-park changed the title ~~박세은 pr 해주세요~~ 박세은 리팩토링 과제 제출 Feb 26, 2024

kwakseongjae reviewed Feb 27, 2024

View reviewed changes

박세은 리팩토링 과제 제출 #2

Are you sure you want to change the base?

박세은 리팩토링 과제 제출 #2

Uh oh!

Conversation

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

Uh oh!

변경 사항

Uh oh!

moong23 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!

s0ojin 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!

Uh oh!

se-eun-park commented Feb 14, 2024 •

edited

Loading