Merge pull request #8 from TEAM-ALOM/feature/svg-logo

svgr 세팅 및 헤더에 svg 로고 추가

package.json

@@ -70,7 +70,7 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.0.1"
   }
 }

src/features/header/ui/components/HeaderView.tsx

@@ -1,15 +1,19 @@
+import { ReactNode } from 'react';
 import styled from 'styled-components';
+import Logo from '@semo-client/ui/assets/logo.svg?react';
 
-export const HeaderView = () => {
+interface HeaderViewProps {
+  userProfileView: ReactNode;
+}
+
+export const HeaderView = ({ userProfileView }: HeaderViewProps) => {
   return (
     <StyledHeader>
       <Container>
-        <div>세모 로고</div>
-        <FlexBox>
-          <Input />
-          <div>로그인</div>
-          <div>회원가입</div>
-        </FlexBox>
+        <LogoWrapper>
+          <Logo />
+        </LogoWrapper>
+        <FlexBox>{userProfileView}</FlexBox>
       </Container>
     </StyledHeader>
   );
@@ -25,14 +29,10 @@ const StyledHeader = styled.header`
   background-color: #1c1c1eb2;
 `;
 
-const Input = styled.input`
-  border-radius: 8px;
-  width: 250px;
-  height: 32px;
-  outline: none;
-  border: none;
-  background-color: #3c3d44;
+const LogoWrapper = styled.div`
+  margin-top: 8px;
 `;
+
 const Container = styled.div`
   display: flex;
   flex-grow: 1;

src/features/users/ui/components/LoginButtonView.tsx

@@ -0,0 +1,7 @@
+export const LoginButtonView = () => {
+  return (
+    <>
+      <div>로그인</div>
+    </>
+  );
+};

src/pages/Home.tsx

@@ -5,16 +5,26 @@ import { HeaderView } from '@semo-client/features/header/ui/components/HeaderVie
 import { NoticeView } from '@semo-client/features/notice/ui/components/NoticeView';
 import { SearchInput } from '@semo-client/features/search/ui/components/SearchInput';
 import { TrendingKeywords } from '@semo-client/features/search/ui/components/TrendingKeywords';
+import { LoginButtonView } from '@semo-client/features/users/ui/components/LoginButtonView';
 
 /**
  * TODO 각 요소 컴포넌트 에는 추가 스타일(여백,마진) 들어있지 않은 순수 요소 컴포넌트
  * 각 요소의 마진 요소들은 (레이아웃 잡기) 여기서 container 컴포넌트에서 잡아준다.
  */
 export const Home = () => {
+  // load user login status
+
   return (
     <AppContainer>
       <BackgroundImageView />
-      <HeaderView />
+      <HeaderView
+        userProfileView={
+          // view setting by user login status
+          // <UserProfileView />
+          <LoginButtonView />
+        }
+      />
+
       <Clock />
 
       {/* Search */}

src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FC<React.SVGProps<SVGElement>>;
+  export default content;
+}

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

tsconfig.app.json

@@ -30,5 +30,10 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["src", ".storybook"]
+  "include": [
+    "src",
+    ".storybook",
+    "src/svg.d.ts",
+    "src/features/users/ui/components/.tsx"
+  ]
 }