style: update member detail and page styles

koremp · Aug 9, 2024 · e85a7b4 · e85a7b4
1 parent 610e91e
commit e85a7b4
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 35 deletions.
diff --git a/src/component/Home.jsx b/src/component/Home.jsx
@@ -26,7 +26,6 @@ export default function Home({
   handleClickAbout,
   handleClickMembers,
   handleClickCheerSongList,
-  handleClickSongList,
   handleClickAlbum,
 }) {
   return (
@@ -36,7 +35,6 @@ export default function Home({
         handleClickAbout={handleClickAbout}
         handleClickMembers={handleClickMembers}
         handleClickCheerSongList={handleClickCheerSongList}
-        handleClickSongList={handleClickSongList}
         handleClickAlbum={handleClickAlbum}
       />
     </Container>

diff --git a/src/component/MemberDetail.jsx b/src/component/MemberDetail.jsx
@@ -16,8 +16,8 @@ const Container = styled.div({
 
 const ProfileImage = styled.img({
   display: 'block',
-  height: '15em',
-  width: '15em',
+  height: '80%',
+  width: '80%',
   margin: '1em',
   border: 0,
   boxShadow: '0 5px 5px -5px rgba(0,0,0,.5)',
@@ -26,8 +26,9 @@ const ProfileImage = styled.img({
 const TextContainer = styled.div(
   {
     display: 'flex',
-    flexDirection: 'row',
-    width: '60%',
+    flexDirection: 'column',
+    width: '80%',
+    borderRadius: '5px',
   }, (props) => ({
     backgroundColor: props.backgroundColor,
     color: props.color,
@@ -55,7 +56,10 @@ export default function MemberDetail({ member }) {
         src={membersImages[engName.toLowerCase()]}
         alt={korName}
       />
-      <TextContainer backgroundColor={backgroundColor} color={color}>
+      <TextContainer
+        backgroundColor={backgroundColor}
+        color={color}
+      >
         <Name korName={korName} engName={engName} />
         <Birthday birthday={birthday} />
         <Roles roles={roles} />

diff --git a/src/component/memberDetail/Birthday.jsx b/src/component/memberDetail/Birthday.jsx
@@ -5,16 +5,14 @@ import styled from '@emotion/styled';
 const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
+  alignItems: 'center',
   marginTop: '1em',
 });
 
 export default function Birthday({ birthday }) {
   return (
     <Container>
-      <p>
-        생일:
-        {birthday}
-      </p>
+      생일 : {birthday}
     </Container>
   );
 }
diff --git a/src/component/memberDetail/Name.jsx b/src/component/memberDetail/Name.jsx
@@ -5,7 +5,8 @@ import styled from '@emotion/styled';
 const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  marginTop: '1em',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
 const KorName = styled.p({
@@ -19,12 +20,8 @@ const EngName = styled.p({
 export default function Name({ korName, engName }) {
   return (
     <Container>
-      <KorName>
-        {korName}
-      </KorName>
-      <EngName>
-        {engName}
-      </EngName>
+      <KorName>{korName}</KorName>
+      <EngName>{engName}</EngName>
     </Container>
   );
 }
diff --git a/src/component/memberDetail/Roles.jsx b/src/component/memberDetail/Roles.jsx
@@ -5,7 +5,8 @@ import styled from '@emotion/styled';
 const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  marginTop: '1em',
+  alignItems: 'center',
+  margin: '1em auto',
 });
 
 const Role = styled.p({
@@ -15,12 +16,9 @@ const Role = styled.p({
 export default function Roles({ roles }) {
   return (
     <Container>
-      <p>포지션</p>
-      {
+      포지션 : {
         roles.map((role) => (
-          <Role>
-            {role}
-          </Role>
+          <>{role}</>
         ))
       }
     </Container>

diff --git a/src/container/HomeContainer.jsx b/src/container/HomeContainer.jsx
@@ -11,25 +11,20 @@ export default function HomeContainer({ handleClickLink }) {
     handleClickLink('/member');
   }
 
-  function handleClickSongList() {
-    handleClickLink('/song');
+  function handleClickAlbum() {
+    handleClickLink('/album');
   }
 
   function handleClickCheerSongList() {
     handleClickLink('/cheer-song');
   }
 
-  function handleClickAlbum() {
-    handleClickLink('/album');
-  }
-
   return (
     <Home
       handleClickAbout={handleClickAbout}
       handleClickMembers={handleClickMembers}
-      handleClickSongList={handleClickSongList}
-      handleClickCheerSongList={handleClickCheerSongList}
       handleClickAlbum={handleClickAlbum}
+      handleClickCheerSongList={handleClickCheerSongList}
     />
   );
 }
diff --git a/src/page/MemberListPage.jsx b/src/page/MemberListPage.jsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import TopBarContainer from '../container/TopBarContainer';
 import MemberListContainer from '../container/MemberListContainer';
 
-import { FullContainer } from '../styles/page';
+import { FullContainer, OverContainer } from '../styles/page';
 
 import members from '../../fixtures/members';
 
@@ -17,14 +17,14 @@ export default function MemberListPage() {
   }
 
   return (
-    <FullContainer>
+    <OverContainer>
       <TopBarContainer
         handleClick={handleClick}
       />
       <MemberListContainer
         members={members}
         handleClick={handleClick}
       />
-    </FullContainer>
+    </OverContainer>
   );
 }
diff --git a/src/styles/page.js b/src/styles/page.js
@@ -10,12 +10,16 @@ const HomeLayout = styled.div({
 });
 
 const FullContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
   backgroundImage: `linear-gradient(
     60deg,
     #E11900,
     #7E00BF
   )`,
   backgroundAttachment: 'fixed',
+  width: '100%',
+  height: '100%',
 });
 
 const OverContainer = styled.div({