[김지현] sprint6 #185

kjhyun0830 · 2025-05-08T04:38:46Z

요구사항

기본

상품 등록 페이지 주소는 “/additem” 입니다.
페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
상품 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.

심화

이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

스크린샷

멘토에게

셀프 코드 리뷰를 통해 질문 이어가겠습니다.

GANGYIKIM

지현님 6주차 미션 수고하셨습니다.
다음에는 배포 주소도 같이 올려주시면 더 좋을 것 같아요!
다음 7주차 미션도 화이팅입니다!

GANGYIKIM · 2025-05-12T06:00:06Z

src/components/Button.jsx

+  const buttonStyles = {
+    login: "w-128 h-48 rounded-lg bg-blue100 text-lg text-white font-semibold",
+    shopping:
+      "w-357 h-56 rounded-[40px] bg-blue100 text-2lg tablet:text-xl text-white font-semibold",
+    additem:
+      "py-8 px-24 rounded-lg bg-blue100 text-lg text-white font-semibold",
+    upload:
+      "w-74 h-42 rounded-lg bg-blue100 text-lg text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed",
+  };
+


💊 제안
모든 버튼 스타일에서 bg-blue100 text-white font-semibold가 중복되는 것 같아요~
(disabled:bg-gray400 disabled:cursor-not-allowed도 다 공통 적용되어야 하지 않을까싶습니다)

이런 경우 중복되는 친구들을 아래처럼 작성해주시면 코드가 더 명확해집니다.

Suggested change

const buttonStyles = {

login: "w-128 h-48 rounded-lg bg-blue100 text-lg text-white font-semibold",

shopping:

"w-357 h-56 rounded-[40px] bg-blue100 text-2lg tablet:text-xl text-white font-semibold",

additem:

"py-8 px-24 rounded-lg bg-blue100 text-lg text-white font-semibold",

upload:

"w-74 h-42 rounded-lg bg-blue100 text-lg text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed",

};

const buttonStyles = {

login: "w-128 h-48 rounded-lg text-lg ",

shopping: "w-357 h-56 rounded-[40px] text-2lg tablet:text-xl",

additem: "py-8 px-24 rounded-lg text-lg",

upload: "w-74 h-42 rounded-lg text-lg",

};

// 사용시

// <button className={`cursor-pointer bg-blue100 text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed ${buttonStyles[type]}`}

GANGYIKIM · 2025-05-12T06:04:41Z

src/components/InputField.jsx

💊 제안
input 과 textarea 두개의 컴포넌트로 나누시는 게 더 명확하고 좋을 것 같아요.
또한 버튼에서 코멘트 드린것과 같이 type은 input의 타입을 넘기게 하는것이 좋으니 더욱 분리하시면 좋을 것 같아요!

GANGYIKIM · 2025-05-12T06:05:00Z

src/components/InputField.jsx

+  if (type === "input") {
+    return (
+      <div className="flex flex-col justify-center gap-16">
+        <div className="text-2lg font-bold">{label}</div>


❗️ 수정요청
label 태그로 작성하시고 input이랑 연결해주세요~

GANGYIKIM · 2025-05-12T06:07:37Z

src/components/Button.jsx

@@ -1,8 +1,19 @@
-function Button({ children, onClick }) {
+function Button({ children, type, onClick, disabled }) {


❗️ 수정요청
버튼의 type은 일반적으로 버튼 태그의 type: "button" | "reset" | "submit" 을 의미합니다.
type은 중요한 속성이니 type prop가 "button" | "reset" | "submit"을 받게 하시고, style의 종류는 variant와 같은 이름으로 변경하시는 것을 추천드립니다.

GANGYIKIM · 2025-05-12T06:09:52Z

src/pages/AddItemPage.jsx

+  };
+
+  const handleEnterTag = (e) => {
+    if (e.key === "Enter" && !e.nativeEvent.isComposing) {


👍 칭찬
isComposing 쓰신거 잘하셨어요!

GANGYIKIM · 2025-05-12T06:12:06Z

src/pages/AddItemPage.jsx

+import Header from "../components/Header";
+import InputField from "../components/InputField";
+import plus from "../assets/icons/plus.svg";
+import x from "../assets/icons/x.svg";


💊 제안
CloseIcon 과 같은 명확한 이름을 추천드려요!

GANGYIKIM · 2025-05-12T06:13:30Z

src/pages/AddItemPage.jsx

+                <img
+                  className="size-22 cursor-pointer"
+                  src={x}
+                  onClick={() => handleDeleteTag(index)}
+                />


❗️ 수정요청
이런 클릭 가능한 요소의 경우 버튼을 사용해주세요. 더 적절한 태그가 있는데 이미지 태그에 onClick 을 주게되면 button에게 기대하는 동작을 제대로 수행하지 못합니다!

Suggested change

<img

className="size-22 cursor-pointer"

src={x}

onClick={() => handleDeleteTag(index)}

/>

<button type="button onClick={() => handleDeleteTag(index)}>

<img

className="size-22"

src={x}

/>

</button>

GANGYIKIM · 2025-05-12T06:16:52Z

src/pages/AddItemPage.jsx

+              <img className="size-48" src={plus} />
+              이미지 등록
+              <input
+                className="hidden"
+                type="file"
+                onChange={handleUploadImg}
+                ref={imgRef}
+                disabled={imgPreview}
+              />


💊 제안
이미지 파일만 받을 수 있도록 구현하시면 더 좋을 것 같아요~
참고로 accept 속성을 이용하시고, handleUploadImg 함수 내부에서 추가적으로 확장자를 한번 더 검사하셔야합니다.
accpet 속성은 제안일 뿐 제한이 아니기 때문에 유저가 accept의 명시된 확장자 이외의 파일도 올릴 수 있습니다~

GANGYIKIM · 2025-05-12T06:18:00Z

src/pages/AddItemPage.jsx

💊 제안
저는 관련있는 것들을 잘 모아두는 것이 가독성을 높여준다고 생각합니다. 지금의 경우 아이템을 생성하는 폼과 관련된 state 들을 각각의 useState로 관리하고 있습니다.
이런 경우 formValue 와 같은 하나의 state로 관리하시거나, useReducer를 이용해보시면 더 가독성 좋게 코드를 작성하실 수 있습니다.

https://ko.react.dev/learn/choosing-the-state-structure
https://ko.react.dev/learn/extracting-state-logic-into-a-reducer

이는 알고만 계시다가 추후 typescript 적용하실때 다시 생각해보시면 도움이 되실 것 같아요.

GANGYIKIM · 2025-05-12T06:25:04Z

src/pages/AddItemPage.jsx

+          onChange={(e) => setItemDetail(e.target.value)}
+          placeholder="상품 소개를 입력해주세요"
+        />
+        <InputField


❗️ 수정요청
판매가격은 숫자만 받게 해주세요~

Jihyun added 12 commits May 3, 2025 22:10

⚡️ meta태그 추가

657d316

✨ AddItemPage에 Header 추가

43a128d

💄 AddItemPage 기본 레이아웃 설정

028ab23

🎨 Button 컴포넌트 수정

e733c23

✨ InputField 컴포넌트 생성

0478e89

🎨 InputField 타입 구분

63013e2

✨ 등록 버튼 활성화 기능 추가

ef8b0f9

💄 MainPage 버튼 디자인 추가

3e8da57

✨ tag 등록 기능 추가

22063ba

✨ tag 삭제 기능 추가

80a3982

✨ 이미지 업로드, 삭제 기능 추가

71404f6

⚡️ file input에 disabled 속성 추가

10f6827

kjhyun0830 requested a review from GANGYIKIM May 8, 2025 04:38

kjhyun0830 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 8, 2025

GANGYIKIM approved these changes May 12, 2025

View reviewed changes

GANGYIKIM merged commit 337aaea into codeit-bootcamp-frontend:React-김지현 May 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[김지현] sprint6 #185

[김지현] sprint6 #185

Uh oh!

kjhyun0830 commented May 8, 2025

Uh oh!

GANGYIKIM left a comment

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

GANGYIKIM May 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,8 +1,19 @@
		function Button({ children, onClick }) {
		function Button({ children, type, onClick, disabled }) {

-                <img
-                  className="size-22 cursor-pointer"
-                  src={x}
-                  onClick={() => handleDeleteTag(index)}
-                />
+                <button type="button onClick={() => handleDeleteTag(index)}>
+                  <img
+                    className="size-22"
+                    src={x}
+                  />
+                </button>

[김지현] sprint6 #185

[김지현] sprint6 #185

Uh oh!

Conversation

kjhyun0830 commented May 8, 2025

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants