feature: 프로필 페이지 제작

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.0.0).
+ * Mock Service Worker (2.0.5).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/assets/icons/KakaoIcon.tsx

@@ -8,6 +8,14 @@ export type IconProps = {
   borderRadius: number
 }
 
+/**
+ * @param width - 너비 (string)
+ * @param height - 높이 (string)
+ * @param iconWidth - (Optional) 아이콘 너비 (string)
+ * @param iconHeight - (Optional) 아이콘 높이 (string)
+ * @param borderRadius - (Optional) 아이콘 테두리 반지름 (string)
+ */
+
 const KakaoIcon = ({ width, height, iconWidth, iconHeight, borderRadius }: IconProps) => (
   <span
     style={{

src/assets/icons/NaverIcon.tsx

@@ -2,6 +2,14 @@ import { palette } from '@/styles/palette'
 
 import { IconProps } from './KakaoIcon'
 
+/**
+ * @param width - 너비 (string)
+ * @param height - 높이 (string)
+ * @param iconWidth - (Optional) 아이콘 너비 (string)
+ * @param iconHeight - (Optional) 아이콘 높이 (string)
+ * @param borderRadius - (Optional) 아이콘 테두리 반지름 (string)
+ */
+
 const NaverIcon = ({ width, height, iconWidth, iconHeight, borderRadius }: IconProps) => (
   <span
     style={{

src/components/common/AppHeader/index.tsx

@@ -16,7 +16,7 @@ const StyleAppHeader = styled.div<{ height?: string }>`
   justify-content: flex-end;
   height: ${({ height }) => height};
   text-align: center;
-  padding: 6.5% 5% 7%;
+  padding: 15% 5% 7%;
 `
 
 const StyledAppHeaderLargeText = styled(Text)<Pick<AppHeaderProps, 'isDarkMode'>>`
@@ -75,6 +75,9 @@ const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderPr
           height={49}
           imgUrl={''}
           margin={'0'}
+          style={{
+            cursor: 'pointer',
+          }}
           onClick={() => {
             moveFromAppHeader('profile')
           }}

src/components/common/Avatar/index.tsx

@@ -6,43 +6,23 @@ type AvatarProps = {
   width: number | string
   height: number | string
   imgUrl: string
-  margin: string
+  margin?: string
   onClick?: () => void
   border?: string
   shadow?: boolean
+  style?: React.CSSProperties
 }
 
-const StyledAvatar = styled.div<AvatarProps>`
-  width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
-  height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
-  background-image: url(${(props) => props.imgUrl});
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  border-radius: 50%; // 원 형태로 만들기 위함
-  margin: ${(props) => `${props.margin}px`};
-  border: ${(props) => (props.border ? props.border : 'none')};
-  box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
-
-  @media (max-width: 280px) {
-    width: ${(props) =>
-      typeof props.width === 'number' ? `${props.width * 0.95}px` : `calc(${props.width} * 0.95)`};
-    height: ${(props) =>
-      typeof props.height === 'number'
-        ? `${props.height * 0.95}px`
-        : `calc(${props.height} * 0.95)`};
-  }
-`
-
 /**
  * `Avatar` component for displaying profile images.
  * @param width - 아바타의 너비 (픽셀 또는 유효한 CSS 단위).
  * @param height - 아바타의 높이 (픽셀 또는 유효한 CSS 단위).
  * @param imgUrl - 아바타의 이미지 URL. 기본 이미지는 `defaultProfileImage`이다.
- * @param margin - 아바타의 마진 (픽셀 또는 유효한 CSS 단위).
+ * @param margin - (Optional) 아바타의 마진 (픽셀 또는 유효한 CSS 단위).
  * @param onClick - (Optional) 클릭 이벤트.
  * @param border - (Optional) 아바타의 테두리. 기본 값은 `none`이다.
  * @param shadow - (Optional) 아바타의 그림자. 기본 값은 `false`이다.
+ * @param props - (Optional) 추가적인 CSS 속성.
  */
 const Avatar = ({
   width,
@@ -52,6 +32,7 @@ const Avatar = ({
   onClick,
   border,
   shadow = false,
+  ...props
 }: AvatarProps) => {
   return (
     <StyledAvatar
@@ -62,8 +43,31 @@ const Avatar = ({
       margin={margin}
       border={border}
       onClick={onClick}
+      {...props}
     />
   )
 }
 
+const StyledAvatar = styled.div<AvatarProps>`
+  width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)};
+  height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};
+  background-image: url(${(props) => props.imgUrl});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  border-radius: 50%; // 원 형태로 만들기 위함
+  margin: ${(props) => `${props.margin}px`};
+  border: ${(props) => (props.border ? props.border : 'none')};
+  box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
+
+  @media (max-width: 280px) {
+    width: ${(props) =>
+      typeof props.width === 'number' ? `${props.width * 0.95}px` : `calc(${props.width} * 0.95)`};
+    height: ${(props) =>
+      typeof props.height === 'number'
+        ? `${props.height * 0.95}px`
+        : `calc(${props.height} * 0.95)`};
+  }
+`
+
 export default Avatar

src/components/common/BackChevron/index.tsx

@@ -10,6 +10,7 @@ const StyleBackChevron = styled.div<BackChevronProps>`
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
   background-color: ${({ hasBackground, isDarkMode }) =>
     isDarkMode
       ? hasBackground

src/components/common/Buttons/IconButton/IconButtonStyles.ts

@@ -14,7 +14,7 @@ export type IconButtonType =
 
 export const iconButtonStyles: Record<IconButtonType, NormalButtonStyle> = {
   interest: {
-    width: '339px',
+    width: '100%',
     height: 70,
     fontColor: palette.WHITE,
     font: 'Body_18',
@@ -25,7 +25,7 @@ export const iconButtonStyles: Record<IconButtonType, NormalButtonStyle> = {
     backgroundColor: `linear-gradient(96deg, #7382F8 49.74%, #A6BCFC 93.87%);`,
   },
   'interest-dark': {
-    width: '339px',
+    width: '100%',
     height: 70,
     fontColor: palette.DARK_WHITE,
     font: 'Body_18',

src/components/common/Buttons/IconButton/InterestButton.tsx

@@ -13,6 +13,12 @@ type InterestButtonProps = {
   isDarkMode: boolean
 }
 
+/**
+ * @param nickName: 닉네임, string
+ * @param interests: 관심사 리스트 (최대 3개), string[]
+ * @param isDarkMode: 다크모드 여부, boolean
+ */
+
 const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps) => {
   const setButtonType = isDarkMode ? 'interest-dark' : 'interest'
 
@@ -32,7 +38,6 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          margin: '18px 33px 18px 14px',
         }}
       >
         <RiStarFill
@@ -62,7 +67,7 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
             <Fragment key={interest}>
               {interest}
               {index !== interests.length - 1 && (
-                <Divider width={1} height={12} margin={'0 12px'} isDarkMode={isDarkMode} />
+                <Divider width={'1px'} height={'12px'} margin={'0 12px'} isDarkMode={isDarkMode} />
               )}
             </Fragment>
           ))}

src/components/common/Buttons/IconButton/index.tsx

@@ -53,9 +53,10 @@ export const StyledIconWrapper = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 18px 33px 18px 14px;
 
   @media (max-width: 280px) {
-    margin: 2px 10px 2px 10px;
+    margin: 18px 14px 18px 14px;
   }
 `
 

src/components/common/Divider/index.tsx

@@ -3,15 +3,22 @@ import styled from '@emotion/styled'
 import { palette } from '@/styles/palette'
 
 type DividerProps = {
-  width: number
-  height: number
+  width: string
+  height: string
   margin?: string
   isDarkMode: boolean
 }
 
+/**
+ * @param width - 너비 (string)
+ * @param height - 높이 (string)
+ * @param margin - (Optional) 마진
+ * @param isDarkMode - 다크모드 여부
+ */
+
 export const Divider = styled.div<DividerProps>`
-  width: ${({ width }) => width}px;
-  height: ${({ height }) => height}px;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
   margin: ${({ margin }) => margin};
   background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY500 : palette.GRAY100)};
 `

src/components/common/GradationBackground/index.tsx

@@ -19,7 +19,7 @@ const StyledGradationBackground = styled.div<{
   isDarkMode: boolean
 }>`
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background: ${({ isDarkMode }) =>
     isDarkMode
       ? `linear-gradient(157deg, ${palette.BLACK} 16.84%, ${palette.DARK_GRADIENT} 40%)`

src/components/common/ListRow/ProfileListRow.tsx

@@ -5,48 +5,34 @@ import { FlexBox } from '@/components/common/Flexbox'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-export const StyleList = styled(FlexBox)<{
-  width: number
-  height: number
-}>`
-  width: ${({ width }) => width}px;
-  height: ${({ height }) => height}px;
-  display: flex;
-  justify-content: space-between;
-`
-
-const StyleIconWrapper = styled.div<{
-  width: number
-  height: number
-  borderRadius?: string
-  backgroundColor: string
-}>`
-  width: ${({ width }) => width}px;
-  height: ${({ height }) => height}px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${({ borderRadius }) => borderRadius};
-  background-color: ${({ backgroundColor }) => backgroundColor};
-`
-
 type ProfileListRowProps = {
   firstIcon: ReactNode
   title: string
   additionalContent?: ReactNode | string
   isDarkMode?: boolean
+  moveFromProfileListRow?: () => void
 }
+
+/**
+ * @param firstIcon - 첫번째 아이콘 (ReactNode)
+ * @param title - 제목 (string)
+ * @param additionalContent - 추가적인 내용 (string | ReactNode)
+ * @param isDarkMode - 다크모드 여부
+ * @param moveFromProfileListRow - 클릭 시 이동할 경로
+ */
+
 const ProfileListRow = ({
   firstIcon,
   title,
   additionalContent,
   isDarkMode,
+  moveFromProfileListRow,
 }: ProfileListRowProps) => {
   const isAdditionalContentString = typeof additionalContent === 'string'
   const additionalContentColor = isAdditionalContentString ? palette.GRAY300 : undefined
 
   return (
-    <StyleList width={308} height={38}>
+    <StyleList onClick={moveFromProfileListRow}>
       <StyleIconWrapper
         width={38}
         height={38}
@@ -91,4 +77,30 @@ const ProfileListRow = ({
   )
 }
 
+export const StyleList = styled(FlexBox)<{
+  width?: number
+  height?: number
+}>`
+  width: ${({ width }) => (width ? `${width}px` : '100%')};
+  height: ${({ height }) => (height ? `${height}px` : '')};
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+`
+
+const StyleIconWrapper = styled.div<{
+  width: number
+  height: number
+  borderRadius?: string
+  backgroundColor: string
+}>`
+  width: ${({ width }) => width}px;
+  height: ${({ height }) => height}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${({ borderRadius }) => borderRadius};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+`
+
 export default ProfileListRow