[박세현] 멋쟁이 사자처럼 3번째 과제 제출 #5

pakxe · 2022-05-14T10:22:13Z

update Readme

pakxe · 2022-05-14T11:58:30Z

.

devHudi

�앨범의 그림이 너무 귀엽네요!
지난주 과제 때 보다 훨씬 성장하신 것 같아요 👍
몇가지 수정하면 좋을 만한 점을 코멘트 달아드렸어요. 반영해주셔도 좋고, 참고만 해주셔도 좋습니다 😁

devHudi · 2022-05-14T15:44:33Z

src/App.js

+            <MiddleText></MiddleText>
+            <Album></Album>
+            <Footer></Footer>


Suggested change

<MiddleText></MiddleText>

<Album></Album>

<Footer></Footer>

<MiddleText/>

<Album/>

<Footer/>

self-closing tag 로 축약해볼까요?

수정 완료 했습니다!

devHudi · 2022-05-14T15:44:46Z

src/App.js

+            {/* <MediaCard btncolor="blue" src="img/hi.png" title="Heading" internal="This is a
+     wider card with supporting text below as a natural lead-in to additio'nal content. This content is a little bit longer."> </MediaCard> */}


사용되지 않는 주석은 제거하는 것이 좋겠군요!

수정 완료 했습니다!

devHudi · 2022-05-14T15:45:31Z

src/component/Album/index.js

+const ALbumWrapper = styled.div`
+    width: 100%;
+    height: 1350px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;


Suggested change

const ALbumWrapper = styled.div`

width: 100%;

height: 1350px;

display: flex;

justify-content: center;

align-items: center;

`;

const AlbumWrapper = styled.div`

width: 100%;

height: 1350px;

display: flex;

justify-content: center;

align-items: center;

`;

오타가 있군요 🙂

수정 완료 했습니다!

devHudi · 2022-05-14T15:46:25Z

src/component/Button/index.js

+const StyledButton = styled.button`
+    padding: ${(props) => (props.paddingH ? props.paddingH : "6px")}
+        ${(props) => (props.paddingV ? props.paddingV : "12px")};
+    margin: ${(props) => (props.margin ? props.margin : "2px")};
+    height: ${(props) => (props.height ? props.height : "35px")};
+    width: ${(props) => (props.width ? props.width : "none")};
+    border: 1px solid
+        ${(props) => (props.borderColor ? props.borderColor : "black")};
+    border-radius: ${(props) => (props.radiusV ? props.radiusV : "5px")}
+        ${(props) => (props.radiusH ? props.radiusH : "5px")};
+    font-size: 14px;
+    background-color: ${(props) =>
+        props.backgroundColor ? props.backgroundColor : "white"};
+    color: ${(props) => (props.textColor ? props.textColor : "black")};
+`;
+
+const Button = (props) => {
+    return (
+        <StyledButton
+            margin={props.margin}
+            textAlign={props.textAlign}
+            borderColor={props.borderColor}
+            backgroundColor={props.backgroundColor}
+            textColor={props.textColor}
+            height={props.height}
+            width={props.width}
+            paddingH={props.paddingH}
+            paddingV={props.paddingV}
+            radiusH={props.radiusH}
+            radiusV={props.radiusV}
+        >
+            {props.children}
+        </StyledButton>
+    );
+};
+
+export default Button;


Button 컴포넌트는 현재 props 를 받아 그대로 StyledButton 에 전달하고 있는 역할만을 가지고 있는데요,

Suggested change

const StyledButton = styled.button`

padding: ${(props) => (props.paddingH ? props.paddingH : "6px")}

${(props) => (props.paddingV ? props.paddingV : "12px")};

margin: ${(props) => (props.margin ? props.margin : "2px")};

height: ${(props) => (props.height ? props.height : "35px")};

width: ${(props) => (props.width ? props.width : "none")};

border: 1px solid

${(props) => (props.borderColor ? props.borderColor : "black")};

border-radius: ${(props) => (props.radiusV ? props.radiusV : "5px")}

${(props) => (props.radiusH ? props.radiusH : "5px")};

font-size: 14px;

background-color: ${(props) =>

props.backgroundColor ? props.backgroundColor : "white"};

color: ${(props) => (props.textColor ? props.textColor : "black")};

`;

const Button = (props) => {

return (

<StyledButton

margin={props.margin}

textAlign={props.textAlign}

borderColor={props.borderColor}

backgroundColor={props.backgroundColor}

textColor={props.textColor}

height={props.height}

width={props.width}

paddingH={props.paddingH}

paddingV={props.paddingV}

radiusH={props.radiusH}

radiusV={props.radiusV}

>

{props.children}

</StyledButton>

);

};

export default Button;

const Button = styled.button`

padding: ${(props) => (props.paddingH ? props.paddingH : "6px")}

${(props) => (props.paddingV ? props.paddingV : "12px")};

margin: ${(props) => (props.margin ? props.margin : "2px")};

height: ${(props) => (props.height ? props.height : "35px")};

width: ${(props) => (props.width ? props.width : "none")};

border: 1px solid

${(props) => (props.borderColor ? props.borderColor : "black")};

border-radius: ${(props) => (props.radiusV ? props.radiusV : "5px")}

${(props) => (props.radiusH ? props.radiusH : "5px")};

font-size: 14px;

background-color: ${(props) =>

props.backgroundColor ? props.backgroundColor : "white"};

color: ${(props) => (props.textColor ? props.textColor : "black")};

`;

export default Button;

위와 같이 수정하면 더 좋은 코드가 될 것 같아요. 😄

매개변수 선언 부분이 없어도 argument를 받아올 수 있다는 것을 처음 알았습니다.. 단순한 역할만 하는 코드면 그냥 css처럼 만들면 되는 거였군요!!

수정 완료 했습니다!

devHudi · 2022-05-14T15:47:11Z

src/component/Footer/index.js

+import Str from "../Str";
+import MyA from "../MyA";


Str, MyA 컴포넌트의 이름만을 보고 다른 개발자가 어떤 컴포넌트인지 세현님의 의도대로 유추할 수 있을까요? 좋은 네이밍은 무엇일까요? 정답은 없습니다 😎

button처럼 단순하게 꾸며진 a 태그의 역할뿐이므로, 간략하게 수정하였습니다.

수정 완료 했습니다!

MyA -> StyledATag

Str -> StyledPTag

devHudi · 2022-05-14T15:47:57Z

src/component/Header/index.js

+
+    justify-content: center;
+    // 주축을 중심으로 정렬
+
+    align-items: center;
+    // 보조축을 중심으로 정렬
+`;


Suggested change

justify-content: center;

// 주축을 중심으로 정렬

align-items: center;

// 보조축을 중심으로 정렬

`;

justify-content: center;

/* 주축을 중심으로 정렬 */

align-items: center;

/* 보조축을 중심으로 정렬 */

`;

CSS는 // 를 주석으로 인식하지 못해요. /* ~ */ 로 변경해볼까요?

수정 완료 했습니다!

devHudi · 2022-05-14T15:49:08Z

src/component/MiddleText/index.js

+const MiddleTextWrapper = styled.div`
+    background-color: white;
+
+    width: 100%;


전체적으로 styled components 코드에서 의미없는 개행 혹은 // 이 반복적으로 등장하는 것 같아요! 제거해볼까요? 😁

모두 수정 완료 하였습니다.

devHudi · 2022-05-14T17:08:32Z

src/component/Button/index.js

+const StyledButton = styled.button`
+    padding: ${(props) => (props.paddingH ? props.paddingH : "6px")}
+        ${(props) => (props.paddingV ? props.paddingV : "12px")};
+    margin: ${(props) => (props.margin ? props.margin : "2px")};
+    height: ${(props) => (props.height ? props.height : "35px")};
+    width: ${(props) => (props.width ? props.width : "none")};
+    border: 1px solid
+        ${(props) => (props.borderColor ? props.borderColor : "black")};
+    border-radius: ${(props) => (props.radiusV ? props.radiusV : "5px")}
+        ${(props) => (props.radiusH ? props.radiusH : "5px")};
+    font-size: 14px;
+    background-color: ${(props) =>
+        props.backgroundColor ? props.backgroundColor : "white"};
+    color: ${(props) => (props.textColor ? props.textColor : "black")};
+`;


기본값을 위해 삼항연산자가 반복적으로 사용되고 있는데요, 아래와 같은 방법으로 코드를 좀 더 축약해볼 수 있을 것 같아요.

AS-IS

color: ${(props) => props.color ? props.color : "#212529"};

TO-BE

color: ${(props) => props.color || "#212529"};

이를 단축 평가 (Short circuit evaluation) 이라고 합니다. (참고: http://milooy.github.io/TIL/JavaScript/short-circuit.html#%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6)

모두 수정 완료하였습니다.

adultlee · 2022-05-15T04:28:33Z

src/component/Header/index.js

+import { BiCamera } from "react-icons/bi";
+import TextBox from "../TextBox";
+import { AiOutlineMenu } from "react-icons/ai";
+const HeaderWrapper = styled.div`


올려주신 사진과 header padding 값이 다른것같습니다 정렬해주세요!

올려주신 헤더는 엘범의 양측과 맞지 않아요!

수정 완료 했습니다!

dlwnsgus07 and others added 5 commits May 10, 2022 00:18

58b0ff0

update Readme

App.js 수정

a78e963

jihi

38e3468

end

c7b7d85

final

2c4c775

devHudi requested changes May 14, 2022

View reviewed changes

devHudi reviewed May 14, 2022

View reviewed changes

adultlee reviewed May 15, 2022

View reviewed changes

pakxe and others added 2 commits May 16, 2022 01:03

pr

54730b7

Update README.md

ba5715a

		{/* <MediaCard btncolor="blue" src="img/hi.png" title="Heading" internal="This is a
		wider card with supporting text below as a natural lead-in to additio'nal content. This content is a little bit longer."> </MediaCard> */}

[박세현] 멋쟁이 사자처럼 3번째 과제 제출 #5

Are you sure you want to change the base?

[박세현] 멋쟁이 사자처럼 3번째 과제 제출 #5

Uh oh!

Conversation

pakxe commented May 14, 2022

Uh oh!

pakxe commented May 14, 2022

Uh oh!

devHudi 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

AS-IS

TO-BE

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adultlee May 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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

adultlee May 15, 2022 •

edited

Loading